**チャプターのカタログ：***。
**第1章：カリキュラムの紹介**」。
**コース全体の背景知識、プロジェクトの概要、学習プロセス、習得可能な知識ポイント、学習方法論や予備知識を紹介します。**
**1-1ガイドトライアル
**1-2 コードベース**の使用に関する注意事項
**第2章：型の世界へようこそ-タイプスクリプト**」。
**この章では、主にTypeScriptが解決できる問題とその利点を理解するのに役立ちます。 TSのさまざまな基本型を学んだ後、Array、Tuple、interface、function、Class、Enum、Genericesなどの複雑な型へと進み、TSの基本的な使い方と構文をすぐに理解できるようになります。TSの基本的な使い方と構文がすぐに理解できます。 ...**
**2-1 タイプスクリプト・トライアルとは？
**2-2 なぜタイプスクリプト**を使うのですか？
**2-3 Typescript のインストールと初期テスト
**基本2～4タイプ
**2-5の任意のタイプとユニオンタイプ**。
**配列とタプル** 2-6
**2-7インターフェイス予備調査
**関数と型推論** 2-8
**2-9 カテゴリーI
**2-10カテゴリーII
**2-11 クラスとインターフェース
**2-12列挙
**2-13 洪水 その
**2-14 洪水 その II - 制約された洪水** （英語
2-15 洪水パート III - クラスとインターフェース** 2-15 洪水パート III - クラスとインターフェース** 2-15 洪水パート III - クラスとインターフェース
**型エイリアスと型アサーション** 2-16
**2-17 宣言文書**
**第3章 タイプスクリプトで完璧な出力を実現するReactの魔法
**この章では、Reactの基本をおさらいし、まったく新しいReact Hooksにつなげます。 タイプスクリプトの基本に関する前の章と合わせて、useState、useEffect、カスタムHooks、useContext、useRefの基本を詳しく説明し、コンポーネントライブラリの開発のための強固な基礎を築きます。**
**3-1 React入門と基礎の復習
**3-2 開発環境の設定
**3-3 第 1 成分 - ts 燃料成分
**3-4 React Hooks**とは何か、なぜ必要なのか
**3-5 ファンクションコンポーネントでステートを使用する - useState Hook**
**3-6 useEffect Part I - First Time Out**.
**3-7 useEffect Part II - 終わりの見えないリーダーシップ** （英語
**3-8 useEffect Part III - Control Operations**.
**3-9 カスタムフック - MouseTracker**のリファクタリング
**3-10カスタムフックその2 - HOCの欠点**。
**3-11 フックをカスタマイズする Part 3 - URLLoaderを正しい方法で完成させる**
**3-12 useRef - state encountered difficulties**.
**3-13 useRef - 複数レンダリング間のリンク**。
**3-14 useContext - 渡された属性を何層にも重ねるための万能薬** です。
**3-15フックのルールとその他のフック**。
**第4章: コンポーネントライブラリの離陸 - シンプルに見えるボタンコンポーネントは本当に書けるのか？**
** この章は正式にコンポーネントライブラリの執筆に入り、前半はファイル構造とコード仕様を指定し、スタイルの解決策を分析し、一連のスタイルベース要素を追加し、後半はボタンコンポーネントのコーディングを徐々に完成させます。**
**4-1 コンポーネント・ライブラリの立ち上げ - 要件分析** （英語
**4-2 文書構造とコード仕様**
**4-3 スタイル・ソリューションの分析
**4-4 デザイナーになろう - 独自のカラーシステムを追加**
**4-5 マルチスタイル変数の追加 - フォント変数ソリューション**の追加
**4-6 最初の外観 - normalize.cssを追加します**。
**4-7ボタンコンポーネント要件分析**
**4-8 ちょっとおためし - ボタンコンポーネントのコーディング その1**
**4-9 ボタンの基本スタイルの追加**
**4-10 アップグレードボタンコンポーネントスタイル
**4-11リーン・イン-ビュートン・コンポーネント・コーディング パート2トライアル
**4-12 アラートコンポーネント**の完了
**第5章: コンポーネントのテスト**.
**この章では、テストとは何かから始まり、テストの基本概念を紹介し、汎用テストツールJestとReactテストフレームワークreact-testing-libraryを紹介し、これら2つのツールを使ってButtonコンポーネントのユニットテストを完成させます。**
**5-1 なぜテストがあるのか
**5-2 汎用テストフレームワーク Jest の外観
**5-3 Reactのテストツール - react-testing-library**
**5-4 ボタンのテストコードの追加 その1**
**5-5 ボタンのテストコードの追加 その2**
**アラートコンポーネントにテストケースを追加します。
**第6章 次のレベルへ - メニューを完成させる**章
**この章では、メニューコンポーネントを完成させることで、前の2つの章を基礎とし、要求の分析からコンポーネントのコーディング、再び要求の分析、再びコーディング、そして最後にコンポーネントのすべてのユニットテストを完成させます。**
**6-1 メニュー構成要素の要件分析**」を参照してください。
**6-2 インフラストラクチャー - メニューコンポーネントのコーディング その1**
**6-3 要件のエスカレーション - メニューコンポーネントのコーディング Part II***.
**メニュースタイルの追加
**6-5テストドライバー - メニューテスト追加**。
**6-6 上達するメニュー・コンポーネント・コーディング Part III**.
**6-7 機能アップを継続 - サブメニューのドロップダウンメニューのコーディングその1**.
**6-8 インタラクションの追加 - サブメニュー・ドロップダウンメニューのコーディング Part 2**.
**6-9大ヒットのサブメニュー・ドロップダウンメニューのコーディング Part 3**
**6-10 パーフェクトコンポーネント - サブメニューコンポーネント追加テスト
**6-11タブ構成**。
**第7章：強みを生かす - アイコン部品と移行部品
**この章では、サードパーティライブラリ Fontawesome と React-Transition-Group を使って、アイコンと React アニメーションのソリューションを完成させる方法と、それらをカスタマイズして新しいコンポーネントに変換する方法を説明します。**
**アイコンソリューションの簡単な説明** 7-1
**7-2 他山の石 - アイコンコンポーネント・コーディング その1**.
**7-3 アイコンコンポーネントのスタイリング**」。
**7-4 アイコンを動かす - アニメーションエフェクトの最初の実装**.
**7-5 React Transition Group**の紹介
**7-6 React トランジション・グループ演習 - アニメーション・エフェクトの第2回実装**.
**7-7 As Good as It Gets - React Transition Group メニューが消えるアニメーションを追加しました**。
:: **7-8 フェティシズム--カスタム・トランジション・コンポーネントのコーディング その1**.
:: **7-9 フェティシズム--カスタム・トランジション・コンポーネントのコーディング その2**.
**7-10完成したアイコンと移行コンポーネント**。
**Chapter 8 Storybook - コンポーネントのローカルデバッグやドキュメントページの生成に最適なツールです。
**この章では、Stroybookの定義とインストールから始まり、Storyの追加方法、プラグインのインストール方法、そして最後にドキュメントを自動生成するタスクを完了します。**
**8-1 ストーリーブック**とは
**8-2 Stroybook**のインストール
**8-3 Storybook が Typescript をサポートしました。
**8-4ショーケース-ストーリーを加える**ボタンへ
**8-5 トラに翼をつける - Stroybookアドオンシステムの紹介**.
**8-6 詳細情報 - Storybook addon-info プラグインの追加** （英語
**8-7 ドキュメント生成の自動化 - react-docgen-typescript の追加 その1**
**8-8 ドキュメント生成の自動化 - react-docgen-typescript の追加 その2**.
**8-9 仕上げ - ストーリーブックの最終的なスタイリング調整**
**8-10 ストーリーブック建築の完成。
**第9章 フォームの世界へ - 入力コンポーネントとオートコンプリートコンポーネント
** この章では、フォームの世界に入り、シンプルなコンポーネントInputから始まり、AutoCompleteコンポーネントの解析と実装に至り、その過程で、非同期リクエスト、関数の安定化、キーボードイベント、useRef、その他多くの機能について学びます。**
**9-1 敵を知る - 入力コンポーネントの要件分析**
**9-2 タオルを投げる - Inputコンポーネントの擬似コード実装**
**9-3 継続的な最適化 - 入力コンポーネントコードの実装と最適化プロセス**.
**9-4 新たな挑戦--オートコンプリート・コンポーネント分析**」（英語
**9-5 基本スケルトン - オートコンプリートのコーディング Part 1**.
**カスタムテンプレートのオートコンプリートのサポート** 9-6
**AutoComplete は非同期リクエストコーディングをサポートします。
**9-8 古いボトルの新しいワイン - カスタムフックを使って機能的なアンチシェイクを実装する方法
**9-9 キーボードイベントのオートコンプリートのサポート**
**useRef の素晴らしい使い方 - clickOutSide 機能の実装 - ** 9-10
**9-11 完璧にまとめる - オートコンプリートによるユニットテストの追加**
**9-12 コンポーネントを選択
**第10章：究極のミッション - アップロード・コンポーネント
** この章では、分析、コーディング、全体のプロセスのテストからアップロードコンポーネントを実装し、このプロセスでは、学習されます：非同期リクエストを送信するaxiosの使用、オンラインモックサーバーの簡単な使用、HTTPの非同期アップロードファイルの基本、ドラッグアンドドロップファイルのアップロードを実装する方法、非同期とドラッグアンドドロップユニットテストの書き方。** ***
**10-1 最終タスク - アップロードコンポーネントの要件分析
**10-2 次世代HTTPライブラリ - axios***
**10-3 オンラインモックサーバとアクシオスの簡単な使い方
**ファイルをアップロードする基本的な方法** 10-4
**10-5 基本プロセスの完了 - コンポーネント・コーディングのアップロード Part 1**.
**10-6 ライフサイクルの洗練 - コンポーネント・コーディングのアップロード Part 2**
**10-7 リストデータの作成 - UploadListコンポーネントのコーディングその1**.
**10-8 アップロードされたデータを表示する - UploadListコンポーネントのコーディングその2**.
**10-9 アップロードの進捗を表示する - 進捗コンポーネントを追加する**」を参照してください。
**10-10 リーン - アップロードされたコンポーネントを再分析し、要件に近づける**。
**10-11アップロードによるインタラクションの強化 その
**10-12 ドラッグ・アンド・ドロップによるアップロード - ドラッグ・アンド・ドロップをサポート**。
**10-13 非同期テストはどうやる？ - アップロードテスト その1
**10-14 ドラッグ・イベントのテストは？ - アップロードテスト その2
**第11章 Javascriptモジュールのパッケージング - さまざまな環境で必要とされるモジュールの種類とは？**
**この章では、Javacriptにおけるモジュール化の歴史から始まり、webpackのようなバンドラーの主な効果について説明し、異なるモジュールタイプの利点と欠点を比較します。**
**11-1 Javascriptのモジュール化の発展の歴史
**11-2 webpackは実際に何を実現するのか？ - バンドラーの魔法
**11-3.Javascriptモジュールの形式を選ぶには？**
**11-4 コンポーネントライブラリモジュールエントリファイルの作成
**11-5 tscを飼いならす - tsconfigの書き方 その1**.
**11-6 tscを飼いならす - tsconfigの書き方 その2**.
**エンドユーズスタイルファイルの生成** 11-7
**11-8 npm link ネイティブテストコンポーネントライブラリの使用法 その1**.
**11-9 npm link ネイティブテストコンポーネントライブラリの使用 その2**
**第12章：大詰め - NpmへのパブリッシュとCI/CDサポートの追加**章
**この章では、Npmの紹介から始まり、コンポーネントライブラリをnpmに公開する方法を説明し、package.jsonの依存関係を最適化し、コミットとリリースチェックを追加し、最後にtravisを使用してコンポーネントライブラリのCI/CDを完了するための基本的なプロセスのいくつかを説明します。**
**12-1 Npmの紹介
**12-2 npm**へのコンポーネント・ライブラリの公開
**12-3 間引きタスク - package.json 依存関係のスリム化** を行います。
**12-4 Foolproof - プレリリースとコミットのチェックを追加**。
**STORYBOOK を使って静的なドキュメントページを生成する** 12-5
**12-6 CI CD** 入門
**12-7 travis**を使ったテスト実行の自動化
**12-8 travis**を使ったドキュメントページの自動公開
**第13章：コースのまとめ
**コースと展望のレビューとまとめ。**
**コース概要**
**このコースは終了しました。
