CODE 独学/転職のあれこれ 独学ノウハウ

【脱初心者】フロントエンドおすすめ体系的に学べる書籍9選

フロントエンドのスキルを伸ばしたいんだけど何かいい教材ないかなー?

WebサイトやLPの実装を主に行うフロントエンドエンジニア。
テキストエディタがあればササっと実装ができるので独学から始められる方が多いと思います。
不明点があればググってコピペで解消すること方も多いのではないでしょうか?

しかしググってコピペだけでは知識としてなかなか定着しません。
ちゃんと知識として定着させるには本(参考書や技術書)を読んで体系立てて”学習”することが必要です。

書籍の情報はネットの情報と比べて一般的に情報の信頼性が高いって考えられているし、なんとなく安心だよね😁


とは言っても書店の一角を埋め尽くすほどの教材のどれを見ればいいのかわからない人も多くいると思います。
そこで本記事では私自身が独学の時に使っていたものや部下の育成の際に使ってよかった教材を紹介します。

では紹介していきます。

HTML / CSSの書籍 4選

HTMLとCSSはセットとして本に組み込まれていることが多いのでここでもまとめて紹介します。

HTML5プロフェッショナル認定試験 レベル1 対策テキスト&問題集

HTML5プロフェッショナル認定試験レベル1

HTML5プロフェッショナル認定試験の認定教材です。
試験に合格するとHTML5技術者認定資格が得られますが、個人的にはそのような資格は不要と思っています。(資格持ってる?とか聞かれたことが無いです)

この教材はレベル1と記載されていますが、一応伝えておきますとレベル1が「マルチデバイスに対応したWebコンテンツをHTML5を使ってデザイン・作成できる」レベルで、レベル2は「最新のAPIを使ってWebアプリケーションを設計・開発できる」と2段階に分けられています。

レベル1だけでも十分HTML・CSSを学ぶことができます。
内容自体は“プロフェッショナル認定”というだけあり全てのHTMLタグ、CSSプロパティについて解説されています。
HTML/CSSオタクになりたいって方にはおすすめです。
私自身は4年前に購入したのですが、現在も辞書のように使っています。

HTML5プロフェッショナル認定試験レベル1

HTML5 プロフェッショナル認定試験レベル1対策テキスト&問題集Ver2.0対応版 

Amazonで探す

楽天で探す


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

書店に行けば必ず置いてありAmazonの中でも常に上位に上がってくる名著ですね。
Amazonでのレビュー数が圧倒的に高いです。
調べてみると他の参考書はレビュー数1桁から300ぐらいですが、本書は1800を超えています🙄
内容的にはHTML/CSSを1から解説するものではないのである程度基礎がある方に向いています。
最後にサンプルでカフェのサイト(4ページ)を制作するので様々なレイアウトの実装方法を学べます。
私は前職の職場で新人の課題図書として使っていました。

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

Amazonで探す

楽天で探す


Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

なんとなくCSSを使えるようになってきたぞ!という方におすすめです。
ランダムにCSSを書けば公開後に修正や更新が入った時に苦しみます。
本書はCSSをちゃんと設計して書けるようにコンポーネント設計について丁寧に解説しています。
更新性の高いサイトの実現に役立つ一冊です。
前職では、開発時のCSS設計ルールをこの本を元に作っていました。

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

Amazonで探す

楽天で探す


Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ

この本もCSSを使えるようになった方におすすめです。
CSSを効率的に書くためのSass。もはやSassを使わないことの方が少なく、フロントエンドならマストで学ばなければならない分野になっています。
そんなSassの全てを解説した本書。とりあえずこの一冊があれば困った時に逆引きとしても使えます。
この本も前職の職場で課題図書として使っていました。

Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ

Amazonで探す

楽天で探す


JavaScriptの書籍 3選

HTML /CSSの後に学習を始める方が多いJavaScript(以降JS)。
JSを始めるとプログラミングの考え方が必要になってきます。そしてここらへんから挫折する人が多い印象です😓
だからこそちゃんとした教材で学ぶべきだと思います。

初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発

js textbook

JSの基礎をちゃんと理解したい人にはいい本です。
サンプルサイトを作っていくスタイルではなく、JSを一つのプログラミング言語としてしっかり解説しています。
大学の教科書っぽいとこがあり体系立てて説明がされていてかなりの良本ですがポップさはないです😂
イラストがないと無理!と言う方には向いてないです。知りたいことが出てきたら逆引きとして使うといいと思います。

js textbook

初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発

Amazonで探す

楽天で探す


確かな力が身につくJavaScript「超」入門 第2版

JSって何ができるの?ってところから学びたい人におすすめです。
私もこの本からJSの勉強スタートさせました。
JSの基礎内容はもちろん実装のサンプルもゲームを作ったりと目に見えるアウトプットがあるので楽しみながら学べる一冊です。

確かな力が身につくJavaScript「超」入門 第2版

Amazonで探す

楽天で探す


jQuery最高の教科書

「jQueryの学習本といえばこれ」と先輩に渡された本です。
他の言語は複数の本を購入して勉強していたのですが、jQueryはこの一冊で全てを学びました。
それほど中身が充実していて私の場合はjQueryで言えば実務で使う内容が全てこの一冊でカバーできました。
サンプルもスライダー、ホバーエフェクト、追従ヘッダーやドロップダウンなど実際のサイトでよく見る実装ばかりなので楽しみながら学べます。

確かな力が身につくJavaScript「超」入門 第2版

Amazonで探す

楽天で探す


Webの仕組みがわかる書籍2選

ここからはWebに関わる人材に基礎知識となる書籍を紹介します。
教養として読んでもらうといいと思います。
個人の経験ですがこの辺の情報はネットは曖昧な情報多く信頼性に欠けるのですが、書籍だと信頼できます。

インターネット技術の絵本

目に見えないインターネットの裏側の世界だからこそ”絵本”にまで落とし込んでわかりやすく解説してくれています。
インターネットの基礎、Web・メールの仕組み、ネットワーク構成、サーバーサイド技術やセキュリティに関してまでもイラストでわかりやすく丁寧に解説しています。これらの内容を学ぶのに最初の一冊としては良本です。
小さい書店には置いていない可能性があるのであらかじめ要確認です😅

確かな力が身につくJavaScript「超」入門 第2版

Amazonで探す

楽天で探す


インターネット技術の絵本

「インターネット技術の絵本」よりWebの部分い焦点を絞っており、深く狭い内容になっています。
Web技術はもちろんHTTPの通信の仕組み、Webアプリケーションの基本、Webシステムの構築と運用について詳細に書かれています。
この本もイラストでわかりやすいので前提知識がなくても理解できる内容です。

確かな力が身につくJavaScript「超」入門 第2版

Amazonで探す

楽天で探す


まとめ

本記事はフロントエンドにおすすめの書籍9冊について書きました。
どれも書店で並んでいますしAmazonのレビューも高いものです。

私自身も当時使っていたものから、現在でも使っているものもあり満足度の高いものばかりです。
みなさんの習熟度に合わせて、最適な書籍を見つけてみてください。

では今回は以上です!
ほな🙌🏻

-CODE, 独学/転職のあれこれ, 独学ノウハウ