最近買った本【フロントエンドの知識地図】を読み終わったので、感想を記載したいと思います。
ちなみにこの本、たまたまAmazonで見かけて面白そうだったので予約購入していたのですが、買ったのをすっかり忘れており、届いたときビックリしました。
本の概要(出版社より抜粋)
フロントエンド開発の範囲は広く,習得すべき技術は多種多様です。
HTML・CSS・JavaScriptはフロントエンドエンジニアにとって共通言語ではあるものの,Webサイトを制作するのか,Webアプリケーションを開発するのか,その違いによって採用すべき技術は全く異なります。それは,Webの多様性に対して技術的な正解がひとつではないことを示しています。
本書はフロントエンドの技術を俯瞰し,「エンジニアが共通して知っておくべき技術はなにか」,「(多種多様なエンジニアにとって)どの分野にフォーカスしてスキルアップを目指すべきか」を示すことを目的としています。開発現場でのワークフローを疑似体験したり,各種技術の概要とコードに触れることで理解の促進を目指します。
「フロントエンド技術は移り変わりが激しい」と言われてきました。
しかし,その状況は変わりつつあります。2010年代はHTML5やECMAScript 2015の過渡期にあり,フロントエンドの技術は大きく変化しました。現在は,ツールやフレームワークの変化はあれど,開発における基本的な考え方はそれほど変化していません。成熟したフロントエンドの技術を,本書を通してこのタイミングでキャッチアップしてほしいと考えています。
また,「未経験のエンジニアにとって,フロントエンド業界に入ったときに学んでほしいこと」をこの一冊で網羅できることを筆者は裏テーマとして設定しました。初心者の方も,すでに業界で取り組んでいるエンジニアの方にとっても,知識のボトムアップに繋がる一冊を目指します。
こんな方におすすめ
- フロントエンド開発にこれから携わりたい方
- フロントエンド開発に携わって1〜2年の方
- Webサイト制作に携わっていて,フロントエンド全般について知りたい方
- Webサイト制作,Webアプリケーション開発それぞれの知識や違いを知りたい方
目次
本の構成はこのようになっており、総ページ数は、索引などを含めても343ページです。
第1章 フロントエンド開発の全体像
1.1 フロントエンドとは何か
1.2 制作・開発の進め方
1.3 HTMLとCSSとJavaScript
第2章 フロントエンド開発環境を用意しよう
2.1 Node.jsの使い方
2.2 Node.jsの役割
2.3 エディタ・IDE
2.4 開発環境の導入方法
第3章 現場の開発を体験してみよう
3.1 実践!フロントエンド開発
第4章 標準仕様の動向
4.1 Web標準の仕様
4.2 ブラウザの互換性
第5章 より良い開発のための次の一歩
5.1 JavaScriptフレームワーク
5.2 CSSの周辺技術
5.3 CSSフレームワーク
5.4 TypeScript.
5.5 Web API
5.6 オールインワンなフレームワーク
5.7 WebGL
第6章 品質を向上させるための取り組み
6.1 デザインツールと画像形式
6.2 アクセシビリティ
6.3 Webブラウザの開発者ツール
6.4 Lighthouse
6.5 コード品質の向上
6.6 テスト
6.7 CI/CD
6.8 セキュリティ
本の感想
早速読んだ感想に移ります。
フロントエンドの幅広い知識が学べる
私は元々コーダーでしたが、その時はとりあえずHTMLとCSS、JavaScript、後はワードプレスといった知識があればとりあえずは大丈夫でした。
ですが、そこからフロントエンドエンジニアを目指すならば、
・node.jsやnpmtを使用したパッケージ管理やプロジェクト作成
・APIを利用したWEBアプリケーションの作成
・JavaScriptの拡張言語であるTypeScriptやフレームワーク
など様々な知識が必要になってきます。
ですが、それを個別で学ぼうとすると、インターネットで必要な情報が掛かれているページを探したり、また別の書籍が必要だったり・・・
そもそも何を学べばフロントエンドエンジニアになれるのかが分からないと思います。
そこでこの本が役に立ちます。
フロントエンドエンジニアのチーム内での役割から、JavaScriptのフレームワーク、さらにはChromeの検証ツールの使い方まで、多くのことを網羅しており、フロントエンドエンジニアに最低限必要な知識を1冊でまとめてくれています。
この本を一冊学ぶことでコーダーから1歩ステップアップできるでしょう。
私はこれまで、CSSフレームワークやWebGLについて触れてこなかったので、ほとんど分かっていませんでしたが、本を読んで最低限しっておく知識が得られました。
自分が何の知識を知っていて、何を理解していないのか。
ということが分かります。
それが分かるだけでも次に何をやるべきかが見えてきますね。
まさしくタイトル通り「フロントエンドの知識地図」です。
意外に知らない豆知識みたいなものを学べた
繰り返しになりますが、この本はフロントエンドエンジニアに必要な知識を網羅している本です。
そのため、もちろんHTMLやCSS,chromeの検証ツールなど、コーダーの範囲の知識も含まれています。
正直その当たりは今更見る必要もないかなと、パラ見していましたが、
「あれ? 何この機能 俺知らんぞ」
みたいなことが結構ありました。
実は知らなかった知識や設定などを知れて、これも良かったポイントです。
例をあげると、「えっ 検証ツールって日本語できたのか(泣)」ということがありました。
3年WEB制作に携わって、chromeの検証ツールが日本語できることを初めて知りました(笑)
フルカラーで読みやすく、ページ数も適度
専門書って白黒の物が多くないですか?
この本は全編フルカラーになっております。
「なんだそんなことかよ」と思われるかもしれませんが、本の読みやすさって意外と重要だと思っています。
内容が難しいだけに、読みやすくなるフルカラーはありがたいです。
(でもその分少し本の値段高いような。。)
また、ページ数は343ページと適度なページ数でサクッと読めます。
私は3日ほどで読み切りましたが、早い人だったら1日で読み切れるでしょう。
空いた暇な時間で読み直すのも良さそうです。
一つ一つの内容は浅め
幅広い知識が学べる半面、それぞれの項目の内容は浅いです。
基礎的な部分の説明や解説はありますが、この続きはこちらの公式ドキュメントをご覧ください。
と説明が終わる事が多いです。
ただこれに関しては、それぞれの項目で一つの本が完成するような内容を取り扱っているため仕方のない部分です。
まずはこの本で、自分の知識のない部分や仕事で必要になる技術を学ぶ→そこから必要な知識を別の専門書で学ぶっていう使い方が良さそうです。
まとめ
以上 フロントエンドの知識地図の感想でした。
フロントエンドに関する幅広い知識をサクッと学べる良書でした。
ただ、この本だけでは、深い知識は学べないので、フロントエンドになりたいコーダーやデザイナーの方、フロントエンドエンジニアになって日の浅い方などにおススメの本でした。
最新情報を学びたい方はこちらもオススメ!
無料の生放送授業で、業界トップレベルの講師に直接質問ができます。
様々な動画講座があるのでオススメ!