筆者は2023年頃に未経験からWeb制作会社に転職し、主にフロントエンドの領域で仕事をしています。そんな筆者がHTML/CSSコーディング、JavaScriptを用いたフロントエンド開発や、コンピューター関連・プログラミング、デザインの本などを紹介します！駆け出しのコーダーやエンジニア、スキルアップを目指す方にもおすすめなのでぜひ参考にしてみてください！
この記事では読んで良かったと思った本に出会ったら随時追加していく予定です。
HTML/CSSでWeb制作の基本を学ぶ
まずはWeb制作の基本のHTML/CSSのおすすめ本を紹介します。
1冊ですべて身につくHTML & CSSとWebデザイン入門講座
全くの未経験でHTML/CSSを初めて触るって人の最初の1冊としておすすめです！
基本的なHTMLタグの使い方から始まり、CSSを使ったスタイリング、レイアウトの作成方法、画像やフォントの最適な使用方法など、Webページ制作に必要な全ての要素を包括的に解説していて、HTML/CSSの基本が体系的に学ぶことができます！
まずは入門としてこの1冊でHTML/CSSの基礎を学び、Webサイトがどのように作られているのかを知ってみてはいかがでしょうか？
プロの「引き出し」を増やす HTML+CSSコーディングの強化書
HTML/CSSの基礎を学んだら、次はこの本でより実践的なコーディングのスキルを学びましょう！
本書は中級者向けの本となっていまして、筆者もこの本を読んでからWebサイト制作の「引き出し」が増えたと感じました。
Web制作ではデザインカンプ通りのコーディングができることが大事です。そのためには、ひたすら数をこなしてデザインを見ただけで脳内でコーディングできるようになる必要があります。本書では実務でよく出会うパターンをサンプルでたくさん紹介しているので、実際にコーディングしてみることでスキルが身につきます。また、解説も分かりやすいので何回か読むことで自分の力になることができるでしょう。
サンプルコードのCSSはBEM記法で書かれていてCSS設計の考え方も学ぶことができたり、アクセシビリティに配慮したマークアップの章もあるので、まさにレベルアップしたい中級者の方におすすめの一冊です！
Every Layout-モジュラーなレスポンシブデザインを実現するCSS設計論
CSSは誰でも簡単に書ける一方で、何も考えずに書いていると保守性など管理し続けるのが難しいという問題があります。そのため制作者がCSS設計などを使い節度を持って書くことが重要ですが、その前にCSSの柔軟な性質を活用する方法を知ることが大事です。
本書は「レイアウトプリミティブ」というアプローチを提案しています。これは「メディアクエリの使用を意図的に避ける」というもので、ビューポートでのレイアウトの切り替えではなくコンテンツのサイズに応じて最適なレイアウトを提供することを目指しています。これを利用することで、レイアウトのためのコードを削減でき、コードの再利用性も高めることができるでしょう。
ワンランク上のCSSの活用方法を学びたい方はぜひ一読をおすすめします！
いずれこのブログでも本書の内容の実践の記事も書きたいと思います！
作って学ぶ HTML+CSSグリッドレイアウト
本書はCSSグリッドについてまるまる1冊を使って学べる書籍になります。
CSSで横並びのレイアウトを組む際に皆さんはどのようにしていますか？CSSグリッドを「難しい」と敬遠してflexboxを使っている方も多いのではないでしょうか？そんな方にCSSグリッドの威力を知ってもらいたいので読んで欲しい1冊になります！
本書では前半でCSSグリッドが誕生した背景を説明し、CSSグリッドの基本の使い方を学習し、後半ではよくあるUIパーツやレイアウトをCSSグリッドで実装する例を紹介しています。また、CSSグリッドでのよくあるトラブルなども記載してますので手元に置いとくと良いでしょう！
CSSグリッドに苦手意識があって使ってないなーという方は、ぜひこの本でCSSグリッドを学んでみてはいかがでしょうか？
JavaScriptでフロントエンド開発を学ぶ
HTML/CSSでWeb制作の基本を学んだら、JavaScriptでフロントエンド開発を学びましょう。
JavaScriptができるようになると、Web制作の幅が広がるのでぜひ学習してみてください！
1冊ですべて身につくJavaScript入門講座
HTML/CSSの項で最初に紹介したManaさんのJavaScriptの入門書です。駆け出しの頃はWebサイトでJavaScriptがどのように使われているか分からない人も多いかと思います。本書ではJavaScriptの言語仕様に関しては詳しくないですが、Web制作で使われるJavaScriptでのアニメーションについて動きを確認しながら勉強することができます。
また、Web制作でのJavaScriptについて書かれた本だとjQueryを使った例が多いですが、本書ではバニラJSで書かれているので素のJavaScriptの書き方を学ぶことができます。具体的にはスクロール連動にはIntersection Observerが、アニメーションにはWeb Animations APIを使って解説しています。実際の現場では、アニメーションはGSAPなどのライブラリを使うことが多いです。本書で素のJavaScriptでアニメーションを書く方法とそのままだと面倒なのを知ることで、ライブラリのありがたみを理解できるでしょう！
まったくの初心者の方はぜひこの本でWeb制作におけるJavaScriptを学んでみてください！
独習JavaScript 新版
JavaScriptの独習シリーズです。前の本ではWeb制作に特化した本だったため、JavaScriptの詳しい言語仕様について知りたい方におすすめの1冊になります。
現代のモダンなフロントエンド環境ではReactやVueなどのフレームワークを使って開発をするかと思いますが、ReactやVueなどを触る前にJavaScriptの基礎的な部分を学ぶことが大事でしょう。本書は実際に動かして試すような書籍ではなく、教科書的に手元に置いておくといい1冊になります。本書で一度しっかりJavaScriptを学んでみてはいかがでしょうか？
作って学ぶ Next.js/React Webサイト構築
「エンジニアなら自分のブログを作るべし」との言葉がありますが、自分で1からブログを作ることは勉強にもなるし愛着が湧くのでおすすめです。本書はNext.jsとヘッドレスCMSとしてmicroCMSを使ってブログを作る方法を紹介しています。
Next.jsの本ではありますが、Reactの環境が簡単に整い、サイトを構築できるのでわざわざReactを勉強するのではなく、最初からNext.jsを使いましょうって感じなので、React・Next.jsの初心者でも安心して読めると思います。また、本書はApp Routerの前のPage Router時代に出た本ですが、付録で本書をApp Routerで書く解説もあるので問題なくブログを作り切ることができるでしょう。
著者がHTML/CSSの本をたくさん書かれていることもあり、特にCSSに関してはモダンな書き方を学べるのも一押しのポイントです！
ぜひこの本を読んで自分だけのブログを作ってみてはいかがでしょうか？
実践Next.js —— App Routerで進化するWebアプリ開発 (エンジニア選書)
こちらの書籍は以前、この記事でブログにも紹介しました！
本でNext.jsのApp Routerを勉強したい方におすすめの1冊になります！
バックエンドも学んでフルスタックに挑戦する
Next.jsの例が顕著ですが、フロントとバックエンドを両方開発できるフルスタックなフレームワークが流行っています。フロントエンドエンジニアでもバックエンドの知識を身につけることは決して無駄ではないので、余力がある方はぜひバックエンドの知識も身につけてみてください！筆者もまだまだ勉強中ですが、読んで良かった本を以下に紹介したいと思います。
実装で学ぶフルスタックWeb開発 エンジニアの視野と知識を広げる「一気通貫」型ハンズオン
本書ではバックエンドとしてDjangoを、フロントエンドにNext.jsを使ってハンズオンでフルスタックWeb開発の全体像を学ぶことができます。なかなかフルスタックに解説する書籍は少ないので貴重な1冊になります。
筆者はフロントエンドなので、バックエンドが何をしているのかが分からなかったのですが、ハンズオンでログイン機能付きの管理システムを作ることで、モダンなWeb開発の全体像を学ぶことができました。特にフロントエンドとバックエンドの連携やデータベースの構造、ログイン機能の実装を学べました。
どうしてもこの内容を1冊にまとめることで、言語に関しての説明は少なめではありますが、自分で調べることができ、フルスタックWeb開発の全体像を知りたい人にはおすすめなので、ぜひ読んでみてください！
独習PHP 第4版
独習シリーズのPHP版になります。最新のPHP8に対応しています。
独習シリーズなので難しい本と思われますが、フロントエンドでJavaScriptを書いていたりWordPressでPHPを触っている人ですたら、それなりに読めると思います。
独学でPHPを一から学びたい・しっかり基礎固めをしたいという方におすすめなので手元に置いておくと良いでしょう！
SQL 第2版: ゼロからはじめるデータベース操作
フロントしか書いていない人は、SQLを書く機会がないかもしれません。しかし、バックエンドを書く場合はデータベースを操作するSQLの知識が必要になってきます。本書はSQLを知らない人でも分かりやすく解説してくれるので、初心者の方が最初に読むのにおすすめの1冊になります。
SQLに初めて触れる人向けの本なので、パフォーマンスの話やデータベースの設計についてはあまり触れられていませんが、SQLの基本を体系立てて学習することができるのでSQL初心者の方はぜひ読んでみてください！
スッキリわかるSQL入門 第4版 ドリル256問付き！ (スッキリわかる入門シリーズ)
SQLを覚えるためには、ひたすらSQLの問題を解くのが一番です。本書はSQLの問題を256問用意してくれているので、問題を解くことでSQLの知識を身につけることができます。
また、環境も「dokoQL」というWebサービスを利用しますので、すぐにSQLを試すことができます。
先程の「ゼロからはじめるデータベース操作」と合わせて読むことで、SQLの基本の底上げができるのでおすすめです！
コンピューター関連・プログラミングの本
フロントエンドエンジニアとしてのスキルを高めるためには、コンピューター関連・一般のプログラミングの知識も必要になってきます。以下に読んで良かった本を紹介します。
改訂新版 良いコード／悪いコードで学ぶ設計入門 ―保守しやすい 成長し続けるコードの書き方
保守しやすい良いコードを書きたいと思ったことはありませんか？本書は悪いコードでアンチパターンを最初に知り、その後に良いコード・良い設計を学ぶという構成になっている書籍です。
本書を初学者が読むには難しいかも知れませんが、良質なコードを書くために必要な知識が学べるので、本書を何度も読み返してみてください。
Good Code, Bad Code ～持続可能な開発のためのソフトウェアエンジニア的思考
良いコードの書き方みたいな本は「リーダブルコード」が有名ですが、「リーダブルコード」は10年以上前の本なので今読むのならこちらの本を読むのが良いでしょう。
堅牢で信頼性が⾼く、保守しやすく、チームメンバーが理解や適応しやすいコードを作成するための概念と実用的な⼿法を、Googleでテックリードを務める著者が解説しています。本書も先程の「良いコード／悪いコードで学ぶ設計入門」のように、悪いコードから良いコードを学ぶという構成になっています。
より良いコードを書きたいという方は、こちらの本もぜひ読んでみてください！
Webを支える技術 -HTTP、URI、HTML、そしてREST
HTTP,URI,HTML,RESTなどのWebの基礎知識を解説している本となります。Webエンジニアとして働くにあたってWebの基礎知識は必須です。最初にHTTP,URI,HTML,RESTなどの仕様の歴史や設計思想を解説されており学ぶことができます。
HTTP,URI,HTML,RESTなどについてまだ理解できていないなと思う方は、はじめの1冊としてぜひこの本から学んでみることをおすすめします！
［作って学ぶ］ブラウザのしくみ──HTTP、HTML、CSS、JavaScriptの裏側
本書はRustを用いて自作のWebブラウザを作ることで、ブラウザのしくみを学ぶ本です。HTMLだけではなく一部だけですが、CSSによる装飾やJavaScriptによるコードの実行などもこのブラウザで作ることができます。
Rustで書かれてますが、理解しやすく書かれているので他の言語を触ったことがある人であれば問題なく読めると思います。私も本書で初めてRustに触れて今後Rustの勉強をしたいと思いました。
とはいえ、ブラウザを自作するので難易度は高く私もまだまだ理解できていない部分もありますが、実際にHTML、CSS、JavaScriptが動くブラウザを作れたのはとても楽しかったです。
ブラウザのしくみを実際に自分で作りながら知りたい方、「字句解析」「構文解析」に興味がある方はぜひ読んでみてください！
リアルタイムグラフィックスの数学 ― GLSLではじめるシェーダプログラミング
フロントエンドでWebGL、Three.jsを使っている方はシェーダを書くことがあると思いますが、本書はシェーダを書くための数学的知識を学ぶことができます。本書はシェーダーをGLSLで書き、特にノイズとSDF(符号距離関数)を扱っています。開発環境としてはVSCodeを使うのでフロントエンドの方なら問題なく本書のサンプルを動かしながら学べます。
WebGLではノイズを扱う場合が多いかと思いますが、ノイズの種類やノイズの生成方法の数学的な知識を多く解説しゼロから理解して実装することができるので、「サンプルをコピペして使う」ことから一歩進んでシェーダーを書くことができるようになるでしょう。
シェーダーに関しての日本語の書籍は少ないので、本書は貴重な1冊になります。
CGやグラフィック周りの数学に興味がある方はすごく面白い書籍になっていますので、ぜひ読んでみてください！
デザインの本
Webデザイナーはコーディングの知識を持つべきという意見もありますが、私は同時にエンジニアもデザインの知識を持ってコーディングするべきだと思っています。なので、以下にデザイン関連で読んで良かった本を紹介します。
ノンデザイナーズ・デザインブック [第4版]
![ノンデザイナーズ・デザインブック [第4版]](https://m.media-amazon.com/images/I/61JAysNAYBL._SY522_.jpg)
本書は言わずと知れたデザインに関しての名著になります。デザインをよく知らないエンジニアでもデザインの「4つの基本原則」（近接、整列、反復、対比）は知っていたほうが良いでしょう。特にWeb制作でのコーディングにおいて、デザインカンプを忠実に再現する上でこの4つの原則は非常に役立ちますし、デザイナーからのFBも少なくなるでしょう。
デザインは直感とか感覚だと思われがちですが、本書では「なぜ良く見えるのか」と言語化するための理論を身につけることができます。あらゆる制作物を見る際に、この4つの原則を意識してみるとデザインの見た目が変わってくるし、生活が豊かになるでしょう。
まとめ
以上、Web制作・フロントエンドを学ぶ方におすすめの書籍を紹介しました。
どうしてもIT業界は勉強することが多いですが、これらの書籍を読んでみて楽しみながら学べると良いですね！
この記事が参考になれば幸いです。
