• トップ
  • ブログ一覧
  • Vue.jsで作ったオリジナルコンポーネントをnpm・CDNに公開してみた!
  • Vue.jsで作ったオリジナルコンポーネントをnpm・CDNに公開してみた!

    広告メディア事業部広告メディア事業部
    2020.08.09

    IT技術

    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 のインストール

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

    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つです。

    1. ドメインを外部設定できるよう、プロパティとして宣言
    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つの方法があります。

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

    npm インストールして使う

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

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

    1npm i dropdown-mail-input

    CDN 経由で使う

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

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

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

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

    featureImg2020.07.17ライトコード的「やってみた!」シリーズ「やってみた!」を集めました!(株)ライトコードが今まで作ってきた「やってみた!」記事を集めてみました!※作成日が新し...
    featureImg2020.08.07JavaScript 特集知識編JavaScriptを使ってできることをわかりやすく解説!JavaScriptの歴史【紆余曲折を経たプログラミン...

    広告メディア事業部

    広告メディア事業部

    おすすめ記事