ページカタログ
Next.js と React の学習用サンプルページ一覧。
カテゴリから探すか、下記一覧からページを選択してください。
17
ページ数
7
カテゴリ
7
初級
初級
Hello World
最も基本的なサンプルページ。Hello Worldを表示します。
React基礎
詳細を見る
初級
ボタンの基礎
異なるスタイルのボタンを実装し、Tailwind CSSでの表現方法を学びます。
ButtonTailwind CSS
詳細を見る
初級
フォーム入力
テキスト入力、チェックボックス、セレクトボックスなどフォーム要素の実装。
FormInputTailwind CSS
詳細を見る
初級
Flexboxレイアウト
Flexboxを使用した柔軟なレイアウト設計とレスポンシブ対応。
FlexboxTailwind CSSレスポンシブ
詳細を見る
中級
Gridレイアウト
CSS Gridを使用した高度なレイアウト実装。
GridTailwind CSS
詳細を見る
初級
フェードトランジション
CSSトランジションを使用したフェードイン/アウト効果。
CSS TransitionTailwind CSS
詳細を見る
初級
useState カウンター
useStateフックを使用したシンプルなカウンター実装。
useStateReact
詳細を見る
中級
useEffect ライフサイクル
useEffectフックを使用したコンポーネントのライフサイクル管理。
useEffectReact
詳細を見る
中級
Server Components
Next.js App RouterのServer Componentsの使用方法と利点。
Server ComponentsNext.js
詳細を見る
中級
カスタムフック
useLocalStorageやuseDebounceなど、再利用可能なカスタムフックの作成方法。
Custom HooksReact再利用
詳細を見る
中級
Server Actions
フォーム送信とサーバー処理を統合するServer Actionsの実装パターン。
Server ActionsFormNext.js
詳細を見る
上級
Suspense とローディング
React Suspenseを使用した非同期コンポーネントのローディング状態管理。
SuspenseLoadingStreaming
詳細を見る
上級
Compound Components
複合コンポーネントパターンによる柔軟で再利用可能なUIコンポーネント設計。
Design PatternsContextコンポーネント設計
詳細を見る
初級
Jotai 基礎
Jotaiのatom・useAtomフックを使ったシンプルな状態管理の基礎。
Jotai状態管理Atom
詳細を見る
中級
Jotai 派生Atom
読み取り専用・書き込み専用・読み書き可能な派生Atomの作成方法。
JotaiDerived Atom状態管理
詳細を見る
上級
Jotai Todoアプリ
Jotaiを使った本格的なTodoアプリで学ぶ、実践的な状態管理パターン。
JotaiCRUDatomFamily+1
詳細を見る
中級
AI チャットボット
Vercel AI SDKのuseChat フックとstreamTextを使用したSSEストリーミング対応チャットボット。
AI SDKuseChatSSE+1
詳細を見る