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

本書は、Clean Architectureの観点から、ReactやReduxで構築されたアプリケーションの設計をとらえなおし、新たな設計の提案も行う解説書です。これまでClean Architectureがあまり取り入れられてこなかったWebフロントエンド領域に対してこの手法を適用することを目指します。

【目次】
第1章　Clean Architecture
第2章　Dependency Injection
第3章　Single Page Application
第4章　Scalable React

本書はReactをテーマに、Webフロントエンド開発の環境構築を1つ1つ丁寧に解説します。特に設定が足りない状態で動かすとどうなるのか、なぜその設定が必要なのかについて踏み込んで説明しています。環境構築の難しさは、設定をどれか1つでも間違えると動かないことにあります。そのため、環境構築をする際は1つ1つの設定で自分が何をしているのかを正確に把握しなければいけません。この本では暗黙的に「そういうものだから」と思われがちな設定に注目し、解説します。どの設定を足さなければ動かないのか、サンプルコードを示しながら学ぶことができます。

【目次】
第1章　Node.jsを使ったビルド環境整備
第2章　Babelを使ったトランスパイル
第3章　TypeScriptを使ったコンパイル
第4章　webpackを使ったバンドルとビルド
第5章　ESLintを使った静的解析
第6章　Prettierを使ったフォーマット
第7章　Storybookを使ったコンポーネント管理
第8章　Jestを使ったテスト
第9章　0から環境を作ってみる
付録A　バージョンの追従

本書はVue.jsをCDN版で少し触れてみた人に向けて、Vue CLIへ移行するまでと、Vue CLI上でテスト駆動開発（TDD）をするまでの手順を解説します。合わせて、フロントエンドのVue CLIから利用するバックエンドのREST APIをExpressにて実装する際に、HTTPリクエスト部分をテスト駆動で開発する方法も掲載しています。Vue CLIの前提となっているwebpackとBabelについて「詳しく知らなくとも、とりあえず使えるようになる」ことを目指します。フロントエンドVue.jsとバックエンドExpressで「Azure上でそのまま公開できる簡単なWebアプリ」を説明のサンプルに用いています。
【目次】
第1章　Vue.jsのCDN版からVue CLI版へ移行
第2章　Vue CLIでテスト駆動開発する（TDD）
第3章　ExpressによるWebAPIサーバーをテスト駆動開発する（TDD）
第4章　フロントエンドVue.jsとバックエンドExpressを接続してAzureにDeployする
付録A　詳しくて細かいこと
付録B　ExpressフレームワークのAzure向け導入方法
付録C　Azureポータルでの「Webアプリ」インスタンスの作成方法
付録D　Azureポータルで「Webアプリ」へのソースファイルの紐づけ方法

近年、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章　改善できた、次はどうする？

【動画投稿サイトの制作を題材に学ぶFirebase！】

本書は、動画投稿サイトの制作を題材としたReact によるフロントエンド開発とFirebaseの主要な機能である Authentication、 Firestore、Cloud Storage、Cloud Functionsの各機能を理解しつつ、Firebaseによるシングルページアプリケーションの開発について学ぶことができる入門書です。

〈本書の対象読者〉
・Firebaseは名前は聞いたことがあるが、実際に触ったことはない人
・JavaScriptだけで、Webアプリケーションを開発してみたい人
・Firebase と 何かしらのモダンなJSフレームワークを組み合わせてアプリケーションを開発してみたい人
・サーバーサイドだけでなく、フロントエンドの開発にも興味がある人

【目次】
第1章　Firebase
1.1　Firebaseについて
1.2　料金について
第2章　アプリケーションの構築
2.1　セットアップとデプロイ
第3章　認証
3.1　Googleアカウントによる認証
第4章　Cloud Storageによるコンテンツの管理
4.1　Cloud Storageについて
4.2　コンテンツを保存する
第5章　Firestoreによるデータベース管理
5.1　NoSQLデータベースとFirestore
5.2　本アプリケーションのDB設計
5.3　保存した動画のメタデータの保存と動画再生
第6章　Cloud Functionsによるサーバーレスなバックエンド処理
6.1　サーバーレスとCloud Functionsについて
6.2　Cloud Functionsのセットアップとデプロイ
6.3　新規登録時に、ユーザー情報を保存する
6.4　トランスコード処理の概要
6.5　トランスコード関数の実装
6.6　動画メタデータのコピー
第7章　セキュリティールール
7.1　セキュリティールールを記述する
7.2　セキュリティールールの実装
7.3　セキュリティールールの本番反映
7.4　セキュリティールールのシミュレーション
第8章　Reduxの導入とFirebaseとの連携
8.1　なぜReduxを導入するのか？
8.2　Reduxに登場する重要な概念
8.3　ReduxとFirebaseの組み合わせについて
8.4　react-redux-firebaseの導入とStoreの実装
8.5　コンポーネントとReduxの連携
8.6　動画メタデータの一覧取得
8.7　ユーザー認証

【Auth0を使って、セキュアなシングルページアプリケーションを体験しよう！】

本書はクラウド認証プラットフォーム「Auth0」を使ってユーザー認証付きのSPA（シングルページアプリケーション）作るためのチュートリアルです。Auth0はOpenID Connect、JsonWebToken（JWT）ベースの認証方法を採用しており、本書を通じてJWTがどんなものか、どのようにJWTを発行して、どのように認証を行うかを知って、実際に体験することができます。
〈本書の対象読者〉
Vue.jsがちょっと分かる程度のフロントエンドの知識がある人
Rails Tutorialを終わらせた程度のサーバーサイドの知識がある人

【目次】
第1章　ウェブアプリケーションと認証
1.1　モノリシックなアプリケーション
1.2　モノリシックなアプリケーションとクッキー認証
1.3　モバイルアプリケーションとトークン認証
1.4　SPAと認証
1.5　モダンなアプリケーションの構成とIdP
第2章　トークンベース認証の基礎
2.1　認証と認可
2.2　OAuth2
2.3　OpenID Connect（OIDC）
第3章　JSON Web Token
3.1　JWTとは何か？
3.2　JWTの使い所
3.3　JWTの構造
3.4　暗号アルゴリズム　　他
第4章　Auth0
4.1　Auth0とは
4.2　Auth0のよい点
4.3　名寄せ
4.4　認証を丸投げする不安　　他
第5章　Nuxtで作るSPA
5.1　Nuxt.jsとは
5.2　Nuxt.jsを使ってみよう
5.3　ビルド
第6章　NuxtにAuth0を組み込む
6.1　2種類のライブラリ
6.2　Lockを組み込む
6.3　トークンを管理する
6.4　ログイン状態の判定　　他
第7章　NuxtとRailsを共存させる
7.1　1つのリポジトリで管理する
7.2　ディレクトリ構成の変更
7.3　Railsの構築環境
7.4　Rails New　　他
第8章　RailsとKnockによる認証
8.1　Knockとは
8.2　Knockの導入
8.3　鍵設定
8.4　ユーザーの作成　　他
第9章　プロダクションビルドとデプロイ
9.1　データベースの切り替え
9.2　プロダクションビルド
9.3　Auth0のセキュリティ設定
9.4　ソーシャルアカウントのAPIキー設定
第10章　設定のカスタマイズ
10.1　複数のソーシャルアカウントログインを許可する
10.2　パスワードログインを無効化する
10.3　メールアドレスでログイン制限をかける
10.4　名寄せを実現する　　他

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

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

【目次】
第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　おすすめの日本語フリーフォント

【環境構築から、サーバーサイドにExpress、フロントエンドにAngularを使った実際の開発手順を解説！】

本書はJavaScriptエンジニアを対象とした、TypeScriptの解説から環境構築、実際にシングルページアプリケーションを作るまでのサーバーサイド・フロントエンドの開発手順までを紹介した入門書です。この１冊で、TypeScriptをさくっと使いこなしましょう！

【目次】
はじめに─なぜTypeScriptなのか
第1章 TypeScriptとは
1.1 インタフェース
1.2 型アノテーション
1.3 アクセス修飾子
1.4 構造的部分型
1.5 列挙型
第2章 環境構築からHello Worldまで
2.1 Node.jsのインストール
2.2 TypeScriptのインストール
2.3 エディタについて
2.4 Hello World
第3章 シングルページアプリケーションの作成
3.1 データベースの準備
3.2 サーバーサイドの開発
3.3 フロントエンドの開発
3.4 スクリプト実行手順

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

本書は、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する