下記内容はVueハンズオン新潟でやった内容です。
ハンズオンといいいながら、私のほうもみんなと同じスタートからコーディングをして、それをプロジェクターに映して説明をしていきました。
楽しかったという評判の声がいただき、やって良かったなと思います。
codepenとcodesandbox二つのエディタを用意しましたが、ほぼみんなcodesandboxを使っていたようです。
今回の勉強会では jQuery よりも こういう場面でVueの方がいいよと言う、 チュートリアルをやってみたいと思います。
Vueは今爆発的に人気が出つつあるJavascriptのフレームワークです。
さっそくVueで作られた実際の世界のアプリケーションを見てみましょう。
すると、Vue.jsで実際に作っていくイメージが湧くかと思います。
Vueで何を作れるの？何が得意なの？
計算機
動作が早い！シングルページアプリケーション
トランジションを使った動きのあるサイト
図形を動かしたりすること
作っていくアプリケーションについて
今回のサンプルアプリケーションは、金額と個数を入力すると、自動的にその計算結果をリアルタイムに表示してくれるというものです。 こういうアプリケーションは実際の 制作でもありがちですが、jQuery ではちょっと大変と言う 認識を私は持っています。
それではまず完成型のアプリケーションを見てみましょう。
https://mnx8540nx.codesandbox.io/
商品A商品B、2つのアイテムがあり、それぞれに金額入力欄と、個数を増やす減らすボタンがあります。
商品Aの金額の欄に数値を入力してみてください。
数値を入力すると小計の欄が、 金額と個数をかけた値に変化します。
数値以外の文字列を入力しても、それらの値が入力されないことにも注目してください。
増やす減らすボタンを押すと個数が変化し、 その個数に応じた小計が再計算されます。
商品Bも基本的に同じ機能を持つようにしています。
あとこの画面で存在しているのは、ボタンを押すとある要素が登場して再度押すとその要素が消えるという、合計金額欄を配置しています。
別にこの要素は普通の状況では無理に消えたりしなくてもいい要素ではあるのですが 、ある要素を表示させたり消したりを操作する方法とトランジションという機能を説明するために、わざとこの合計欄はオンオフの機能を持たせています。
実際に書くコード
https://codepen.io/sakapun/pen/pLPGax
最低限のコードが書かれているこのプロジェクトをフォークして、作ってみましょう。
こちらはあえて、実際の現場で使う時のように、CDNのVueをScriptタグで呼び出して書く既存のサイトにすぐ取り入れられる書き方で記述しています。
今日、Laravelの方でVueのプロジェクトを作っていくと思いますが、そうすると単一ファイルコンポーネントで書けるようになります。
実際に単一ファイルコンポーネントが気軽に試せるサイトがありますので、そちらで書いていっても良いでしょう。
https://codesandbox.io/s/q7lnwr99z9
今回のことで学べること
今回はHTML の部分は用意されており、 以下の機能を実装するのが今回のハンズオンの内容になります。
- 数値を入力すると、それがリアルタイムに計算され表示される。
- 増やす減らすボタンを押すと それがリアルタイムに計算され反映される
- 表示を制御ボタンである要素を表示非表示にできる
- 要素が現れる時、消えるときに動きがつけられる
完成形のソース
codepen
https://codepen.io/sakapun/pen/aYvogO
codesandbox
https://codesandbox.io/s/mnx8540nx
実際にやってみよう
Vueの核となるデータのバインディング
Vue内のelで指定したHTML要素の配下でVueの機能を使うことができます。
{{ count1 }}とするとVueの中でdataとして定義した内容が表示できます。
Vueの内部ではthis.count1でアクセスするが、テンプレートの部分ではthis.をつけなくても良いことは今後も色々書いていく上で注意が必要です。
- テンプレートではthisは要らない
- JS側ではthisをつける
Vueのdataの値を変えると表示が変わるのを確認しましょう。
計算させる
ムスタッシュ{{ }}の中ではJavascriptの式が使えます。
{{ count1 * price1 * 1.08 }}
というふうに計算できるんですが、こうやって書いてしまうと使い回しができないので、これはcomputedを定義して計算させて表示するようにしましょう。
computed（算出プロパティ）
非常に便利な機能で今入っているdataの値を計算させたりするものはここに記述しましょう。
mehtodsにも計算結果を書けるのですが、computedであれば関係する値が変化しない限り、結果をキャッシュしないため、高速であるといわれています。
computedに記載したものはテンプレート内では{{ total1 }}のように記載でき、Vue内ではthis.total1でアクセスできます。
イベントハンドリング
ボタンを押した時にカウントを増やす、というのはもっともよく出てくるチュートリアル項目ではないでしょうか。
今回のハンズオンでは先にショートカットである、”@”を使ってコチラを覚えてもらいます。
その方が後々にのためには良いかなと思うからです。
クリックしたら発動するイベントには@click=”メソッド名”と記述します。
その呼び出したいメソッドをVue内のmethodsに作ります。
じつはここでもJavascriptの式を記述できてしまうので、書けます。
ただし、使い回しができなくなるので、あまり推奨されていません。
しかし、私は時と場合によっては書いてしまう時もあります。
methodsに修飾子をつけてみる
キーボードの一部のキーを押しながらしか反応しない機能とかが簡単に作れます！
jQueryでもReactでもこんなに簡単にできない、はず。
まぁ管理画面の特殊操作ぐらいしか用途が思いつかないんですけど。
v-modelでフォームの値がすぐに反映されるように
inputのタグにv-modelを指定することで、inputの入力値がVueのdataとバインディングされます。
すると、そのdataと関連があるところはすぐに再計算され、描画されます！
今回はテキストのみで使いましたが、チェックボックスやセレクトボックスなどでも使えます。
さらに.numberオプションを用いて数字のみが入力されるようにしています。
公式ガイド
ただし、親子間コンポーネントを使うようになったり、Vuexを使うようになると使いこなすのがちょっと難しくなります。
今回のようにシンプルに使う場合はすごく便利です。
v-ifで特定の条件のときのみの条件レンダリング
今回は合計を表示するという部分をあえて開閉できるようにしてみたいと思います。
実際の要件ではもうちょっとまともな仕様があると思いますが、、、
例えばモーダル要素など、こういう例に向いていたかもしれません。
v-ifを付けるとその条件を満たすときのみ、表示をさせることが可能です。
トランジションをつけて、動きを見せる
v-ifで囲んだ要素などはユーザーの何らかのアクションによって表示が切り替わっていることが多いかと思います。
そういう要素に関してはトランジション効果をもたせることで要素の入れ替わりに意味をもたせると良いでしょう。
公式ガイドの説明もわかりにくく、習得するまで私も時間がかかった部分ですが、わかってしまえば他のフレームワークにない簡単に動きをつけられるということができるようになります。
完成形のコードにないけどできるならやってみよう
classやstyleを動的に与える
class と :classは同居させることができます！
そのため、.btnなどの通常のクラスとclassに、.btn-dangerのような装飾のクラスを条件によってつけてやるということができます。
今回のサンプルアプリでは合計を開くボタンに、開いているときのみ装飾のクラスを与えるということが考えられるでしょう。
watchで値を監視して、処理を行う
例えば、金額が高額になりすぎた時、個数がマイナスになった時に「注意してください」というようなメッセージを出すという機能が増えた時など、活用する機会は少なくないはず。
filterで金額を3桁区切りにする
金額に特殊な文字(￥)をつけたり、3桁区切りにしたりするのはFilterで実装することができます。
ぜひ実装してみましょう。
説明できてないこと
- 親子間コンポーネント
- リスト表示
- SPA的なルーティング
ここまで、丁寧に説明しながら2時間ぐらいは消費しました。
次回は本格的なアプリケーションを作ることを目的に、コンポーネント指向でのアプリの作成をしていきたいなと思っています。