Output Study！
〜ちょっと変わった勉強会〜「#3 Vue.js」

場　所：ロジカルスタジオ会議室（４F）
時　間：9月25日（水）　17:00～18:30
登壇者：西峰さん　有澤さん　ヤッサンさん　上平さん

皆様、はじめまして！ロジカルスタジオ 新人フロントエンドエンジニアのT.Kです。
早くも3回目となりました「Output Study!」
今回のテーマは「Vue.js」！

Vue.jsとは？

Vue.js（ヴュージェイエス）、またはVueは、Webアプリケーションにおけるユーザーインターフェイスを構築するための、オープンソースのJavaScriptフレームワークである。他のJavaScriptライブラリを使用するプロジェクトへの導入において、容易になるように設計されている。一方で高機能なシングルページアプリケーション（SPA）を構築することも可能である。

出典　Wikipedia

つまりVue.jsは、Javascriptを書きやすくするための方法の一つなのです！
今回は4名の登壇者に、様々な角度からVue.jsについて解説して頂きました。

• 01.Vue.jsがいけてるところ / 西峰さん
• 02.LaravelでVue.jsを使ってみた / 有澤さん
• 03.業務でハマった点 / ヤッサンさん
• 04.Vue.js VS jQuery / 上平さん

01.Vue.jsがいけてるところ / 西峰さん

今回の「Output Study!」、トップバッターは西峰さん！
Vue.jsがあるときとないときとでどのようなところが違ってくるのか、
実例を交えて教えてくださいました。

Vue.jsがあると、要素の構成が変わってもjsの修正が容易になります。
つまり、Vue.jsのいけてるところは、
動的ロジックとHTMLマークアップがお互いにあまり影響しないところ
であるとのことでした。

私は中でも特に、

jQueryはスクリプト中で操作したい対象を指定するのに対し、
Vue.jsは操作したい対象のHTMLタグに直接プロパティとして記述するため、
より直感的にプログラムできる

というところが魅力的だと感じました！

02.LaravelでVue.jsを使ってみた / 有澤さん

続いての登壇者は、有澤さん！

• Vue.jsの長所
• バックエンドにおけるVue.jsの使い方

を、教えて頂きました。

HTML、CSS、JavaScriptをひとまとめにして.vueファイルとして保存し、
それをコンパイルして呼び出すことで、効率よくコードを書けるということでした。
私もVue.jsに慣れたらこのやり方に挑戦してみたいと思います！

03.業務でハマった点 / ヤッサンさん

続いては、前回の「Output Study!」でGitの運用について解説してくださった、ヤッサンさん！
実際にVue.jsを書いていて困ったことと、その解決策について説明して頂きました。

困ったこと

下記のコードのitem_countにindexをつけたいが、書き方がわからない

<tr v-for=" *index* in 10" :key="`${index}`" v-if="entity[`item${index}`]">
<input type="text" name="item_count">
</tr>

正しい書き方は・・・？

解決策

以下のように記述します

:name="'item_count' + index"

これにより、indexの値を変更することでnameの値を

• item_count0
• item_count1
• item_count2

というふうに変更できるようになる、ということです。

その他、以下のような情報も教えて頂きました。

• 属性の値に変数を使いたい場合は、開始タグに「v-bind:hoge="piyo"」というふうに書く（hoge:属性、piyo:変数）
• 「{{ piyo }}」といった書き方は要素の内容でのみ可能
• 属性の値に文字列と変数を使いたい場合は、「v-bind:hoge="'名前は' + piyo + 'です'"」
• 「v-bind:」は「:」で省略可能
• 「v-on:」は「@」で省略可能

04.Vue.js VS jQuery / 上平さん

最後を飾るのは、今回のテーマ「Vue.js」の発案者でもある、上平さん！
上平さんは、同じプログラムをjQueryとVue.jsで作った際の、記述の違いについて説明してくださいました。

作ったもの

欲しいものを追加・削除できたりするリスト

要件

• 欲しいものを追加できる、追加した時フィールドを空にする
• テキストフィールドが空の場合追加できない
• テキストフィールドが空なのに追加しようとするとエラーがでる（再入力すると消える）
• 欲しいものを削除することができる
• 欲しいものがないときは「欲しいものがありません」と表示する

コード

jQueryで作ったもの

See the Pen
bGGNMJb by LOGICAL STUDIO PR部 (@ls_pr)
on CodePen.

Vue.jsで作ったもの

See the Pen
欲しい物リスト(Vue.js) by LOGICAL STUDIO PR部 (@ls_pr)
on CodePen.

このプログラムにおけるjQueryとVue.jsの違いは以下の通りです。

jQueryで作って感じたこと

• 作成時間：30分
• 要素を増やす際、スクリプト中に長いタグを書くことになる
• 動作の行き帰りをいちいち書かなければならない
• ロジックに集中しにくい

Vue.jsで作って感じたこと

• 作成時間：10分
• v-for(同じ要素を繰り返せる属性)があるため、スクリプトで回数を指定するだけで要素を増やせる
• Vue.jsにある変数を変更すると全体がそれに応じた状態になるため、コード量が減る
• ロジックに集中しやすい

このように、Vue.jsは多くの魅力を備えています。

ただし、アニメーション関係やライブラリの多さはjQueryのほうが優れているようです。
また、Vue.jsで書いたコードの中でjQueryの関数を使うことも可能なため、
「jQueryはもう必要ない」ということではないとのことでした。

質問タイム

全員の登壇が終わった後、質疑応答が行われました。

.vueファイルはどう読み込むのか？
– A. .vueファイルを読み込むのではなく、.vueファイルをコンパイルして.jsファイルにし、それを読み込む。

Vue.jsによって書き出されたDOMは、SEO的にどうなのか？
– A.クローラーの仕様が不明なため確実なことは言えない。
「Googleのクローラーはjsまで読み取っているのでSEO的に無問題」という噂もある。

Vue.jsでCSSを動的に変更するには？
– A.後述のコード参照。また、:styleを使ってバインディングするという方法もある。

そもそもVue.jsはどういう仕組みなのか？
– A.「DOMを変数に応じた状態にする」という処理を常に高速で行っている。

等、実用に向けた質問が次々に飛び交いました。
そのため、終了時間が予定より1時間も遅れ、参加者のVue.jsへの関心の高さが窺い知れました。

総括

• Vue.jsは動的ロジックとHTMLマークアップがお互いにあまり影響しない
• 直感的かつ少ないコード量で書ける
• あるコンポーネントに関するhtml、css、javascriptは「.vue」ファイルにまとめられる
• 変数の使用は、要素の中身では「{{ piyo }}」、要素の属性では「v-bind:hoge="piyo"」
• Vue.jsは魅力的
• とはいえ、jQueryが役目を終えたというわけではない
• Vue.jsとjQueryは併用できる

Output Study!#3 Vue.jsを終えて

私を含め、今回初めてVue.jsに触れた人が多かったようですが、
終盤では普段あまりスクリプトを書かない人もVue.jsの魅力に気づけていたように思います。
私も次の案件ではスクリプトはVue.jsで書いてみようと思っています！

登壇者の皆様、ありがとうございました。
近いうちにまた「Output Study!」は開催される予定ですので、ご期待ください！

番外編：自分でコードを書いてみた

今回の勉強会は「Vue.jsが大体どんなものなのか知る」ということに焦点をあてたもので、
あまり文法に関する解説はありませんでした。
ですが上平さんのコードを見てみると何となく理解できたので、
上平さんのコードを改造して自分なりにコードを書いてみました！
↓こちらからご覧くださいませ。

書いてみた感想

• 正しい構文さえ覚えれば、確かにjs初心者でもある程度直感的に書ける
• Vue.js内に書くCSSのプロパティを、ケバブケースだけでなくローワーキャメルケースでも書けることにびっくり

(助言頂きましたヤッサンさん、ありがとうございました！)