目次

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の活用

著者プロフィール

• 斉藤祐也（著者）

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

• 水野隼登（著者）

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

• 谷拓樹（著者）

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

• 菅原のびすけ（著者）

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

• 林優一（著者）

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

• 古沢宏太（著者）

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