はじめに
こんにちは。
Kojirockの1人アドベントカレンダー Advent Calendar 2018の1日目の記事です。
今回からおそらく連投で、vue.js入門 基礎から実践アプリケーション開発まで を読んで勉強した備忘録を載せていきます。
- 作者: 川口和也,喜多啓介,野田陽平,手島拓也,片山真也
- 出版社/メーカー: 技術評論社
- 発売日: 2018/09/22
- メディア: 単行本（ソフトカバー）
- この商品を含むブログを見る
今までいくつか、vueの勉強したものをブログにしたのですが、あまりに身になっていると言い難いので、一章ずつじっくりとやっていければと思います。
過去記事はこちら
1章 プログレッシブフレームワークVue.js
目次
1.1 現代のWebフロントエンド開発の複雑化
1.2 Vue.jsの特徴
1.3 Vue.jsの設計思想
1.5 Vue.jsを支える技術
1.6 Vue.jsのエコシステム
1.7 Vue.jsのはじめの一歩
1.1 現代のWebフロントエンド開発の複雑化
過去から現在までのjsの進化などについて記載されていました。
cssなどと同じく装飾目的で使用されていたjavascriptがajaxの登場で飛躍的に存在が強くなり、nodejsやES6などによりさらに注目されるようになったという過程がわかりやすく紹介されています。
このあたりはサラッと流し読みしております。
実際に自分がjsを触り始めたのは、backbone.jsが騒がれた頃でした。
それまではほぼほぼ触っていませんでした。
理由はガラケー向けサイトの開発だったからです。
その際は完全にバックエンドとして働いており、jsを使う場面は管理画面くらいで、そのときもalert出すとかその程度でした。
そんな僕でも、jQueryを駆使して諸々作れる様になり、今vueやReactなどをつまみ食いする用になったので、自分でも少しは成長しているんだなと実感してますw
1.2 Vue.jsの特徴
この項目では、Vue.jsの特徴を紹介されてました。
Vue.js自体は表示部分を取り扱うライブラリとして提供されていて、その他の関連するライブラリと組み合わせて使うことでフレームワークのように扱えることができるとのことです。
特徴1. 学習コストが低い
この辺は以前の投稿したブログでも書いたりしてたのですが、Reactより確かに最初はとっつきやすいと感じました。
本でも紹介されている通り、HTMLを記述するブロック、Javascriptを記述するブロックが明確に分かれているところが、なんと言ってもわかりやすいと思いました。
<div id="app"> <p>{{ message }}</p> </div> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { message: 'vueだよ！' } }) </script>
ReactだとJSXで完全にロジック内に記述するようになると思うので、マークアップするコーダーさんと分業をしているようなチームでは、コーダーさんにも少し負担がある(覚えればいいんですが・・・)のですが、vueの場合は前述したとおり、ブロックが分かれてるので、入りやすいのかなと。
特徴2. コンポーネント指向によるUIの構造化
UIを構造化して、それぞれをコンポーネントとして使用できるようです。
コンポーネントを組み合わせてページを構成するという形で、その設計はAtomic Designが有名らしいです。
DeNAさんのAtomic Designの記事がとても理解しやすかったです。
原子のレベルでコンポーネント化していき、どんどん組み合わせてページとするようなかんじかと理解しました。
公式サイトに載せてくれている、以下の画像がとてもわかり易かったです。
特徴3. リアクティブなデータバインディング
この辺は、以前自分が書いた記事でも試してますね。
双方向バインディングという形です。
<div id="app"> <p>{{ message }}</p> <input v-model="message"> <p>{{ message_2 }}</p> <select v-model="message_2"> <option value="test_select_1">テストセレクト1</option> <option value="test_select_2">テストセレクト2</option> </select> <p>{{ message_3 }}</p> <input type="radio" v-model="message_3" value="test_radio_1">テストラジオ1<br /> <input type="radio" v-model="message_3" value="test_radio_2">テストラジオ2<br /> <p>{{ message_4 }}</p> <input type="checkbox" v-on:click="changeMessage" value="test_check_1">テストチェックボックス1<br /> <input type="checkbox" v-on:click="changeMessage" value="test_check_2">テストチェックボックス2<br /> <input type="checkbox" v-on:click="changeMessage" value="test_check_3">テストチェックボックス3<br /> </div> <script type="text/javascript"> var app = new Vue({ el: "#app", data: { message: "テストだよ", message_2: "テストだよ2", message_3: "テストだよ3", message_4: "テストだよ4", message_4_origin: "テストだよ4", }, methods: { changeMessage: function(e) { if (e.target.checked === true) { this.message_4 = e.target.value; } else { this.message_4 = this.message_4_origin; } } } }); </script>
ちなみに、先ほど載せた以下のようなコードは、一方向バインディングという形のようです。
<div id="app"> <p>{{ message }}</p> </div> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { message: 'vueだよ！' } }) </script>
1.3 Vue.jsの設計思想
vueの設計思想は、どんな規模でも対応できる、「プログレッシブフレームワーク」というもので考えられているようです。
本で紹介されていた一文です。
フレームワークはどんなときにでも、どんな規模でも、段階的に柔軟に使えるべきである。
プログレッシブとは、進歩的な、革新的な、という意味の他にも、(段階的に)前進する、という意味もあるようで、まさに言葉通りの思想という感じです。
この章ではプログレッシブフレームワークではない、フレームワークで、各段階においての適用の辛さなどが紹介されています。
1.4 プログレッシブフレームワークの解決する段階的な領域
以下の公開されているスライドに説明があるので、引用させてもらいます。
1. Declarative Rendering(宣言的レンダリング)
LPなどのシンプルなwebページなど簡単なページでも、Vue本体がサポートしていることを伝えています。
2. Component System(コンポーネントシステム)
前述した、コンポーネント化の機能がVue本体にあるため、こちらもサポートしています。
LPなどの簡単なwebページよりも、やや複雑なページの際に使用するようなるイメージです。
3. Client-Side Routing(クライアントサイドルーティング)
SPAのような動きのwebページも、vue.jsが公式で提供しているライブラリのVue Routerを使用することで、こちらもサポートできるようになります。
4. Large Scale State Management(大規模向け状態管理)
コンポーネント間の状態管理ですが、こちらはFluxライクなライブラリであるVuexを使用することで可能になるようです。
Reactでもコンポーネント間でのデータの受け渡しは、Reduxを使用しないとどんどん数珠つなぎにつなげるような辛い作業をしてたので、vueもvuexを使用することで、そのような辛みから開放されるのだと想像してます。
5. Build System(ビルドシステム)
デプロイなどに実行するようなビルド機能ですが、こちらもvue.jsが公式で提供している開発サポートツールを使用することで、その辺のツールを意識せず用意してくれるのかなと思います。
6. Client-Server Data Persistence(クライアントサーバーデータ永続化)
クライアントとサーバーサイドのやり取りにおける、複雑なデータ構造の永続化ですが、現状では公式で該当になるようなライブラリは提供されていないようです。
axiosなどを使用することが一般的のようです。
ただ、この周りも今後公式でサポートできるようになるようなライブラリが提供される予定のようです。
1.5 Vue.jsを支える技術
ここでは大きく3つの技術が紹介されています。
1. コンポーネントシステム
前述でも紹介しているコンポーネントを扱うためのシステムです。
htmlもjsもstyleも、全てをコンポーネントとして閉じ込めることができるので、無駄に被ったり、足りなかったりということがなくなるイメージだと思います。
そのためには、細かく再利用できるようコンポーネントを区切っていく必要がありますが、きれいに決まれば気持ちいいなと思いました。
自分的にしっくりきたのは以下の一文です。
コンポーネントで大事なのはそれを機能や関心事という言語の役割とは別の粒度で切り出せることです。
2. リアクティブシステム
状態の変化をVue.jsが検知して、その状態変化をもとにDOM側に自動的に反映できるようにする仕組みです。
算出プロパティがリアクティブシステムの恩恵を最も受けている例ということのようです。
自分が書いた以前のブログにも記載してました。
3. レンダリングシステム
Vue.jsはReactでも採用している仮想DOMを使用しています。
仮想DOMについては、こちらの記事がとてもわかり易かったです。
実際のDOMを扱う場合は、いちから再構築するところを、仮想DOMの場合は、実際のDOMを構築する前に仮想DOMから構築し、その後実DOMを、差分(変更された部分)のみを構築するという形のようです。
1.6 Vue.jsのエコシステム
前述したとおり、Vue.js自体はあくまで表示周りのライブラリで、それ単体では、フレームワークというわけではありません。
Vue.js自体は表示部分を取り扱うライブラリとして提供されていて、その他の関連するライブラリと組み合わせて使うことでフレームワークのように扱えることができるとのことです。
ここでは、その他関連のライブラリが紹介されていました。
1. Vue Router
SPAを実現するための、ルーティング用ライブラリ
2. Vuex
大規模なwebアプリケーションで必要になる様々な状態を一括管理するプラグイン。
3. Vue Loader
更に高度なコンポーネント機能を利用するためのwebpack向けライブラリ。
4. Vue CLI
プロジェクトの雛形の生成や必要なライブラリを対話形式で選択して導入できる開発向けライブラリ。
5. Vue DevTools
vue.jsのブラウザの開発ツールで、デバッグ時に重宝するライブラリ。
1.7 Vue.jsのはじめの一歩
ローカルでの試し方や、jsFiddleでの試し方が紹介されています。
参考までにjsFiddleでの試し方で紹介されていたものをそのまま試しました。
終わりに
とりあえず1章終わりました。
次章からは実際に手を動かす周りだと思うので、早速取り掛かっていこうと思います。
