GrapeCity.devlog

グレープシティ株式会社のDeveloper Tools〈開発支援ツール〉の最新情報をお届けします。製品のTIPSや発売情報、イベントのお知らせなどをいち早く発信中です。

Vue.js & Wijmo クイックスタート

Vue.jsは、近年注目が集まっているJavaScriptフレームワークのひとつです。AngularReactなどと同様に「コンポーネント」という考え方をベースとしたフレームワークでありながら、そのシンプルな構造と使いやすさが開発者の支持を集めており、GithubのJavaScriptカテゴリでは2016年と2017年の2年連続でスター獲得数1位を記録しました。

ドキュメントは日本語にも対応しており、プログラミング情報のナレッジコミュニティQiitaが公開する「Advent Calendar 2017ランキング」では上位にランクインするなど、日本でも高い人気を誇っていることが伺えます。

vue-cli でつくる Vue.js & Wijmo アプリ

WijmoはVue.jsをサポートしており、サンプルを多数収録するほか、vue-cli(Vue.jsアプリを新規作成できるコマンドラインツール)を用いたアプリ開発にも対応します。今回は、vue-cliでWijmoを使ったVue.jsアプリを作成する方法をご紹介します。

作成手順

1. vue-cliのインストール

vue-cliをインストールしていない場合は、次のコマンドを実行してvue-cliをインストールします。

npm install -g vue-cli
2. 新規アプリの作成

アプリを作成します。コマンドを実行するとアプリの設定をいくつか質問されますが、全てEnterを押して既定値を選択します。

vue init webpack アプリ名
3. アプリフォルダへ移動

アプリフォルダに移動します。

cd アプリ名
4. Wijmoパッケージのインストール

Wijmoパッケージをインストールします。下記はトライアル版のパッケージをインストールするコマンドです。製品版をインストールする場合は、製品に収録されるNpmImages/wijmo-commonjs-minフォルダを参照します。

npm install --save http://prerelease.componentone.com/wijmo5/npm-images/C1Wijmo-Enterprise-Eval-CommonJs-5.20173.405.tgz
5. cssファイルのコピー

Wijmoに収録されるDist/Stylesフォルダからアプリケーションのsrcフォルダにwijmo.min.cssファイルをコピーします。

6. vueファイルの編集

src/App.vueファイルに、以下にある赤字部分のコードを追加します。

 <template>
   <div id="app">
     <wj-input-date :value="date" :value-changed="valueChanged"></wj-input-date>
     {{date.toLocaleDateString()}}

   </div>
 </template>
 
 <script>
 import 'wijmo/wijmo.vue2.input'
 
 export default {
   data () {
     return {
       date: new Date(2018, 0, 1)
     }
   },
   methods: {
     valueChanged: function (s) {
       this.date = s.value
       alert(s.value.toLocaleDateString())
     }
   }

 }
 </script>
 
 <style>
 @import 'wijmo.min.css'
 </style>

7. 実行

アプリを実行します。

npm start
8. 配布

アプリを配布する場合は、次のコマンドを実行して、distフォルダをWebサーバーに配布します。

npm run build

App.vueファイル

手順6.で編集したsrc/App.vueファイルはアプリのメインコンポーネントです。App.vueファイルにある各部の内容を詳しく確認することによって、Vue.jsの特徴を把握することができます。

  • <template>では、コンポーネントのHTMLコードを定義しています。<wj-input-date>というカスタム要素や、:valueなどのカスタム属性も利用可能です。
  • <script>では、コンポーネントのJSコードを定義しています。先頭でWijmoモジュールをインポートし、dataでコンポーネントが使用するデータを、methodsでメソッドを定義します。既定ではESLintという厳密なJavaScript構文チェックツールが実行されるため、文末にセミコロン「;」を記入するとエラーになるので注意してください。
  • <style>では、コンポーネントのCSSコードを定義します。@import文で外部ファイルをインポートすることもできます。

このように、Vue.jsではコンポーネントの全てのコード(HTML、JS、CSS)を1つの*.vueファイルに記述できるため、アプリの構造が非常に分かりやすくなっています。

また、Wijmoと組み合わせることによって、リッチなUIを持つ強力なアプリを簡単に作成することが可能になっていますので、ぜひお試しください。