概要

フロントエンド開発の範囲は広く，習得すべき技術は多種多様です。

HTML・CSS・JavaScriptはフロントエンドエンジニアにとって共通言語ではあるものの，Webサイトを制作するのか，Webアプリケーションを開発するのか，その違いによって採用すべき技術は全く異なります。それは，Webの多様性に対して技術的な正解がひとつではないことを示しています。

本書はフロントエンドの技術を俯瞰し，「エンジニアが共通して知っておくべき技術はなにか」，「（多種多様なエンジニアにとって）どの分野にフォーカスしてスキルアップを目指すべきか」を示すことを目的としています。開発現場でのワークフローを疑似体験したり，各種技術の概要とコードに触れることで理解の促進を目指します。

「フロントエンド技術は移り変わりが激しい」と言われてきました。

しかし，その状況は変わりつつあります。2010年代はHTML5やECMAScript 2015の過渡期にあり，フロントエンドの技術は大きく変化しました。現在は，ツールやフレームワークの変化はあれど，開発における基本的な考え方はそれほど変化していません。成熟したフロントエンドの技術を，本書を通してこのタイミングでキャッチアップしてほしいと考えています。

また，「未経験のエンジニアにとって，フロントエンド業界に入ったときに学んでほしいこと」をこの一冊で網羅できることを筆者は裏テーマとして設定しました。初心者の方も，すでに業界で取り組んでいるエンジニアの方にとっても，知識のボトムアップに繋がる一冊を目指します。

こんな方におすすめ

• フロントエンド開発にこれから携わりたい方
• フロントエンド開発に携わって1〜2年の方
• Webサイト制作に携わっていて，フロントエンド全般について知りたい方
• Webサイト制作，Webアプリケーション開発それぞれの知識や違いを知りたい方

目次

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

サポート

正誤表

本書の以下の部分に誤りがありました。ここに訂正するとともに，ご迷惑をおかけしたことを深くお詫び申し上げます。

P.135　リスト

{name}!</h1>

{{ name }}!</h1>

P.138　「State of JavaScript」URL

P.29　example_1.html

<button id="open">ログイン</button>

<button id="loginButton">ログイン</button>