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

第1回 プログレッシブフレームワーク Vue.js

この記事を読むのに必要な時間:およそ 3 分

プログレッシブフレームワークの解決する段階的な領域

プログレッシブフレームワークは以下の6つの解決する段階的な領域があります。Vue.jsがこれらにどう対応していくかを見ていきましょう。

図4 プログレッシブフレームワークの領域

図4 プログレッシブフレームワークの領域

CC BY Evan You

1. 宣言的レンダリング(Declarative Rendering)

宣言的なDOMレンダリングに関する領域です。

テンプレートにレンダリングする対象を宣言的に記載することでデータ変更の都度,リアクティブなDOMレンダリングと,ユーザによる入力データの同期が可能になります。Vue.jsでは本体自体でこの領域をサポートしているので,ランディングページのようなシンプルなWebサイトはじめ,小規模的なものはこの領域で解決できます。

2. コンポーネントシステム(Component System)

UIをモジュール化して再利用する必要がある領域です。

この領域もVue.js本体自体にコンポーネント化する機能があるため,それによって開発効率を向上させることが可能になります。

3. クライアントサイドルーティング(Client-side Routing)

Webサイトがシングルページアプリケーションとして必要とされるWebアプリケーションの領域です。

Vue.jsが提供しているルーティングライブラリvue-routerを利用すれば,これまでに作成したコンポーネントでシングルページアプリケーションに対応することが可能になります。

4. 大規模向け状態管理(Large-scale State Management)

コンポーネント間で状態の共有方法が必要となる領域です。

Vue.jsが提供しているFluxデータフローアーキテクチャに沿った状態管理ライブラリvuexを利用することによってこの領域の問題を解決できます。既存のコンポーネントを拡張する形で状態を集中管理することが可能になります。

5. ビルドシステム(Build System)

Webアプリケーションのコンポーネントの管理,プロダクション環境への配信,そしてプロジェクト構成について考える必要がある領域です。

Vue.jsが提供している開発サポートツール,vue-clivueifyそしてvue-loaderを利用して,この領域の問題を解決できます。これにより,本質的でないプロジェクトの環境構築や構成管理にほとんど時間を費やされることがなく,継続的な開発を持続できるようになります。

6. クライアントサーバーデータ永続化(Client-server Data Persistence)

クライアントサイドとサーバーサイドにおいてWebアプリケーションの複雑なデータ構造の永続化が必要な領域です。

執筆時点では,この領域を解決するVue.jsが公式にサポートするライブラリはありません。今後提供する予定です。このライブラリを利用することによって,クライアントサイドとサーバーサイドにおいて複雑になりがちなデータ構造の永続化が容易になります。

はじめてみよう

ここまではVue.jsを選び,学ぶうえで重要なコンセプトを解説しました。ここからはいよいよ実践です。

Vue.jsのどのようなものかデータとDOMが同期する双方向バインディングの簡単なデモを実際に手を動かして体感してみましょう。

1.Vue.jsがセットアップされたjsfiddleにアクセスします。
今回はVue.jsのセットアップ手順を省くためこちら準備した環境で動作確認します。
2.HTMLテンプレートを用意します。
以下のHTMLテンプレートを今回アクセスしたjsfiddleのHTMLを入力する部分に入力します。
<div id="demo">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
3.JavaScriptコードを用意します。
以下のJavaScriptコードを今回アクセスしたjsfiddleのJavaScriptを入力する部分に入力します。
new Vue({
  el: '#demo',
  data: {
    message: 'hello world!'
  }
})
4.jsfiddleの画面上部メニューにあるRUNをクリックしてJavaScriptを実行します。
テキストフィールドにhello world!という文字列が設定され,またそのメッセージが表示されるのを確認できます。ここで,テキストフィールドに何か適当な文字列を入力してみてください。入力した文字列がリアルタイムにメッセージとして表示されるのを確認できます。

以下に今回のサンプルを掲載します。

おわりに

いかがでしたでしょうか。本記事ではVue.jsの概要とコンセプトについて紹介し,最後にVue.jsの簡単なデモを体験しました。

次回は実際にVue.jsの文法について解説します。お楽しみに。

著者プロフィール

川口和也(かわぐちかずや)

株式会社 CUUSOO SYSTEM 最高技術責任者。

Vue.jsコアチームメンバーとしてVue.js関連のOSS活動を積極的に行っている。日本Vue.jsユーザーグループvuejs-jpの代表であり,国内の普及啓もう活動も進めている。最近は自称emojineerとしてemojiを使ったソフトウェア開発プロセスにも関心がある。

GitHub:kazupon
Twitter:@kazu_pon

コメント

コメントの記入