Vue.js でオリジナルコンポーネントを作ってみる
近年、種類が増えている JavaScript フレームワーク。
なかでも、「Vue.js」は学習コストが低いことで人気を博しています。
そんな「Vue.js」で、オリジナルコンポーネントを作って、誰でも使えるよう npm に公開してみましょう。
開発環境の準備
まずは、Vue.js の開発・ビルド環境を準備したいと思います。
前提として、nmp をインストールしておきましょう！
今回使用する環境は、以下の通りです。
| npm | v6.14.4 |
| Vue (Vue CLI) | v4.3.1 |
Vue CLI のインストール
Vue CLI とは？
「Vue CLI」は、素早く Vue アプリを開発する為の支援ツールです。
- コマンド1つで Vue プロジェクトが作れる
- webpack も同時にインストールされる
こうした特徴のおかげで、簡単に npm 公開のためのビルドが出来ます。
Vue CLI のインストール
ターミナルを起動して、次のコマンドを入力しましょう。
1npm install -g @vue/cliインストールが完了したら、バージョンを表示して正常にインストールされたか確認します。
1$ vue --version
2@vue/cli 4.3.1 ← バージョンが表示されればインストール成功ですVue プロジェクトの作成
公開するコンポーネントの「Vue プロジェクト」します。
次のイメージを見て下さい。
今回は、＠以下の部分を「ドロップダウン」で選択する「メールアドレス入力コンポーネント」を作成し、npm に公開しようと思います。
プロジェクトを作成
最初に、次のコマンドで 「Vue プロジェクト」を作成します。
プロジェクト名は「dropdown-mail-input」とします。
1vue create dropdown-mail-input
2
3? Please pick a preset: default (babel, eslint) ←Enterでデフォルトのプリセットを選択しますモジュールのインストール
次に、必要なモジュールをインストールしましょう。
プロジェクトフォルダへ移動後、npm installを入力してください。
1cd dropdown-mail-input
2npm installコンポーネントの作成
上で作成したプロジェクトに、「npm に公開するコンポーネント」を作成していきます。
ファイルを作成
プロジェクト名/src/components/フォルダにDropdownMailInput.vueという名前でファイルを作成します。
次に、次のコードを入力します。
1<template>
2 <div>
3 <input type="text" v-model="inputValue" @change="onChange" /> @
4 <select v-model="selectedValue" @change="onChange">
5 <option v-for="(domain, index) in domains" :key="index">
6 {{domain}}
7 </option>
8 </select>
9 </div>
10</template>
11<script>
12export default {
13 props: {
14 value: {
15 default: ""
16 },
17 domains: {
18 default: ["docomo.ne.jp", "au.com", "softbank.ne.jp"]
19 },
20 },
21 data() {
22 return {
23 inputValue: "",
24 selectedValue: ""
25 }
26 },
27 methods: {
28 onChange() {
29 this.$emit('input', this.inputValue + "@" + this.selectedValue)
30 }
31 }
32}
33</script>ポイント
Vue コードの詳細な説明は省きますが、ポイントは以下の2つです。
- ドメインを外部設定できるよう、プロパティとして宣言
- メールアドレスを親コンポーネントの v-model でバインドできるよう、入力変更時に「input」イベントを発生させる
動作確認
npm 公開前に、「動作に支障があるようなバグ」は取り除いておきましょう！
上記で作成したコンポーネントが、正しく動作するかをテストしてみます。
コンポーネントを追加
プロジェクト名/src/components/App.vueに、作成した「メールアドレス入力コンポーネント」を追加します。
1<template>
2 <div id="app">
3 <div>
4 <DropdownMailInput v-model="mail" :domains="['gmail.com', 'yahoo.co.jp']"/>
5 </div>
6 <p>入力されたアドレス：{{mail}}</p>
7 </div>
8</template>
9
10<script>
11import DropdownMailInput from './components/DropdownMailInput.vue'
12
13export default {
14 name: 'App',
15 components: {
16 DropdownMailInput
17 },
18 data() {
19 return {
20 mail: ""
21 }
22 }
23}
24</script>デバッグ起動
上のコードを保存したら、ローカルでデバッグ起動します。
ターミナルで、次のコマンドを入力しましょう。
1npm run serve動作確認
ブラウザでhttp://localhost:8080/を開きます。
「メールアドレス」と「ドメインデータ」が、プロパティに正しくバインドされているかを確認します。
npm に公開するためのビルド設定
動作確認をしたら、次はpackage.jsonを開き、npm に公開する為の設定をしていきます。
基本情報の設定
「コンポーネント名」「バージョン」「ライセンス」など、公開する為の基本情報を設定します。
特に、ライセンス表記は、package.jsonに忘れずに設定しておきましょう。
1{
2 "name": "dropdown-mail-input", //npmとCDNに公開するコンポーネント名
3 "version": "0.1.0", //バージョン
4 "private": false, //公開（false）に変更
5 "main": "dist/dropdown-mail-input.common.js", //エントリポイント
6 "license": "MIT", //ライセンス
7 "author": "<作成者>", //作成者
8 "files": [ "dist" ], //公開するフォルダ
9 "keywords": ["Vue", "Vue.js"] //キーワード
10}ライブラリ用のビルド設定
1{
2 "scripts": {
3 ~~中略~~
4 "build-bundle": "vue-cli-service build --target lib --name dropdown-mail-input ./src/libmain.js" //ライブラリビルド設定を追加
5 }
6}ビルド
package.jsonの編集内容を保存したら、ライブラリ用の「Vueプロジェクト」をビルドします。
1npm run build-bundleいざ公開！
それでは、作成したコンポーネントを npm に公開しましょう！
npm アカウントを準備
npm 公開には、npm アカウントが必須です。
未登録の場合は、以下から登録を行ってください。
【npm】
https://www.npmjs.com/signup
npm にログイン
まずは、次のコマンドで npm にログインします。
1npm loginコンポーネントを公開
次に「npm publish」コマンドで、コンポーネントを npm に公開します。
1npm publishコンポーネントを検索
コマンドが完了したら、npm のトップページにアクセスし、公開したコンポーネントを検索します。
公開成功！
検索結果をクリックして、以下のように表示されれば、公開成功です。
公開したコンポーネントを使う
ちなみに、npm に公開したコンポーネントを実際に使うには、2つの方法があります。
- npm からインストールして使う方法
- CDN 経由で使う方法
npm インストールして使う
npm からのインストール方法は、一般的な npm ライブラリと同じです。
npm i <コンポーネント名>を使用しましょう。
1npm i dropdown-mail-inputCDN 経由で使う
npm にコンポーネントを公開すると、CDN の「jsdelivr」「unpkg」からも利用できます。
まずは、<script src="url">でコンポーネントを取得しましょう。
その後、Vue.use()でコンポーネントを使用できるようにします。
unpkg の場合
1<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- Vue本体-->
2<script src="https://unpkg.com/dropdown-mail-input@0.1.0"></script> <!-- 今回公開したコンポーネント -->
3<script>
4 Vue.use(window["dropdown-mail-input"])
5</script>jsdelivr の場合
1<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2<script src="https://unpkg.com/dropdown-mail-input@0.2.0"></script>
3<script>
4 Vue.use(window["dropdown-mail-input"])
5</script>さいごに
今回は、「Vue.js でオリジナルコンポーネントを公開する方法」を解説してきました。
この記事を見ても分かる通り、手順はいたって簡単です。
是非、気軽に挑戦してみてください！
こちらの記事もオススメ！
2020.07.17ライトコード的「やってみた！」シリーズ「やってみた！」を集めました！（株）ライトコードが今まで作ってきた「やってみた！」記事を集めてみました！※作成日が新し...
2020.08.07JavaScript 特集知識編JavaScriptを使ってできることをわかりやすく解説！JavaScriptの歴史【紆余曲折を経たプログラミン...
