CSS Nite LP64「Coder's High 2019」フォローアップ（5）長谷川 広武さん

2019年10月19日に大崎ブライトコアホールで開催したCSS Nite LP64「Coder's High 2019」のフォローアップとして、長谷川 広武さん（HAMWORKS）の『これだけは押さえておきたい Vue.js の基礎知識』セッションのスライドなどを公開します。

• スライド（PDF）
• 動画

フォローアップ

セッション5を担当しましたハム（長谷川）です。

Vue.js の基礎の一部のみで、最低限覚えたほうがよい部分に絞ってお話をさせていただきました。基礎でもまだまだ学ぶことは多くありますので、ぜひ公式サイトのガイドページを読んで、実際にコードを試してみてください。

基礎をすすめていくと、コンポーネントごとに .vue ファイルを作成し、ビルドツールを利用して使う方法などもでてきます。しかし、基礎を学ぶ段階の人であれば最初はそこまでの使い方をする必要は有りません。基礎を学んでいる段階の人は、まずは Vue.js ファイルをHTMLで指定し、使いたい範囲も限定しての練習から始めてみてください。

セッションの最後で紹介したデモは、同じものではないですが、WordPressのRestAPIで取得したデータを一覧表示する例を容易してみました。こちらも参考に、まずはチャレンジしましょう！

▼ デモのサンプル（猫版ではなく、簡易に容易してみました）

データを取得してリスト表示する簡易サンプル
https://codepen.io/h2ham/pen/pooNGLV

▼ その他参考リンクピックアップ

Vue.js https://vuejs.org/
Vue.js（日本語） https://ja.vuejs.org/

単一ファイルコンポーネント
https://jp.vuejs.org/v2/guide/single-file-components.html

たにぐち まことのプログラミング学習応援チャンネル 「Vue.js 入門」
https://www.youtube.com/playlist?list=PLh6V6_7fbbo-SZYHHBVFstU2tp0dDZMAW

質問

Q. Vue.jsの入門書で一通り勉強してVue.jsの内容はできたけれど、実案件のどこで使えるのかが分かりません。どうすれば応用できるようになるのでしょうか？

実案件での利用は無理に使う必要はないのですが、中村さんやカイトさんがお話されているJAMstack利用で、HTML側のテンプレートとして利用をしたりなども活用できると思います。 他にも紹介をしているAjaxでのデータ取得での表示部分やコンポーネントとして登録しておくことで、タブ機能やカルーセル部分としても活用ができます。jQueryのプラグインでも十分ですが、Vue.jsで置き換えて利用することもできます。コンポーネントとしての導入時のコストは少し高めですが、あらかじめよく使うパーツの用意として試してみるのはいかがでしょうか。

Q. ReactではなくVueを選んでいる理由を教えてください。

Reactを使っていないわけではなく、これまでjQueryしか使ったことがないような人が、次のステップとして利用する前提でいうと、Reactよりも導入の敷居が低いと考えているため、そのような場合はVue.jsをおすすめしています。Reactを使うためには、Reactファイルだけでも使うことはできるのですが、JavaScriptのコードが複雑になってしまいます。シンプルで使うために導入するツールがVue.jsと比較すると多くなってしまうので、その分覚えることも多めになってしまうと考えています。 そういう意味でも、シンプルに次のステップで試してみるとしたらVue.jsがおすすめと考えています。 Reactの環境用意ができるような人であれば、Vue.jsでもReactでもどちらを採用しても良いとも考えています。

Q. 実際に現場で使用する場合、今回の内容だけで使用するのはアリですか？

ありです！確かにSSRなどで単一コンポーネントファイル（.vue）を用意してビルドしてつかうほうが、より多機能を作る場合は必要になります。ウェブアプリなどではそのような使い方が必要になりますが、アプリではないウェブサイトでは、Vue.jsファイルをscript要素で指定して使う程度の利用するほうがちょうどよいのではないかとおもいます。
ちょっとした利用箇所、例えば記事の追加読み込みの機能や、記事一覧のフィルタリングはjQueryを使うよりも楽にHTML側も機能側も作れますので、ちょっとしたところからの利用でもアリです。

Q. Vue.js はSEO的にはどうなのでしょう？

正確な知見をもっているわけではないのですが、シングルページアプリケーション（SPA）を作る場合は要検討ポイントかもしれません。部分的にちょっとだけ使うような場合であれば、SEOに重要なポイントではない部分で活用するようなところだと考えています。
あくまで現時点での個人的な感想ですが、Googleのクローラーの精度が高くなっているとはききますが正しくJSを実行全部できているかといえば、そうではないだろうと思います。そのため、SPAの場合で検索にもしっかり対応させたいような場合は、サーバーサイドレンダリング等も行えるようにしておくなどの工夫が必要になると思います。

Q. methods と watch と computed の使い分けをおしえてください

あくまで私の場合ですが、表示するプロパティで利用する場合は computed を利用し、表示に使わないようなロジック部分は methods に入れるようにしています。Watchは値が変わったときに、毎回なにかしら処理させたいようなときに使うようにしています。例えば、v-modelを指定したinputの中身が変わるたびに、ローカルストレージに値を保持する処理を書いたりなどで利用しています。