【2023最新】「angularjs」のおすすめ本!人気ランキング
この記事では、「angularjs」のおすすめ本をランキング形式で紹介していきます。インターネット上の口コミや評判をベースに集計し独自のスコアでランク付けしています。
Amazonで詳しく見る
紹介文
Web開発者にいま最も支持されているJavaScript MVCフレームワーク「AngularJS」の解説書。定型的な単純作業が繰り返されがちなWeb開発をよりシンプルで楽しいものにしようというのがAngularJSの試みです。本書ではまずAngularJSアプリケーションの構成要素を押さえた上で、AngularJSアプリケーションの開発、テスト、実行手順を解説します。サーバ通信のAPIや考慮するべき点、ディレクティブの仕組みについて解説し、最後にAngularJSのさまざまな活用例を紹介します。GoogleがサポートするAngularJSには、開発メンバーがGoogleのメールやマップ、カレンダーといった大規模Webアプリケーション開発を通して学んだ教訓が凝縮されています。
1章 イントロダクション
2章 AngularJSアプリケーションの構造
3章 AngularJSアプリケーションの開発
4章 AngularJSアプリケーションの内部構造
5章 サーバとの通信
6章 ディレクティブ
7章 その他の便利な機能
8章 レシピ集
Amazonで詳しく見る
紹介文
React/React Hooksの基礎が学べる!
本書では、
・React/React Hooksの基本の習得
・React/React Hooksを利用した簡単なアプリの作成ができる
をゴールとし、つまずきやすいポイントを確認しながらReact/React Hooksが学べる1冊です。
Reactの学習を進める上でつまずく原因はJavaScriptへの理解不足であることがほとんどではないかと考え、本書の冒頭ではJavaScriptの基礎について多めにページを割いています。
JavaScriptの基礎を固めた上でReact/React Hooksを学んだあとは、TODOアプリの作成に挑戦してみましょう。
また、Chakra UIを使って、Reactアプリのスタイリングも解説しています。
■対象読者
・JavaScriptは少し書けるがさらにスキルアップしたい人
・React/React Hooksを書けるWebデザイナー/フロントエンドエンジニアを目指す人
・React/React Hooksでアプリの開発を行ってみたい人
・React公式サイトの内容を、少し難しいと感じた人
・Reactを一度学習してみたが、挫折してしまった人
・Reactを始めてみたいけど、どうしたらいいかよくわからない人
■序文より
Reactの始め方を間違えて挫折してしまう人は案外多いのではないでしょうか。
数年前まで、勤務先での私のメイン業務はデザイン兼マークアップ(HTML/CSS/jQuery)でした。
そんな中、担当していたWebサイトのフロントエンドが次々とReact化していく流れとなり、Webデザイナーが担当してきたフロントエンド分野においてもReactスキルへの需要が高まりました。
とにかく早くReactを身に付たい、React力を武器にしたいと考え、張り切って勉強を始めたのですが、最初は難しくてワケがわからず泣きたくなるほどでした。React公式サイトを見ながら懸命に勉強しましたが、なかなか理解が進まず何度も心が折れそうになりました。
散々遠回りしましたが、Reactを学習するためのスタート地点に立つためにはJavaScriptの基本をきちんと習得していることが前提であることに気付き、思い切ってif文から勉強をやり直しました。その結果、Reactが少しずつ理解できるようになり、いつの間にかReactが大好きになった現在に至ります。
Reactの学習を進める上でつまずく原因はJavaScriptへの理解不足であることがほとんどではないかと考え、本書の冒頭ではJavaScriptの基礎について多めにページを割きました。そして悪戦苦闘しながらReactを書けるようになるまでに学んだことやつまずいたポイントについて、できるだけ噛み砕いて丁寧に説明することを心がけました。
CHAPTER 1 Reactを始めるために必要なJavaScriptの知識
CHAPTER 2 Reactの基礎知識
CHAPTER 3 Reactを試してみよう
CHAPTER 4 Reactの基本をマスターしよう
CHAPTER 5 React Hooksを基礎から理解する
CHAPTER 6 TODOアプリ作成にチャレンジしよう!
CHAPTER 7 Chakra UIでアプリにデザインを組み込む
Amazonで詳しく見る
紹介文
本書ははじめてWebアプリを開発するような人に向けたAngularの入門書です。
Webアプリを開発する工程順に目次を構成しており、手順に沿って進めることでサンプルが完成してきます。何度も作って動かしながら必要な知識を学んでいくスタイルで学習したい人に向けた内容となっています。
Amazonで詳しく見る
紹介文
JavaScriptライブラリ「React」の解説書。動くコンポーネントを作りつつ記法解説とツールやライブラリの紹介をする。
Webフロントエンドの「今」を学びたい人へ!
Facebookが開発したJavaScriptライブラリ「React」の解説書。2013年にオープンソース化されたReactですが、ここ数年で大きな変更が加えられ、またReactを取り巻くエコシステムも大きく変化しました。本書では実際に動くコンポーネントを作りながら、最新のReactの記法について解説しつつ、最新のツールやライブラリも紹介します。初心者から中上級者まで、Reactの今をすばやく学習することができます。
JavaScriptライブラリ「React」の解説書。動くコンポーネントを作りつつ記法解説とツールやライブラリの紹介をする。
Amazonで詳しく見る
紹介文
定番JavaScriptフレームワークの理論と実践が学べる!
導入編(イントロダクション
Angularの基本
データバインディング)
基本編(標準パイプ/ディレクティブ
フォーム開発
コンポーネント開発
サービス開発)
応用編(ルーティング
パイプ/ディレクティブの自作
テスト
開発ライブラリ/ツール)
Appendix TypeScript簡易リファレンス
Amazonで詳しく見る
紹介文
本書は2017年1月発行の「Angular2によるモダンWeb開発」の改訂版です。初版発行からわずか2年の間にAngularはバージョン2からバージョン7まで進化し、国内において大規模な「SPA(Single Page Application)」の開発フレームワークに次々と採用されるようになりました。また、Googleが提唱する「PWA(Progressive Web Application)」にバージョン5から対応し、実装手順が簡潔になりました。PWAは高速レスポンス、オフライン利用などの機能を実現し、インストールが必要なアプリの置き換えの可能性を秘めています。Angularに欠けていた主要機能であるUIライブラリMaterial2もリリースされました。改訂版は、これらの変化へ対応して内容を全面的に書き換えました。
変化の後追いだけでなく、今後を見越したテーマも盛り込んでいます。ブラウザへ分散処理を進めていくと、サーバーに頼らないオフラインの動作、さらに進むとブラウザがサーバーの役割を行い、ほかのユーザーへデータを配信したり、サーバーのデータを更新するようになります。ここまで進化すると、ブラウザにもサーバーと同じようにデータベースが必要になります。本書では、サーバーとフロントエンドのデバイスが相互にデータ同期を行う分散データベースを実装したサンプルアプリを解説します。
第1章 変革がはじまったWeb開発
第2章 Angularアプリ開発の基礎知識
第3章 PWA実装の基礎
第4章 AngularによるPWA開発(1) マルチタイマーアプリの作成
第5章 AngularによるPWA開発(2) 分散DBを活用した観光情報検索アプリの作成
Amazonで詳しく見る
紹介文
ReactによるコンポーネントベースのWebフロントエンド開発の入門書。
FacebookのエンジニアによるReactの入門書!
ReactによるコンポーネントベースのWebフロントエンド開発の入門書。Reactでは小さくて管理が容易なコンポーネントを組み合わせて、大きくて強力なアプリケーションを作成できます。本書の前半は入門編で、簡単なサンプルを使いながらReactの基本やJSXについて学びます。後半は、実際のアプリケーション開発に必要なものや開発を助けてくれるツールについての解説です。具体的には、JavaScriptのパッケージングツール(Browserify)、ユニットテスト(Jest)、構文チェック(ESLint)、型チェック(Flow)、データフローの最適化(Flux)、イミュータブルなデータ(immutableライブラリ)などを取り上げます。対象読者は、ES2015(ES6)の基本をマスターしているフロントエンド開発者。
Amazonで詳しく見る
紹介文
Facebookが開発したJavaScriptライブラリ「React」の解説書。サンプルを用いて解説。
本邦初のReact解説書! すべての情報が一冊にコンパクトにまとまっている!
Facebookが開発したJavaScriptライブラリ「React」の解説書。本書では、数多くのサンプルを用いてReact.jsのすべての側面を解説します。1章から7章でReactコンポーネントの作成と合成を学び、Reactの基本的な使い方を理解します。8章から13章ではワンランク上のコンポーネント作成について学びます。14章と15章ではReactと共に使用して堅牢なアプリケーションを実装するためのツールについて学びます。最後に16章と17章でReactを使ってアプリケーションを実際に作成します。読者はコンポーネントベースの最新のフロントエンド開発についての体系的な知識と技術を身につけることができます。
Amazonで詳しく見る
紹介文
Vue.js3.xの入門に最適!
本書では主にWebエンジニアを対象にVue.js 3.xを基礎から丁寧に解説しています。実践的なアプリ開発を通じてVue.js 3.xの使い方がわかる1冊です。
CHAPTER 01 Vue.jsとは
CHAPTER 02 Vue 3とは
CHAPTER 03 Vue 3を体験しよう
CHAPTER 04 Composition API
Amazonで詳しく見る
紹介文
Vue.jsの実践が学べる1冊!
本書は具体的なWebサイト/Webアプリの作成を通じて、Vue.js 3.0を使った開発手法を学べる1冊です。Webエンジニアにおすすめの1冊です。
CHAPTER 01 ベースとなる環境を作ろう
CHAPTER 02 基本となるWebサイトを作ろう
CHAPTER 03 機能的なWebアプリを作ろう
CHAPTER 04 魅力的なWebアプリを作ろう
APPENDIX Vue.js 2.xとVue.js 3.xの違い
Amazonで詳しく見る
紹介文
◆◆ Vue.js 3.0への移行を強力に支援! ◆◆
Webアプリケーションの主流はSPA(Single Page Application)にシフトしつつあります。
一方、多くのエンジニア、特にサーバーサイドの開発者はフロントエンド開発に苦手意識を持っており、何らかの助けが必要です。
しかもこの分野は技術変化が速く、せっかくツール操作等を覚えても、本質を理解しないと応用が利きません。
本書はこうした課題に応えます。人気のJavaScriptフレームワークVue.jsにフォーカスし、
フロントエンド開発の基礎から本格的なSPAの開発まで、ハンズオン形式で一歩ずつ、無理なく着実にステップアップしていきます。
さらに、2020年リリース予定のVue.js 3.0をいち早くキャッチアップ。
Vue CLI 4に対応しつつ、Vue.js 2.xとの差分として新しい記述スタイル(Composition API)を併記するなど、
バージョン移行を強力に支援します。
1章 はじめての5ステップ
Step 01:Vue.jsを理解しよう
Step 02:データ入力アプリを作る
Step 03:データ表示アプリを作る
Step 04:データ更新アプリを作る
Step 05:コンポーネント化してみよう
2章 開発環境を準備しよう
1:Vue CLIを使った環境構築
2:Vue CLIで選択できる機能
3:アプリケーションのひな形を作る
4:コードエディターの準備
5:デバッグ環境の準備
3章 「Vue.js使い」になる基本8ステップ
Step 6:単一ファイルコンポーネント
Step 7:同じものをTypeScriptで書く
Step 8:サンプル開発を始めよう
Step 9:ルーティングを導入しよう
Step 10:UIコンポーネントライブラリ
Step 11:ライフサイクルフック
Step 12:バリデーションで入力値を検証
Step 13:Web APIでバックエンド連携
4章 プロに必須の8ステップ
Step 14:アプリケーションの構造
Step 15:状態管理
Step 16:部品化
Step 17:認証/認可
Step 18:エラーハンドリング
Step 19:非機能検討事項
Step 20:単体テスト
Step 21:開発プロセス
付録 Nuxt.jsハンズオン
1章 はじめての5ステップ
Step 01:Vue.jsを理解しよう
Step 02:データ入力アプリを作る
Step 03:データ表示アプリを作る
Step 04:データ更新アプリを作る
Step 05:コンポーネント化してみよう
2章 開発環境を準備しよう
1:Vue CLIを使った環境構築
2:Vue CLIで選択できる機能
3:アプリケーションのひな形を作る
4:コードエディターの準備
5:デバッグ環境の準備
3章 「Vue.js使い」になる基本8ステップ
Step 6:単一ファイルコンポーネント
Step 7:同じものをTypeScriptで書く
Step 8:サンプル開発を始めよう
Step 9:ルーティングを導入しよう
Step 10:UIコンポーネントライブラリ
Step 11:ライフサイクルフック
Step 12:バリデーションで入力値を検証
Step 13:Web APIでバックエンド連携
4章 プロに必須の8ステップ
Step 14:アプリケーションの構造
Step 15:状態管理
Step 16:部品化
Step 17:認証/認可
Step 18:エラーハンドリング
Step 19:非機能検討事項
Step 20:単体テスト
Step 21:開発プロセス
付録 Nuxt.jsハンズオン
Amazonで詳しく見る
紹介文
フロントエンドのJavaScriptフレームワークはVue.jsの他にもReact、Anglarなどさまざまありますが、その中でもVue.jsは学習コストが低いのが特徴です。Vue.jsアプリケーションは、基本的にはHTMLを拡張したテンプレートと、JavaScriptのコードから構成されます。そのため、HTMLとJavaScriptに馴染みがあれば、基本的な使い方はすぐに理解できるでしょう。Vue.jsを学習するテキストとして、最もやさしい書籍という意図で本書は制作されました。タイトル通り、「たった1日で基本が身に付く!」Vue.jsの入門書です。
CHAPTER1 Vue.jsを学ぶ準備をしよう
SECTION 01 Vue.jsについて理解しよう
SECTION 02 Vue.jsの開発環境を整えよう
SECTION 03 ひな形となるHTMLとJavaScriptファイルを作ろう
CHAPTER2 Vue.jsの基本を学ぼう
SECTION 01 Vueインスタンスを理解しよう
SECTION 02 データをWebブラウザに出力しよう
SECTION 03 バインディングを理解しよう
SECTION 04 レンダリングを理解しよう
SECTION 05 デバッグしよう
CHAPTER3 イベントハンドリングを学ぼう
SECTION 01 イベントハンドリングとメソッドを理解しよう
SECTION 02 カウンターアプリを作ってみよう
SECTION 03 データの流れを理解しよう
CHAPTER4 条件付きレンダリングを学ぼう
SECTION 01 条件分岐と条件付きレンダリングを理解しよう
SECTION 02 条件を算出プロパティに書いてみよう
SECTION 03 条件を増やそう
SECTION 04 双方向バインディングを理解しよう
SECTION 05 バリデーション機能付きの入力フォームを作成しよう
CHPTER5 リストレンダリングを学ぼう
SECTION 01 リストレンダリングを理解しよう
SECTION 02 リストレンダリングを使ってみよう
SECTION 03 ナビゲーションメニューを表示しよう
CHAPTER6 バインディングで動的にスタイルを変えよう
SECTION 01 スタイルバインディングで動的に見た目を変えよう
SECTION 02 クラスバインディングで動的に見た目を変えよう
CHPTER7 TODOアプリを作成しよう
SECTION 01 TODOアプリに必要な部品を確認しよう
SECTION 02 追加から一覧表示まで作成しよう
SECTION 03 機能を完成させよう
SECTION 04 位置や大きさを調整しよう
CHAPTER8 画像ビューワーを作成しよう
SECTION 01 画像ビューワーの部品を確認しよう
SECTION 02 コンポーネントを理解しよう
SECTION 03 コンポーネントで機能を追加しよう
SECTION 04 画像ビューワーを作成しよう
SECTION 05 アプリケーションを仕上げよう
Amazonで詳しく見る
紹介文
Web デザイナー・Web 担当者・初級のフロントエンジニアなど「Web の見た目」を作る人に向けたVue.js の入門書。
ノンエンジニアでもわかる! やさしいVue.jsの入門書
Web デザイナー・Web 担当者・初級のフロントエンジニアなど、「Web の見た目」を作る人に向けたVue.js の入門書です。
ノンエンジニアでもむりなく読み進められるように、難しいことは極力省いて、図を用いながらできるだけ平易に解説していきます。
Amazonで詳しく見る
紹介文
Angular2はGoogleが開発を主導するWebアプリ開発フレームワークです。130万人のユーザーを抱えるAngularJSと後継バージョンとしてリリースされました。従来のWebアプリ開発フレームワークがWebサーバーで動作するのに対し、Angular2はWebブラウザ上で動作する、いわゆるモダンWeb向けの開発ツールで、待ちのない画面表示やオフライン動作、容量無制限のデータ表示など、Webの常識をくつがえす操作性と機能を実現できます。開発言語にはTypeScriptが推奨され、コンポーネント指向、モジュール指向、双方向データバインディングなど新技術を積極的に取り入れています。
このように実行環境や機能、開発手法が大きく変わるため、Angular2での開発には新たな知識の習得が必須となります。本書は、このAngular2開発環境を使いこなせることを目的とした解説書で、以下の内容で構成しています。
・第1章:基本アーキテクチャ変更に伴うWebアプリ開発の変化の解説
・第2章:開発言語として使用するTypeScriptとJava/JavaScriptとの違いの説明
・第3章:最新の開発環境の準備と使用方法の説明
・第4章:Angular2独自の実装技術の解説
・第5章:開発手順確認のためのアプリ作成のチュートリアル
・第6章:基本機能理解のためのアプリ作成のチュートリアル
・付録A:有用なデバッグツール/テストツールの紹介とAngularのコマンドラインオプションなどの説明
はじめに
本書を読む前に
第1章 Angular2を知る
1.1 Angular2とモダンWeb
1.1.1 Angular2とは
1.1.2 モダンWebとは
1.1.3 モダンWebのメリット
1.1.4 モダンWeb開発のハードル
1.1.5 Angular2によるハードルの解消
1.2 Angular2の特長
1.2.1 コンポーネント
1.2.2 DI(依存性の注入)
1.2.3 データバインド
1.2.4 開発ツールの統合
1.2.5 テスト作業の自動化
1.3 Angular2の稼働環境
1.3.1 対応Web ブラウザ
1.3.2 Web ブラウザのバージョン
1.3.3 前提ソフトウェア
1.3.4 開発言語
1.3.5 Angular2バージョンアップのガイドライン
1.4 Angular2を支える技術
1.4.1 分散処理の基盤
1.4.2 UI(ユーザーインタフェース)
1.5 分散処理への対応
1.5.1 データ保存
1.5.2 通信処理
1.5.3 Ajaxの活用
1.5.4 セキュリティ
1.5.5 テスト
1.5.6 開発体制
1.5.7 モダンWeb導入のアプローチ
第2章 TypeScriptを知る
2.1 TypeScriptの概要
2.1.1 TypeScriptとは
2.1.2 TypeScriptの機能
2.1.3 TypeScriptの利用
2.1.4 静的型付けについて
2.1.5 クラス構文
2.1.6 tsconfig.json
2.2 JavaScript資産の活用
2.2.1 JavaScriptソースコードの利用
2.2.2 JavaScriptライブラリの利用
2.2.3 型定義ファイルの取得方法
2.2.4 型チェックの強制
2.2.5 JavaScriptライブラリの利用例
第3章 開発環境の準備
3.1 大きく変わるJavaScript開発環境
3.1.1 パッケージ管理
3.1.2 ビルド処理
3.1.2.1 Angular CLI
3.2 ソフトウェアのインストール
3.2.1 Google Chromeブラウザ
3.2.2 Node.js
3.2.3 Git for Windows
3.2.4 Angular CLI
3.2.5 WebStorm
3.3 開発ツールの操作
3.3.1 基本操作
3.4 コマンドラインツール
3.4.1 注意点
3.4.2 開発時に知っておくと便利なコマンド(npm)
3.4.3 開発時に知っておくと便利なコマンド(ng)
3.4.4 デバッグ操作
第4章 内部のしくみ
4.1 プロジェクトファイルの構成
4.1.1 プロジェクト全体の構成
4.1.2 ビルド出力
4.1.3 ソースコード
4.2 テンプレートシンタックス
4.2.1 テンプレートシンタックスの基本
4.2.2 テンプレートシンタックスの構文
4.3 Angular2 アプリの構成要素
4.3.1 全体構成
4.3.2 構成要素の登録
4.3.3 コンポーネントの実装
4.3.4 複数コンポーネントの連携
4.3.5 HTML 出力の内容を見る
4.3.6 サービスの実装
4.3.7 ルーターの実装
4.3.8 内部の動きを見る
第5章 スタンドアロンアプリを作る
5.1 複利計算アプリ
5.1.1 アプリの概要
5.2 アプリ作成の準備
5.3 基本機能(双方向データバインド)
5.3.1 コードの作成
5.3.2 アプリの実行
5.3.3 アプリの解説
5.4 機能拡張
5.4.1 表示機能
5.4.2 データの保存と復元
5.4.3 オフライン動作
第6章 クラウド連携アプリを作る
6.1 海外ツアー検索アプリ
6.1.1 アプリの概要
6.2 アプリ作成の準備
6.2.1 クラウドサービスとの接続
6.2.2 プロジェクトの作成
6.3.1 クロスドメイン制約
6.3 通信機能
6.3.1 クロスドメイン制約
6.3.2 サービスの実装
6.4 基本機能
6.4.1 ツアー順位表コンポーネントの作成
6.4.2 動作確認
6.4.3 実装のポイント
6.5 拡張機能
6.5.1 ツアー明細ダイアログ
6.5.2 動作確認
6.5.3 実装のポイント
6.6 モバイル対応
6.6.1 モバイル対応のしくみ
6.6.2 実装
付録A お役立ち情報
A.1 コンポーネントの見える化
A.1.1 Auguryとは
A.1.2 Auguryのインストール
A.1.3 Auguryの使い方
A.2 高速開発を支えるテストツール
A.2.1 テストツール概要
A.2.2 単体テストツールKarma
A.2.3 E2EテストツールProtractor
A.3 Angular CLIを使いこなす
A.3.1 コマンドオプション概要
A.3.2 コマンドオプションの利用
A.3.3 スクリプトと連携
A.3.4 npm によるスクリプト管理と実行
A.4 アプリサイズの軽量化
A.4.1 ビルドオプションと出力サイズ
A.4.2 AoT ビルド
A.5 アプリ起動中のWaitアイコン作成
A.5.1 Angular2アプリ起動中の表示
A.5.2 CSSアニメーション
A.5.3 Angular2アプリへの組み込み
索引
Amazonで詳しく見る
紹介文
多くのWebアプリ開発者に支持されているJavaScript MVCフレームワークを徹底詳解。ディレクティブ、フィルター、サービス、バリデーション、モジュール、DIからルーティング、テスト、セキュリティまでを総合的に解説。
基本機能の説明
ビルトインディレクティブ
フィルター・サービス・フォームバリデーション
グローバルAPI
モジュールとDI
スコープとコントローラ
ルーティングと通信
カスタムフィルター
カスタムサービス
カスタムディレクティブ
テスト
セキュリティ
ツール
Amazonで詳しく見る
紹介文
最近の開発で必須のフロントエンド。Vue.jsやAngularやReactなど複雑化する内容をすっきり理解し効率的な開発を。
■さまざまな開発支援ツールを使いこなし■
■効率的に開発をするための基礎知識■
--
■変わり続けるプラットフォームで■
■変わらないことを学ぶ■
-------------------------------------------------------------------------
根幹を支えるエコシステム "Node.js" / コンポーネント指向のフレームワーク・ライブラリの基本の考えを知り使いこなす "Vue.js" "Angular" "React" / コンパイラ "Babel" / モジュールバンドラー "webpack" / JavaScript 代替言語 "TypeScript" / 状態管理・データレイヤ "Redux" / 単方向のデーターフロー "Flux" / 静的解析ツール "Prettier" "ESLint" / ユニットテスト "Mocha" "Jest" "Karma" / 解析とABテスト "Google Analytics" "Google Optimize" / エラーイベント検知 "Sentry" / チーム作業する "スクラム" / 変わり続ける "Webプラットフォーム"
複数の開発支援ツールから「なぜそれを使うのか」選択する基準を理解する!
■Part 1 導入編 なぜ使うかを知る
●Chapter 1 フロントエンドエンジニアの歴史
1-1 Web の始まりと HTML
1-2 Web と HTML で何ができるようになったのか
1-3 ブラウザ戦争と標準化
1-4 ブログの流行とインターネットインフラ
1-5 静的な UI から動的な UI へ
1-6 「フロントエンドエンジニア」という専門職
1-7 Node.js による開発基盤の構築
1-8 ECMAScript 規格更新に伴う周辺事情の活性化
1-9 止まらないフロントエンド
●Chapter 2 フロントエンドエンジニアに求められるスキル
2-1 「フロントエンドエンジニア」が取り組む実務
想定される実務例
2-2 JavaScript の成長と要求の変化
2-3 変容する中で維持すべき開発者の姿勢
「Web は止まらない、求められる技術要素も止まらない」
パブリックな存在として
2-4 本書におけるフロントエンドエンジニア像
●Chapter 3 フロントエンドにおける一般的なツール群
3-1 Node.js とその周辺のエコシステム
パッケージマネージャー
Node.js がもたらす恩恵
3-2 コンパイラ・モジュールバンドラー
コンパイラ:Babel
モジュールバンドラー:webpack
Babel, webpack が解決すること
3-3 JavaScript 代替言語:TypeScript
TypeScript の特徴
コンパイラとしての TypeScript
TypeScript によって解決できること
3-4 フレームワーク・ビューライブラリ:Vue.js, Angular, React
Vue.js
Angular
React
コンポーネント指向のフレームワーク・ライブラリであること
3-5 状態管理・データレイヤ:Redux
ブラウザにおける状態管理は煩雑である
クライアント MVC
簡易的なクライアント MVC
フロントエンドで抽象化されるモデル、扱ううえでの課題とは
役割があいまいになる Controller
Flux というアプリケーションアーキテクチャパターン
Redux:データの一極管理
Redux が解決できること
3-6 CSS:CSSメタ言語、設計手法、CSS-in-JS
CSS を取り巻く現状
各ブラウザの対応状況について
CSS の表現力を高めた Sass、CSS メタ言語
JavaScript で作成された PostCSS
CSS 設計手法
CSS を弱点を補うためには
3-7 静的解析ツール:Prettier, ESLint
Prettier
ESLint
ほかのリンターやチェッカーについて
静的解析ツールが可能にすること
3-8 ユニットテスト:Mocha, Jest, Karma
ユニットテストとフロントエンド開発
Mocha Jest Karma それぞれどういった特性があるのか
ユニットテストやテストフレームワークが解決できること
●Chapter 4 開発の現場における仕事の進め方
4-1 アジャイルといった考え方
4-2 スクラムという開発手法
4-3 個人との対話と他者との協調
プロダクトオーナー
スクラムマスター
デザイナー
サーバサイドエンジニア
テストエンジニア・テスター
コミュニケーションハブとして
4-4 変化に対応しながら提供するサイクルを上げる
■Part 2 実践編 どう使うかを学ぶ
●Chapter 5 開発環境
5-1 既存アプリケーションの開発環境構築
Docker のインストール
Node.js のインストール
Yarn のインストール
API サーバの起動
クライアントの起動
5-2 既存機能の把握
どんなアプリケーションなのかを知る
アプリケーションが抱える課題を探る
●Chapter 6 設計と実装
6-1 フロントエンド環境の構築
Yarn の利用準備
webpack のインストール
Babel のインストール
6-2 TypeScript の導入
TypeScript のインストール
Babel 経由で TypeScript のコンパイルを行う
既存コードを TypeScript で書き換える
コンパイルエラーを解消する
6-3 コードの分割
処理を別ファイルに切り出す
6-4 Jest を利用したユニットテスト
Jest のインストール
jest.config.js の設定
描画された DOM の検査
6-5 React の導入
React のインストール
JSX のためのコンパイル設定
JSX で要素を表示する
webpack-dev-server のインストールと設定
jQuery で書いたコードを React に書き換える
イベントハンドラの記述
6-6 Enzyme を使ったコンポーネントのテスト
Enzyme のインストール
Jest の設定
React Component をテストする
6-7 styled-components の導入
styled-components のインストール
CSS から styled-components への移行
●Chapter 7 CI/CD によって受けられるメリット
7-1 CI/CD によって受けられるメリット
CI/CD について
GitHub Actions を始める
ESLint を導入し動作させる
CI で自動化するメリット
7-2 パフォーマンスと改善
パフォーマンスの問題とは
基礎的なパフォーマンス知識:クリティカルレンダリングパス
Lighthouse を利用した定期的なパフォーマンス計測
強力な武器はない、ひとにはひとのパフォーマンス
■Part 3 応用編 より深く学ぶために知る
●Chapter 8 解析とモニタリング
8-1 サービスの成長とともに開発する
仮説検証、AB テストの目的
ツールの導入: Google アナリティクス
ツールの導入: Google オプティマイズ
プロダクトコードに組み合わせる
サードパーティスクリプトとの兼ね合い
8-2 ユーザーモニタリング・エラーイベント監視
ユーザーを取り巻く環境を知る
ブラウザで起きるエラーイベントなどからユーザーを知る
エラーイベント検知のため Sentry を導入する
Sentry の動作とコードへの組み込み
React Error Boundary を利用する
収集したエラーイベントを役立てる
●Chapter 9 チーム開発と Web への貢献
9-1 チームで働く
あらためてスクラムという開発手法について
スクラムを採用したチームに入ったら
ストーリー:スプリントプランニング
タイムボックスという考え方
ストーリー:スプリントが開始する
デイリースクラム
ストーリー:スプリントの終わり
振り返り
チーム開発とはテクニカルスキルではない
9-2 コミュニティへの貢献活動
OSS への貢献はコードコミットだけではない
できることから OSS へコミットする
寄付する、翻訳するといった違ったアプローチ
Web というプラットフォームに貢献する
9-3 Web プラットフォームに関わるフロントエンド開発者として
仕様を知るには
ライトにキャッチアップする
フロントエンド技術を楽しむために