ソフトウェア開発で学んだことを記録しています。
この記事はまだ翻訳されていません。
第1回から第14回までを振り返り、TDD導入前後のコード品質の変化と、E2Eや視覚的テストなど今後の学習テーマを紹介してシリーズを締めくくります。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
フロントエンドでテストが大切な理由、ReactでTDDを導入する利点、テストすべき範囲を説明します。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
この記事はまだ翻訳されていません。
To-Doリストを作りながら、TypeScriptでのストア設計、フォームの状態管理、効率的なコンポーネント構成を学びます。
TypeScriptでcreateを理解し、selectorとshallowによる最適化やget・set・subscribeなどのストア操作を学びます。
Reactの状態管理に役立つZustandを、ReduxやContext APIと比較し、カウンターの例から基本操作を学びます。
TypeScriptとReactを組み合わせる際に役立つパターンを学びます。ジェネリックコンポーネントの型付け、カスタムフックの型推論、ZodやYupを使ったフォームの型安全性を例とともに説明します。
React DevToolsのComponentsとProfilerの使い方、JestとReact Testing Libraryによるイベント・非同期処理・モックのテスト例、StorybookとChromaticでUIを開発してテストする手順を学びます。
ReactアプリケーションのXSSやCSRFなどの脅威への対策を、例とともに学びます。OAuth 2.0/OIDCの認証フロー、コード分割、サードパーティスクリプトを安定して管理する戦略も説明します。
Reactアプリケーションで効果的にAPI通信と非同期処理を行う戦略を学びます。FetchとAxiosの比較、AbortControllerによるリクエストのキャンセル、GraphQLクライアントの導入時期、データ読み込みのためのSuspenseまで説明します。
マイクロフロントエンド（MFE）の概念、長所と短所、実装戦略を学びます。Webpack Module Federation、Single-SPAなどの主要技術から、チームの境界、デプロイモデル、導入時の検討事項までわかりやすく説明します。
再利用しやすく保守しやすいReactコンポーネントの設計原則とパターンを学びます。SRP、Atomic Design、Container/Presentationalパターンを例とともに説明し、テストしやすくする方法を紹介します。
Reactの開発と内部動作で使われる配列、連結リスト、ツリー、グラフ、ハッシュテーブルを、一覧表示や最適化との関係から学びます。
React Router v6のHistory API、URL照合、入れ子のルート、Outlet、Link、useNavigate、コード分割を学びます。
CSR・SSR・SSGの原理と長所・短所、Hydration、Next.jsのストリーミングSSR、Islands Architectureを比較します。
Context API、Redux Toolkit、Zustand、Recoilと、React Query・SWRのサーバー状態管理を、ストア・購読・選択子の原理から比較します。
ブラウザーの描画パイプライン、Reactの初回表示、JavaScriptのイベントループ、CSR・SSR・SSGの違いを詳しく学びます。
useEffectとuseLayoutEffectの違い、useRefのDOM参照と値の保持、useReducer、カスタムフックでのロジック再利用を学びます。
React 17との違い、マイクロタスク、flushSync、startTransitionから、React 18の自動バッチ処理と並行性を学びます。
フックの呼び出し順、連結リスト、Update Queue、関数型更新、バッチ処理、遅延初期化からuseStateとsetStateの内部を理解します。
Virtual DOM、Reconciliation、Fiber、優先順位のあるスケジューリング、Strict Modeを通じて、Reactの描画を理解します。
React Queryのクエリ処理をカスタムフックへ抽象化し、複数のページやコンポーネントで再利用する方法を実例で説明します。
Reactで非同期APIデータを効率的に扱うため、TanStack Queryの導入、基本操作、高度なキャッシュ戦略を例とともに紹介します。
SSRの必要性と基本動作、React 18のストリーミング、renderToPipeableStreamとSuspenseの連携を段階的に説明します。
AWS LambdaとS3を連携し、画像アップロード時にリサイズとWebP変換を自動実行する、サーバーレス画像処理の手順を紹介します。
公式ガイドを基にTailwind CSS 3.0から4.0への移行、ブラウザー対応、設定構造、破壊的変更を例とともに説明します。
静的生成からISRへ移行した経緯と効果、ビルドエラーの解決方法を詳しく紹介します。
Next.jsのISRについて、概念、実装方法、高度な機能まで詳しく説明します。
これまでに学んだデータ取得方式を整理し、状況に合わせて適切な戦略を選ぶ実践的な指針を紹介します。
Next.jsのfetchをカスタマイズし、APIのRoute Handlerでバックエンド通信を構成する方法を学びます。
複数のリクエストを扱う並列・順次・条件付きfetchと、クライアントでデータを取得する方法を学びます。
Next.jsのfetchが提供するキャッシュオプションと、それぞれの意味を詳しく説明します。
Next.js App Routerでのデータ取得と、Server Componentsを中心とするデータの流れを学びます。
重複fetchの削減、Suspenseの整理、クライアント側の日付整形など、実際のNext.jsブログで行った性能改善をまとめます。
Next.js 15への更新に伴う主な変更点、移行手順、発生しうる問題と解決方法を段階的に説明します。
Next.js App Routerで静的HTMLを読み込み、iframeでページ内に表示する方法と注意点を説明します。
React、Expo、React Nativeで、i18nextの初期化、言語パック、変数、書式設定、単数・複数形を利用する方法を説明します。
React、Next.js、React Native、Node.jsなどのTypeScript環境で、Axiosのリクエスト・レスポンス型とサービス層を設定します。
Tailwindの設定ファイル、プラグイン、global.cssを使い、スタイルやフォントをカスタマイズする方法を説明します。
Next.jsのファイルシステムルーティング、動的ルート、APIのRoute Handlerの基本的な使い方を説明します。
Next.jsプロジェクトを作成し、Tailwind CSS、Shadcn/ui、Typographyを設定する手順を説明します。
ブログを構成する技術スタックと主要ライブラリについて、役割と採用理由を紹介します。
ブログとしての機能と開発成果物という二つの観点から、制作の目標を整理します。
自分でブログを作り、運営しようと決めた理由を振り返ります。
Amazon S3とCloudFrontで画像配信のCDNを構築し、独自ドメインとSSL証明書を設定する手順を紹介します。
独自APIとPrisma、およびSupabase REST APIを使い、Next.jsのCSR・SSRでデータを取得する方法を紹介します。