フロントエンドにジョブチェンするにあたって初めに読む本

2022年8月2日 21:42

TL;TD

私が知っている従来型WebとモダンWebのフロントエンドではできることの概念がくつがえる
従来型WebとモダンWebのフロントエンドの線引きがあいまいだったが、「ブラウザの機能を最大限に引き出せるかどうか」であることが本書を読んで理解できた
JSフレームワークの便利さ、および、難しさを俯瞰してみることができた。

読んだきっかけ

過去のnoteで仕事論を考えていたが、自己学習で開発の勉強をして思った。
「エンジニアとしてワクワクする技術を使ってしごとしたい」と。
そのために部署異動を打診し、10月から移動することが決まった。
（決まるまでとっても長かった。それについてはまた後日。）
移動先は「フロントエンド開発」。
今までの業務での知見は役に立たないが、とても好奇心がそそられた。
知見をつけるため本を探していた時に、本書がAmazonで安くなっているのを見つけて買った。

React Angular Vueをスムーズに修得するための最新フロントエンド技術入門
 末次章 (著)

アウトプット

Part1：技術の動向

全体的に語り口がわかりやすい。
その中で、モダンWebの魅力（無限スクロール等）が語られるので、理解しやすい。
従来ではできなくて当たり前だったことがモダンWebで簡単にできるのだからすごい。
前職ではレガシーなWebサービスだったため以下が当たり前だと思っていた。

MPAでの画面遷移＆ウィンドウが複数表示され、それらがモーダルにつながっている
検索時間が長く（バックエンドとの連携がおそい）、利用するのが億劫になる
UIがそもそもわかりずらく、「？？？」となる機能が多数

正直古めのSaaSの製品でもそう感じる機会は多々ある。
そんななか本書を読んで上３つが、くつがえるパワーを持っていることが分かった。

SPAでの画面表示で1つのユースケースをシームレスに操作できる
Webブラウザの機能を最大限に発揮することでデータ検索や利用者のやりたいことを楽しく操作できる
UXを実現することを目的とした開発が実現できる

これらを読んで、より好奇心がくすぐられた。
（同時に検証しなければいけないテストが膨大な気がして少し絶望した、、、）

Part2：開発の基礎

つまづく理由

フロントエンドで躓く理由のJSの歴史的背景だったり、
環境だったりは始めた他の人にはつらいよなやっぱり。
フロントエンド周りのJSないし、Vueも含むいろんな書き方ができてしまうのは、学習するうえでかなりきついことを知った。
ブラウザAPIの全体像が、図解されていてわかりみが深い。
（いままでなんとなくだけ理解していた。。。）
また、JSライブラリの立ち位置がわかってなかったのでありがたい。
（分類までは知らなかった。。。）

JSフレームワーク(以下:JSFW)について

大トロな部分。
この本は学習者が陥りやすいところを章初めに書いてくれるから助かる。
「未知の概念」と「未経験の記述方法」っていう区分けは学習す中で観世字ていた。
ここからは自分の理解を書いておく。（間違っている可能性あり）

未知の概念
- 仮想DOM
  ⇒JSFWのコードと紐づいたDOM。
  仮想DOMで変更があったときに、DOMにも影響を与えらることで、DOMを考えずにブラウザ操作を実現できる
- データバインド
  ⇒ブラウザ上の値と、コード上の値と紐づけることができる
- コンポーネント
  ⇒画面を部品として切り分けることで、可読性や再利用性を高める
- 状態管理ライブラリ
  ⇒コンポーネント間の状態データ（component表示に必要なパラメータ）のやり取りを担う
- ルーター
  ⇒SPAでのアドレスをになう機能
- ビルド
  ⇒Webブラウザが利用できるように加工・最適化・出力を実施
未経験の記述方法
- 著者は「どのFWを推す！」みたいな発言がなく、読んでいて不快感がなかった。
  （ブログとかだと、個人の価値観が色濃く出てしまうので読んでて不安な気持ちになったりする。）
- React、Angular、Vueそれぞれの生い立ちが分かった。
  あとはひたすら書くべし！！！

Part3：技術の導入

いまは大事ではないので割愛

アクション

書いてて思った。
「アウトプット大変。。。（とくに技術系、、、）」
ただ、いいトレーニングになるなと思ったので、
つぎは「リーダブルコード」に関してまとめたいと思います。

また、「未知の概念」についてはさわりは理解できた。
あとは、コードをたくさん書いて「未経験の記述方法」を成熟させていく！！！