https://jiru-labo.com/ Recent content on じるラボ Hugo ja Mon, 29 Jun 2026 03:00:00 +0900 https://jiru-labo.com/posts/kakeibo-34-deploy9/ Mon, 29 Jun 2026 03:00:00 +0900 https://jiru-labo.com/posts/kakeibo-34-deploy9/ <p>家計簿アプリ作成シリーズの第34回です。前回実装したレスポンシブ対応を Cloudflare Pages にデプロイします。</p> https://jiru-labo.com/posts/kakeibo-33-responsive/ Mon, 29 Jun 2026 02:00:00 +0900 https://jiru-labo.com/posts/kakeibo-33-responsive/ <p>家計簿アプリ作成シリーズの第33回です。スマートフォンでも使いやすいようにレスポンシブ対応を行います。</p> https://jiru-labo.com/posts/kakeibo-32-deploy8/ Mon, 29 Jun 2026 01:00:00 +0900 https://jiru-labo.com/posts/kakeibo-32-deploy8/ <p>家計簿アプリ作成シリーズの第32回です。前回実装したダークモード対応を Cloudflare Pages にデプロイします。</p> https://jiru-labo.com/posts/kakeibo-31-darkmode/ Mon, 29 Jun 2026 00:00:00 +0900 https://jiru-labo.com/posts/kakeibo-31-darkmode/ <p>家計簿アプリ作成シリーズの第31回です。flowbite-svelte の <code>DarkMode</code> コンポーネントを使ってダークモードの切り替え機能を実装します。</p> https://jiru-labo.com/posts/kakeibo-30-deploy7/ Sun, 28 Jun 2026 01:00:00 +0900 https://jiru-labo.com/posts/kakeibo-30-deploy7/ <p>家計簿アプリ作成シリーズの第30回です。前回実装した月次推移グラフ機能を Cloudflare Pages にデプロイします。</p> https://jiru-labo.com/posts/kakeibo-29-monthly-chart/ Sun, 28 Jun 2026 00:00:00 +0900 https://jiru-labo.com/posts/kakeibo-29-monthly-chart/ <p>家計簿アプリ作成シリーズの第29回です。前回の選択月の収支グラフに加えて、複数月にわたる収支の月次推移グラフを追加します。</p> https://jiru-labo.com/posts/kakeibo-28-deploy6/ Sat, 27 Jun 2026 03:00:00 +0900 https://jiru-labo.com/posts/kakeibo-28-deploy6/ <p>家計簿アプリ作成シリーズの第28回です。前回実装した収支グラフ機能を Cloudflare Pages にデプロイします。</p> https://jiru-labo.com/posts/kakeibo-27-chart/ Sat, 27 Jun 2026 02:00:00 +0900 https://jiru-labo.com/posts/kakeibo-27-chart/ <p>家計簿アプリ作成シリーズの第27回です。Chart.js を使って月別の収支を棒グラフで可視化します。</p> https://jiru-labo.com/posts/kakeibo-26-deploy5/ Sat, 27 Jun 2026 01:00:00 +0900 https://jiru-labo.com/posts/kakeibo-26-deploy5/ <p>家計簿アプリ作成シリーズの第26回です。前回実装したCSVエクスポート機能を Cloudflare Pages にデプロイします。</p> https://jiru-labo.com/posts/kakeibo-25-csv-export/ Thu, 25 Jun 2026 02:00:00 +0900 https://jiru-labo.com/posts/kakeibo-25-csv-export/ <p>家計簿アプリ作成シリーズの第25回です。月別の収支データをCSVファイルとしてダウンロードできる機能を実装します。</p> https://jiru-labo.com/posts/kakeibo-24-deploy4/ Thu, 25 Jun 2026 01:00:00 +0900 https://jiru-labo.com/posts/kakeibo-24-deploy4/ <p>家計簿アプリ作成シリーズの第24回です。前回のデプロイ（#21）以降に追加したページネーション・キーワード検索機能を Cloudflare Pages にデプロイします。</p> https://jiru-labo.com/posts/kakeibo-23-search/ Wed, 24 Jun 2026 00:00:00 +0900 https://jiru-labo.com/posts/kakeibo-23-search/ <p>家計簿アプリ作成シリーズの第23回です。収支一覧にキーワード検索機能を追加します。月フィルタと組み合わせて、メモ・カテゴリを対象に絞り込みができるようにします。</p> https://jiru-labo.com/posts/kakeibo-22-pagination/ Tue, 23 Jun 2026 00:00:00 +0900 https://jiru-labo.com/posts/kakeibo-22-pagination/ <p>家計簿アプリ作成シリーズの第22回です。データが増えたときに全件表示では見づらくなるため、ページネーションを実装します。</p> https://jiru-labo.com/posts/kakeibo-21-deploy3/ Mon, 22 Jun 2026 00:00:00 +0900 https://jiru-labo.com/posts/kakeibo-21-deploy3/ <p>家計簿アプリ作成シリーズの第21回です。前回のデプロイ（#15）以降に追加した機能をまとめて Cloudflare Pages にデプロイします。</p> https://jiru-labo.com/posts/kakeibo-20-flowbite-svelte/ Sun, 21 Jun 2026 00:00:00 +0900 https://jiru-labo.com/posts/kakeibo-20-flowbite-svelte/ <p>家計簿アプリ作成シリーズの第20回です。今回は全ページのUIを <code>flowbite-svelte</code> コンポーネントに置き換えて統一します。</p> https://jiru-labo.com/posts/kakeibo-19-delete-confirm/ Fri, 19 Jun 2026 01:00:00 +0900 https://jiru-labo.com/posts/kakeibo-19-delete-confirm/ <p>家計簿アプリ作成シリーズの第19回です。今回は削除ボタンに確認ダイアログを追加して、誤削除を防ぎます。</p> https://jiru-labo.com/posts/kakeibo-18-validation/ Fri, 19 Jun 2026 00:00:00 +0900 https://jiru-labo.com/posts/kakeibo-18-validation/ <p>家計簿アプリ作成シリーズの第18回です。今回は収支の登録・編集フォームにバリデーションを実装します。</p> https://jiru-labo.com/posts/kakeibo-17-multiuser/ Thu, 18 Jun 2026 00:00:00 +0900 https://jiru-labo.com/posts/kakeibo-17-multiuser/ <p>家計簿アプリ作成シリーズの第17回です。今回は複数ユーザー対応を実装します。これまで全ユーザーのデータが共有されていたため、ログインユーザーのデータのみ表示・操作できるように修正します。</p> https://jiru-labo.com/posts/kakeibo-16-ui/ Mon, 15 Jun 2026 01:00:00 +0900 https://jiru-labo.com/posts/kakeibo-16-ui/ <p>家計簡アプリ作成シリーズの第16回です。機能実装が一通り完了したので、全ページの UI を見直します。</p> https://jiru-labo.com/posts/kakeibo-15-deploy2/ Mon, 15 Jun 2026 00:00:00 +0900 https://jiru-labo.com/posts/kakeibo-15-deploy2/ <p>家計簿アプリ作成シリーズの第15回です。ここまでの実装を Cloudflare Pages に再デプロイし、あわせてログイン直後に最新月が自動選択される UX 改善を実装します。</p> https://jiru-labo.com/posts/kakeibo-14-month-persist/ Sat, 13 Jun 2026 01:00:00 +0900 https://jiru-labo.com/posts/kakeibo-14-month-persist/ <p>家計簿アプリ作成シリーズの第14回です。今回は収支の登録・編集後に元の月フィルタ状態に戻る処理を実装します。</p> https://jiru-labo.com/posts/kakeibo-13-form/ Sat, 13 Jun 2026 00:00:00 +0900 https://jiru-labo.com/posts/kakeibo-13-form/ <p>家計簿アプリ作成シリーズの第13回です。今回は収支の登録・編集フォームのカテゴリ入力をテキストから <code>&lt;select&gt;</code> に変更し、収入・支出で選択肢が切り替わるようにします。</p> https://jiru-labo.com/posts/kakeibo-12-filter/ Fri, 12 Jun 2026 00:00:00 +0900 https://jiru-labo.com/posts/kakeibo-12-filter/ <p>家計簿アプリ作成シリーズの第12回です。今回は収支一覧に月別フィルタを実装します。</p> https://jiru-labo.com/posts/kakeibo-11-summary/ Thu, 11 Jun 2026 00:00:00 +0900 https://jiru-labo.com/posts/kakeibo-11-summary/ <p>家計簿アプリ作成シリーズの第11回です。今回は収入合計・支出合計・残高の集計をトップページに表示します。</p> https://jiru-labo.com/posts/kakeibo-10-ui/ Wed, 10 Jun 2026 00:00:00 +0900 https://jiru-labo.com/posts/kakeibo-10-ui/ <p>家計簿アプリ作成シリーズの第10回です。今回は Tailwind CSS v4 と Flowbite Svelte を導入して UI をスタイリングします。</p> https://jiru-labo.com/posts/kakeibo-09-deploy/ Tue, 09 Jun 2026 00:00:00 +0900 https://jiru-labo.com/posts/kakeibo-09-deploy/ <p>家計簿アプリ作成シリーズの第9回です。今回は Cloudflare Pages へのデプロイを行います。ハマりポイントが多かったので詳しくまとめます。</p> https://jiru-labo.com/posts/kakeibo-08-auth-login/ Mon, 08 Jun 2026 01:00:00 +0900 https://jiru-labo.com/posts/kakeibo-08-auth-login/ <p>家計簿アプリ作成シリーズの第8回（後編）です。前回に引き続き、ログイン・ログアウトを実装します。</p> https://jiru-labo.com/posts/kakeibo-07-auth-setup/ Mon, 08 Jun 2026 00:00:00 +0900 https://jiru-labo.com/posts/kakeibo-07-auth-setup/ <p>家計簿アプリ作成シリーズの第7回（前編）です。今回は Better Auth を使った認証の土台を作り、サインアップまでを実装します。</p> https://jiru-labo.com/posts/kakeibo-06-edit/ Wed, 03 Jun 2026 02:00:00 +0900 https://jiru-labo.com/posts/kakeibo-06-edit/ <p>家計簿アプリ作成シリーズの第6回です。今回は登録済みの収支データを編集できるようにします。</p> https://jiru-labo.com/posts/kakeibo-05-delete/ Wed, 03 Jun 2026 01:00:00 +0900 https://jiru-labo.com/posts/kakeibo-05-delete/ <p>家計簿アプリ作成シリーズの第5回です。今回は一覧をテーブル表示に変更し、各行に削除ボタンを追加します。</p> https://jiru-labo.com/posts/kakeibo-04-form/ Wed, 03 Jun 2026 00:00:00 +0900 https://jiru-labo.com/posts/kakeibo-04-form/ <p>家計簿アプリ作成シリーズの第4回です。今回は SvelteKit の Form Actions を使って収支の登録フォームを実装します。</p> https://jiru-labo.com/posts/kakeibo-03-fetch/ Tue, 02 Jun 2026 00:00:00 +0900 https://jiru-labo.com/posts/kakeibo-03-fetch/ <p>家計簿アプリ作成シリーズの第3回です。今回は Drizzle ORM 経由で D1 に接続し、収支データをトップページに一覧表示するところまでを実装しました。</p> https://jiru-labo.com/posts/kakeibo-02-schema/ Mon, 01 Jun 2026 00:00:00 +0900 https://jiru-labo.com/posts/kakeibo-02-schema/ <p>家計簿アプリ作成シリーズの第2回です。今回は Drizzle ORM でスキーマを定義し、Cloudflare D1 にマイグレーションを適用するところまでを記録します。ハマりポイントが多かったので詳しくまとめます。</p> https://jiru-labo.com/posts/kakeibo-01-setup/ Sun, 31 May 2026 01:00:00 +0900 https://jiru-labo.com/posts/kakeibo-01-setup/ <p>SvelteKit + Cloudflare Workers（D1 + Drizzle ORM）を使って家計簿アプリを作っていきます。この記事はその第1回で、プロジェクトの環境構築をまとめます。</p> https://jiru-labo.com/posts/github-actions-cloudflare/ Sun, 31 May 2026 00:00:00 +0900 https://jiru-labo.com/posts/github-actions-cloudflare/ <p>GitHub Actionsを使うと、mainブランチへのプッシュで自動的にCloudflare Workersへデプロイできます。手動での <code>wrangler deploy</code> が不要になります。</p> https://jiru-labo.com/posts/sveltekit-i18n/ Sat, 30 May 2026 02:00:00 +0900 https://jiru-labo.com/posts/sveltekit-i18n/ <p>SvelteKitでi18n（国際化・多言語対応）を実装しました。まずシンプルな実装で概念を理解し、本番向けのアプローチも紹介します。</p> https://jiru-labo.com/posts/blog-docs-page/ Sat, 30 May 2026 02:00:00 +0900 https://jiru-labo.com/posts/blog-docs-page/ <p>ブログを書き続けていると、記事が増えてきたときに「あの記事どこだっけ？」となるのが悩みでした。 とくにSvelteKitやCloudflare関連の記事は、シリーズとして順番に読んでほしいものが多く、ブログの新着順一覧では体系がわかりにくい状態になっていました。</p> <p>そこで、既存のブログはそのままに、テーマ別に整理した<strong>ドキュメントページ</strong>を追加しました。</p> https://jiru-labo.com/posts/drizzle-relations/ Sat, 30 May 2026 01:00:00 +0900 https://jiru-labo.com/posts/drizzle-relations/ <p>Drizzle ORMの <code>relations</code> を使うと、テーブル間の関係を定義してシンプルなコードで結合データを取得できます。<code>posts</code> と <code>comments</code> を例に実装しました。</p> https://jiru-labo.com/posts/sveltekit-websocket/ Sat, 30 May 2026 00:00:00 +0900 https://jiru-labo.com/posts/sveltekit-websocket/ <p>WebSocketを使うと、一度接続したら切断するまで双方向にリアルタイムで通信し続けられます。SvelteKit + Cloudflare Workersでエコーサーバーを実装しました。</p> https://jiru-labo.com/posts/drizzle-migration-seed/ Fri, 29 May 2026 03:00:00 +0900 https://jiru-labo.com/posts/drizzle-migration-seed/ <p>drizzle-kitを使ってマイグレーションを生成し、Cloudflare D1に適用する方法と、seed.sqlで初期データを流し込む方法をまとめます。</p> https://jiru-labo.com/posts/sveltekit-drizzle/ Fri, 29 May 2026 02:00:00 +0900 https://jiru-labo.com/posts/sveltekit-drizzle/ <p>Drizzle ORMはTypeScript向けの軽量ORMです。<code>platform.env.DB.prepare('SELECT ...')</code> と書いていた生SQLを、型安全なTypeScriptのコードに置き換えられます。今回は既存のCloudflare D1テーブルに対してDrizzleを導入しました。</p> https://jiru-labo.com/posts/cloudflare-queues/ Fri, 29 May 2026 01:00:00 +0900 https://jiru-labo.com/posts/cloudflare-queues/ <p>Cloudflare Queuesを使うと、処理を非同期でバックグラウンド実行できます。重い処理をQueueに投げることで、ユーザーを待たせずにレスポンスを返せます。</p> https://jiru-labo.com/posts/svelte5-reactive-collections/ Fri, 29 May 2026 00:00:00 +0900 https://jiru-labo.com/posts/svelte5-reactive-collections/ <p>Svelte 5では <code>$state</code> でオブジェクトや配列をリアクティブにできますが、<code>Map</code> や <code>Set</code> は <code>.set()</code> や <code>.add()</code> などの操作では画面が更新されません。これを解決するのが <code>svelte/reactivity</code> のクラスです。</p> https://jiru-labo.com/posts/svelte5-inspect/ Thu, 28 May 2026 01:00:00 +0900 https://jiru-labo.com/posts/svelte5-inspect/ <p>Svelte 5の <code>$inspect</code> を使うと、リアクティブな値（<code>$state</code> や <code>$derived</code>）が変化するたびに自動でコンソールにログを出力できます。<code>console.log</code> を手動で仕込む必要がなくなります。</p> https://jiru-labo.com/posts/sveltekit-resend/ Thu, 28 May 2026 00:00:00 +0900 https://jiru-labo.com/posts/sveltekit-resend/ <p>ResendはシンプルなAPIでメール送信できるサービスです。無料枠で月3,000通まで送れます。SvelteKit + Cloudflare Workersとの組み合わせでお問い合わせフォームを実装しました。</p> https://jiru-labo.com/posts/sveltekit-seo-ogp/ Wed, 27 May 2026 01:00:00 +0900 https://jiru-labo.com/posts/sveltekit-seo-ogp/ <p>SvelteKitでは <code>&lt;svelte:head&gt;</code> タグの中にメタタグを書くだけでSEOやOGPの設定ができます。</p> https://jiru-labo.com/posts/sveltekit-handle-fetch/ Wed, 27 May 2026 00:00:00 +0900 https://jiru-labo.com/posts/sveltekit-handle-fetch/ <p>SvelteKitの <code>handleFetch</code> フックを使うと、<code>load</code> 関数内で実行されるサーバー側の <code>fetch</code> をインターセプトしてリクエストを変更できます。</p> https://jiru-labo.com/posts/cloudflare-workers-ai/ Tue, 26 May 2026 01:00:00 +0900 https://jiru-labo.com/posts/cloudflare-workers-ai/ <p>Cloudflare Workers AIを使うと、Cloudflareのエッジネットワーク上でAIモデルを直接実行できます。外部のAI APIを別途契約しなくても、Cloudflareアカウントだけで利用できます。</p> https://jiru-labo.com/posts/cloudflare-secrets/ Tue, 26 May 2026 00:00:00 +0900 https://jiru-labo.com/posts/cloudflare-secrets/ <p>Cloudflare Workersでシークレット（APIキーなど秘密の値）を扱う方法を整理します。ローカルと本番で管理方法が異なります。</p> https://jiru-labo.com/posts/sveltekit-snapshot/ Mon, 25 May 2026 01:00:00 +0900 https://jiru-labo.com/posts/sveltekit-snapshot/ <p>SvelteKitの <code>snapshot</code> を使うと、ページを離れるときに状態を保存し、ブラウザの「戻る」で戻ったときに復元できます。フォームに入力中に誤って別ページに遷移してしまっても、戻ったときに入力内容が残ります。</p> https://jiru-labo.com/posts/sveltekit-cors/ Mon, 25 May 2026 00:00:00 +0900 https://jiru-labo.com/posts/sveltekit-cors/ <p>SvelteKitの <code>+server.ts</code> で作ったAPIを別オリジンから呼び出すには、CORSヘッダーの設定が必要です。</p> https://jiru-labo.com/posts/cloudflare-kv/ Sat, 23 May 2026 03:00:00 +0900 https://jiru-labo.com/posts/cloudflare-kv/ <p>Cloudflare KV（Key-Value Storage）はシンプルなキーと値のペアを保存するストレージです。D1のようなSQLクエリは不要で、<code>get</code> / <code>put</code> / <code>delete</code> だけで操作できます。</p> https://jiru-labo.com/posts/sveltekit-app-navigation/ Sat, 23 May 2026 02:00:00 +0900 https://jiru-labo.com/posts/sveltekit-app-navigation/ <p>SvelteKitでは <code>$app/navigation</code> から関数をインポートすることで、JavaScriptからナビゲーションを制御できます。<code>&lt;a&gt;</code> タグでは対応できない条件付き遷移や離脱確認などに使います。</p> https://jiru-labo.com/posts/sveltekit-app-state/ Sat, 23 May 2026 01:00:00 +0900 https://jiru-labo.com/posts/sveltekit-app-state/ <p>SvelteKitでは <code>$app/state</code> から <code>page</code> オブジェクトをインポートすることで、コンポーネントのどこからでも現在のURL・パラメータ・ルート情報にアクセスできます。</p> https://jiru-labo.com/posts/sveltekit-streaming/ Sat, 23 May 2026 00:00:00 +0900 https://jiru-labo.com/posts/sveltekit-streaming/ <p>SvelteKitでは、<code>load</code> 関数から <code>Promise</code> をそのまま返すことで、データの一部を後から流し込む<strong>ストリーミング</strong>が実現できます。重いクエリが完了するまでページ全体を待たせずに、段階的に表示できるのがメリットです。</p> https://jiru-labo.com/posts/cloudflare-r2-upload/ Fri, 22 May 2026 00:00:00 +0900 https://jiru-labo.com/posts/cloudflare-r2-upload/ <p>SvelteKit + Cloudflare Workers の構成でCloudflare R2を使ったファイルアップロード機能を実装しました。</p> https://jiru-labo.com/posts/sveltekit-named-actions/ Thu, 21 May 2026 03:00:00 +0900 https://jiru-labo.com/posts/sveltekit-named-actions/ <p>SvelteKitでは、1つのページに複数のフォームアクションを定義できます。これを <strong>Named Actions（名前付きアクション）</strong> と呼びます。TODOアプリの「追加・完了・削除・ログアウト」を例に整理します。</p> https://jiru-labo.com/posts/sveltekit-advanced-routing/ Thu, 21 May 2026 02:00:00 +0900 https://jiru-labo.com/posts/sveltekit-advanced-routing/ <p>SvelteKitの応用的なルーティングパターンを整理します。ページネーションや可変長パスなど、実務でよく必要になる場面で使います。</p> https://jiru-labo.com/posts/typescript-utility-types/ Thu, 21 May 2026 01:00:00 +0900 https://jiru-labo.com/posts/typescript-utility-types/ <p>TypeScriptには型を変換・加工するユーティリティ型が組み込まれています。SvelteKitのコードでも頻繁に使います。</p> https://jiru-labo.com/posts/sveltekit-page-options/ Thu, 21 May 2026 00:00:00 +0900 https://jiru-labo.com/posts/sveltekit-page-options/ <p>SvelteKitはページごとにレンダリング方式を切り替えられます。実務でパフォーマンスやSEOの要件に応じて使い分けます。</p> https://jiru-labo.com/posts/sveltekit-zod/ Wed, 20 May 2026 00:00:00 +0900 https://jiru-labo.com/posts/sveltekit-zod/ <p>フォームのバリデーションをif文で手書きすると項目が増えるたびにコードが複雑になります。Zodを使うとスキーマで宣言的に書けます。</p> https://jiru-labo.com/posts/sveltekit-playwright/ Tue, 19 May 2026 04:00:00 +0900 https://jiru-labo.com/posts/sveltekit-playwright/ <p>PlaywrightはE2Eテスト（End-to-End）のツールです。実際のブラウザを動かしてユーザー操作をシミュレートします。Vitestのユニットテストと組み合わせることで、ロジックから画面全体まで幅広くテストできます。</p> https://jiru-labo.com/posts/sveltekit-preload/ Tue, 19 May 2026 03:00:00 +0900 https://jiru-labo.com/posts/sveltekit-preload/ <p>SvelteKitのリンク先読み機能（preload）を整理します。リンクにカーソルを乗せた瞬間にデータを先読みして、ページ遷移を体感的に速くします。</p> https://jiru-labo.com/posts/sveltekit-hooks/ Tue, 19 May 2026 02:00:00 +0900 https://jiru-labo.com/posts/sveltekit-hooks/ <p>SvelteKitの <code>hooks.server.ts</code> に書く関数を整理します。認証以外の実用的なユースケースも含めて解説します。</p> https://jiru-labo.com/posts/svelte5-context/ Tue, 19 May 2026 01:00:00 +0900 https://jiru-labo.com/posts/svelte5-context/ <p>Svelte 5のコンテキストAPI（<code>setContext</code> / <code>getContext</code>）を整理します。propsとstoreに続く3つ目の状態共有の方法で、コンポーネントツリー内だけで状態を共有したいときに使います。</p> https://jiru-labo.com/posts/sveltekit-vitest/ Tue, 19 May 2026 00:00:00 +0900 https://jiru-labo.com/posts/sveltekit-vitest/ <p>SvelteKit + Svelte 5 の環境に Vitest でテストを導入しました。セットアップ時にいくつか躓きポイントがあったのでまとめます。</p> https://jiru-labo.com/posts/sveltekit-server-ts/ Mon, 18 May 2026 02:00:00 +0900 https://jiru-labo.com/posts/sveltekit-server-ts/ <p>SvelteKitでは <code>+server.ts</code> を使うとREST APIのエンドポイントを作れます。<code>load</code> 関数や <code>actions</code> ではカバーできない場面で使います。</p> https://jiru-labo.com/posts/sveltekit-load-function/ Mon, 18 May 2026 01:00:00 +0900 https://jiru-labo.com/posts/sveltekit-load-function/ <p>SvelteKitの <code>load</code> 関数を深掘りします。<code>+page.ts</code> と <code>+page.server.ts</code> の使い分け、<code>parent()</code> で親のデータを受け取る方法、<code>depends</code> と <code>invalidate</code> によるリロードなしのデータ再取得を整理します。</p> https://jiru-labo.com/posts/sveltekit-use-enhance/ Mon, 18 May 2026 00:00:00 +0900 https://jiru-labo.com/posts/sveltekit-use-enhance/ <p>SvelteKitのフォームはデフォルトでフルページリロードして送信されます。<code>use:enhance</code> を使うとリロードなしで送信できるようになります。仕組みと使い分けを整理します。</p> https://jiru-labo.com/posts/sveltekit-layout-vs-page/ Sat, 16 May 2026 03:00:00 +0900 https://jiru-labo.com/posts/sveltekit-layout-vs-page/ <p>SvelteKitで迷いやすい <code>+layout.svelte</code> と <code>+page.svelte</code> の役割の切り分けを整理します。</p> https://jiru-labo.com/posts/sveltekit-layout/ Sat, 16 May 2026 02:00:00 +0900 https://jiru-labo.com/posts/sveltekit-layout/ <p>SvelteKitの <code>+layout.svelte</code> の応用パターンを整理します。ネストしたレイアウト・レイアウトデータの取得・ルートグループ・レイアウト無効化を解説します。</p> https://jiru-labo.com/posts/sveltekit-error-handling/ Sat, 16 May 2026 01:00:00 +0900 https://jiru-labo.com/posts/sveltekit-error-handling/ <p>SvelteKitでエラーが起きたときの処理方法を整理します。<code>+error.svelte</code> でエラー画面を作り、<code>error()</code> ヘルパーでエラーを投げる方法と、コンポーネント内でのエラー処理の違いを解説します。</p> https://jiru-labo.com/posts/svelte5-snippet/ Sat, 16 May 2026 00:00:00 +0900 https://jiru-labo.com/posts/svelte5-snippet/ <p>Svelte 5では<strong>スロット（slot）が廃止</strong>され、代わりに<strong>スニペット</strong>という仕組みになりました。<code>{#snippet}</code> で定義して <code>{@render}</code> で呼び出します。</p> https://jiru-labo.com/posts/svelte5-props-bindable/ Fri, 15 May 2026 11:00:00 +0900 https://jiru-labo.com/posts/svelte5-props-bindable/ <p>Svelte 5で <code>$props()</code> にTypeScriptの型を付ける方法と、子コンポーネントから親の値を変更できる <code>$bindable</code> の使い方を整理します。</p> https://jiru-labo.com/posts/svelte5-state-sharing/ Fri, 15 May 2026 10:00:00 +0900 https://jiru-labo.com/posts/svelte5-state-sharing/ <p>Svelte 5でコンポーネント間の状態を共有する方法は主に2つあります。 <strong>props</strong>（親から子へ渡す）と <strong>store</strong>（どこからでも参照できる共有ファイル）です。 それぞれの実装方法と使い分けの判断基準を整理します。</p> https://jiru-labo.com/posts/svelte5-reactivity/ Fri, 15 May 2026 09:00:00 +0900 https://jiru-labo.com/posts/svelte5-reactivity/ <p>Svelte 5からリアクティビティの仕組みが「ルーン（Rune）」という新しい方式に変わりました。 <code>$state</code>・<code>$derived</code>・<code>$effect</code> の3つを中心に、実際に動かしながら挙動を整理します。</p> https://jiru-labo.com/posts/sveltekit-github-oauth-deploy/ Fri, 15 May 2026 08:00:00 +0900 https://jiru-labo.com/posts/sveltekit-github-oauth-deploy/ <p>ローカルで動作確認済みのGitHub OAuth認証をCloudflare Workersにデプロイする際、環境変数まわりで複数の躓きポイントがありました。 同じ構成（SvelteKit + adapter-cloudflare + wrangler deploy）を使う場合の参考になるようにまとめます。</p> https://jiru-labo.com/posts/oauth-token-bearer-auth/ Fri, 15 May 2026 07:00:00 +0900 https://jiru-labo.com/posts/oauth-token-bearer-auth/ <p>GitHub OAuthのログインを実装する中で、複数の種類のトークンが登場しました。 それぞれの役割・寿命・保存場所が異なるため、整理してまとめます。</p> https://jiru-labo.com/posts/sveltekit-github-oauth/ Fri, 15 May 2026 06:00:00 +0900 https://jiru-labo.com/posts/sveltekit-github-oauth/ <p>固定パスワードによる簡易認証をGitHub OAuthを使った本格的な認証に置き換えました。 Arcticライブラリを使ってOAuthの実装をシンプルに保ちつつ、セッション管理にはCloudflare D1を使っています。</p> https://jiru-labo.com/posts/sveltekit-d1-deploy/ Fri, 15 May 2026 05:00:00 +0900 https://jiru-labo.com/posts/sveltekit-d1-deploy/ <p>D1（CloudflareのSQLite）を導入したSvelteKitプロジェクトをCloudflare Pagesにデプロイしました。 ローカルで動作確認済みでも、デプロイ時にD1まわりでハマりやすい点があるため、手順とトラブルシューティングをまとめます。</p> https://jiru-labo.com/posts/sveltekit-d1-database/ Fri, 15 May 2026 04:00:00 +0900 https://jiru-labo.com/posts/sveltekit-d1-database/ <p><code>$lib/posts.ts</code> に書いていた静的なデータをCloudflare D1（サーバーレスSQLite）に移行しました。 この記事ではDB作成からマイグレーション、SvelteKit側でのデータ取得までの手順をまとめます。</p> https://jiru-labo.com/posts/sveltekit-tailwindcss/ Fri, 15 May 2026 03:00:00 +0900 https://jiru-labo.com/posts/sveltekit-tailwindcss/ <p>SvelteKitプロジェクトにTailwindCSS v4を導入しました。 v4はVite専用プラグインが用意されており、v3と比べて設定が大幅にシンプルになっています。</p> https://jiru-labo.com/posts/sveltekit-lib-basics/ Fri, 15 May 2026 02:00:00 +0900 https://jiru-labo.com/posts/sveltekit-lib-basics/ <p>SvelteKitの基礎を学ぶ中で、同じデータが複数ファイルに重複して書かれている問題に気づきました。 この記事では <code>src/lib/</code> フォルダと <code>$lib</code> エイリアスを使ってデータと型を整理する方法をまとめます。</p> https://jiru-labo.com/posts/sveltekit-deploy-github-cloudflare/ Fri, 15 May 2026 00:00:00 +0900 https://jiru-labo.com/posts/sveltekit-deploy-github-cloudflare/ <p>SvelteKitで作ったアプリをGitHubにプッシュし、Cloudflare Workersにデプロイしました。 Cloudflareのダッシュボードが新UIに変わっており、いくつか躓いたポイントがあったので手順と合わせて残しておきます。</p> https://jiru-labo.com/posts/sveltekit-deploy-cloudflare/ Fri, 15 May 2026 00:00:00 +0900 https://jiru-labo.com/posts/sveltekit-deploy-cloudflare/ <p>SvelteKitで作ったTODOアプリを実際に公開するため、Cloudflare Pages へのデプロイ設定を行いました。 アダプターの役割と環境変数の扱いを中心に整理します。</p> https://jiru-labo.com/posts/transfer-domain-from-xserver-to-cloudflare/ Wed, 13 May 2026 02:00:00 +0900 https://jiru-labo.com/posts/transfer-domain-from-xserver-to-cloudflare/ <p>XServerのWordPressブログをCloudflare Pagesに移行したのに伴い、 ドメイン（jiru-labo.com）の登録もXServerからCloudflare Registrarに移管しました。</p> <p>今回のドメインはXServerの<strong>独自ドメイン永久無料特典</strong>で取得したものだったため、 通常とは異なる手順が必要でした。同じ状況の方の参考になれば幸いです。</p> https://jiru-labo.com/posts/sveltekit-routing-basics/ Wed, 13 May 2026 01:00:00 +0900 https://jiru-labo.com/posts/sveltekit-routing-basics/ <p>SvelteKitのチュートリアルを一通り終えた後、実際に手を動かして定着させるために記事一覧・詳細ページを作りました。 この記事では、そこで学んだ動的ルーティングとload関数の基礎をまとめます。</p> https://jiru-labo.com/posts/sveltekit-todo-actions/ Wed, 13 May 2026 00:00:00 +0900 https://jiru-labo.com/posts/sveltekit-todo-actions/ <p>SvelteKitの動的ルーティングとload関数を学んだ次のステップとして、フォームでデータを追加・削除できるTODOアプリを作りました。 この記事では <code>+page.server.ts</code> の <code>actions</code> を中心に、フォーム処理の仕組みをまとめます。</p> https://jiru-labo.com/posts/sveltekit-auth-hooks/ Wed, 13 May 2026 00:00:00 +0900 https://jiru-labo.com/posts/sveltekit-auth-hooks/ <p>TODOアプリにログイン機能を追加しました。 SvelteKit独自の仕組みである <code>hooks.server.ts</code> と <code>locals</code> を使い、ライブラリなしでCookieベースの認証を実装しています。</p> https://jiru-labo.com/posts/sveltekit-architecture/ Tue, 12 May 2026 12:00:00 +0900 https://jiru-labo.com/posts/sveltekit-architecture/ <p>Next.jsと並んでよく使うフレームワークがSvelteKitです。 基本的な層の考え方はNext.jsと共通していますが、ルーティングの仕組みや状態管理の方法が異なります。 この記事では、SvelteKit特有の構造を意識しながら、層ごとの役割を整理します。</p> https://jiru-labo.com/posts/nextjs-architecture/ Tue, 12 May 2026 11:00:00 +0900 https://jiru-labo.com/posts/nextjs-architecture/ <p>Next.jsでアプリを開発していると、「このコードはどこに書くべきか」で迷うことがあります。 この記事では、自分なりに整理した層構造とそれぞれの役割をまとめます。</p> https://jiru-labo.com/posts/aws-all-certifications/ Tue, 12 May 2026 10:00:00 +0900 https://jiru-labo.com/posts/aws-all-certifications/ <p>2023年10月から2026年5月にかけて、AWS認定資格を12個すべて取得しました。 この記事では、全制覇を目指したわけでもなかった自分が、気づけばコンプリートしていたその経緯を振り返ります。</p> https://jiru-labo.com/posts/contact-form-cloudflare-workers/ Tue, 05 May 2026 00:00:00 +0900 https://jiru-labo.com/posts/contact-form-cloudflare-workers/ <p>Hugoで作った静的サイトにお問い合わせフォームを実装しました。静的サイトはサーバーサイドの処理ができないため、フォームの送信処理には別の仕組みが必要です。今回は <strong>Cloudflare Workers</strong>（サーバーレス関数）と <strong>Resend</strong>（メール送信API）を組み合わせた構成にしました。</p> https://jiru-labo.com/posts/hugo-layout-customization/ Tue, 05 May 2026 00:00:00 +0900 https://jiru-labo.com/posts/hugo-layout-customization/ <p>XServerのWordPressブログをHugo＋Cloudflare Pagesに移行した後、デフォルトのMainroadテーマのままでは味気なく、コーポレートサイト風のレイアウトに作り直しました。 この記事では、その試行錯誤の経緯を記録として残します。</p> https://jiru-labo.com/posts/migrate-wordpress-to-cloudflare/ Tue, 05 May 2026 00:00:00 +0900 https://jiru-labo.com/posts/migrate-wordpress-to-cloudflare/ <p>長年XServerでWordPressブログを運営していました（と言っても記事の投稿はすっかり止まってましたが…汗）が、思い切ってHugo＋Cloudflare Pagesに移行しました。 表示速度の向上、ランニングコストゼロ、Markdownでの執筆環境など、メリットが多く大満足です。</p> <p>この記事では、実際に移行した手順とハマったポイントをまとめます。</p> https://jiru-labo.com/pages/work/ Tue, 05 May 2026 00:00:00 +0900 https://jiru-labo.com/pages/work/ <div class="work-notice"> <p>現在、お仕事のご依頼はお受けしていません。準備が整い次第、あらためてご案内いたします。</p> </div> <div class="work-cards"> <div class="work-card"> <img class="work-card__img" src="https://jiru-labo.com/img/work/homepage.jpg" alt="ホームページ制作"> <h3 class="work-card__title">ホームページ制作</h3> <p class="work-card__desc">ビジネスの目的に合わせたホームページを制作します。デザインから公開まで一貫してサポートします。</p> </div> <div class="work-card"> <img class="work-card__img" src="https://jiru-labo.com/img/work/webapp.jpg" alt="Webアプリケーション開発"> <h3 class="work-card__title">Webアプリケーション開発</h3> <p class="work-card__desc">業務効率化ツールや社内システムなど、要件に合わせたWebアプリをフルスクラッチで開発します。</p> </div> </div> https://jiru-labo.com/pages/contact/ Tue, 05 May 2026 00:00:00 +0900 https://jiru-labo.com/pages/contact/ <div class="contact-form-wrap"> <form id="contact-form" class="contact-form" novalidate> <div class="contact-form__field"> <label for="cf-name">お名前 <span class="contact-form__required">*</span></label> <input type="text" id="cf-name" name="name" placeholder="山田 太郎" required> </div> <div class="contact-form__field"> <label for="cf-email">メールアドレス <span class="contact-form__required">*</span></label> <input type="email" id="cf-email" name="email" placeholder="example@email.com" required> </div> <div class="contact-form__field"> <label for="cf-subject">件名</label> <input type="text" id="cf-subject" name="subject" placeholder="ご相談・お見積もりなど"> </div> <div class="contact-form__field"> <label for="cf-message">メッセージ <span class="contact-form__required">*</span></label> <textarea id="cf-message" name="message" rows="7" placeholder="お問い合わせ内容をご記入ください" required></textarea> </div> <div class="contact-form__actions"> <button type="submit" class="contact-form__submit">送信する</button> </div> <div id="cf-status" class="contact-form__status" aria-live="polite"></div> </form> </div> <script> (function() { var WORKER_URL = 'https://contact-worker.jiru-labo.workers.dev'; var form = document.getElementById('contact-form'); var status = document.getElementById('cf-status'); form.addEventListener('submit', function(e) { e.preventDefault(); status.className = 'contact-form__status'; status.textContent = ''; var name = form.elements['name'].value.trim(); var email = form.elements['email'].value.trim(); var subject = form.elements['subject'].value.trim(); var message = form.elements['message'].value.trim(); if (!name || !email || !message) { status.className = 'contact-form__status contact-form__status--error'; status.textContent = 'お名前・メールアドレス・メッセージは必須です。'; return; } var btn = form.querySelector('.contact-form__submit'); btn.disabled = true; btn.textContent = '送信中...'; fetch(WORKER_URL, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: name, email: email, subject: subject, message: message }) }) .then(function(res) { return res.json(); }) .then(function(data) { if (data.ok) { form.reset(); status.className = 'contact-form__status contact-form__status--success'; status.textContent = 'お問い合わせを送信しました。ありがとうございます。'; } else { status.className = 'contact-form__status contact-form__status--error'; status.textContent = data.error || '送信に失敗しました。しばらくしてから再度お試しください。'; } }) .catch(function() { status.className = 'contact-form__status contact-form__status--error'; status.textContent = '通信エラーが発生しました。しばらくしてから再度お試しください。'; }) .finally(function() { btn.disabled = false; btn.textContent = '送信する'; }); }); })(); </script> https://jiru-labo.com/pages/privacy-policy/ Tue, 05 May 2026 00:00:00 +0900 https://jiru-labo.com/pages/privacy-policy/ <p>じるラボ（以下「当サイト」）は、個人情報の取り扱いについて以下のとおりプライバシーポリシーを定めます。</p> <h2 id="運営者情報">運営者情報</h2> <ul> <li>サイト名：じるラボ</li> <li>サイトURL：https://jiru-labo.com</li> <li>運営者：じる</li> </ul> <h2 id="収集する個人情報と利用目的">収集する個人情報と利用目的</h2> <h3 id="お問い合わせフォーム">お問い合わせフォーム</h3> <p>お問い合わせの際、お名前・メールアドレス・お問い合わせ内容を収集します。収集した情報は、お問い合わせへの回答のみに使用し、それ以外の目的には使用しません。</p> <h3 id="アクセス解析">アクセス解析</h3> <p>当サイトでは、サイトの利用状況を把握するためにアクセス解析ツールを使用することがあります。アクセス解析ツールはCookieを使用しますが、個人を特定する情報は収集しません。</p> <h2 id="第三者への提供">第三者への提供</h2> <p>収集した個人情報は、法令に基づく場合を除き、第三者に提供することはありません。</p> <h2 id="個人情報の管理">個人情報の管理</h2> <p>収集した個人情報は適切に管理し、お問い合わせへの回答が完了した後は速やかに削除します。</p> <h2 id="cookie-について">Cookie について</h2> <p>当サイトはCookieを使用することがあります。ブラウザの設定によりCookieを無効にすることができますが、一部の機能が利用できなくなる場合があります。</p> <h2 id="免責事項">免責事項</h2> <p>当サイトに掲載する情報は正確性を心がけていますが、その内容の完全性・正確性を保証するものではありません。当サイトの情報をもとに行動した結果について、当サイトは一切の責任を負いません。</p> <h2 id="プライバシーポリシーの変更">プライバシーポリシーの変更</h2> <p>本ポリシーは必要に応じて変更することがあります。変更後のポリシーは当ページに掲載した時点で効力を生じるものとします。</p> <h2 id="お問い合わせ">お問い合わせ</h2> <p>本ポリシーに関するお問い合わせは、<a href="https://jiru-labo.com/pages/contact/">お問い合わせフォーム</a>よりお願いします。</p> https://jiru-labo.com/pages/profile/ Tue, 05 May 2026 00:00:00 +0900 https://jiru-labo.com/pages/profile/ <h2 id="じるについて">じるについて</h2> <div class="profile-intro"> <img src="https://jiru-labo.com/img/profile.png" alt="じる" class="profile-intro__icon"> <div class="profile-intro__text"> <p>IT企業に30年以上勤務しているエンジニアです。<br> 業務システムの開発からキャリアをスタートし、長年同じシステムの開発に携わっていましたが、50代でWebサービス開発の部署に異動。<br> 定年後はフリーランスエンジニアとして、好きな開発を続けることを目指しています。</p> </div> </div> <hr> <h2 id="キャリア">キャリア</h2> <table> <thead> <tr> <th>年齢</th> <th>内容</th> </tr> </thead> <tbody> <tr> <td>20代〜</td> <td>IT企業に就職。業務システム（いわゆるレガシーシステム）の開発・保守に従事</td> </tr> <tr> <td>30代〜</td> <td>同分野の開発チームのリーダーを担当</td> </tr> <tr> <td>40代〜</td> <td>管理職に就任。同分野の開発チームのマネジメントを担当</td> </tr> <tr> <td>50代〜</td> <td>Webサービス開発部門に異動。クラウド・Webアプリ開発の世界へ</td> </tr> <tr> <td>現在</td> <td>Webアプリケーション開発に携わりながら、フリーランスに向けて準備中</td> </tr> </tbody> </table> <hr> <h2 id="スキル資格">スキル・資格</h2> <h3 id="aws認定資格">AWS認定資格</h3> <p>クラウドへの理解を深めながら、一つひとつじっくりと取り組んできました。<br> 約3年かけて、全<strong>12個</strong>を取得済みです。（2026年5月時点）</p> <div class="aws-badges"> <img src="https://jiru-labo.com/img/aws/clf.png" alt="AWS Certified Cloud Practitioner" title="AWS Certified Cloud Practitioner"> <img src="https://jiru-labo.com/img/aws/saa.png" alt="AWS Certified Solutions Architect – Associate" title="AWS Certified Solutions Architect – Associate"> <img src="https://jiru-labo.com/img/aws/dva.png" alt="AWS Certified Developer – Associate" title="AWS Certified Developer – Associate"> <img src="https://jiru-labo.com/img/aws/soa.png" alt="AWS Certified SysOps Administrator – Associate" title="AWS Certified SysOps Administrator – Associate"> <img src="https://jiru-labo.com/img/aws/sap.png" alt="AWS Certified Solutions Architect – Professional" title="AWS Certified Solutions Architect – Professional"> <img src="https://jiru-labo.com/img/aws/dop.png" alt="AWS Certified DevOps Engineer – Professional" title="AWS Certified DevOps Engineer – Professional"> <img src="https://jiru-labo.com/img/aws/ans.png" alt="AWS Certified Advanced Networking – Specialty" title="AWS Certified Advanced Networking – Specialty"> <img src="https://jiru-labo.com/img/aws/scs.png" alt="AWS Certified Security – Specialty" title="AWS Certified Security – Specialty"> <img src="https://jiru-labo.com/img/aws/aif.png" alt="AWS Certified AI Practitioner" title="AWS Certified AI Practitioner"> <img src="https://jiru-labo.com/img/aws/mla.png" alt="AWS Certified Machine Learning Engineer – Associate" title="AWS Certified Machine Learning Engineer – Associate"> <img src="https://jiru-labo.com/img/aws/mls.png" alt="AWS Certified Machine Learning – Specialty" title="AWS Certified Machine Learning – Specialty"> <img src="https://jiru-labo.com/img/aws/dea.png" alt="AWS Certified Data Engineer – Associate" title="AWS Certified Data Engineer – Associate"> </div> <h3 id="技術スタック">技術スタック</h3> <ul> <li><strong>バックエンド</strong>：TypeScirpt、Python、C#</li> <li><strong>フロントエンド</strong>：HTML/CSS、TypeScript</li> <li><strong>フレームワーク</strong>：Next.js、SvelteKit</li> <li><strong>インフラ</strong>：AWS、Cloudflare</li> <li><strong>その他</strong>：Hugo、Git/GitHub</li> </ul> <hr> <h2 id="このサイトについて">このサイトについて</h2> <p>「じるラボ」は、定年後にフリーランスエンジニアとして活動するために立ち上げたサイトです。</p> https://jiru-labo.com/pages/search/ Tue, 05 May 2026 00:00:00 +0900 https://jiru-labo.com/pages/search/ https://jiru-labo.com/posts/create-cloudflare-account-for-business/ Tue, 05 May 2026 00:00:00 +0900 https://jiru-labo.com/posts/create-cloudflare-account-for-business/ <p>XServerで運営していたWordPressブログをCloudflare Pagesに移行するにあたり、 個人事業用のCloudflareアカウントを新規に作成しました。</p> <p>Cloudflareは無料プランでも非常に多くの機能が使えます。 この記事ではアカウント作成の手順と、実際に使った機能を紹介します。</p> https://jiru-labo.com/posts/create-github-account-for-business/ Tue, 05 May 2026 00:00:00 +0900 https://jiru-labo.com/posts/create-github-account-for-business/ <p>個人事業用のGoogleアカウントを作成したのと同様に、GitHubアカウントも新規に作成しました。 プライベートのコードと仕事用のリポジトリをきっちり分けたかったのが主な理由です。</p> https://jiru-labo.com/posts/create-google-account-for-business/ Tue, 05 May 2026 00:00:00 +0900 https://jiru-labo.com/posts/create-google-account-for-business/ <p>個人事業を本格的に動かすにあたり、プライベート用とビジネス用のGoogleアカウントを分けることにしました。 同じアカウントで混在させると管理が煩雑になるため、新規に作成した手順をまとめます。</p>