フロントエンドエンジニアのための現在とこれからの必須知識

備考

■編集・執筆

斉藤 祐也(さいとう・ ゆうや)
米国の大学を卒業後、大規模なインターネットメディア運営会社に編集者として入社するもウェブデザイナ兼フロントエンドデベロッパとして従事、その後株式会社サイバーエージェントにてモバイルウェブアプリの開発をメインとした部署にて専業フロントエンドデベロッパに転向。
株式会社リッチメディアへUXエンジニアとなるべく転職し、現在にいたる。

■執筆

菅原 のびすけ(すがわら・のびすけ)
学生時代にベンチャー企業役員の経験を経て2014年にLIGに入社。エンジニアとしてWeb制作に携わる。
2015年にはIoT関連の活動を開始し、テクノロジーを開発者に届けるDevRel事業の責任者に就任。
最近はJavaScript Robotics分野への関心が高い。主な著書に『JavaScriptでインタラクティブ3Dコンテンツを作ろう』(共著、インプレスR&D刊)、『現場のプロが教える WEBデザイン 新・スタンダードテクニック37』(共著、エムディエヌコーポレーション刊)がある。

水野 隼登(みずの・はやと)
株式会社サイバーエージェント所属のフロントエンドエンジニア。Webデザイナーからの転身で、どちらかと言えばビジュアルやユーザー体験に結びつく事柄への関心が強い。

林 優一(はやし・ゆういち)
ソーシャルゲーム開発会社にてUI/UX開発本部本部長としてフロントエンド設計・開発及びマネジメント業務に従事。その後株式会社LIGにフロントエンドエンジニアとして入社。フロントエンド開発・フロントエンドエンジニア育成を担当しデザイン分野からサーバーサイド分野まで幅広く対応。2015年6月にCTOに就任。得意言語はJavaScript。

谷 拓樹(たに・ひろき)
スタートアップから大手でのWebサービスの開発など幅広い経験を経て、現在は株式会社ツクルバのフロントエンド、UIデザイナーとして従事。その他講演活動、技術書の執筆もおこなう。主な著書は『Web制作者のためのCSS設計の教科書』(インプレス刊)など。

古沢 宏太(ふるさわ・こうた)
学生時代にアルバイトとして始めたWebプログラミングをきっかけに、Webエンジニアとしての道に進むことを決意、フロントエンドエンジニアとしてWebサービスの開発に携わってきた。現在は、一念発起して海外にてキャリアを積む。

関連ページ

• サポートサイト　https://book.mynavi.jp/supportsite/detail/9784839956752.html

目次

Chapter1 開発のトレンド1 ～開発環境のトレンド

Section01 ブラウザの状況アップデート
 多種多様なブラウザ
 各ブラウザの特徴
 各ブラウザにおけるWeb技術の実装状況
 ブラウザの新たな競争と進化

Section02 エディタ/エディタのプラグイン
 エディタを選ぶことの重要性
 Sublime Text
 Brackets
 Atom

Section03 ブラウザ開発者ツール
 ブラウザ開発者ツールの重要性
 Google Chromeの開発者ツールを使う
 その他のブラウザの開発者ツール

Section04 コマンドライン
 コマンドラインツール
 ターミナルの設定
 Homebrewをインストールしよう
 Node.jsをインストールしよう

Section05 Git
 Gitについて
 Gitの基本的な使い方
 Gitのホスティング環境
 チーム開発とリモートレポジトリの使い方

Section06 ライブラリ/ コンポーネント管理ツール
 パッケージ管理ツールはなぜ必要なのか
 主要なパッケージマネージャー
  npm
  Bower

Section07 タスク自動化ツール
 なぜタスク自動化ツールが必要なのか
 タスク自動化ツールを紹介
  Grunt
  Gulp

Section08 AltCSSとPostCSS（Post/PreProcessor）
 AltCSSとPostCSSとは
 AltCSSを紹介
  CSSプリプロセッサの代表「Sass」
 PostCSSを紹介
  cssnextで次世代のCSSを使う

Section09 スタイルガイド
 スタイルガイドの役割
 スタイルガイドを構築するためのツール

Section10 Linterとコードフォーマッター
 Linter
  ESLint（JavaScript）
  CSSLint（CSS）
 コードフォーマッター
  JSCS（JavaScript Code Style checker）
  CSSComb（CSS）

Chapter2 開発のトレンド2 ～開発手法のトレンド

Section01 レガシーブラウザへの対応
 多くに対応するためのアプローチ
 ブラウザ判別のベストプラクティス

Section02 Webアクセシビリティ
 Webアクセシビリティへの取り組み
 WCAG
 WAI-ARIA

Section03 レスポンシブ/アダプティブWebデザイン
 マルチデバイス対応
 レスポンシブWebデザイン
 設計とワークフロー
 アダプティブWebデザインとRESS
 銀の弾丸ではないレスポンシブWebデザイン


Chapter3 開発のトレンド3 ～デザイン・レイアウトのトレンド

Section01 流行のデザイン/レイアウト紹介
 マテリアルデザイン
 モジュラーデザイン
 ヒーローイメージ

Section02 Webフォント
 モダンなWebフォントの取り扱い方法
 表示の最適化

Section03 SVGを使ったUI
 SVGとは
 ベクター形式の利点
 アイコンフォント vs SVGアイコン
 SVGの埋め込みとスタイリング
 SVGスプライト

Section04 アニメーション
 アニメーションの流行と意味
 アニメーションのガイドライン
 過度なアニメーション


Chapter4 開発のトレンド4 ～CSSフレームワーク・JSライブラリのトレンド

Section01 新しいフレームワークやライブラリ
 フレームワークとは
  BackBoneJS
  AngularJS
  React（with Flux）
 そのほかのフレームワーク

Section02 JS中間言語
 AltJSの概要
 CoffeeScript
 TypeScript

Section03 ES2015（ECMAScript 2015）
 ES2015の変更点
  定数
  ブロックスコープ
  クラス
  Arrow Functions
  拡張された引数
  Template Strings
  拡張されたオブジェクトのプロパティ
  Promises
  Destructuring Assignment
  for of
  Symbol Type
  Iterators
  Generators
  Map/WeakMap
  Set/WeakSet
  Modules（モジュール）
 ブラウザ環境で使うために
  Babel

Chapter5 開発のトレンド5 ～技術・実装でのトレンド

Section01 Promise
 Promiseとは
 Promiseの実装パターン

Section02 Service Worker
 Service Workerとは
 ServiceWorkerの使い方
 その他の活用方法

Section03 HTTP/2
 HTTP/2の概要
 HTTP/2登場の背景
 これまでのパフォーマンス改善方法のおさらい
 HTTP/2とはどういったものなのか
 HTTP/2によるフロントエンド開発の変化

Section04 パフォーマンス改善
 速さの目安
 計測と最適化


Chapter6 プロジェクトマネジメント

Section01 文字によるコミュニケーション
 コミュニケーションの重要性
 文字によるコミュニケーションの増加

Section02 デザイナーとのコラボレーション
 Webデザインの特性
 スタイルガイド
 プロトタイピングツール
 プロセスの共有とコミュニケーション

Section03 APIドキュメントで仕様を整理する
 開発フローの変化
 Apiaryの活用
 Aglioの活用