フロントエンドの書籍一覧

【複雑化したフロントエンド開発環境の構築がこの１冊でさらっとわかる！】

本書は、ReactやVue.jsなどに代表される新しいフレームワークの到来により最適化されたWebアプリの開発ができるようになったにもかかわらず、それぞれの開発環境の構築が複雑化したことで技術選定に苦労しているエンジニアに向けた「サクッとわかる」開発環境構築ガイドです。ベストプラクティスを提示するのではなく、環境構築に慣れていないエンジニアがとりあえず自分なりの最適なツールを選ぶための入り口に立つことができる入門書です。
《本書の対象読者》
・モダンなJavaScriptを書きたいが、書き方がよくわからない
・BabelやWebpackの設定方法がいまいちわかっていない
・ESLint、Flow、Jestなどを導入したいが、方法がわからない

【目次】
第1章　まずは準備から
1.1　package.jsonファイルの作成
1.2　ディレクトリー構成について
1.3　EditorConfigを導入する
第2章　JavaScriptを動かす
2.1　Babel
2.2　webpack
第3章　JavaScriptのためのパワフルなツール
3.1　ESLint
3.2　Prettier
3.3　Flow
第4章　Reactをはじめる
4.1　Reactをブラウザーで表示させるための準備
4.2　最初で最後のReactコンポーネント
第5章　CSSを適用する
5.1　webpackの設定
5.2　CSSファイルの作成
5.3　StyleLint
5.4　PostCSS
第6章　ReactとCSSの連携
6.1　CSSをコンポーネントに適用する
6.2　CSSModules
第7章　爆速でテストを書く
7.1　Jestで始めるユニットテスト
7.2　コンポーネントはスナップショットテストで
7.3　コードカバレッジを見る
第8章　プロダクションコードの生成
8.1　webpackの設定を分離する
8.2　CSSをminifyする

近年、Webフロントエンドでは「コンポーネント指向」のフレームワークやライブラリが多く開発され、コンポーネント単位での開発が主流になってきました。Web Componentsは、特定のフレームワークやライブラリに依存せず、Webの標準技術を使用してコンポーネント単位での開発を可能にする考え方です。本書では、Web Componentsとは何か、どうやって使うのかを解説します。Web ComponentsをベースにWebアプリケーションを構築するJavaScriptライブラリであるPolymerを使ったWebサイト構築についても解説します。
【目次】
第1章　Web Componentsとは
1.1　基本概念
1.2　Web Componentsで変わる開発
1.3　Web Componentsの未来
1.4　1章まとめ
第2章　Web Componentsを使ってみよう
2.1　Custom Elements
2.2　Shadow DOM
2.3　要素
2.4　HTML Template
2.5　ESModules
2.6　2章のまとめ
第3章　Polymerでウェブサイト構築
3.1　Polymer 3.0
3.2　環境構築
3.3　Custom Elementを作る
3.4　子要素を使う
3.5　配布されてるCustom Elementを使う
3.6　ページを作る
3.7　サイトを公開する
3.8　発展：Redux
3.9　Polymerの今後
3.10　まとめ
3.11　参考文献
第4章　lit-html（応用編）
4.1　lit-htmlの基本
4.2　lit-html APIs
4.3　Simple But Powerful

本書はレガシーなフロントエンドコードを安全かつ確実にモダンに改善していくためのノウハウをまとめた一冊です。筆者が経験したフロントエンドの改善経験をベースに、実践的で現場で使える内容になっています。また、jQueryで書かれたレガシーコードにVue.js/TypeScript/Jestなどを段階的に導入する流れを各章毎に「実践編」として掲載しており、実際に手を動かしながら学べます。改善のための考え方や手法を知りたい方はもちろん、モダンなアーキテクチャーそのものを学びたい方にも最適の一冊です。
【目次】
第1章　改善の前に
第2章　レガシーコードを理解する
第3章　パッケージ管理
第4章　テストコードを用意する
第5章　ESLint/Prettier
第6章　TypeScript
第7章　モジュール分割
第8章　Vue.js（セットアップ）
第9章　Vue.js（移行の予備知識）
第10章　Vue.js（移行編）
第11章　リリースまでを安全に
第12章　改善できた、次はどうする？

【Chrome Developer Toolsがさくっと理解できる解説書！】

本書はGoogleのブラウザーであるChromeに組み込まれた開発ツール「Chrome Developer Tools」の解説書です。Chrome Developer Toolsの基本的な知識と使い方から、見落としがちな便利な機能、実際の開発現場で役立つTipsまで幅広く紹介しています。
〈本書の対象読者〉
・Webサイト/Webサービスを開発するWebデザイナー
・フロントエンドエンジニア

【目次】
第1章　はじめに
　デベロッパーツール(Chrome Developer Tools)とは
　Google Chrome Canaryとは　他
第2章　inspect（要素の検証）
　要素の検証方法
第3章　Device Mode（デバイスモード）
　デバイスモードの切り替え方法
　メディアクエリを表示する　他
第4章　Elementsパネル
　HTML要素を編集する
　スタイル（CSS）を編集する
　数値のCSSプロパティー値を、キーボードショートカットを駆使して編集する　他
第5章　Consoleパネル
　コンソールを表示する
　コンソール履歴のクリア
　入力履歴をサジェスト表示する　他
第7章　Networkパネル
　キャッシュを無効にする
　オフライン／モバイル環境でWebサイトを読み込む
　ユーザーエージェントを他のブラウザーに変更する　他
第8章　Performanceパネル
　パフォーマンス記録前に押さえておきたいポイント
　ページのパフォーマンス状況の記録／確認
　パフォーマンスに問題のあるコードを探す
第9章　Memoryパネル
　ヒープ領域を解析する
第10章　Applicationパネル
　マニフェストの確認（PWA対応）
　アプリインストールバナーの表示確認（PWA対応）
　Service Workerの確認（PWA対応）　他
第11章　Securityパネル
　Webページが安全かどうかを確認する
　証明書の詳細を確認する
　安全ではないオリジン
第12章　Auditsパネル
　Webページをテストしてパフォーマンス・SEOなどの
第13章　Layersパネル
　Layersパネルを表示させる
　Layersパネルを触ってみる
　Layersパネルの注意点
付録A　Tips集
　ドックの位置を変更する
　コマンドパレットを開く
　FPSメーターを表示する　他
付録B　ショートカット早見表

【ウェブフォントの基礎から最適化まで、なんでもござれの一冊！これを読めばあなたもウェブフォントマスター！】

本書は日本語でのウェブフォントを使う際の様々な最適化の手法について詳しく紹介しています。「重い」「使いにくい」といったウェブフォントへの抵抗感を払拭し、ウェブサイトを「おしゃれ」に楽しみましょう。
〈本書の対象読者〉
ウェブフォントを使いたいと思っているフロントエンドエンジニア、ウェブデザイナー

【目次】
第1章　ウェブフォントについて
1.1　ウェブフォントとは？
1.2　ウェブフォントのメリット、デメリット
1.3　フォントデータの中身
1.4　ウェブフォントの形式
第2章　ウェブフォントを使う
2.1　自前で用意する場合
2.2　その他の方法
第3章　ウェブフォント最適化
3.1　ウェブフォントとクリティカルレンダリングパス
3.2　各ブラウザの挙動の違い
3.3　ウェブフォントでよくある問題
3.4　CSSによる最適化
3.5　JavaScriptによる最適化
3.6　キャッシュによる最適化
3.7　preloadによる最適化
3.8　最適化チェックリスト
付録A　フリーフォントのライセンスについて
A.1　ウェブフォントの扱い
A.2　ウェブフォントとして利用可能なライセンス
A.3　著作権侵害をしないために気をつけることリスト
付録B　おすすめの日本語フリーフォント