目次
第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 セキュリティを意識した開発を