Vue.jsでBabelトランスパイラ後にAmazon-S3へのデプロイ迄の手順

SPA案件でReactやAngularと比較されるVue.js。

React同様、Vue.jsも触ってみると結構覚える事が多そうです。

ちなみに技術評論社では6つの段階的な領域があると紹介されてます。

1.宣言的レンダリング

2.コンポーネントシステム

3.クライアントサイドルーティング

4.大規模向け状態管理

5.ビルドシステム

6.クライアントサーバーデータ永続化

3以降はSAPや大規模システム構築時に必要な知識のようです(以下参照)

Vue.js入門 ― 最速で作るシンプルなWebアプリケーション

最近関わった案件で触る機会あったので、短期間で基礎(1、2)に触れてみました。

Vue.jsの特徴

2015年にLaravelに標準搭載されて以降、一気に有名になったとか。

・シンプルなAPI

・HTMLベースで学習コスト低

・双方向データバインディング

jsfiddleで双方向データバインディングされることの確認。

テキスト欄の入力値を更新すると、表示内容も切り替わります。

環境構築

公式ページではCDNとNPMが紹介されていますが、今回はCDNで確認。

ライブラリを読み込むだけで利用可能。

Vueが書かれたjsファイルは最後に読み込む。

基本的な文法

Vue.jsで提供されているディレクティブ(v-接頭辞)を使ってみます。

まずは条件分岐(v-if)。

data内の変数(flg)で表示制御が可能。

次にループ処理(v-for)。

todosはオブジェクトを配列で保持。

最後にイベントリスナ(v-on)

DOM操作は一切行わず、アプリケーションの状態のみ更新。

ボタン押下するごとに「Hello Vue.js!」が反転して表示されます。

テンプレート

データバインディングの基本はMustache構文(二重中括弧)で記載。

プロパティが更新されると自動的にHTML側も更新されるが、v-onceディレクティブを使えばデータ変更時の更新は行わず、一度だけ展開が可能になります。

まあ特別な理由がない限りはやらないのが賢明そうです。

ちなみにプレーンなテキストではなく、HTML出力はv-htmlディレクティブで利用。

UIのコンポーネント化

Vueコンポーネントは定義されたオプションを持つVueインスタンス。

今回は親スコープ(app)から子コンポーネントへデータ連携されるよう定義。

HTML属性(idやclass)はMustache構文が使えないのでv-bindを利用。

v-forでdata内の配列listから要素を取り出してv-bindでtodoに紐づけます。

最後に子コンポーネントのpropsで紐づければ利用可能。

Babelでトランスパイラ

Vue.jsはIE8以下が未サポートですが、ES2015準拠のブラウザは全て対応されています。

なので原則ES2015で書きますが、未対応ブラウザ向けにトランスパイラ必須。

直接Vue.jsを関係ないですが、Babel単体でトランスパイラした時の手順をまとめときます。

以下定義で主要ブラウザの最新+一つ古いバージョンをサポートしてくれます。

ちなみに複数のnpm-scriptを実行出来るようにnpm-run-allパッケージ導入。

トランスパイラ後のコードはdistに格納されるようnpm-scriptで定義。

私が関わった案件では、dist配下をまとめてS3にデプロイしてました。

こんなやり方でいいんだろうか…もっと良い方法あると思いますが…