【2021】フロントエンド・エンジニアが学習すべき本まとめ10選【初心者/入門者向け書籍の紹介】

こんにちわ！

今日は、これからフロントエンドエンジニアを目指している方や、現在フロントエンドエンジニアとして活動している方へ向けて、

おすすめの必読書籍を紹介していきます。

私は、フロントエンドエンジニアとして２年ほどReactを書いていますが、自分がフロントエンドエンジニアとして仕事をする上で、

とても叡智をいただいた本ですので、全てのフロントエンドの方におすすめです。

Webを支える技術 -HTTP、URI、HTML、そしてREST

Kindle版 ￥2,686   単行本（ソフトカバー）￥2,827

93個の評価

• 出版社 : 技術評論社 (2010/4/8)
• 発売日 : 2010/4/8
• 言語 : 日本語
• 単行本（ソフトカバー） : 400ページ

[maxbutton id=”1″ url=”https://amzn.to/3rFENfR” ]

こちらの本は、Webの歴史と技術的な概要について、分かりやすく詳しく書かれていて素晴らしいです。私はこの本を読んで、Webというものの偉大な発明は『リンク』や『URL』であるのだと学びました。

そして、フロントエンドエンジニアの方が日々バックエンドへデータを投げる際に使う、HTTPなどの成り立ちや仕組みが詳細に書かれていてとてもオススメです。

普段、よくわからないながらも、getとかpostとかしてデータをバックエンドからもらってきてませんか？根本理解を目指そう！

＊ユーザーの声

評判が良いので読んでみました。内容はwebのアーキテクチャスタイルであるREST、URI、HTTPメソッド、HTMLなどのハイパーメディアフォーマット、そしてwebサービスの設計について。「はじめに」で書いてあるように対象読者がシステム開発経験者で自分には少し難しく感じた。特に参考になったのはHTTPメソッドの使い分けについて。GET、POST、PUTなどの説明がわかりやすく、どのように使い分けて設計すればよいか大いに参考になると思った。こういったシステム開発の基礎になる部分は重要だと感じる一冊だった。

1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座

570個の評価

Kindle版 ￥2,237   単行本￥2,486

• 出版社 : SBクリエイティブ (2019/3/15)
• 発売日 : 2019/3/15
• 言語 : 日本語
• 本の長さ : 283ページ

[maxbutton id=”1″ url=”https://amzn.to/3a4vwrX” ]

こちらの本は、HTMLとCSSの基本を知識ゼロから学ぶことができる初心者向けの本です。

しかし、初心者向けだとしても、今までバックエンドでRailsとかを書いてきた人も是非オススメ出来ます。

バックエンドのおまけのHTMLとCSSではなく、HTMLとCSSが主役の世界がフロントエンドです。

いくらReactやVUEをやっても、結局CSSが分からなければ実装で詰まってしまうでしょう。

こちらの本は、レスポンシブ、Flexbox、CSSグリッドなどに対応してるので、ウェブデザインのエッセンシャルを学べます。

技術は年代を重ねる度に簡単になり、バックエンドはAI(数学)やクラウドコンピューティングが解決してしまうけど、人の心を数学(AI)で解決するのは途方も無く難しいので、フロントエンドで心を打つデザインを書ける方が、バックエンドの深いギークより今後年収は上がるでしょう #プログラミング初心者

— off.tokyo (@off_tokyo_) February 10, 2021

＊ユーザーの声

WEBページの仕組みから実際に作る過程まで
程よくまとまっている。
この本も良かったが、WEBデザイナーとして最先端を行き知識を体系立てて丁寧に説明するプロである著者のブログwebcreaterboxがこの本同等以上に素晴らしいから、興味ある記事を全部読んで実践出来る部分は実践すると良いだろう。私が読み込んだブログというのは非常に数少ない。
128人のお客様がこれが役に立ったと考えています

実践TypeScript

 

Kindle版 ￥3,416 単行本￥3,795

21個の評価

• 出版社 : マイナビ出版 (2019/6/26)
• 発売日 : 2019/6/26
• 言語 : 日本語

[maxbutton id=”1″ url=”https://amzn.to/3tKdpzw” ]

こちらの本は、TypeScriptの型システムのからフレームワーク利用の実践まで分かりやすく学べます。型定義のノウハウが凝縮されてるのでとてもオススメです。

フロントエンドは、最近ではReactやVueというJavaScriptのライブラリがよく使われてきていますが、JavaScriptに型をつけられるTypeScriptが結構多くの現場で採用されつつあります。

ですから、ReactでJavascriptを書けるだけだと、色々と現場で詰まってしまうと思います。こちらの本は、TypeScriptを実践的に活用できるように様々なことが書かれているので、今後、現場でTypeScriptを書かなきゃいけない人には必読かと思います。

＊ユーザーの声

TypeScriptを使ってReactやVueを書きたいという方々にお勧めの一冊かと。
特に2部を読んで下さい。2部に価値を見いだせない方にはオススメできません。

・ReactやVue（Nuxt）はある程度理解してる
・TypeScriptに関する知識はどちらでもいい（既にあった方がスムーズに読み進められるとは思います）
という方が対象だと思います。

他の書籍で色々勉強していたのですが
・情報が古すぎる
・TypeScriptの言語仕様だけしか無くて訳に立たない（ウェブで探せば出てくるレベルの情報）
・ReactやVueの入門の話しかない（しかもJavaScriptの情報しかない）
という感じで、世の中のフロントエンジニアはどうやってフレームワークにTypeScriptを導入する知識を習得しているのか不思議でしかたありませんでした。そんな中この問題を解決してくれたのがこの書籍でした。

フロントエンド開発入門 プロフェッショナルな開発ツールと設計・実装

 

Kindle版 ￥2,495  単行本￥3,080

8個の評価

• 出版社 : 秀和システム (2020/10/9)
• 発売日 : 2020/10/9
• 言語 : 日本語
• 単行本 : 280ページ

[maxbutton id=”1″ url=”https://amzn.to/3a32Rn6″ ]

こちらの本は、フロントエンドのアプリケーション開発において、

環境構築に必要な知識が詰まったツール解説の本です。フロントエンドの技術って、バックエンドよりも数多く更新されていく傾向があります。

この前までは、フロントエンドといえば、HTMLとCSSを書くだけで、

ある意味バックエンドのおまけみたいな印象でしたが、今ではよりリッチなアプリケーションUIを開発できる素晴らしい技術の発展があります。

BabelやwebpackやTypeScriptや、MochaやJestなどのテストツールまで、

幅広く学べるので、フロントエンドの使用技術を体系的に学びたい人はオススメです。

改訂新版JavaScript本格入門 ～モダンスタイルによる基礎から現場での応用まで

 

Kindle版 ￥3,278  大型本￥3,278

82個の評価

• 出版社 : 技術評論社 (2016/9/30)
• 発売日 : 2016/9/30
• 言語 : 日本語
• 本の長さ : 734ページ

[maxbutton id=”1″ url=”https://amzn.to/2NbMTxS” ]

こちらの本は、Javascriptを詳しく学びたい人におすすめの書籍です。「ECMAScript 2015」はJavascriptの定義が色々書かれているわけですが、

JSの基本からオブジェクト指向構文，Ajax，クライアントサイド開発まで，そしてテスト，ドキュメンテーション，コーディング規約など，現場で避けられない知識もしっかり押さえられているので、

JSの技術的な深い部分を学ぶのにオススメです。

＊ユーザーの声

他のプログラミング言語経験者で、JavaScriptはまっさらな状態だったものです。
これまでの言語経験を照らし合わせてなんとなくでプログラムを書いていたが、すぐに限界を感じ購入。
最初の基礎的な部分をさらっと流し、後半をしっかり読みました。
私の知りたかった情報がまとめられていて、非常に良い買い物だったと思います。

他のプログラミング言語経験者だけど、JavaScriptは書いたことがないという方にオススメします。
20人のお客様がこれが役に立ったと考えています

配色の教科書-歴史上の学者・アーティストに学ぶ「美しい配色」のしくみ

 

単行本￥3,520

29個の評価

• 出版社 : パイインターナショナル (2018/9/20)
• 発売日 : 2018/9/20
• 言語 : 日本語
• 単行本（ソフトカバー） : 304ページ

[maxbutton id=”1″ url=”https://amzn.to/3cQc1VU” ]

こちらの本は、プログラミングとは少し違いますが、デザインの配色を学べる本になっております。

先ほども少し触れましたが、僕はフロントエンドエンジニアとしてキャリアを積み上げるメリットは、

AIでも解決できない人の心が関わってくる仕事だと思ってるからです。

配色やデザインの微妙な感覚などは、AIのような数学の力を持ってしても解決するのは途方も無く難しいのです。

ですから、調和のようなコンピューターにとって曖昧な表現を、エンジニアが分かることが、大きな力になると思うのです。

＊ユーザーの声

絵画にしろ、額縁にしろ、何れにしても「色」とは切っても切れない関係があります。
わたし自身も幾つかの色彩の本を読んでみましたが、なかなかシックリとは来ませんでした。
先日Book 1stに立ち寄ってみたところ１冊の本が目に留まり、そのタイトルは「配色の教科書」です。
色彩文化研究会が著者で、パイ　インターナショナルが販売元です。教科書というタイトルから軽く構えて一読してまた、本棚に戻そうとしたところ、英字のタイトルは[The History of Color Harmony Theory]とあります。直訳すると「配色理論の歴史」です。もう一度本棚から取り出して中身を注意深く目を通してみたところ、その内容があまりにも素晴らしく、アリストテレスから始まる「色の調和」について様々な方達の理論の紹介が展開されています。私たちの周囲には「色」にまつわる様々な情報が溢れていますが、その情報がどのようにして理論として発見されて、展開されてきたかが、丁寧に紹介されています。内容はかなり高度な部分もありますが、色彩に関わる方は必携だと思います。すぐに購入してしまいました。私もかなりの衝撃を受けた本です。まだ、大きな本屋さんに置いていると思いますので、是非手にとってみて下さい。

見てわかる、迷わず決まる配色アイデア 3色だけでセンスのいい色

Kindle版 ￥1,782  単行本￥1,980

305個の評価

• 出版社 : インプレス (2020/6/12)
• 発売日 : 2020/6/12
• 言語 : 日本語
• 本の長さ : 224ページ

[maxbutton id=”1″ url=”https://amzn.to/36TCpdt” ]

こちらの本も、配色の本と似ていて、色の組み合わせのノウハウが詰まっているので、センスのよい色の組み合わせを選ぶスキルが身につきます。

デザインのセンスに自信がない人でもまとめやすい「3色」に限定され、デザインがおしゃれに決まる配色アイデアを収録されています。

＊ユーザーの声

他の方のレビューにもありますが、色の勉強用というよりは鑑賞に向いている本になります。
鑑賞目的の購入だったので個人的には割と満足です。

Web APIの設計

Kindle版 ￥3,762   単行本￥4,180

11個の評価

• 出版社 : 翔泳社; 第1版 (2020/8/26)
• 発売日 : 2020/8/26
• 本の長さ : 699ページ
• [maxbutton id=”1″ url=”https://amzn.to/36Z5MLB” ]

こちらの本は、Web APIの設計に関して学べる本です。

フロントエンドエンジニアは、画面だけを見ていくので、このようなバックエンドのAPIの知識は必要か？と思うかもしれません。

しかし、例えばフロントからPOSTやPUTでデータを入れるとき、正しい形でデータを投げないと、データがうまく入らなかったりします。

ですから、バックエンドがこういう形でAPIを受け付けているよという知識は分かる必要があるのです。

こちらの本では、実際のSNSはや決済システムを参考に、API設計の勘所がつかめるようになります。

＊ユーザーの声

本書は図が適宜使われていてAPI設計の概念をできるだけ読者に伝わるようにと工夫が凝らされている。
一方で、その具体例がしっくり来ないからか、もしくは和訳が硬いせいなのか、すんなり頭に入って来なかった。
（オーライリーのWeb API The Good Partsほどの読みやすさは無かった印象）

ネコミミでもわかるフロントエンド開発環境構築

こちらの本は、ReactやVue.jsなどを使った開発において、環境構築の分かりやすい理解が色々と解説されています。

BabelやWebpackの設定や、ESLint、Flow、Jestなどの導入方法を詳しく知りたい方はオススメです。

＊ユーザーの声

順に進めていけばよく分からない状態からでも環境が構築出来る。
つまづきそうなポイントなどのフォローが有るとなお良かった

React開発　現場の教科書

こちらの本は、JavaScriptライブラリReact ＋ Atomic Designの導入によるコンポーネントの設計から実装までが学べる初心者や入門者向けの本になります。

現場で使える、実務に役立つ知識とノウハウを習得したいエンジニアのための、React実践書です。

Reactを使ったフロントエンドの開発フローなど、初心者の方にオススメです。

＊ユーザーの声

まず、この本はいわゆる初心者向けではないです。
普通に React を勉強されたい方は他の入門書を買ったほうが良いでしょう。

この本は、少なくとも以下のことが学べます。
・React を使った Atomic design の設計・開発手法
・Webpack を使ったビルド構築
・Redux による状態管理

これらは、実際の現場で使われています。
特に Webpack を使ったビルド構築に触れられているのはさすがだと思いました。
こういう技術書にはなかなか無いので、現場レベルのスキルを身に着けたい人にはおすすめです。

これからはじめるVue.js実践入門

Kindle版 ￥3,346   単行本￥3,718

43個の評価

• 出版社 : SBクリエイティブ (2019/8/22)
• 発売日 : 2019/8/22
• 言語 : 日本語
• 単行本 : 468ページ

[maxbutton id=”1″ url=”https://amzn.to/3jyIzov” ]

こちらの本は、Vue.jsの初心者/入門者向けの解説本ですね。

先ほど、Reactの本の解説をしましたが、現在フロントエンドの開発ライブラリは、二強っぽくなっておりまして、それがReactとVueということになります。

Vueは、Webアプリのビュー(見た目)の部分に特化したシンプルなフレームワークで、Reactとは違い、既存のHTMLなどの形によく馴染みます。

だから既存のアプリに後乗せで導入したり、徐々に適用範囲を拡大したりすることが手軽に行えます。

シンプルな分、他のフレームワークと比べて学習コストが低く、HTMLとJavaScriptが一通りわかる人ならコードを理解するのも簡単です。

本書では、Vue.jsの中核である、ページを構成するUI部品「コンポーネント」をしっかりと解説し、さらには本格的なアプリ開発で必要となる要素までを網羅的に解説されているのでオススメです

＊ユーザーの声

JSを一通りかじっている方であれば、すんなり受け入れられる内容です。

ハマりどころへの注釈があるのも親切で、一つ一つの解説も分かりやすいと感じました。

特に、独学で少しVueを触っている場合などは、補足内容に納得出来る部分が多いです。

ここ暫く出版されていた入門書等との違いとして、Vue.cli あたりの情報も親切に書かれており、この１冊で Vue.js 本来の能力を知ることが出来、学習がとても楽しくなると思います。