読んだ本の備忘録④「フロントエンドの知識地図」

フロントエンドを勉強しようと思って「フロントエンドの知識地図」を読んだ。

自分はずっとAI開発がメインだったのでweb開発をほとんどやったことがなく(せいぜいflask+nginxでデモを公開するぐらい)、いわゆるソフトウェアエンジニアリングというものに漠然と憧れを持っていた。

なのでweb開発できたらかっこいいなあとは思っていたものの、なかなか必要に迫られることもないので放置してきていた。

しかし最近はAIの発達によってコードを書くハードルが下がってきたというのと、生成AIを活用したアプリを作ってみようと思ったため一念発起して(?)フロントエンドを勉強しようと思い立った。

(AIによるプログラミング補助はGitHub copilotやcursorなどが有名だが、それに加えて作りたいイメージから直接コードを生成してくれる物もあったりする)

思い立ったのはいいものの、どこから始めて良いのか分からない、というかそもそも技術スタックとして何があって何ができるようになったら良いのか分からないので全体感を把握する必要があると考え、Xで評判が高かった本書を手に取った。

目標としては以下を理解することと位置付けた。

Node.jsやreact、TypeScriptなど「聞いたことあるワードたち」がどういった位置づけ・レイヤー(言語なのかフレームワークなのが技術的手法なのか)にあるのかを理解したい
webアプリを開発する際に必要となる工程の全体感を把握する

読んだ結果、まさに自分のような人のためにある本と感じた。

具体的には、以下のようなことが分かった。

Node.jsとNext.jsは全く別のレイヤーにある概念。Node.jsは実行環境で、 Next.jsはReactフレームワーク(ReactはJavaScriptのフレームワークなので、Next.jsはフレームワークのフレームワークということになる。DeepLearningで例えるとtensorflowがReact, kerasがNext.jsに対応するみたいな感じか)
TypeScriptはプログラミング言語なのでJavaScriptと同じレイヤーのイメージ
CSRとSSRはそれぞれクライアントサイドレンダリングとサーバーサイドレンダリングの意味で、レンダリング(HTMLファイルの生成)をブラウザ側で実施するかサーバー側で実施するかの違いがある。
E2Eテストを自動化するツールがあり、例えばPlaywrightを使うと複数のブラウザ(Chrome, Safariなど)、複数の画面幅(デスクトップ幅、モバイル幅)で動作するか・正常に表示されるかを自動でテストできる。また各ブラウザ、画面幅で表示させて結果のスクリーンショットを自動で記録できる。
脆弱性をつく攻撃手段として、XSSやSQLインジェクション、CSRFなどがある。コードの不備によってリスクは大きくなる。
GitHub上でキーボードで「.」を押すとエディタモードに切り替わり、VSCodeと同じ見た目のエディタをブラウザから起動できる。

またハンズオンで開発環境構築、コードの修正・整形、テスト、GitHub Actionsを用いたwebページ公開を体験することができた。

この本を読んだことで今まで「得体の知れないもの」だったフロントエンド開発が「頑張ればできそうなもの」になったのでとても有り難かった。次はReactチュートリアルなど、具体的な技術の学習に進みたい。

AIエンジニアの探求