vuejsとvuexでWEBアプリを作成 はじめに

vuejs2.0とvuexを使ってちょっとしたWEBアプリを作る機会があり、初めてvuejsを使ったのですが、とても実装がしやすく他のフレームワークと比べて使い方を覚えるのがとても簡単でした。

この先、自由にフレームワークを使えるとしたらvuejsを使うと思います。

ただ、公式のドキュメントもとてもわかりやすく充実しているのですが、日本語での実装例はあまり見当たらなかったので、自分が学習した手順で実装方法をまとめていこうと思います。

環境環境

vuejsでWEBアプリを実装するための開発環境としてnodejsとnpmがインストールされていることを前提とします。

vuejsに限らず、javascriptのフレームワークを使う場合はnpmを使ってパッケージ・モジュールの管理を行うので、基本的なことだけでも予備知識として学習しておく必要があります。

コマンドで上記２つのプログラムがインストールされているか確認します。下記のバージョンと差異があっても特に問題はないと思います。

$ node -v
v6.6.0
$ npm -v
v3,10.3

ES6

vuejsは通常ES6(ECMAScript6)で実装します。

ES6とは次世代のjavascriptで、クラスを宣言できたりその他いろいろと便利な機能が追加されています。

従来のjavascriptでも開発は可能ですが、公式のドキュメントを含めてネット上のほとんどのサンプルがES6で実装されています。

なので従来のjavascriptで開発していると、ネット上のサンプルをそのまま貼り付けても何故か動かないといったことになってしまうので、ES6で実装することをおすすめします。

ビルド

ES6で実装したコードは最新のブラウザでも完璧に動かすことはまだできません。

なので現在のブラウザが認識できるようにES6のコードを従来のjavascriptに変換する必要があります。変換方法は別のセクションで紹介します。

紹介が前後してしまいましたが、このためにnodejsやnpmを使用します。

javascriptの変換だけでなく、ファイルを一つにまとめたり、古いブラウザでも動かせるようにコードを補完（polyfill(ポリフィル)）したりいろいろなことができるので、やはりWEBアプリの開発にはnodejsとnpmは欠かせないかもしれません。

vuejsの開発環境を構築するでvueの開発環境をインストールします。