関連サイト
本書の関連ページが用意されています。
内容紹介
本書は、フロントエンドを1、2年以上担当した人を対象に、「今知っておかないといけない情報」と、「今後役に立つ情報」をピックアップしてまとめた本です。
昨今、フロントエンドエンジニアをとりまく環境は大きく変わってきています。対応すべきデバイスの変化はもちろん、扱う技術そのものの進化もあり、それに伴って便利なライブラリや開発環境ツールも数多く登場しています。
さまざまな方向に知っておくべき情報が広がっているため、ついていくのが難しいと感じている人もいるのではないでしょうか。また、Webにたくさん情報はあっても、断片的であったり、古かったりして、いったい何をよりどころにすればよいのか困ることもあります。
本書はそのような方のために、フロントエンドエンジニアが知っておくべき知識を網羅的でありながら厳選してまとめました。
業界の最先端で働くエンジニアが、現場で戦う仲間の役に立つようにバランスよく選んだトピックが集められています。この本で技術の知識やツールの操作については効率的に学び、さらにその先にある、エンジニアにとっての本当の課題に取り組んでいけるようにしておきましょう。
書誌情報
- 著者: 斉藤祐也, 水野隼登, 谷 拓樹, 菅原のびすけ, 林 優一, 古沢宏太(著), 斉藤祐也(編集)
- ページ数: ページ(PDF版換算)
- 対応フォーマット: PDF
- 出版社: マイナビ出版
対象読者
著者について
斉藤祐也
米国の大学を卒業後、大規模なインターネットメディア運営会社に編集者として入社するもウェブデザイナ兼フロントエンドデベロッパとして従事、その後株式会社サイバーエージェントにてモバイルウェブアプリの開発をメインとした部署にて専業フロントエンドデベロッパに転向。株式会社リッチメディアへ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サービスの開発に携わってきた。現在は、一念発起して海外にてキャリアを積む。
目次
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の活用