JSのFW使うなら一度でいいから JavaScript Primer の Todoアプリの章はやっておいたほうが良い件
投稿日：2019年09月18日
個人的にはJSを学ぶならMDN推しなのですが、MDNに並ぶ参考書として JavaScript Primer も推しています。
推しているクセに最近まで「第二部: ユースケース」を全く読んでいなくて、「Todoアプリの章」を読みながら手を動かしてみるとめちゃくちゃ学びが多かったのでメモです。
データバインディングの理解が深まる
フレームワーク(FW)ではよしなにしてくれいているデータバインディングをVanilla JSで実装していくので、Vue.jsの理解が深まります。
emit メソッドを自分で実装して、Vue.jsの emit もこんな感じのことやっているのかなと想像を掻き立てられました。
Observerパターンという単語は知っていたけど、よくわかっていなかった私にとっては目からウロコでした。
モデルの理解が深まる
DOMで状態を管理する問題点を上げつつ、回避策としてモデルを導入して、DOMで管理していた問題点をどのように改修していくかを実装しながら理解できます。
改めて v-model って便利なんだなと実感できます。
クラスの理解が深まる
マークアップ → jQuery → Vue.js の順でフロントエンドエンジニアっぽいことをやっている私にとって、クラスのメリットは prototype で書かなくていいやーくらいでした。
しかし、モデルを導入することによってモデルの状態管理、操作方法をクラスで定義するので、クラスを使ったほうが拡張性やメンテナンス性の面でも良いことが多いなと思うようになりました。
※設計次第ではあると思いますが…
イベントの理解が深まる
DOM APIのイベントの仕組みをモデルにも利用して、モデルの状態が変化したらイベントをディスパッチ（dispatch）させる仕組みを実装しながら学べます。
リファクタリングするべきポイントがわかる
肥大したmain関数をModelとViewに切り分ける工程で、リファクタリングのポイントがわかります。
まとめ
FWの裏側に少し触れることができたので、改めてFWの素晴らしさというか、ありがたみを実感しました。
ご紹介したTodoアプリの章は 1〜2時間で終わらせることができるので、私のようなjQuery上がりでFWの裏側をよく理解できていないエンジニアさんは、一度写経することをオススメします。