Vue.jsで商品一覧を描画してみよう！

3章に入っていきます。実際に一覧画面を作っていき、Vueについての理解を深めようという章ですが、次の書籍も控えているので何をやっているかだけ押さえて次に進もうと思います。だいぶん駆け足。

やっていること、盛り込む機能は以下の様になっています。

商品画像・商品名・価格・送料を1商品の塊として扱う。
1商品の塊を、商品の数分ループして表示する。（v-for）
セール対象・送料無料のチェックボックスを用意し、チェックONでそれぞれフィルタリングを行う。
- セール対象属性や送料無料属性を見て、display:noneを付与する（v-if,v-else）
商品ソート機能。商品の並びを初期表示or価格が安い順でソートする。（算出プロパティをバインド）
- ES5以降のsort関数使えば楽

読んだ感じ、2章の内容を実技で用いてみた、という章でした。

Ajaxで商品データを外部ファイルから読み込もう！

4章に入りました。 3章ではフロントのみで片を付けていましたが、4章ではバックへ片足を突っ込んでいます。（それでも両足ではない。外部ファイルであってバックエンドのサーバーやDBから情報を抜いているわけではないので。）

最初はAjax（非同期通信）とは何かから始まり、非同期通信で得た情報の管理形式について触れています。 XML→JSONの順で解説。 XMLやJSONはバックエンドエンジニアでも業務で触れることが多いので、ゼロベースでも無い限りは飛ばして大丈夫そうです。

クロスドメイン制約にも触れているので、詳しくない方は一読の価値アリ。

JSONのレスポンスを受け取り、forループで商品データを出力していくという内容。やっている事的にはテンプレートエンジンのThymeLeaf（Spring Boot+Javaエンジニア御用達）でも可能なので、上記スキルセットがあるとキャッチアップが早いかもしれません。

非同期通信にはjQueryを使用していました。 jQueryの代わりにVueを使うような認識だったので、併用していく点については意外でした。

この辺はVueでなくても扱っている領域なので、やはりキャッチアップについては容易です。 Vue独特の、ライフサイクルハックやバインドさえ押さえれば、すぐに使い出せそう。

学習コストはかなり低めだと改めて感じました。

以上、3・4章の学習内容でした。