Vueハンズオン

今回の勉強会では jQuery よりもこういう場面でVueの方がいいよと言う、チュートリアルをやってみたいと思います。

Vueは今爆発的に人気が出つつあるJavascriptのフレームワークです。

さっそくVueで作られた実際の世界のアプリケーションを見てみましょう。

すると、Vue.jsで実際に作っていくイメージが湧くかと思います。

Vueで何を作れるの？何が得意なの？

計算機

動作が早い！シングルページアプリケーション

トランジションを使った動きのあるサイト

図形を動かしたりすること

作っていくアプリケーションについて

今回のサンプルアプリケーションは、金額と個数を入力すると、自動的にその計算結果をリアルタイムに表示してくれるというものです。こういうアプリケーションは実際の制作でもありがちですが、jQuery ではちょっと大変と言う認識を私は持っています。

それではまず完成型のアプリケーションを見てみましょう。

商品A商品B、2つのアイテムがあり、それぞれに金額入力欄と、個数を増やす減らすボタンがあります。

商品Aの金額の欄に数値を入力してみてください。

数値を入力すると小計の欄が、金額と個数をかけた値に変化します。

数値以外の文字列を入力しても、それらの値が入力されないことにも注目してください。

増やす減らすボタンを押すと個数が変化し、その個数に応じた小計が再計算されます。

商品Bも基本的に同じ機能を持つようにしています。

あとこの画面で存在しているのは、ボタンを押すとある要素が登場して再度押すとその要素が消えるという、合計金額欄を配置しています。

別にこの要素は普通の状況では無理に消えたりしなくてもいい要素ではあるのですが、ある要素を表示させたり消したりを操作する方法とトランジションという機能を説明するために、わざとこの合計欄はオンオフの機能を持たせています。

最低限のコードが書かれているこのプロジェクトをフォークして、作ってみましょう。

こちらはあえて、実際の現場で使う時のように、CDNのVueをScriptタグで呼び出して書く既存のサイトにすぐ取り入れられる書き方で記述しています。

今日、Laravelの方でVueのプロジェクトを作っていくと思いますが、そうすると単一ファイルコンポーネントで書けるようになります。

実際に単一ファイルコンポーネントが気軽に試せるサイトがありますので、そちらで書いていっても良いでしょう。