この記事はNamuyuの個人ブログにマルチポストされています。

はじめに

以前にVue.jsでポートフォリオサイトを作ったのですが、その時からそろそろフロントエンド開発を一度基礎から学びたいと思うようになりました。これまでVue.jsを用いてフロントエンド開発に業務として携わったり、自分で1からサイトを作成したりすることを通してフロントエンドフレームワークの使い方についてはある程度理解できてきたのですが、まだそれらの意義や基礎についてそこまで学んできていませんでした。

なので、フロントエンドフレームワークとは何か？それを使うと何がどうよくなるのか？といったことについて、Vue.jsを扱ったものの中で何かしら1冊入門書を買ってフロントエンド開発に再入門したいと思い、見つけたのがこの本でした。
今回はそんな本書を書評したいと思います。

なぜこの書籍を選んだか

今回Vue.js入門書を買った目的は前述のとおりです。その中で買う本を選んだ基準としては、

サイトでの実装例がある（最重要）
フロントエンドフレームワークの基礎についてのトピックがある(重要)
ユニットテストのトピックがある（できれば)
これらの3点です。

多くのエンジニアにとってそうだと思うのですが、技術を学ぶ際は実際に手を動かしながら学ぶことが最も効率がいいと考えています。そういった意味で、なるべくサンプルが多いものを、そしてサンプルで取り扱う範囲が広いものを、と考えて選んだのがこの「Vue.jsのツボとコツがゼッタイにわかる本」でした。
というのも、この書籍においては全6章のうち3章から6章まで商品ページと自動見積もりページをテーマとしたサンプルを用いてVue.jsを用いた実装の解説がなされています。
その内容についても後述したいのですが、そのサンプルの解説の量の多さを見て、本書をフロントエンド再入門のための学習リソースとして選択しました。

フレームワークを使わなかったらどうなる？と対比して学ぶVue.js

この書籍の特徴的な点として、サンプルのサイトを作る際にまずはHTML,CSSとJSを用いて一通りの機能を実装している点があります。

例えば、第3章ではECサイトの商品一覧ページを作成するのですが、まずは表示内容をHTMLで記述したり、そのページの機能として商品の絞り込み機能や並び替え機能といった機能をJavascriptで実装しています。そして、その後でそのページにVue.jsを導入し、内容をVue.jsの機能を用いて書き換えていきます。

このサンプルの解説の仕方の何がうれしいかって、「普通だったらこう実装するけど、フレームワークを使うとこう便利になる」ということが一目瞭然になることです。フレームワークを用いた例のみでサンプルが解説されていると、フロントエンドフレームワークの学習の初めの段階だと「フレームワークを使うとこんな風に書けるんだな。で、それがどう便利なの？」といった点が疑問として残ってしまいます。それを、先にフレームワークを使わない例を示すことによってv-forやv-onが何に置き換わってどう便利になるのかといったことを分かりやすくしています。

おわりに

この書籍はVue.jsの入門書としてだけでなくフロントエンドフレームワーク自体の入門書としても役立つように思います。
どのようなフレームワークを用いて実装するにしろ、そのフレームワークを使わず素のJSで書いたらどうなるか？を考えることはそのフレームワークの利点を把握するのに役立つと考えています。本書ではHTML,JSで書いたコードをVue.jsを用いて書き直していましたが、それがAngularやReactで書くとどうなるか？といったことを考えてみるとフレームワーク間の違いを理解したりそれぞれのフレームを用いた実装の仕方を理解したりするのに役立つのではないでしょうか。