知識地図シリーズフロントエンドの知識地図
――一冊でHTML/CSS/JavaScriptの開発技術が学べる本

［表紙］フロントエンドの知識地図 ――一冊でHTML/CSS/JavaScriptの開発技術が学べる本

紙版発売
電子版発売

A5判／344ページ

定価2,860円（本体2,600円＋税10%）

ISBN 978-4-297-13871-4

電子版

→学校・法人一括購入ご検討の皆様へ

書籍の概要

この本の概要

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

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

著者プロフィール

池田泰延（いけだやすのぶ）

株式会社ICS代表。筑波大学非常勤講師。ICS MEDIA編集長。テクニカルディレクターとして，ウェブのフロントエンドの開発を行う。得意分野はWebGLやデータビジュアライゼーション。

X : https://twitter.com/clockmaker

西原翼（にしはらつばさ）

株式会社ICSのインタラクションデザイナー。建築関係からスクールを経てWeb業界に転身する。企業のコーポレートサイトからWebアプリまで幅広く携わる。CSSでの表現の可能性を探っている。

記事：https://ics.media/entry/staff/nishihara/

松本ゆき（まつもとゆき）

株式会社ICS ICSフロントエンドエンジニア。SIerでのJava Webシステムの企画開発からUXコンサルタントを経て，フロントエンドエンジニアに転身。新しいアイデアを企画段階からプロトタイピングしていくことが得意です。