フロントエンド開発入門―プロフェッショナルな開発ツールと設計・実装 [単行本]

フロントエンド開発入門―プロフェッショナルな開発ツールと設計・実装 の 商品概要

• 要旨（「BOOK」データベースより）

  支援ツールを使いこなし効率的に実装をする基礎知識。複数の支援ツールから「なぜそれを使うのか」選択する基準を理解する。

• 目次

  ■Part 1 導入編　なぜ使うかを知る
  ●Chapter 1 フロントエンドエンジニアの歴史
  1-1　Web の始まりと HTML
  1-2　Web と HTML で何ができるようになったのか
  1-3　ブラウザ戦争と標準化
  1-4　ブログの流行とインターネットインフラ
  1-5　静的な UI から動的な UI へ
  1-6　「フロントエンドエンジニア」という専門職
  1-7　Node.js による開発基盤の構築
  1-8　ECMAScript 規格更新に伴う周辺事情の活性化
  1-9　止まらないフロントエンド
  
  ●Chapter 2 フロントエンドエンジニアに求められるスキル
  2-1　「フロントエンドエンジニア」が取り組む実務
  　　想定される実務例
  2-2　JavaScript の成長と要求の変化
  2-3　変容する中で維持すべき開発者の姿勢
  　　「Web は止まらない、求められる技術要素も止まらない」
  　　パブリックな存在として
  2-4　本書におけるフロントエンドエンジニア像
  
  ●Chapter 3 フロントエンドにおける一般的なツール群
  3-1　Node.js とその周辺のエコシステム
  　　パッケージマネージャー
  　　Node.js がもたらす恩恵
  3-2　コンパイラ・モジュールバンドラー
  　　コンパイラ：Babel
  　　モジュールバンドラー：webpack
  　　Babel, webpack が解決すること
  3-3　JavaScript 代替言語：TypeScript
  　　TypeScript の特徴
  　　コンパイラとしての TypeScript
  　　TypeScript によって解決できること
  3-4　フレームワーク・ビューライブラリ：Vue.js, Angular, React
  　　Vue.js
  　　Angular
  　　React
  　　コンポーネント指向のフレームワーク・ライブラリであること
  3-5　状態管理・データレイヤ：Redux
  　　ブラウザにおける状態管理は煩雑である
  　　クライアント MVC
  　　簡易的なクライアント MVC
  　　フロントエンドで抽象化されるモデル、扱ううえでの課題とは
  　　役割があいまいになる Controller
  　　Flux というアプリケーションアーキテクチャパターン
  　　Redux：データの一極管理
  　　Redux が解決できること
  3-6　CSS：CSSメタ言語、設計手法、CSS-in-JS
  　　CSS を取り巻く現状
  　　各ブラウザの対応状況について
  　　CSS の表現力を高めた Sass、CSS メタ言語
  　　JavaScript で作成された PostCSS
  　　CSS 設計手法
  　　CSS を弱点を補うためには
  3-7　静的解析ツール：Prettier, ESLint
  　　Prettier
  　　ESLint
  　　ほかのリンターやチェッカーについて
  　　静的解析ツールが可能にすること
  3-8　ユニットテスト：Mocha, Jest, Karma
  　　ユニットテストとフロントエンド開発
  　　Mocha Jest Karma それぞれどういった特性があるのか
  　　ユニットテストやテストフレームワークが解決できること
  
  ●Chapter 4 開発の現場における仕事の進め方
  4-1　アジャイルといった考え方
  4-2　スクラムという開発手法
  4-3　個人との対話と他者との協調
  　　プロダクトオーナー
  　　スクラムマスター
  　　デザイナー
  　　サーバサイドエンジニア
  　　テストエンジニア・テスター
  　　コミュニケーションハブとして
  4-4　変化に対応しながら提供するサイクルを上げる
  
  ■Part 2 実践編　どう使うかを学ぶ
  ●Chapter 5 開発環境
  5-1　既存アプリケーションの開発環境構築
  　　Docker のインストール
  　　Node.js のインストール
  　　Yarn のインストール
  　　API サーバの起動
  　　クライアントの起動
  5-2　既存機能の把握
  　　どんなアプリケーションなのかを知る
  　　アプリケーションが抱える課題を探る
  
  ●Chapter 6 設計と実装
  6-1　フロントエンド環境の構築
  　　Yarn の利用準備
  　　webpack のインストール
  　　Babel のインストール
  6-2　TypeScript の導入
  　　TypeScript のインストール
  　　Babel 経由で TypeScript のコンパイルを行う
  　　既存コードを TypeScript で書き換える
  　　コンパイルエラーを解消する
  6-3　コードの分割
  　　処理を別ファイルに切り出す
  6-4　Jest を利用したユニットテスト
  　　Jest のインストール
  　　jest.config.js の設定
  　　描画された DOM の検査
  6-5　React の導入
  　　React のインストール
  　　JSX のためのコンパイル設定
  　　JSX で要素を表示する
  　　webpack-dev-server のインストールと設定
  　　jQuery で書いたコードを React に書き換える
  　　イベントハンドラの記述
  6-6　Enzyme を使ったコンポーネントのテスト
  　　Enzyme のインストール
  　　Jest の設定
  　　React Component をテストする
  6-7　styled-components の導入
  　　styled-components のインストール
  　　CSS から styled-components への移行
  
  ●Chapter 7 CI/CD によって受けられるメリット
  7-1　CI/CD によって受けられるメリット
  　　CI/CD について
  　　GitHub Actions を始める
  　　ESLint を導入し動作させる
  　　CI で自動化するメリット
  7-2　パフォーマンスと改善
  　　パフォーマンスの問題とは
  　　基礎的なパフォーマンス知識：クリティカルレンダリングパス
  　　Lighthouse を利用した定期的なパフォーマンス計測
  　　強力な武器はない、ひとにはひとのパフォーマンス
  
  ■Part 3 応用編　より深く学ぶために知る
  ●Chapter 8 解析とモニタリング
  8-1　サービスの成長とともに開発する
  　　仮説検証、AB テストの目的
  　　ツールの導入： Google アナリティクス
  　　ツールの導入： Google オプティマイズ
  　　プロダクトコードに組み合わせる
  　　サードパーティスクリプトとの兼ね合い
  8-2　ユーザーモニタリング・エラーイベント監視
  　　ユーザーを取り巻く環境を知る
  　　ブラウザで起きるエラーイベントなどからユーザーを知る
  　　エラーイベント検知のため Sentry を導入する
  　　Sentry の動作とコードへの組み込み
  　　React Error Boundary を利用する
  　　収集したエラーイベントを役立てる
  
  ●Chapter 9 チーム開発と Web への貢献
  9-1　チームで働く
  　　あらためてスクラムという開発手法について
  　　スクラムを採用したチームに入ったら
  　　ストーリー：スプリントプランニング
  　　タイムボックスという考え方
  　　ストーリー：スプリントが開始する
  　　デイリースクラム
  　　ストーリー：スプリントの終わり
  　　振り返り
  　　チーム開発とはテクニカルスキルではない
  9-2　コミュニティへの貢献活動
  　　OSS への貢献はコードコミットだけではない
  　　できることから OSS へコミットする
  　　寄付する、翻訳するといった違ったアプローチ
  　　Web というプラットフォームに貢献する
  9-3　Web プラットフォームに関わるフロントエンド開発者として
  　　仕様を知るには
  　　ライトにキャッチアップする
  　　フロントエンド技術を楽しむために

• 出版社からのコメント

  最近の開発で必須のフロントエンド。Vue.jsやAngularやReactなど複雑化する内容をすっきり理解し効率的な開発を。

• 内容紹介

  ■さまざまな開発支援ツールを使いこなし■
  ■効率的に開発をするための基礎知識■
  --
  ■変わり続けるプラットフォームで■
  ■変わらないことを学ぶ■
  
  -------------------------------------------------------------------------
  根幹を支えるエコシステム "Node.js" / コンポーネント指向のフレームワーク・ライブラリの基本の考えを知り使いこなす "Vue.js" "Angular" "React" / コンパイラ "Babel" / モジュールバンドラー "webpack" / JavaScript 代替言語 "TypeScript" / 状態管理・データレイヤ "Redux" / 単方向のデーターフロー "Flux" / 静的解析ツール "Prettier" "ESLint" / ユニットテスト "Mocha" "Jest" "Karma" / 解析とABテスト "Google Analytics" "Google Optimize" / エラーイベント検知 "Sentry" / チーム作業する "スクラム" / 変わり続ける "Webプラットフォーム"
  
  複数の開発支援ツールから「なぜそれを使うのか」選択する基準を理解する！

• 著者紹介（「BOOK著者紹介情報」より）（本データはこの書籍が刊行された当時に掲載されていたものです）

  安達 稜(アダチ リョウ)
  ２０１２年にＳｌｅｒでＷｅｂサービスやｉＯＳアプリの開発を経験。２０１６年、コネヒト株式会社にＷｅｂアプリケーションエンジニアとして入社。女性向けメディア、アプリ「ママリ」のＷｅｂ開発を担当する。現在はリードエンジニアとして組織の技術面でのサポート、チーム開発における開発効率の改善などを推進している
  
  武田 諭(タケダ サトシ)
  １０年ほど役者業を行ったあと、Ｗｅｂエンジニアからキャリアをスタート。２０１７年に株式会社ｍｅｄｉｂａへフロントエンドエンジニアとして入社。レガシーなフロント環境のモダン化、継続的な改善、システムリニューアルなどに関わる。その後チーム学習やモブプログラミングの推進、開発プロセス改善などを行い現在エンジニアリングにおいてはクライアントサイドとＢＦＦを担当している

• 著者について

  安達 稜 (アダチ リョウ)
  2012 年にSIerでWebサービスやiOSアプリの開発を経験。2016 年、コネヒト株式会社にWebアプリケーションエンジニアとして入社。女性向けメディア、アプリ「ママリ」のWeb 開発を担当する。現在はリードエンジニアとして組織の技術面でのサポート、チーム開発における開発効率の改善などを推進している。
  
  武田 諭 (タケダ サトシ)
  10年ほど役者業を行ったあと、Webエンジニアからキャリアをスタート。2017年に株式会社mediba へフロントエンドエンジニアとして入社。レガシーなフロント環境のモダン化、継続的な改善、システムリニューアルなどに関わる。その後チーム学習やモブプログラミングの推進、開発プロセス改善などを行い現在エンジニアリングにおいてはクライアントサイドとBFFを担当している。

フロントエンド開発入門―プロフェッショナルな開発ツールと設計・実装 の商品スペック