1. HOME
  2. ブログ
  3. IT技術
  4. Vue.jsで作ったオリジナルコンポーネントをnpm・CDNに公開してみた!

Vue.jsで作ったオリジナルコンポーネントをnpm・CDNに公開してみた!

Vue.js でオリジナルコンポーネントを作ってみる

近年、種類が増えている JavaScript フレームワーク。

なかでも、「Vue.js」は学習コストが低いことで人気を博しています。

そんな「Vue.js」で、オリジナルコンポーネントを作って、誰でも使えるよう npm に公開してみましょう。

開発環境の準備

まずは、Vue.js の開発・ビルド環境を準備したいと思います。

前提として、nmp をインストールしておきましょう!

今回使用する環境は、以下の通りです。

npmv6.14.4
Vue (Vue CLI)v4.3.1

こちらの記事もオススメ!


Vue CLI のインストール

Vue CLI とは?

Vue CLI」は、素早く Vue アプリを開発する為の支援ツールです。

  1. コマンド1つで Vue プロジェクトが作れる
  2. webpack も同時にインストールされる

こうした特徴のおかげで、簡単に npm 公開のためのビルドが出来ます。

Vue CLI のインストール

ターミナルを起動して、次のコマンドを入力しましょう。

インストールが完了したら、バージョンを表示して正常にインストールされたか確認します。

Vue プロジェクトの作成

公開するコンポーネントの「Vue プロジェクト」します。

次のイメージを見て下さい。

今回は、@以下の部分を「ドロップダウン」で選択する「メールアドレス入力コンポーネント」を作成し、npm に公開しようと思います。

プロジェクトを作成

最初に、次のコマンドで 「Vue プロジェクト」を作成します。

プロジェクト名は「dropdown-mail-input」とします。

モジュールのインストール

次に、必要なモジュールをインストールしましょう。

プロジェクトフォルダへ移動後、 npm installを入力してください。

コンポーネントの作成

上で作成したプロジェクトに、「npm に公開するコンポーネント」を作成していきます。

ファイルを作成

プロジェクト名/src/components/フォルダに DropdownMailInput.vueという名前でファイルを作成します。

次に、次のコードを入力します。

ポイント

Vue コードの詳細な説明は省きますが、ポイントは以下の2つです。

  1. ドメインを外部設定できるよう、プロパティとして宣言
  2. メールアドレスを親コンポーネントの v-model でバインドできるよう、入力変更時に「input」イベントを発生させる

動作確認

npm 公開前に、「動作に支障があるようなバグ」は取り除いておきましょう!

上記で作成したコンポーネントが、正しく動作するかをテストしてみます。

コンポーネントを追加

プロジェクト名/src/components/App.vueに、作成した「メールアドレス入力コンポーネント」を追加します。

デバッグ起動

上のコードを保存したら、ローカルでデバッグ起動します。

ターミナルで、次のコマンドを入力しましょう。

動作確認

ブラウザで http://localhost:8080/を開きます。

「メールアドレス」と「ドメインデータ」が、プロパティに正しくバインドされているかを確認します。

npm に公開するためのビルド設定

動作確認をしたら、次は package.jsonを開き、npm に公開する為の設定をしていきます。

基本情報の設定

「コンポーネント名」「バージョン」「ライセンス」など、公開する為の基本情報を設定します。

特に、ライセンス表記は、 package.jsonに忘れずに設定しておきましょう。

ライブラリ用のビルド設定

ビルド

package.jsonの編集内容を保存したら、ライブラリ用の「Vueプロジェクト」をビルドします。

いざ公開!

それでは、作成したコンポーネントを npm に公開しましょう!

npm アカウントを準備

npm 公開には、npm アカウントが必須です。

未登録の場合は、以下から登録を行ってください。

【npm】
https://www.npmjs.com/signup

npm にログイン

まずは、次のコマンドで npm にログインします。

コンポーネントを公開

次に「npm publish」コマンドで、コンポーネントを npm に公開します。

コンポーネントを検索

コマンドが完了したら、npm のトップページにアクセスし、公開したコンポーネントを検索します。

公開成功!

検索結果をクリックして、以下のように表示されれば、公開成功です。

公開したコンポーネントを使う

ちなみに、npm に公開したコンポーネントを実際に使うには、2つの方法があります。

  1. npm からインストールして使う方法
  2. CDN 経由で使う方法

npm インストールして使う

npm からのインストール方法は、一般的な npm ライブラリと同じです。

npm i <コンポーネント名>を使用しましょう。

CDN 経由で使う

npm にコンポーネントを公開すると、CDN の「jsdelivr」「unpkg」からも利用できます。

まずは、 <script src="url">でコンポーネントを取得しましょう。

その後、 Vue.use()でコンポーネントを使用できるようにします。

unpkg の場合

jsdelivr の場合

さいごに

今回は、「Vue.js でオリジナルコンポーネントを公開する方法」を解説してきました。

この記事を見ても分かる通り、手順はいたって簡単です。

是非、気軽に挑戦してみてください!

(株)ライトコードは、WEB・アプリ・ゲーム開発に強い、ITが大好きな会社です。
Vue.jsでの開発依頼・お見積もりはこちらまでお願いします。
また、Vue.jsを扱えるエンジニアを積極採用中です!詳しくはこちらをご覧ください。

こちらの記事もオススメ!


ライトコードよりお知らせ

にゃんこ師匠にゃんこ師匠
システム開発のご相談やご依頼はこちら
ミツオカミツオカ
ライトコードの採用募集はこちら
にゃんこ師匠にゃんこ師匠
社長と一杯飲みながらお話してみたい方はこちら
ミツオカミツオカ
フリーランスエンジニア様の募集はこちら
にゃんこ師匠にゃんこ師匠
その他、お問い合わせはこちら
ミツオカミツオカ
   
お気軽にお問い合わせください!せっかくなので、別の記事もぜひ読んでいって下さいね!

一緒に働いてくれる仲間を募集しております!

ライトコードでは、仲間を募集しております!

当社のモットーは「好きなことを仕事にするエンジニア集団」「エンジニアによるエンジニアのための会社」。エンジニアであるあなたの「やってみたいこと」を全力で応援する会社です。

また、ライトコードは現在、急成長中!だからこそ、あなたにお任せしたいやりがいのあるお仕事は沢山あります。「コアメンバー」として活躍してくれる、あなたからのご応募をお待ちしております!

なお、ご応募の前に、「話しだけ聞いてみたい」「社内の雰囲気を知りたい」という方はこちらをご覧ください。

ライトコードでは一緒に働いていただける方を募集しております!

採用情報はこちら

書いた人はこんな人

ライトコードメディア編集部
ライトコードメディア編集部
「好きなことを仕事にするエンジニア集団」の(株)ライトコードのメディア編集部が書いている記事です。

関連記事