この記事はVue #2 Advent Calendar 2019の10日目です。

昨日は @i-ryo さんの 【Vue.js】Vuexの「状態管理」はいったい何の状態を管理しているのか調べた でした。

JavaScriptといえば、jQueryだった

Vueを触る前はHTML+CSS+jQuery+WordPressが主な使用言語でした。以前は小〜中規模なWebサイト制作がメインだったので、JavaScriptを操作する場面というのは多くありませんでした。

使ってもハンバーガーボタンの操作やjQuery プラグインのスライダー、ちょっとしたエフェクト程度です。少なくとも状態管理をするような案件はほとんどなく、DOM操作がメインなのでjQueryで十分でした。

1つだけ状態管理をする案件があり、案件としてはVueに最適でしたが、jQueryでごり押しました。過去の自分に教えてあげたい。

VueってWebアプリケーションやSPAのためのものでしょ？

Vueを学習する前は自分もそう思っていました。Webサイト制作がメインの自分にはあまりメリットがないのかと。確かに小規模でSPAでもないWebサイトであればVueで作るメリットは少ないです。中規模になってくると、共通パーツが出てきたり、さまざまなインタラクション処理が出てきます。そこでVueのコンポーネント機能や便利なAPIを活用できます。

クリックやホバーといったマウスアクションに対する処理やフォーム入力、キーボード操作などにもAPIが用意されているので、楽にその処理を書けます。Vue単体ではSPAになりますが、Vueを拡張したフレームワークNuxtを使えばSPAの利点を活かしつつ静的サイトも作れます。

jQueryしか分からない自分がVueを始めてぶち当たった壁

Vueを学習し始めて、いくつか壁にぶつかりました。

JavaScriptの知識が足りてない

jQueryしか触ってこなかった自分には素のJavaScriptの知識が不足していました。DOM操作はdocument.querySelecter()などで置き換えればよかったですが、配列の操作などはpushとshiftくらいしか分かりません。filterメソッドの書き方もよく分からなかったですし、コールバック関数もあまり理解していませんでした。さらに、API取得で重要な非同期処理についてはほとんど知識0の状態です。

そのためVueの課題に出てくるfetchメソッドや配列操作など、Vueとは別のところで苦戦しました。Vue学習と並行して、JavaScriptの勉強もしました。

state管理という概念

Vuexを用いたstate管理というのは新しい概念でした。それまでのjQuery案件ではそんなに状態管理をする場面がありませんでした。せいぜいメニュー、アコーディオンの開閉状態くらいです。それをstoreで集中管理するという概念は新しいものでした。

最初はそのありがたみはよく分かりませんでした。上記のような例であれば関数内に状態を持たせてしまえば良いですが、WebアプリケーションやSPAなどのページ遷移をせず、画面が切り替わる場合には面倒になってきます。

SPAなどでなくても、現代のWebサイトは単純に表示するだけでなく、画面内で処理を行う場面が増えてきました。メニューの開閉以外にも入力状態などを管理するときにstoreを用いた集中管理は便利です。

学習半ばでVue CLIに手を出した。

実際の現場では<script>タグで読み込むよりはnpm(yarn)で環境構築して開発する方が多いかと思います。教本のテンプレート機能の章を飛ばして、単一ファイルコンポーネントによる開発に手を出してしまいました。そのためエラーが起きてもテンプレートの構文ミスなのか、単純な処理のミスなのか問題の切り分けが大変で、自らの首を締める結果になりました。

同時にTypeScriptにも手を出した。

さらには全く触ったことのないTypeScriptにも手を出したので、より難易度は高まってしまいました。これは先程の問題と同様TypeScriptエラーなのかどうかも分からず、苦戦が続きました。（とりあえず、anyでつぶした）

先回りや近道などせず、地道に教本の通りに進めていくのが良いです。

それでもVueは習得できた

そんな自分でもVue自体の習得は難しくなかったです。というのもVue自体はフレームワークであり、「書き方」さえ覚えれば使えるようになります。もちろん、mutation, actionによるstate変更手続きやdispatchの記法などや、Vuexによるstateの管理など新しい概念はありましたが、書き方自体はすごく難しいわけではありません。

大事なのはJavaScriptがきれいに書けること

結局、自分が一番時間をかけたのは中の処理の書き方、つまりJavaScriptを書けるようになることでした。VueはJavaScriptのフレームワークであるので、JavaScriptがきちんと書けることが大切です。基本的な配列の操作、非同期処理の知識はVueを使いこなす上で大切になってきます。現代的なJavaScriptの書き方（ES6仕様やアロー関数など）も同時に勉強しました。

自分の場合、Vueを使えるようになってもJavaScriptが稚拙だったので、初めてオリジナルで作ったVueプロジェクトは今見返すと、結構ひどい出来でした。（一応目的通り動きますが、全然スマートな書き方ではありませんでした。）

逆を言えば、Vue自体の学習コストはそこまで高くなく、導入は簡単です。教本の通りに進めていけば、TODOリストなりのSPAはすぐに作れるようになります。

さいごに

フレームワークは面倒なことを手軽に実装できます。jQueryは画面（DOM）操作を簡単にし、VueはJavaScriptによる動的な処理や状態管理の実装を簡単にしてくれます。VueとjQueryの目的はそれぞれ違うので、完全上位互換というわけでもありません。

最近のWebサイトは単純なDOM操作だけでなく、画面上の動的な処理を行う場面も増えてきていますので、Vueを活用できる機会もより増えてくると思います。もし、自分と同じようにjQueryしか書けず、Vueに挑戦したい人の助けになれば幸いです。