フロントエンドの知識地図ーー 一冊でHTML/CSS/JavaScriptの開発技術が学べる本
書籍情報
発売日 : 2023年11月24日
著者／編集 : 株式会社ICS 池田 泰延/西原 翼/松本 ゆき
出版社 : 技術評論社
発行形態 : 単行本
書籍説明
内容紹介
Ｗｅｂのフロントエンド開発を学ぶための情報源を、第一線のエンジニアが厳選。変化が激しいと言われるフロントエンドの新しい技術を、この一冊でくまなく紹介します。
目次
第1章 フロントエンド開発の全体像
1.1 フロントエンドとは何か
1.1.1 広がり続ける「フロントエンド」の世界
1.1.2 現代的なWebページにおけるJavaScriptの重要性
1.1.3 フロントエンドエンジニアを取り巻く環境
1.2 制作・開発の進め方
1.2.1 Webに関わるさまざまな役割
1.2.2 Webサイト／Webアプリケーションができあがるまでの流れ
1.2.3 フロントエンドエンジニアという役割
1.3 HTMLとCSSとJavaScript
1.3.1 HTML
1.3.2 CSS
1.3.3 JavaScript
1.3.4 まとめ
第2章 フロントエンド開発環境を用意しよう
2.1 Node.jsの使い方
2.1.1 Node.jsのインストール
2.1.2 Node.jsによるJavaScriptの実行
2.1.3 Node.jsのモジュール
2.2 Node.jsの役割
2.2.1 フロントエンドの開発環境
2.2.2 サーバーとしてのNode.js
2.2.3 ブラウザとNode.jsでのJavaScriptの違い
2.3 エディタ・IDE
2.3.1 Web制作のためのエディタ・IDE
2.3.2 VS Codeのインストール
2.3.3 VS Codeの使い方
2.4 開発環境の導入方法
2.4.1 開発言語の変換・バンドル・ビルド
2.4.2 ローカルサーバーの立ち上げ
2.4.3 Vite
第3章 現場の開発を体験してみよう
3.1 実践！フロントエンド開発
3.1.1 事前準備
3.1.2 ハンズオンの概要
3.1.3 ローカルへのクローンとインストール
3.1.4 ローカルサーバーの起動
3.1.5 コードの修正と確認
3.1.6 コードの整形
3.1.7 テストの実行
3.1.8 型チェックの実行
3.1.9 ローカルサーバーでの確認
3.1.10 公開
3.1.11 まとめ
第4章 標準仕様の動向
4.1 Web標準の仕様
4.1.1 HTML
4.1.2 CSS
4.1.3 JavaScript
4.2 ブラウザの互換性
4.2.1 ブラウザ間の差異
4.2.2 ブラウザの互換性との向き合い方
4.2.3 ブラウザの互換性を考えるうえで役に立つサイト
4.2.4 より多くの環境で見られるように
第5章 より良い開発のための次の一歩
5.1 JavaScriptフレームワーク
5.1.1 JavaScriptフレームワークを使うメリット
5.1.2 代表的なJavaScriptフレームワーク
5.1.3 フレームワークのトレンドを追う
5.1.4 JavaScriptフレームワーク誕生の背景
5.1.5 現代的JavaScriptフレームワークの特徴
5.1.6 JavaScriptフレームワークを使った効率的な開発
5.2 CSSの周辺技術
5.2.1 CSSの限界
5.2.2 CSSを書くための技術の概要
5.2.3 Sass
5.2.4 CSS設計
5.2.5 JavaScriptフレームワークでのCSSの周辺技術
5.2.6 効率的にCSSを書く
5.3 CSSフレームワーク
5.3.1 CSSフレームワークとは？
5.3.2 CSSフレームワーク／UIフレームワークを使うメリット
5.3.3 CSSフレームワーク／UIフレームワークを使うデメリット
5.3.4 代表的なCSSフレームワーク／UIフレームワーク
5.3.5 CSSのトレンド
5.3.6 CSSフレームワーク／UIフレームワークを使って効率的な開発を
5.4 TypeScript.
5.4.1 型とは何か
5.4.2 動的型付けのデメリット
5.4.3 TypeScriptの型システムでバグを防ぐ
5.4.4 TypeScriptの特徴
5.4.5 知っておきたい機能やテクニック
5.4.6 ライブラリの型定義
5.4.7 TypeScriptを使って堅牢な開発を
5.5 Web API
5.5.1 Web APIの利用シーン
5.5.2 Web APIの種類
5.5.3 Web APIを使うための技術
5.5.4 フレームワークでのAPI呼び出し
5.5.5 CORSの対応
5.6 オールインワンなフレームワーク
5.6.1 オールインワンなフレームワークの利用
5.6.2 さまざまなフレームワーク
5.6.3 MPAとSPA
5.6.4 さまざまなレンダリング方式CSR／SSR／SSG／ISR
5.6.5 Jamstack
5.6.6 要件に合わせて使っていく
5.7 WebGL
5.7.1 WebGLの活用シーン
5.7.2 WebGLの実装方法
5.7.3 OpenGLとWebGLの関係性
5.7.4 シェーディング
5.7.5 Three.js
第6章 品質を向上させるための取り組み
6.1 デザインツールと画像形式
6.1.1 デザインツール
6.1.2 Figma
6.1.3 Adobe Photoshop
6.1.4 ツールを組み合わせて使う
6.1.5 すぐれたWebサイトを普段からチェックする
6.1.6 デザインの再現性
6.1.7 大切なのはコミュニケーションとユーザー視点
6.1.8 Webで利用する画像形式
6.2 アクセシビリティ
6.2.1 Webアクセシビリティのガイドライン「WCAG」
6.2.2 日本工業規格「JIS X 8341-3:2016」
6.2.3 ガイドライン
6.2.4 スクリーンリーダーへの対応
6.2.5 モーダルとキーボード操作
6.2.6 WAI-ARIA
6.2.7 role属性
6.2.8 ランドマーク
6.3 Webブラウザの開発者ツール
6.3.1 開発者ツールの機能
6.3.2 Chromeのデベロッパーツール
6.3.3 デベロッパーツールの日本語化
6.3.4 要素
6.3.5 コンソール
6.3.6 ネットワーク
6.3.7 パフォーマンス
6.3.8 その他のツール
6.4 Lighthouse
6.4.1 Webサイトの指標を計測する
6.4.2 Lighthouseの使い方
6.4.3 レポートの項目
6.4.4 繰り返し検証してスコアを向上させる
6.4.5 レポート結果の見方
6.5 コード品質の向上
6.5.1 書き方が混在するデメリット
6.5.2 フォーマッターとリンター
6.5.3 Prettier
6.5.4 ESLint
6.5.5 Stylelint
6.6 テスト
6.6.1 単体テスト
6.6.2 E2Eテスト
6.7 CI/CD
6.7.1 CI/CDを活用する
6.7.2 CI/CDのメリット
6.7.3 CI/CDのツール
6.7.4 GitHub Actionsを使ったCI/CDのサンプル
6.7.5 CI/CDを活用した開発
6.8 セキュリティ
6.8.1 メジャーなセキュリティリスクと攻撃手法
6.8.2 フレームワークを使う場合の注意
6.8.3 外部ライブラリや開発環境自体のセキュリティにも注意
6.8.4 セキュリティを意識した開発を
1.1 フロントエンドとは何か
1.1.1 広がり続ける「フロントエンド」の世界
1.1.2 現代的なWebページにおけるJavaScriptの重要性
1.1.3 フロントエンドエンジニアを取り巻く環境
1.2 制作・開発の進め方
1.2.1 Webに関わるさまざまな役割
1.2.2 Webサイト／Webアプリケーションができあがるまでの流れ
1.2.3 フロントエンドエンジニアという役割
1.3 HTMLとCSSとJavaScript
1.3.1 HTML
1.3.2 CSS
1.3.3 JavaScript
1.3.4 まとめ
第2章 フロントエンド開発環境を用意しよう
2.1 Node.jsの使い方
2.1.1 Node.jsのインストール
2.1.2 Node.jsによるJavaScriptの実行
2.1.3 Node.jsのモジュール
2.2 Node.jsの役割
2.2.1 フロントエンドの開発環境
2.2.2 サーバーとしてのNode.js
2.2.3 ブラウザとNode.jsでのJavaScriptの違い
2.3 エディタ・IDE
2.3.1 Web制作のためのエディタ・IDE
2.3.2 VS Codeのインストール
2.3.3 VS Codeの使い方
2.4 開発環境の導入方法
2.4.1 開発言語の変換・バンドル・ビルド
2.4.2 ローカルサーバーの立ち上げ
2.4.3 Vite
第3章 現場の開発を体験してみよう
3.1 実践！フロントエンド開発
3.1.1 事前準備
3.1.2 ハンズオンの概要
3.1.3 ローカルへのクローンとインストール
3.1.4 ローカルサーバーの起動
3.1.5 コードの修正と確認
3.1.6 コードの整形
3.1.7 テストの実行
3.1.8 型チェックの実行
3.1.9 ローカルサーバーでの確認
3.1.10 公開
3.1.11 まとめ
第4章 標準仕様の動向
4.1 Web標準の仕様
4.1.1 HTML
4.1.2 CSS
4.1.3 JavaScript
4.2 ブラウザの互換性
4.2.1 ブラウザ間の差異
4.2.2 ブラウザの互換性との向き合い方
4.2.3 ブラウザの互換性を考えるうえで役に立つサイト
4.2.4 より多くの環境で見られるように
第5章 より良い開発のための次の一歩
5.1 JavaScriptフレームワーク
5.1.1 JavaScriptフレームワークを使うメリット
5.1.2 代表的なJavaScriptフレームワーク
5.1.3 フレームワークのトレンドを追う
5.1.4 JavaScriptフレームワーク誕生の背景
5.1.5 現代的JavaScriptフレームワークの特徴
5.1.6 JavaScriptフレームワークを使った効率的な開発
5.2 CSSの周辺技術
5.2.1 CSSの限界
5.2.2 CSSを書くための技術の概要
5.2.3 Sass
5.2.4 CSS設計
5.2.5 JavaScriptフレームワークでのCSSの周辺技術
5.2.6 効率的にCSSを書く
5.3 CSSフレームワーク
5.3.1 CSSフレームワークとは？
5.3.2 CSSフレームワーク／UIフレームワークを使うメリット
5.3.3 CSSフレームワーク／UIフレームワークを使うデメリット
5.3.4 代表的なCSSフレームワーク／UIフレームワーク
5.3.5 CSSのトレンド
5.3.6 CSSフレームワーク／UIフレームワークを使って効率的な開発を
5.4 TypeScript.
5.4.1 型とは何か
5.4.2 動的型付けのデメリット
5.4.3 TypeScriptの型システムでバグを防ぐ
5.4.4 TypeScriptの特徴
5.4.5 知っておきたい機能やテクニック
5.4.6 ライブラリの型定義
5.4.7 TypeScriptを使って堅牢な開発を
5.5 Web API
5.5.1 Web APIの利用シーン
5.5.2 Web APIの種類
5.5.3 Web APIを使うための技術
5.5.4 フレームワークでのAPI呼び出し
5.5.5 CORSの対応
5.6 オールインワンなフレームワーク
5.6.1 オールインワンなフレームワークの利用
5.6.2 さまざまなフレームワーク
5.6.3 MPAとSPA
5.6.4 さまざまなレンダリング方式CSR／SSR／SSG／ISR
5.6.5 Jamstack
5.6.6 要件に合わせて使っていく
5.7 WebGL
5.7.1 WebGLの活用シーン
5.7.2 WebGLの実装方法
5.7.3 OpenGLとWebGLの関係性
5.7.4 シェーディング
5.7.5 Three.js
第6章 品質を向上させるための取り組み
6.1 デザインツールと画像形式
6.1.1 デザインツール
6.1.2 Figma
6.1.3 Adobe Photoshop
6.1.4 ツールを組み合わせて使う
6.1.5 すぐれたWebサイトを普段からチェックする
6.1.6 デザインの再現性
6.1.7 大切なのはコミュニケーションとユーザー視点
6.1.8 Webで利用する画像形式
6.2 アクセシビリティ
6.2.1 Webアクセシビリティのガイドライン「WCAG」
6.2.2 日本工業規格「JIS X 8341-3:2016」
6.2.3 ガイドライン
6.2.4 スクリーンリーダーへの対応
6.2.5 モーダルとキーボード操作
6.2.6 WAI-ARIA
6.2.7 role属性
6.2.8 ランドマーク
6.3 Webブラウザの開発者ツール
6.3.1 開発者ツールの機能
6.3.2 Chromeのデベロッパーツール
6.3.3 デベロッパーツールの日本語化
6.3.4 要素
6.3.5 コンソール
6.3.6 ネットワーク
6.3.7 パフォーマンス
6.3.8 その他のツール
6.4 Lighthouse
6.4.1 Webサイトの指標を計測する
6.4.2 Lighthouseの使い方
6.4.3 レポートの項目
6.4.4 繰り返し検証してスコアを向上させる
6.4.5 レポート結果の見方
6.5 コード品質の向上
6.5.1 書き方が混在するデメリット
6.5.2 フォーマッターとリンター
6.5.3 Prettier
6.5.4 ESLint
6.5.5 Stylelint
6.6 テスト
6.6.1 単体テスト
6.6.2 E2Eテスト
6.7 CI/CD
6.7.1 CI/CDを活用する
6.7.2 CI/CDのメリット
6.7.3 CI/CDのツール
6.7.4 GitHub Actionsを使ったCI/CDのサンプル
6.7.5 CI/CDを活用した開発
6.8 セキュリティ
6.8.1 メジャーなセキュリティリスクと攻撃手法
6.8.2 フレームワークを使う場合の注意
6.8.3 外部ライブラリや開発環境自体のセキュリティにも注意
6.8.4 セキュリティを意識した開発を
著者情報
ICS
株式会社ICS 池田 泰延
池田 泰延
池田 泰延、西原 翼、松本 ゆき
西原 翼
松本 ゆき
