初めてのSPAをVue.jsで作る
前々回の記事の続きです。
UdemyのThe Ultimate Vue JS 2 Developers CourseのProject 2を終えました。今回は、そちらの感想記事です。
3つのサンプルアプリケーションを作りながらVue.jsを学ぶこちらのコースの2番目のプロジェクトで作るのは、"Vue.js Cinema"。映画のポスターと詳細情報と上映時刻をAPIで取得し、一覧・フィルター・詳細表示するSPAです。講師の方が公開しているデモサイトは下のリンクにあります。
vuejs-cinema.vuejsdevelopers.com
1番目のプロジェクトで作成した"Vue.js Poster Store"との大きな違いは、今回のアプリケーションがVue routerを利用したSPAであることです。これまでSPAを作った経験がないので、初めてのSPAをVue.jsで作るということになります。
内容について
CSS（scss）はあらかじめ用意されているものを適用するだけですが、JavaScriptやHTMLはほぼ全て自分で1から記述します（API接続やユーティリティ関数は一部用意されているものを使います）。Vue.jsを学習するコースなので、ビューに関わる箇所は省略せずに全てのコードを映像の中で講師の方と一緒に記述していきます。
今回のプロジェクトでは、下記のようなこと（抜粋）を学び／使います。
詳細な内容については、コースの内容一覧のページに記載してあります。細かく映像が区切られており、それぞれにその映像で学ぶ／実施する内容がわかるタイトルがついているので、どんな技術を使っているのかは受講しなくてもわかります。また、作成するソースコードはGitHubに初期状態から完成形までが公開されています。区切り区切りでブランチが切られているので、復習するのにも便利です。ソースコードは受講していなくても見られるので、ご興味ある方は見てみてください。
受講して良いと思った点
今回もとてもわかりやすかったです。コンポーネントにせよSFCにせよVue routerにせよ、文法・使い方はドキュメントを読んでわかっていても、実際にどのように使うのか、何が嬉しいのかはよくわからず、自分でこれらを使ってアプリを作ってみようという気になれていませんでした。それが、今回のプロジェクトで実際に一からコードを書いていくなかで、「なるほど、こうやって使うんだな」というのがわかってきた気がします。受講していて良かったと感じたポイントをいくつか書き留めておきます。
巨大VueインスタンスからSFCへのリファクタリングを実践できる
今回のプロジェクトではWebpackを利用しているのですが、最初はエントリポイントであるsrc/main.jsファイル内のVueインスタンス（ルートインスタンス）に全てのVueのコードを記載していきます。ある程度まではそのまま続けていくのですが、途中で「これだとファイルが巨大になっちゃうからからリファクタリングしていこう」と子コンポーネントをSFCに切り出していきます。モジュール化するといいよねというのは頭ではわかるのですが、実際に巨大なインスタンスを切り分けていく体験をするとリファクタリングする動機も方法もより実感できます。
相変わらず間違えるAnthonyさんにツッコミを入れたくなる
上の点に関連して、ファイル作成→コピー／カット&ペーストを繰り返して書き換えていくなかで、モジュールの相対パスを書き換えたり、モジュールのインポートを追加したりする必要が出てきます。その過程でも、前回書いたようにAnthonyさんは間違えます。わかっている人からすれば「何回同じ間違いしてんだよ」となるのでしょうが、やはり教材としては長所になっているのではと感じます。
これが最初からすんなり適宜修正を加えてくれてしまうと、映像を見ながら写経している側の印象に残らないのですが、ご丁寧に何度も何度も間違えるので、次第に写経しているこちらが先回りしてエラーが出ないようなコードを書くようになります。「またAnthonyさん同じ間違いしてるじゃん（笑）」となったらこれは教育としては最高の結果ですよね。
Vue.js以外のフロントエンド技術も学べる
これも個人的にはありがたい点です。上述のように、このプロジェクトではJavaScriptはほぼ自分で書きます。したがって、アプリケーションを作成していく中で用いられるVue.js以外のJavaScriptのライブラリや関数についても一緒に勉強することができます。もちろん、Vue.jsのコースなので深い解説まではされないのですが、「こういうものを使うよ」という断りはちゃんとされますし、参考資料として外部のドキュメントのURLなどを提示してくれるので、わからないところは自分で調べられるようになっています。一例としては以下のようなものを学びました。
- ES6
- JavaScriptの組み込みオブジェクト（StringやArrayなど）
- 基本的なライブラリ（Moment.jsなど）
- Webpackで用いるローダー（Style loaderなど）
「隅から隅まで知っているサンプルコード」を獲得できる
新しい言語やツールを学ぶときは、ドキュメントやサンプルコードを参考にしてどうにかこうにか作らざるを得ません。しかし、一度学んだ／使ったことのあるものを思い出す時には、自分が書き、理解しているコードを見るのが最前だと思っています。どうやって使うんだっけ？と思ったときに、公式のドキュメントだけでは応用方法がわからず、かといって他人のコードではその設計をまず理解しないとどのように使っているかはわからない、という経験をされたことがある方は多いのではないでしょうか。そういうときに、自分の書いたコードがあると、「ああ、そうだったそうだった」と思い出せます。Anthonyさんと一緒にコードを書いていくことで、この最強のサンプルコードを手に入れることができる。これがこのコースの大きな長所なのではないかと感じました。
おわりに
全部で14時間、3プロジェクトのコースも2/3まできました。だいぶ、Vue.jsの世界にも馴染めてきたような気がしています。Project 3ではGoogle Calendarのクローンを作りながら、サーバーサイドレンダリングなどを学べるようなので、楽しみながら学んでいきます！
