「フロントエンド開発入門」を読んだ話
雰囲気でプログラムを書いてきたのでちゃんとフロントエンドの勉強をせねば…と思って読んだ。とても良い本だったので紹介したい。
自分のレベル
- プログラミングを始めて 1 年くらい
- TypeScript とか React とか Node.js とかその辺のやつを使うことが多い
- フロントエンドのツール群については名前を聞いたことあるレベル
- 大抵は既に導入されておりその恩恵を享受しているが、自分で設定を触ったことは無い
本書の概要
全体で三段階に分かれている。
第一部: 導入編（1 章〜4 章）
現在「フロントエンド」と呼ばれている領域の歴史から始まり、どのようなスキルが求められておりプロジェクト内でどういう働き方をするのかを取り上げる。
個人的に素晴らしいと思ったのは第三章の「フロントエンドにおける一般的なツール群」で、 Node.js 周辺のツールやフレームワークについて簡単に基礎の基礎の説明がされていてよかった。
- Babel
- webpack
- TypeScript
- Vue.js, React, Angular
- クライアントサイド MVC と Flux
- Redux
- CSS と CSS-in-JS
- フォーマッターとリンター Prettier と ESLint
- ユニットテスト Mocha, Jest, Karma
これらの一つ一つを解説するとそれなりの分量になってしまうが、80 ページくらいの間に「何をしてくれるツールなのか、なぜ求められているのか、最初の最初はこうやって使う」という紹介が書かれていて、使い始める前に読む文章として分かりやすいと思った。
実際に使うときは公式ドキュメントを読めばいいので、まずこういう書籍でまとめて全体像に触れるのが良さそうだ。一つ一つを習得しようとすると時間かかりそうなので、まずは感覚を掴むのが大事。
第二部: 実践編（5 章〜7 章）
jQuery で作られた簡単な書籍のレビューサイトを TypeScript + React で置き換えながら、ユニットテストや CI/CD の導入、パフォーマンスの計測と改善を進めていく。
第一部で簡単なツールの使い方を知って、第二部でそれを実践していくという内容になっている。サンプルアプリは GitHub で公開されている。
https://github.com/n05-frontend/shuwa-frontend-book-app
これを clone してきて docker-compose で環境構築し、章ごとに branch を切り替えながら進めることで自分の手元で本と同じ環境を動かせる。
第三部: 応用編（8 章〜9 章）
Google アナリティクスの導入やユーザーモニタリング、エラーイベントの監視（Sentry）、チームやコミュニティへの貢献方法について取り上げている。
Google アナリティクスは（説明不要かもしれないが）特定のイベントを特定のタイミングで送ることでアクセス解析をするためのツール。イベントの定義やアナリティクスに送るタイミングは開発者の側でカスタマイズできる。
また、アプリケーションが付加価値を生み続けるにはユーザー側で期待通りに動作しなければならないが、ときにはエラーなどで画面が描画されないということがあるかもしれない。しかし、ブラウザ等のクライアント側の環境はユーザーによって異なる。
Sentry はエラーイベントを監視、トラッキングするための SDK + SaaS で、ブラウザで起きたエラーや例外を捕捉してそれらを緊急度で分類したり一定のしきい値を設けてアラートを出したりできる。
下記の紹介ページの 1 分程度の動画を見ると雰囲気がつかめると思う。
特によかったところ
全体で 250 ページくらいで、適度な分量にフロントエンドのよく使いそうなツールや考え方が詰め込まれててよかった。
自分はフロントエンド初心者だけど、知らなければならないと感じることがたくさんある。この書籍は「そもそもこいつは何のためにあるもので何処から来たのか」が 1 冊にまとまっていてとても分かりやすかったので、自分のような新人はまずこの本で全体像に触れてから各種の公式ドキュメントを読んでいくのがよさそうだと思った。