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 でオリジナルコンポーネントを公開する方法」を解説してきました。

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

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

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


書いた人はこんな人

広告メディア事業部
広告メディア事業部
「好きを仕事にするエンジニア集団」の(株)ライトコードです!

ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。

システム開発依頼・お見積もり大歓迎!

また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です!
インターンや新卒採用も行っております。

以下よりご応募をお待ちしております!
https://rightcode.co.jp/recruit

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア