アラタナエンジニアブログ

aratana Engineer's Blog

イメージで伝える「Vue.js とは」 〜コンポーネントとデータバインド〜

このエントリーはアラタナAdventカレンダー9日目のエントリーです。
前回は、夜の西都原古墳群(?)きめさわさんによる、"ゆとり"ありますか?でした。
円滑に仕事を進める上で、ゆとりは大事ですよね〜!

f:id:oyanagi_jotaro:20171130182707g:plain

というわけで、はじめまして、大柳と申します。
今年の2月よりアラタナフロントエンドチームの末席を汚させていただいております。
つい先日の 12/1 に不惑となりまして、見た目はおっさん、頭脳は子どもで頑張っております👶

今回は、Vue.js という Javascriptフレームワークを使ってみて感じた

Vue.js ってこんなカンジのもの!

というのをイメージで伝えさせていただこうと思います。

ですので、ソースの説明は一切ありません。

文字は読まずに画像だけ見ていただき、「だいたいこんなカンジかー」とお分かりいただければ幸いです。

Don't Think Feel ! and Here We Go !

Vue.js の半分はコンポーネントでできています

もう半分は優しさです。
「みんなが簡単に作業できるように」という優しさです。
そう思えるほど、Vue.js は簡単に取り入れることができます。

では本題ですが、Vue.js のコンポーネントとはどういうものでしょう?

簡単に申さば、構造とデータとロジックの塊です。

例)商品情報用コンポーネント

f:id:oyanagi_jotaro:20171201141750p:plain

データの内容が構造に反映され、設定された処理内容に応じた挙動をします。(詳しくは後述)

コンポーネントそれ一つで機能として完結しており、部品として使い回すこともできます。
つまり、コンポーネント単体で使え、別のコンポーネントのパーツとしても使えるのです。

f:id:oyanagi_jotaro:20171201150205p:plain

コンポーネントの構造部分は HTML

コンポーネントの構造は HTML で作成します。

HTML で記述されると言うことは、見た目は CSS で調整することができます。
あくまでもコンポーネントは構造部分なので、同じコンポーネントでも、組み込まれる場所によって見た目を違うものにすることができるわけです。

f:id:oyanagi_jotaro:20171201162549p:plain

データを変更して表示内容を変える

データは Key と Value の、Object 形式で設定します。

このデータが更新される度に、HTML が書き換わります。

f:id:oyanagi_jotaro:20171201164115p:plain

はい出ました、データバインドというやつです。

データバインドを理解することが、Vue.js を使う上で重要なポイントとなります!

これまでに jQuery のような、DOM を直接操作するライブラリのみ使っていたら、データバインドを利用した設計に最初は少し戸惑うかもしれません。(自分がそうでした)

例えばボタンがクリックした際に表示を切り替える処理を jQuery で作る場合は、以下のような流れで作成していたかと思います。

f:id:oyanagi_jotaro:20171201171939p:plain

データバインドで作る場合は、以下のような流れとなります。

f:id:oyanagi_jotaro:20171201171958p:plain

ですので、Vue.js で作るときの考え方は「何が起きたら、どのデータを、どう変えるか」となります。
あとは、各要素に「どのデータがどうなったら、何をするか」を設定していきます。
挙動をどうするかは、各要素に委任されるわけです。
そのため、要素の追加削除がラクに行えます✌️

データ、またはデータの一部を、自身に組み込んだコンポーネントに渡し、そのコンポーネント内で監視させることもできます。
子となるコンポーネントが複数あっても、親のデータを一つ更新するだけで、子のコンポーネント全てを更新させることができます
これまたラクですねー!

f:id:oyanagi_jotaro:20171201174309p:plain

リスト用の JSONAjax で取得(更新)するたびに、画面上のリストやページャーなんかをラクに書き換えられるわけです。

ちなみにロジックですが、こちらは必須ではなく、なんらかの処理が必要な際にメソッドを記述します。
「要素をクリックしたら何かする」という時には、コンポーネント内で対象とする要素のクリックイベントにメソッドを紐付けます。
このあたりの方法は、公式のイベントハンドリングをご覧いただくと分かりやすいです。

こうして独自の機能を持つコンポーネントを作り、場合によってはそれらを組み合わせて一つのコンポーネントを作っていきます。

パーツからページ、サイトまで

そうして出来上がったコンポーネントをページ内に埋め込むわけですが、ページの要素を全て Vue.js のコンポーネントで作ることもできてしまいます。

f:id:oyanagi_jotaro:20171201175636p:plain

さらにはサイト自体を Vue.js で作ることも可能です。

参考:Nuxt.js

おわりに

Vue.js がどんな感じのものか、ぼんやりでもお分かりいただけましたでしょうか?

私は Vue.js を使い始めて2ヶ月ほどですが、それでもとても使いやすく感じています。
公式 がリファレンスとして優れており、学習しやすいのもその要因ですね。

今回は触れませんでしたが、状態管理という概念で設計することもできるので、スケールするアプリ開発にも向いていると思います。
現在は専ら、Vuex を利用した状態管理を用いて、Vue.js で設計・開発をしています。

参考:公式 Flux ライクな実装

上記で挙げた Nuxt.js など、Vue.js でラクにアプリを作るための機能がこれから更に充実してくると思います。ワクワクしますね!

ラクして楽しく!」をモットーに、今後もフロントエンドをデベロップしていきたいと思います😄

明日のエントリーは、我らが専務、穗滿さんによる「会社に所属してようが独立しようが、収入に困らず、社会的に存在意義のある人になる思考と目標を持とう」です。

お楽しみに!