SvelteKit on じるラボ

家計簿アプリを作る #34：Cloudflare Pages への再デプロイ

Mon, 29 Jun 2026 03:00:00 +0900

家計簿アプリ作成シリーズの第34回です。前回実装したレスポンシブ対応を Cloudflare Pages にデプロイします。

家計簿アプリを作る #33：レスポンシブ対応

Mon, 29 Jun 2026 02:00:00 +0900

家計簿アプリ作成シリーズの第33回です。スマートフォンでも使いやすいようにレスポンシブ対応を行います。

家計簿アプリを作る #32：Cloudflare Pages への再デプロイ

Mon, 29 Jun 2026 01:00:00 +0900

家計簿アプリ作成シリーズの第32回です。前回実装したダークモード対応を Cloudflare Pages にデプロイします。

家計簿アプリを作る #31：ダークモード対応

Mon, 29 Jun 2026 00:00:00 +0900

家計簿アプリ作成シリーズの第31回です。flowbite-svelte の DarkMode コンポーネントを使ってダークモードの切り替え機能を実装します。

家計簿アプリを作る #30：Cloudflare Pages への再デプロイ

Sun, 28 Jun 2026 01:00:00 +0900

家計簿アプリ作成シリーズの第30回です。前回実装した月次推移グラフ機能を Cloudflare Pages にデプロイします。

家計簿アプリを作る #29：収支の月次推移グラフ

Sun, 28 Jun 2026 00:00:00 +0900

家計簿アプリ作成シリーズの第29回です。前回の選択月の収支グラフに加えて、複数月にわたる収支の月次推移グラフを追加します。

家計簿アプリを作る #28：Cloudflare Pages への再デプロイ

Sat, 27 Jun 2026 03:00:00 +0900

家計簿アプリ作成シリーズの第28回です。前回実装した収支グラフ機能を Cloudflare Pages にデプロイします。

家計簿アプリを作る #27：収支グラフの表示

Sat, 27 Jun 2026 02:00:00 +0900

家計簿アプリ作成シリーズの第27回です。Chart.js を使って月別の収支を棒グラフで可視化します。

家計簿アプリを作る #26：Cloudflare Pages への再デプロイ

Sat, 27 Jun 2026 01:00:00 +0900

家計簿アプリ作成シリーズの第26回です。前回実装したCSVエクスポート機能を Cloudflare Pages にデプロイします。

家計簿アプリを作る #25：収支データのCSVエクスポート

Thu, 25 Jun 2026 02:00:00 +0900

家計簿アプリ作成シリーズの第25回です。月別の収支データをCSVファイルとしてダウンロードできる機能を実装します。

家計簿アプリを作る #24：Cloudflare Pages への再デプロイ

Thu, 25 Jun 2026 01:00:00 +0900

家計簿アプリ作成シリーズの第24回です。前回のデプロイ（#21）以降に追加したページネーション・キーワード検索機能を Cloudflare Pages にデプロイします。

家計簿アプリを作る #23：収支一覧のキーワード検索

Wed, 24 Jun 2026 00:00:00 +0900

家計簿アプリ作成シリーズの第23回です。収支一覧にキーワード検索機能を追加します。月フィルタと組み合わせて、メモ・カテゴリを対象に絞り込みができるようにします。

家計簿アプリを作る #22：収支一覧のページネーション

Tue, 23 Jun 2026 00:00:00 +0900

家計簿アプリ作成シリーズの第22回です。データが増えたときに全件表示では見づらくなるため、ページネーションを実装します。

家計簿アプリを作る #21：Cloudflare Pages への再デプロイ

Mon, 22 Jun 2026 00:00:00 +0900

家計簿アプリ作成シリーズの第21回です。前回のデプロイ（#15）以降に追加した機能をまとめて Cloudflare Pages にデプロイします。

家計簿アプリを作る #20：flowbite-svelte コンポーネントで UI を統一する

Sun, 21 Jun 2026 00:00:00 +0900

家計簿アプリ作成シリーズの第20回です。今回は全ページのUIを flowbite-svelte コンポーネントに置き換えて統一します。

家計簿アプリを作る #19：削除の確認ダイアログ

Fri, 19 Jun 2026 01:00:00 +0900

家計簿アプリ作成シリーズの第19回です。今回は削除ボタンに確認ダイアログを追加して、誤削除を防ぎます。

家計簿アプリを作る #18：フォームのバリデーション強化

Fri, 19 Jun 2026 00:00:00 +0900

家計簿アプリ作成シリーズの第18回です。今回は収支の登録・編集フォームにバリデーションを実装します。

家計簿アプリを作る #17：複数ユーザー対応

Thu, 18 Jun 2026 00:00:00 +0900

家計簿アプリ作成シリーズの第17回です。今回は複数ユーザー対応を実装します。これまで全ユーザーのデータが共有されていたため、ログインユーザーのデータのみ表示・操作できるように修正します。

家計簿アプリを作る #16：UI全体の見直し

Mon, 15 Jun 2026 01:00:00 +0900

家計簡アプリ作成シリーズの第16回です。機能実装が一通り完了したので、全ページの UI を見直します。

家計簿アプリを作る #15：再デプロイと最新月の自動選択

Mon, 15 Jun 2026 00:00:00 +0900

家計簿アプリ作成シリーズの第15回です。ここまでの実装を Cloudflare Pages に再デプロイし、あわせてログイン直後に最新月が自動選択される UX 改善を実装します。

家計簿アプリを作る #14：登録・編集後の月フィルタ維持

Sat, 13 Jun 2026 01:00:00 +0900

家計簿アプリ作成シリーズの第14回です。今回は収支の登録・編集後に元の月フィルタ状態に戻る処理を実装します。

家計簿アプリを作る #13：登録・編集フォームの改善

Sat, 13 Jun 2026 00:00:00 +0900

家計簿アプリ作成シリーズの第13回です。今回は収支の登録・編集フォームのカテゴリ入力をテキストから <select> に変更し、収入・支出で選択肢が切り替わるようにします。

家計簿アプリを作る #12：月別フィルタの実装

Fri, 12 Jun 2026 00:00:00 +0900

家計簿アプリ作成シリーズの第12回です。今回は収支一覧に月別フィルタを実装します。

家計簿アプリを作る #11：収支の集計表示

Thu, 11 Jun 2026 00:00:00 +0900

家計簿アプリ作成シリーズの第11回です。今回は収入合計・支出合計・残高の集計をトップページに表示します。

家計簿アプリを作る #10：Tailwind CSS v4 + Flowbite でUI スタイリング

Wed, 10 Jun 2026 00:00:00 +0900

家計簿アプリ作成シリーズの第10回です。今回は Tailwind CSS v4 と Flowbite Svelte を導入して UI をスタイリングします。

家計簿アプリを作る #9：Cloudflare Pages へのデプロイ

Tue, 09 Jun 2026 00:00:00 +0900

家計簿アプリ作成シリーズの第9回です。今回は Cloudflare Pages へのデプロイを行います。ハマりポイントが多かったので詳しくまとめます。

家計簿アプリを作る #8：ログイン・ログアウトの実装

Mon, 08 Jun 2026 01:00:00 +0900

家計簿アプリ作成シリーズの第8回（後編）です。前回に引き続き、ログイン・ログアウトを実装します。

家計簿アプリを作る #7：Better Auth のセットアップ + サインアップ実装

Mon, 08 Jun 2026 00:00:00 +0900

家計簿アプリ作成シリーズの第7回（前編）です。今回は Better Auth を使った認証の土台を作り、サインアップまでを実装します。

家計簿アプリを作る #6：収支の編集を実装する

Wed, 03 Jun 2026 02:00:00 +0900

家計簿アプリ作成シリーズの第6回です。今回は登録済みの収支データを編集できるようにします。

家計簿アプリを作る #5：収支の削除を実装する

Wed, 03 Jun 2026 01:00:00 +0900

家計簿アプリ作成シリーズの第5回です。今回は一覧をテーブル表示に変更し、各行に削除ボタンを追加します。

家計簿アプリを作る #4：収支の登録フォームを実装する

Wed, 03 Jun 2026 00:00:00 +0900

家計簿アプリ作成シリーズの第4回です。今回は SvelteKit の Form Actions を使って収支の登録フォームを実装します。

家計簿アプリを作る #3：D1 への接続 + 収支一覧の表示

Tue, 02 Jun 2026 00:00:00 +0900

家計簿アプリ作成シリーズの第3回です。今回は Drizzle ORM 経由で D1 に接続し、収支データをトップページに一覧表示するところまでを実装しました。

家計簿アプリを作る #2：Drizzle でスキーマ設計 + D1 マイグレーション

Mon, 01 Jun 2026 00:00:00 +0900

家計簿アプリ作成シリーズの第2回です。今回は Drizzle ORM でスキーマを定義し、Cloudflare D1 にマイグレーションを適用するところまでを記録します。ハマりポイントが多かったので詳しくまとめます。

家計簿アプリを作る #1：SvelteKit × Cloudflare D1 × Drizzle の環境構築

Sun, 31 May 2026 01:00:00 +0900

SvelteKit + Cloudflare Workers（D1 + Drizzle ORM）を使って家計簿アプリを作っていきます。この記事はその第1回で、プロジェクトの環境構築をまとめます。

GitHub ActionsでSvelteKitをCloudflare Workersに自動デプロイした話

Sun, 31 May 2026 00:00:00 +0900

GitHub Actionsを使うと、mainブランチへのプッシュで自動的にCloudflare Workersへデプロイできます。手動での wrangler deploy が不要になります。

SvelteKitでi18n（多言語対応）を実装した話

Sat, 30 May 2026 02:00:00 +0900

SvelteKitでi18n（国際化・多言語対応）を実装しました。まずシンプルな実装で概念を理解し、本番向けのアプローチも紹介します。

Drizzle ORMのリレーションでテーブルを結合して取得した話

Sat, 30 May 2026 01:00:00 +0900

Drizzle ORMの relations を使うと、テーブル間の関係を定義してシンプルなコードで結合データを取得できます。posts と comments を例に実装しました。

SvelteKit × Cloudflare WorkersでWebSocketを実装した話

Sat, 30 May 2026 00:00:00 +0900

WebSocketを使うと、一度接続したら切断するまで双方向にリアルタイムで通信し続けられます。SvelteKit + Cloudflare Workersでエコーサーバーを実装しました。

DrizzleでマイグレーションとSeedを実装した話

Fri, 29 May 2026 03:00:00 +0900

drizzle-kitを使ってマイグレーションを生成し、Cloudflare D1に適用する方法と、seed.sqlで初期データを流し込む方法をまとめます。

SvelteKit × Cloudflare D1にDrizzle ORMを導入した話

Fri, 29 May 2026 02:00:00 +0900

Drizzle ORMはTypeScript向けの軽量ORMです。platform.env.DB.prepare('SELECT ...') と書いていた生SQLを、型安全なTypeScriptのコードに置き換えられます。今回は既存のCloudflare D1テーブルに対してDrizzleを導入しました。

Cloudflare QueuesのプロデューサーをSvelteKitで実装した話

Fri, 29 May 2026 01:00:00 +0900

Cloudflare Queuesを使うと、処理を非同期でバックグラウンド実行できます。重い処理をQueueに投げることで、ユーザーを待たせずにレスポンスを返せます。

Svelte 5のSvelteMap・SvelteSetでリアクティブなデータ構造を使った話

Fri, 29 May 2026 00:00:00 +0900

Svelte 5では $state でオブジェクトや配列をリアクティブにできますが、Map や Set は .set() や .add() などの操作では画面が更新されません。これを解決するのが svelte/reactivity のクラスです。

Svelte 5の$inspectでリアクティブ値をデバッグした話

Thu, 28 May 2026 01:00:00 +0900

Svelte 5の $inspect を使うと、リアクティブな値（$state や $derived）が変化するたびに自動でコンソールにログを出力できます。console.log を手動で仕込む必要がなくなります。

SvelteKit × Resendでメール送信を実装した話

Thu, 28 May 2026 00:00:00 +0900

ResendはシンプルなAPIでメール送信できるサービスです。無料枠で月3,000通まで送れます。SvelteKit + Cloudflare Workersとの組み合わせでお問い合わせフォームを実装しました。

SvelteKitでSEOとOGPのメタタグを設定した話

Wed, 27 May 2026 01:00:00 +0900

SvelteKitでは <svelte:head> タグの中にメタタグを書くだけでSEOやOGPの設定ができます。

SvelteKitのhandleFetchフックでサーバー側fetchをカスタマイズした話

Wed, 27 May 2026 00:00:00 +0900

SvelteKitの handleFetch フックを使うと、load 関数内で実行されるサーバー側の fetch をインターセプトしてリクエストを変更できます。

Cloudflare Workers AIをSvelteKitで使った話

Tue, 26 May 2026 01:00:00 +0900

Cloudflare Workers AIを使うと、Cloudflareのエッジネットワーク上でAIモデルを直接実行できます。外部のAI APIを別途契約しなくても、Cloudflareアカウントだけで利用できます。

Cloudflare Workersのシークレット管理を整理した話

Tue, 26 May 2026 00:00:00 +0900

Cloudflare Workersでシークレット（APIキーなど秘密の値）を扱う方法を整理します。ローカルと本番で管理方法が異なります。

SvelteKitのsnapshotでページ離脱時の入力内容を復元した話

Mon, 25 May 2026 01:00:00 +0900

SvelteKitの snapshot を使うと、ページを離れるときに状態を保存し、ブラウザの「戻る」で戻ったときに復元できます。フォームに入力中に誤って別ページに遷移してしまっても、戻ったときに入力内容が残ります。

SvelteKitのAPIルートにCORS対応を追加した話

Mon, 25 May 2026 00:00:00 +0900

SvelteKitの +server.ts で作ったAPIを別オリジンから呼び出すには、CORSヘッダーの設定が必要です。

Cloudflare KVをSvelteKitで使った話

Sat, 23 May 2026 03:00:00 +0900

Cloudflare KV（Key-Value Storage）はシンプルなキーと値のペアを保存するストレージです。D1のようなSQLクエリは不要で、get / put / delete だけで操作できます。

SvelteKitの$app/navigationでプログラムからナビゲーションを制御した話

Sat, 23 May 2026 02:00:00 +0900

SvelteKitでは $app/navigation から関数をインポートすることで、JavaScriptからナビゲーションを制御できます。<a> タグでは対応できない条件付き遷移や離脱確認などに使います。

SvelteKitの$app/stateでページ情報にアクセスした話

Sat, 23 May 2026 01:00:00 +0900

SvelteKitでは $app/state から page オブジェクトをインポートすることで、コンポーネントのどこからでも現在のURL・パラメータ・ルート情報にアクセスできます。

SvelteKitのストリーミング（遅延ロード）を試した話

Sat, 23 May 2026 00:00:00 +0900

SvelteKitでは、load 関数から Promise をそのまま返すことで、データの一部を後から流し込むストリーミングが実現できます。重いクエリが完了するまでページ全体を待たせずに、段階的に表示できるのがメリットです。

SvelteKit × Cloudflare R2 でファイルアップロードを実装した話

Fri, 22 May 2026 00:00:00 +0900

SvelteKit + Cloudflare Workers の構成でCloudflare R2を使ったファイルアップロード機能を実装しました。

SvelteKitの名前付きアクション（Named Actions）でフォームを整理した話

Thu, 21 May 2026 03:00:00 +0900

SvelteKitでは、1つのページに複数のフォームアクションを定義できます。これを Named Actions（名前付きアクション） と呼びます。TODOアプリの「追加・完了・削除・ログアウト」を例に整理します。

SvelteKitの高度なルーティング（オプショナルパラメータ・レストパラメータ・マッチャー）を整理した話

Thu, 21 May 2026 02:00:00 +0900

SvelteKitの応用的なルーティングパターンを整理します。ページネーションや可変長パスなど、実務でよく必要になる場面で使います。

TypeScriptのユーティリティ型（Partial・Pick・Omit・ReturnTypeなど）を整理した話

Thu, 21 May 2026 01:00:00 +0900

TypeScriptには型を変換・加工するユーティリティ型が組み込まれています。SvelteKitのコードでも頻繁に使います。

SvelteKitのページオプション（prerender・ssr・csr）を整理した話

Thu, 21 May 2026 00:00:00 +0900

SvelteKitはページごとにレンダリング方式を切り替えられます。実務でパフォーマンスやSEOの要件に応じて使い分けます。

SvelteKitのフォームバリデーションにZodを導入した話

Wed, 20 May 2026 00:00:00 +0900

フォームのバリデーションをif文で手書きすると項目が増えるたびにコードが複雑になります。Zodを使うとスキーマで宣言的に書けます。

SvelteKitにPlaywrightでE2Eテストを導入した話

Tue, 19 May 2026 04:00:00 +0900

PlaywrightはE2Eテスト（End-to-End）のツールです。実際のブラウザを動かしてユーザー操作をシミュレートします。Vitestのユニットテストと組み合わせることで、ロジックから画面全体まで幅広くテストできます。

SvelteKitのパフォーマンス最適化（preloadData・preloadCode・goto）を整理した話

Tue, 19 May 2026 03:00:00 +0900

SvelteKitのリンク先読み機能（preload）を整理します。リンクにカーソルを乗せた瞬間にデータを先読みして、ページ遷移を体感的に速くします。

SvelteKitのhooksを深掘りした話（handle・handleError・handleFetch・sequence）

Tue, 19 May 2026 02:00:00 +0900

SvelteKitの hooks.server.ts に書く関数を整理します。認証以外の実用的なユースケースも含めて解説します。

Svelte 5のコンテキストAPI（setContext/getContext）を整理した話

Tue, 19 May 2026 01:00:00 +0900

Svelte 5のコンテキストAPI（setContext / getContext）を整理します。propsとstoreに続く3つ目の状態共有の方法で、コンポーネントツリー内だけで状態を共有したいときに使います。

SvelteKit + Svelte 5でVitestのテスト環境を構築した話

Tue, 19 May 2026 00:00:00 +0900

SvelteKit + Svelte 5 の環境に Vitest でテストを導入しました。セットアップ時にいくつか躓きポイントがあったのでまとめます。

SvelteKitの+server.tsでAPIエンドポイントを作った話

Mon, 18 May 2026 02:00:00 +0900

SvelteKitでは +server.ts を使うとREST APIのエンドポイントを作れます。load 関数や actions ではカバーできない場面で使います。

SvelteKitのload関数の詳細（depends・invalidate・parent）を整理した話

Mon, 18 May 2026 01:00:00 +0900

SvelteKitの load 関数を深掘りします。+page.ts と +page.server.ts の使い分け、parent() で親のデータを受け取る方法、depends と invalidate によるリロードなしのデータ再取得を整理します。

SvelteKitのuse:enhanceによるフォームの段階的強化を整理した話

Mon, 18 May 2026 00:00:00 +0900

SvelteKitのフォームはデフォルトでフルページリロードして送信されます。use:enhance を使うとリロードなしで送信できるようになります。仕組みと使い分けを整理します。

SvelteKitの+layout.svelteと+page.svelteの役割の切り分けを整理した話

Sat, 16 May 2026 03:00:00 +0900

SvelteKitで迷いやすい +layout.svelte と +page.svelte の役割の切り分けを整理します。

SvelteKitのレイアウト（+layout.svelte）を深掘りした話

Sat, 16 May 2026 02:00:00 +0900

SvelteKitの +layout.svelte の応用パターンを整理します。ネストしたレイアウト・レイアウトデータの取得・ルートグループ・レイアウト無効化を解説します。

SvelteKitのエラーハンドリング（+error.svelteとerror()）を整理した話

Sat, 16 May 2026 01:00:00 +0900

SvelteKitでエラーが起きたときの処理方法を整理します。+error.svelte でエラー画面を作り、error() ヘルパーでエラーを投げる方法と、コンポーネント内でのエラー処理の違いを解説します。

Svelte 5のスニペット（{#snippet}と{@render}）を整理した話

Sat, 16 May 2026 00:00:00 +0900

Svelte 5ではスロット（slot）が廃止され、代わりにスニペットという仕組みになりました。{#snippet} で定義して {@render} で呼び出します。

Svelte 5の$props()の型定義と$bindableを整理した話

Fri, 15 May 2026 11:00:00 +0900

Svelte 5で $props() にTypeScriptの型を付ける方法と、子コンポーネントから親の値を変更できる $bindable の使い方を整理します。

Svelte 5のコンポーネント間の状態共有（propsとstore）を整理した話

Fri, 15 May 2026 10:00:00 +0900

Svelte 5でコンポーネント間の状態を共有する方法は主に2つあります。 props（親から子へ渡す）と store（どこからでも参照できる共有ファイル）です。それぞれの実装方法と使い分けの判断基準を整理します。

Svelte 5のリアクティビティ（$state・$derived・$effect）を整理した話

Fri, 15 May 2026 09:00:00 +0900

Svelte 5からリアクティビティの仕組みが「ルーン（Rune）」という新しい方式に変わりました。 $state・$derived・$effect の3つを中心に、実際に動かしながら挙動を整理します。

SvelteKit + GitHub OAuthをCloudflare Workersにデプロイした話（躓きポイントまとめ）

Fri, 15 May 2026 08:00:00 +0900

ローカルで動作確認済みのGitHub OAuth認証をCloudflare Workersにデプロイする際、環境変数まわりで複数の躓きポイントがありました。同じ構成（SvelteKit + adapter-cloudflare + wrangler deploy）を使う場合の参考になるようにまとめます。

SvelteKitでGitHub OAuthログインを実装した話

Fri, 15 May 2026 06:00:00 +0900

固定パスワードによる簡易認証をGitHub OAuthを使った本格的な認証に置き換えました。 Arcticライブラリを使ってOAuthの実装をシンプルに保ちつつ、セッション管理にはCloudflare D1を使っています。

SvelteKit + D1をCloudflare Pagesにデプロイした話

Fri, 15 May 2026 05:00:00 +0900

D1（CloudflareのSQLite）を導入したSvelteKitプロジェクトをCloudflare Pagesにデプロイしました。ローカルで動作確認済みでも、デプロイ時にD1まわりでハマりやすい点があるため、手順とトラブルシューティングをまとめます。

SvelteKitにCloudflare D1を導入してDBからデータを取得した話

Fri, 15 May 2026 04:00:00 +0900

$lib/posts.ts に書いていた静的なデータをCloudflare D1（サーバーレスSQLite）に移行しました。この記事ではDB作成からマイグレーション、SvelteKit側でのデータ取得までの手順をまとめます。

SvelteKitにTailwindCSS v4を導入した話

Fri, 15 May 2026 03:00:00 +0900

SvelteKitプロジェクトにTailwindCSS v4を導入しました。 v4はVite専用プラグインが用意されており、v3と比べて設定が大幅にシンプルになっています。

SvelteKitで$libを使ってデータと型を整理した話

Fri, 15 May 2026 02:00:00 +0900

SvelteKitの基礎を学ぶ中で、同じデータが複数ファイルに重複して書かれている問題に気づきました。この記事では src/lib/ フォルダと $lib エイリアスを使ってデータと型を整理する方法をまとめます。

SvelteKitアプリをGitHubからCloudflare Workersにデプロイした話

Fri, 15 May 2026 00:00:00 +0900

SvelteKitで作ったアプリをGitHubにプッシュし、Cloudflare Workersにデプロイしました。 Cloudflareのダッシュボードが新UIに変わっており、いくつか躓いたポイントがあったので手順と合わせて残しておきます。

SvelteKitをCloudflare Pagesにデプロイした話

Fri, 15 May 2026 00:00:00 +0900

SvelteKitで作ったTODOアプリを実際に公開するため、Cloudflare Pages へのデプロイ設定を行いました。アダプターの役割と環境変数の扱いを中心に整理します。

SvelteKitで記事一覧・詳細ページを作った話

Wed, 13 May 2026 01:00:00 +0900

SvelteKitのチュートリアルを一通り終えた後、実際に手を動かして定着させるために記事一覧・詳細ページを作りました。この記事では、そこで学んだ動的ルーティングとload関数の基礎をまとめます。

SvelteKitでTODOアプリを作った話

Wed, 13 May 2026 00:00:00 +0900

SvelteKitの動的ルーティングとload関数を学んだ次のステップとして、フォームでデータを追加・削除できるTODOアプリを作りました。この記事では +page.server.ts の actions を中心に、フォーム処理の仕組みをまとめます。

SvelteKitで認証・セッション管理を実装した話

Wed, 13 May 2026 00:00:00 +0900

TODOアプリにログイン機能を追加しました。 SvelteKit独自の仕組みである hooks.server.ts と locals を使い、ライブラリなしでCookieベースの認証を実装しています。

SvelteKitのフレームワーク構造を整理した話

Tue, 12 May 2026 12:00:00 +0900

Next.jsと並んでよく使うフレームワークがSvelteKitです。基本的な層の考え方はNext.jsと共通していますが、ルーティングの仕組みや状態管理の方法が異なります。この記事では、SvelteKit特有の構造を意識しながら、層ごとの役割を整理します。