# sui Tech Blog

> スイのテックブログです。トップで最新記事ダイジェストを載せつつ、自己紹介やこれまでの投稿リンク、Web開発の学習記録をまとめています。

## ブログ記事

- [今更だけどよくやる Claude Code 活用法](https://suntory-n-water.com/blog/claude-code-context-management-tips.md): Claude Code が途中から指示を聞かなくなるのはコンテキスト圧迫が原因です。仕組みを整理したうえで、私が日常的にやっているリセット、模範解答、計画、巻き戻しの 4 つの対策をまとめます。
- [built-in subagent で足りていると思っていたら、軽い調査も Opus で走っていた](https://suntory-n-water.com/blog/claude-code-subagent-model-inheritance.md): Claude Code の subagent 利用を 1 か月分集計したら、general-purpose は親が使っているモデルを継承していて、軽い調査も Opus で走っていました。Explore が Haiku 固定だったことと対比しながら、Haiku 固定のカスタム agent に切り出す判断軸を整理します。
- [AIの出力を人間が読める状態にする2つのHooks](https://suntory-n-water.com/blog/claude-code-hooks-plan-readability.md): Claude Code のプランファイルが読めなくて苦痛だったので、文体を改善する Hook とファイル名を読みやすくする Hook を作った話。
- [スマホで開いたブログが10秒固まっていた話と、原因が過去の自分だった件](https://suntory-n-water.com/blog/blog-mobile-performance-fix.md): iPhone で自分のブログを開いたら10秒以上白画面が続きました。Cloudflare Fonts や Bot Fight Mode、Astro の client:idle を順に疑っていったら、最後に残った10秒の正体は、過去の自分が書いた1行の CSS でした。
- [小諸そばのメニューをガチャで決めるサイトを作った](https://suntory-n-water.com/blog/komoro-soba-menu-gacha-pwa.md): 平日3回通う小諸そばで、毎回同じメニューばかり選んでしまうのを解消するため、ガチャで決める Web アプリを作りました。量の閾値設計と、画像をどう表現するかで一番悩んだ話をまとめます。
- [あいまいな記憶を手がかりに過去のメモを引き出すセマンティック検索を Cloudflare Vectorize で作った](https://suntory-n-water.com/blog/obsidian-semantic-search-cloudflare-vectorize.md): キーワードで思い出せない記憶を手がかりに過去のメモを引き出したくて、Obsidian のデータを Cloudflare Vectorize でベクトル化し Claude Code からセマンティック検索できるしくみを作りました。
- [Claude Code の利用状況を Cloudflare D1 にためてみる](https://suntory-n-water.com/blog/claude-code-usage-otel-cloudflare-d1.md): 「どの Skill がどれくらい自動起動しているか」を見るために、Claude Code の 利用状況を Cloudflare Worker + D1 で受け取る仕組みを作りました。個人規模で手軽に始める方法と、Skill 棚卸しに使った実際の集計結果を紹介します。
- [走っているのに歩いていなかった](https://suntory-n-water.com/blog/grafana-apple-health-sleep-steps-vo2max.md): Apple Watch のヘルスケアデータを Grafana でローカル可視化してみたら、思っていたより悪いことと思っていたより良いことが同時に出てきました。
- [GitHub Actions で APT 依存をキャッシュしてワークフローを高速化する](https://suntory-n-water.com/blog/github-actions-agent-browser-cache-strategy.md): GitHub Actions で agent-browser を使う際の APT 依存インストールを 4 つのキャッシュ戦略で検証しました。.deb ファイルをキャッシュして dpkg で直接インストールする方式でキャッシュヒット時の apt-get update をスキップでき、ワークフローの実行時間を 36〜45 秒から 16〜19 秒へ 50〜60% 削減できました。本記事では既存ライブラリの Node.js 廃止リスクも含めた各アプローチの比較と、自前実装の composite action を紹介します。
- [「Cloudflare を入れていれば安心」は半分正解だった](https://suntory-n-water.com/blog/cloudflare-waf-free-plan-reality.md): 個人サイトに Cloudflare を入れると、ダッシュボードに攻撃ブロックのログが並びます。WordPress の設定ファイルを狙った攻撃は確実にブロックされますが、認証情報を狙った攻撃は素通りしてしまいます。それでも実害はゼロだった理由は Cloudflare ではなく、サイトの構成にありました。
- [スマホ無し旅行のすゝめ](https://suntory-n-water.com/blog/no-smartphone-trip.md): スマートフォンの制限をかけても自分で突破してしまうから、物理的に持っていかない旅をしました。温泉地である越後湯沢の宿で1泊2日、本を読んでぼんやりしてきた感想です。
- [agent-browserがRustネイティブになった今、playwright-cliとどちらを選ぶべきか](https://suntory-n-water.com/blog/agent-browser-vs-playwright-cli-revisit.md): agent-browserがRustネイティブになった今、playwright-cliと改めて比較しました。-i -cオプションでトークン差が約6%まで縮まり、前回の「40%差」は実質解消。ネットワーク監視・diff機能も含めた現時点の選択基準を整理します。
- [Cloudflare が WordPress の後継 CMS「EmDash」を作ったので触ってみる](https://suntory-n-water.com/blog/built-a-blog-site-with-cloudflare-emdash-and-access-control.md): Cloudflare EmDashのマーケティングテンプレートをベースに、ブログ機能の移植、seed反映の確認、デザイン調整、Cloudflare Accessによる管理画面保護まで試した内容をまとめました。
- [Claude Code の待ち時間にアニメのセリフを流したくて OSS を作った](https://suntory-n-water.com/blog/cc-spinner-customize-claude-code-spinner-verbs.md): Claude Code の処理中に表示される Spinner Verbs をカスタマイズできる CLI ツール「cc-spinner」を作りました。アニメのセリフを入れたら記憶が蘇る体験ができるのではと思い、1日で形にしました。
- [Claude Code の Pro から Max 20x に移行して1ヶ月使った率直な感想](https://suntory-n-water.com/blog/claude-code-pro-to-max-one-month-review.md): Claude Code を Pro プランで半年間使い、Max 20x に移行して1ヶ月。Opus をフル活用できた喜びと、「使わなきゃ」という圧に追われた正直な体験談です。性能の話だけでなく、課金モデルと自分の性格の相性について考えました。
- [Cloudflare Workers のプレビュー URL を自動で無効化する](https://suntory-n-water.com/blog/cloudflare-workers-preview-version-cleanup.md): Cloudflare Workers のプレビュー URL は、PR をマージしても自動で無効化されません。バージョンの削除ではアクセスを止められないため、Subdomain API の previews_enabled を GitHub Actions で自動制御する方法を実装しました。
- [自然言語で自動化ワークフローを作成できるGitHub Agentic Workflowsを試してみた](https://suntory-n-water.com/blog/github-agentic-workflows-ci-doctor.md): GitHub Agentic Workflowsを使って、CIの失敗を自動で診断・修正するワークフローを作りました。Markdownに自然言語で指示を書くだけで、AIエージェントがログを解析し、原因を特定し、修正パッチまで生成します。セットアップから検証結果、セキュリティ設計まで実体験をもとに解説します。
- [Claude Codeの変更履歴を自動で日本語解説するサイトを作った](https://suntory-n-water.com/blog/built-claude-code-changelog-viewer.md): Claude Codeは更新頻度が高く、英語のCHANGELOGを毎回追うのは大変です。日本語で自動解説してくれるサービスが見当たらなかったので、Gemini APIとGitHub Actionsで更新処理を自動化したWebサイトを作りました。
- [AIを使い倒す人間ほど、AI文章に萎える](https://suntory-n-water.com/blog/visceral-aversion-to-ai-generated-text.md): 24時間365日AIを使い倒している私が、技術記事のAI生成文章に感じる「ゾワッ」とする感覚を言語化しました。Markdown記法の残留、不自然なコロン、ビルドがコケるTypeScriptのコード。「またAIね」と萎える瞬間に潜む3つの感情と、使い手だからこそ分かる「AI臭さ」の正体、そしてAI時代に求める技術記事の姿を考えます。
- [父島に全部賭けろ](https://suntory-n-water.com/blog/bet-everything-on-chichijima.md): 片道24時間、週1便、乗船者800名。不便さが強制する「何もしない時間」が、他の観光地では得られない体験をくれる。二度訪れた父島の魅力を語ります。
- [Playwright CLI と agent-browser のどちらがトークン消費量が少ないか比較検証してみた](https://suntory-n-water.com/blog/playwright-cli-vs-agent-browser-token-comparison.md): Playwright CLIとagent-browserで同一操作を行い、トークン消費量を比較しました。スナップショットをファイル出力してGrep検索する設計思想により、Playwright CLIはagent-browserより約40%のトークン削減を達成しています。本記事ではAIブラウザ操作ツールの設計思想の違いがコストに与える影響を検証します。
- [AIエージェント向けに最適化されてたagent-browserをPlaywright MCPと比較検証してみた](https://suntory-n-water.com/blog/i-tried-using-agent-browser.md): agent-browserの「Up to 93% less context than Playwright MCP」は本当か気になったので、Yahoo! JAPANを対象にPlaywright MCPと比較してデータ削減率とトークン消費量を検証します。
- [やはり俺のPlaywrightはまちがっている。](https://suntory-n-water.com/blog/my-playwright-was-wrong.md): 過去のプロジェクトから流用したPlaywrightのコードは「動いて」いました。しかし、偶然ドキュメントを読み直したとき、「動く」と「正しく動く」の間には設計思想の違いがあることに気づきました。page.evaluate()ではなくlocatorを使うべき理由、waitForNavigation()が非推奨である理由。公式ドキュメントには、単なるAPIリファレンスではなく「なぜこの方法が推奨されるのか」が書かれています。時間がない現実の中で、それでもドキュメントを読む価値とは何かを考えます。
- [図解から始める認知負荷との付き合い方](https://suntory-n-water.com/blog/cognitive-load-management-with-diagrams.md): AI時代、文字を読む量が圧倒的に増えています。生成AIからの提案を承認する度に大量のテキストを読み込む認知負荷の高さに「もう無理だ」と感じた経験から、技術ブログに図解機能を実装しました。図解は「記憶の定着装置」として機能し、全体像を視覚的に示すことで認知負荷を下げます。本記事では、なぜ図解が有効なのか、そしてAIを活用してどう実装したのかを解説します。
- [Claude Codeへ「スキルを使って」と言うのに疲れたあなたへ](https://suntory-n-water.com/blog/claude-code-dynamic-skill-loading.md): Claude CodeのAgent Skillsは、ベストプラクティスに従った実装を自動化する優れた仕組みですが、Claudeの推論による実行判定には限界があります。Playwrightを例に挙げると、「クリック操作を修正して」のような自然な指示では、descriptionに「Playwright」が含まれていてもスキルが起動しないことがあります。本記事では、UserPromptSubmitフックを活用し、キーワードマッチングによってスキルを確実に起動させる実装方法を解説します。
- [Renovate で作る「頑張らない」運用のすすめ](https://suntory-n-water.com/blog/automate-dependency-updates-with-renovate.md): 依存関係更新の手動対応をやめて、Renovate で自動化する方法をまとめました。クールダウン期間(minimum release age)を設定してサプライチェーン攻撃のリスクを回避しつつ、手間をかけずに安全性を維持する「頑張らない運用」の設計方針を紹介します。
- [Next.js から Astro へ。拡張性を捨て、シンプルさを選んだ理由](https://suntory-n-water.com/blog/migrating-nextjs-to-astro.md): ブログに「何でもできる」Next.jsは過剰スペックでした。新機能に追いつけず、Web標準APIとの相性に悩んだ末、SSGに特化したAstroへ移行しました。拡張性を捨て、「必要最小限」を選んだ技術選択の記録です。
- [Claude Code にルールを強制させる Stop Hooks とBiome v2による仕組みづくり](https://suntory-n-water.com/blog/enforce-rules-with-stop-hooks-and-biome-v2.md): AIに「ルールを覚えておいて」と頼むのは間違ったアプローチです。Claude CodeのHooksとBiome v2を使えば、規約違反を自動検知してAI自身に修正させる環境を構築できます。
- [Claude Code にコーディングルールを守らせるのは諦めて、全部 Biome に任せることにした](https://suntory-n-water.com/blog/delegate-coding-rules-to-biome.md): Claude Code の CLAUDE.md に記載したコーディング規約が守られない課題を、Biome v2.x の GritQL 機能を使って解決します。「引数が2個以上の場合はオブジェクト形式にする」といった独自ルールを Linter で機械的に強制することで、コンテキストウィンドウを圧迫せず、AI が確実にルールを遵守できる環境を構築する方法を解説します。
- [Cloudflareのグローバルネットワーク上でヘッドレスChromeを実行するBrowser Rendering](https://suntory-n-water.com/blog/cloudflare-browser-rendering-markdown-example.md): Cloudflare Browser RenderingのREST APIを使って、WebページをMarkdownに変換するAPIを構築する方法を解説します。不要な要素の削除やリソース最適化など、実践的な実装例を紹介します。
- [ブログのSVGアイコンがチラついてムカついたのでやったこと](https://suntory-n-water.com/blog/annoying-flickering-blog-svg-icon-fix.md): Next.jsのImageコンポーネントで発生するSVGアイコンのちらつき問題を、SVGインライン化によって解決した実装記録です。publicフォルダ配置では解消できなかった初回表示時のちらつきを、ビルド時にSVGコードを埋め込むことで無くしました。
- [Next.js App RouterとPagefindで爆速のサイト内検索を実装する](https://suntory-n-water.com/blog/nextjs-pagefind-implementation.md): Next.js (App Router) のブログに Pagefind で全文検索機能を実装する手順を紹介します。public ディレクトリへのインデックス出力設定や、クライアントサイドでの動的インポートなど、実装に必要なポイントをコード付きで解説します。
- [今日から学ぶGitHub Actionsのセキュリティ設定の基本と最低限の対策](https://suntory-n-water.com/blog/github-actions-security-basics-minimum-measures.md): GitHub Actionsで発生しうるScript InjectionやPull Request Target、権限の過剰付与などの脆弱性と、actionlint・ghalint・zizmor等の静的解析ツールを使った具体的な対策方法を解説します。
- [ブログ記事のアーキテクチャをMDXからMarkdownへ変更しました](https://suntory-n-water.com/blog/blog-new-architecture.md): NotionとLINEメッセージングAPIを使った外出先からのブログ更新システムから、ObsidianとMarkdownベースのシンプルな管理方式へ移行した経緯を紹介します。
- [Anthropic公式のMCPによるコード実行をserena MCPで試してみたけど無理だった件](https://suntory-n-water.com/blog/i-tried-running-code-using-official.md): AnthropicのMCPコード実行手法をSerena MCPで試しましたが、ツール数が多く型定義が複雑なMCPではうまくいきませんでした。シンプルなMCPでの検証が必要という学びを共有します。
- [GASを使うと社内だけで使えるWebサイトが簡単に作れるの知ってました？](https://suntory-n-water.com/blog/did-you-know-you-can-easily.md): Google Apps Script(GAS)を使うと社内限定で使えるWebアプリケーションを簡単に構築できます。claspとTypeScriptを使ってGoogleDriveのファイルを検索するアプリケーションを作成します。
- [Notion APIのデータベース操作APIに破壊的変更があったので、実装を修正してみる](https://suntory-n-water.com/blog/there-breaking-change-notion-apis-database.md): Notion APIのバージョン2025-09-03における破壊的変更について解説します。単一データベースモデルからマルチソースデータベースモデルへの移行に伴う実装修正方法を紹介します。
- [仕組みでカバーするStop Hooksで忘れないTypeScriptの型チェック](https://suntory-n-water.com/blog/dont-forget-check-typescript-types-stop.md): Claude CodeのStop Hooksを使って、TypeScriptの型チェックを自動実行する仕組みを実装します。物忘れを仕組みでカバーして、効率的な開発フローを実現します。
- [Dev Container環境でSerena MCPのブラウザ自動起動を無効化する](https://suntory-n-water.com/blog/disable-automatic-browser-launch-serena-mcp.md): Dev Container環境でSerena MCPのブラウザ自動起動を無効化する方法を解説します。グローバル設定ファイルとdevcontainer.jsonの設定でダッシュボードの自動起動を制御します。
- [Next.js + OpenNext.js をdevcontainerで起動しようとしたときにハマったこと](https://suntory-n-water.com/blog/nextjs-cloudflare-devcontainer-glibc-issue.md): Debian 11 bullseyeベースのdevcontainerでNext.js 15 + OpenNext.jsの開発サーバーが起動せず、Debian 12 bookwormベースに変更して解決した事例。glibcバージョン要件とworkerdの実行互換について整理。
- [PreToolUseがfailed with non-blocking status code 127になったときにやったこと](https://suntory-n-water.com/blog/i-did-pretooluse-failed-non-blocking-status.md): Claude CodeのPreToolUseがfailed with non-blocking status code 127になったときの解決方法を解説します。改行コードがCRLFになっている場合にLFに変更することで解決します。
- [CC-VaultというClaude Code専用のキュレーションメディアを作った](https://suntory-n-water.com/blog/cc-vault-curation-media.md): Claude Codeの新機能が出るたびに色々なサイトを見るのが面倒くさいなと思って、ZennとQiitaのClaude Code記事をまとめるツール「CC-Vault」を作りました。実務でClaude Code使ってて同じような悩みを持つ人に刺さるかもしれません。
- [HonoXにおけるSSRとクライアントサイドHydrationの同期問題とその解決策](https://suntory-n-water.com/blog/honox-ssr-hydration-issue.md): HonoXのSSRとクライアントHydrationの同期問題を解説。サーバーで正しく描画された表示がクライアントで元に戻る現象の原因を解明し、確実な状態同期を行う実装パターンを紹介します。
- [Cloudflare Workers環境で「Illegal invocation」エラーが起きたときに試したこと](https://suntory-n-water.com/blog/i-tried-i-got-illegal-invocation.md): Cloudflare Workers上でMCPサーバーを構築し、Notion APIを使用する際に遭遇した「TypeError: Illegal invocation」エラーの根本原因の特定から解決までの検証プロセスを詳しく解説します。
- [HonoXにVitestを導入する](https://suntory-n-water.com/blog/installing-vitest-honox.md): HonoXアプリケーションにVitestを導入する方法を解説します。Cloudflare WorkersのバインディングD1を利用するHonoXアプリケーションのテスト環境構築ガイドです。
- [dependabotによる依存関係更新の集約設定](https://suntory-n-water.com/blog/aggregating-dependency-updates-dependabot.md): dependabotによる依存関係更新を1つのPRにまとめる設定方法を解説します。グループ化設定を導入して、複数のPRを個別にマージする際の一時的なバージョン不整合を解消します。
- [Hono + Obsidianプラグインをハンズオン形式で開発してみる](https://suntory-n-water.com/blog/hands-on-development-hono-obsidian-plugins.md): Honoを使用してObsidianプラグインを開発するための環境構築手順を解説します。pnpm workspacesを使ったモノレポ構成でCloudflare Workers上で動作するHonoとObsidianプラグインを管理します。
- [『ないなら作ればいいじゃない』HonoXで金髪ヒロインしか乗ってないアニメ専門サイトを作った話](https://suntory-n-water.com/blog/kinpatsu-heroine-honox.md): HonoXとCloudflare Workersを活用し、アニメの金髪ヒロインだけを一覧表示するWebサイト「金髪ヒロイン.com」を個人開発した体験と、技術選定や実装の工夫、今後の課題についてまとめました。
- [GitHub Copilotもルールを強制させる](https://suntory-n-water.com/blog/vscode-github-copilot-multiple-prompt.md): VSCodeで使えるGitHub Copilotでも Cursorと同じようなルールを設定することができます。この記事では複数のルールを設定して開発を行う方法を解説します。
- [チンチロをするMCPサーバーを作ってみる](https://suntory-n-water.com/blog/chinchillo-mcp-server.md): Model Context Protocol (MCP) を使うと、AIアシスタントに新しい機能を追加できます。この記事では、サイコロゲーム「チンチロ」を例に、TypeScriptでMCPサーバーを実装し、Claude Desktopで遊ぶ方法を紹介します。AIの進化が進む中、MCPの基本的な仕組みを実際に手を動かして学んでみましょう。
- [iOSでもWindowsと同じ絵文字を表示したい！](https://suntory-n-water.com/blog/ios-kawaii-emoji.md): 絵文字は私たちのデジタルコミュニケーションに欠かせない存在ですが、同じ絵文字コードでもOSによって見た目が大きく異なります。例えば「🫠」(溶ける顔)や「😎」(サングラスの顔)は、iOSとWindowsで全く異なるデザインです。本記事では、Webアプリケーション上でOSに関係なく統一した絵文字表示を実現するため、MicrosoftのFluent UI Emojiを使った実装方法を解説します。
- [「Webサービス公開前のチェックリスト」にあるレスポンスヘッダの内容を調べてみる](https://suntory-n-water.com/blog/response-header-web-check-list.md): Webサービス公開前のチェックリストにあるレスポンスヘッダの意味が全くわからなかったので、どんなリスクから守ってくれるのかを調べてみました。この記事ではWebサービスを公開する前に必要なレスポンスヘッダの内容と設定しなかったときのリスクを知ることができます。
- [Notionの画像(S3)をCloudflare R2に格納する](https://suntory-n-water.com/blog/notion-images-put-cloudflare.md): Notionで作成されたマークダウンコンテンツには、Amazon S3に保存された画像へのリンクが含まれています。ブログ記事として公開する際に、これらの画像をCloudflare R2ストレージなどの外部ストレージに移行することで非公開ページの画像も表示することができます。この記事ではNotionのページに添付されている画像をCloudflare R2に格納する処理について解説します。
- [Vercelで独自ドメインを設定する](https://suntory-n-water.com/blog/cloudflare-get-domain-vercel.md): 独自ドメインを購入し、Vercelにデプロイされたウェブサイトに設定する方法を紹介します。Next.jsで作成したポートフォリオサイトを例に、Cloudflareでドメインを購入から設定完了までの手順を解説します。
- [NotoSansJP使ってるのにSafariのフォントが明朝体になる](https://suntory-n-water.com/blog/noto-sans-jp-safari-mincho.md): SafariやiOSのGoogle Chromeだけフォントが明朝体に変わってしまっている件。
- [LINE Messaging APIから自動でGitHubにPRを発行する](https://suntory-n-water.com/blog/messaging-api-github-pr.md): ポートフォリオの技術記事投稿頻度をあげるためにNotion + Messaging APIでブログ記事を自動でPull Requestを発行できるようにしました。mdxファイルの作成はnotion-markdown-converterを使用しています。
- [ポートフォリオにブログページを追加しました](https://suntory-n-water.com/blog/add-blog-to-portfolio.md): ポートフォリオサイトにブログページを追加しました。今後はZennやQiitaで投稿していた内容を、こちらに集約する想定です。
- [HonoXで短縮URL作成サイトをつくる](https://suntory-n-water.com/blog/create-url-shortening-site-honox.md): HonoXで短縮URL作成サイトを作成します。基本的な環境構築が終わっているsetupブランチから完成版までの変化を追いながら、実装の流れを解説します。
- [Podがなにか分からないから弁当ケースで表現してもらう](https://suntory-n-water.com/blog/i-dont-know-pod-so-ill.md): KubernetesのPodとは何かを弁当ケースに例えて理解します。1つ以上のコンテナをまとめたものであるPodの概念を、実務で遭遇した場面から学んだことをまとめました。
- [Marpで企業ロゴが入ったスライドを作成する](https://suntory-n-water.com/blog/create-slide-your-company-logo-using.md): Marpで企業ロゴが入ったスライドを作成する方法を解説します。gaiaテーマとCSSの::after疑似要素を活用してヘッダーの右上にロゴを配置する実装を紹介します。
- [もう少し楽にBranded Typeを使えるようにしたい](https://suntory-n-water.com/blog/i-want-make-easier-use-branded.md): Branded Typeを簡単に生成できるツールを作成しました。似たような名前のIDやデータを扱う際の型安全性を高め、間違った型を使う可能性を減らすことができます。
- [2025年は毎日ベッドメイキングだけやればいい。](https://suntory-n-water.com/blog/2025-all-you-need-do-make.md): ベッドメイキングから始まる小さな成功体験の重要性についてのポエム。
- [手を動かして理解するクリーンアーキテクチャ](https://suntory-n-water.com/blog/learn-clean-architecture-through-hands-on-experience.md): クリーンアーキテクチャの概要をざっくり理解し、実際に手を動かして実装することで腹落ちを目指します。関心ごとの分離と依存関係の方向性について解説します。
- [手を動かして理解するBranded Type](https://suntory-n-water.com/blog/branded-type-learn-doing.md): Branded Typeの概要と実装方法を手を動かして理解します。プリミティブ型に目印を付与して型安全性を高めるテクニックを、既存リポジトリへの適用を通じて学びます。
- [初めての実行計画と「ANALYZE」で統計情報の再計算を行う](https://suntory-n-water.com/blog/first-execution-plan-recalculating-statistics-analyze.md): 開発環境で正常に動作していたSQLが検証環境でタイムアウトする問題に対して、EXPLAIN ANALYZEを用いた実行計画の改善と統計情報のリセット方法を解説します。
- [アニメ情報を取得するWebAPIを実際にリクエストして、比較してみる](https://suntory-n-water.com/blog/lets-actually-request-webapi-retrieves-anime.md): アニメ情報を取得するWebAPI(ShangriLa Anime API、Annict API、MyAnimeList API)を実際にリクエストして比較検証しました。各APIの特徴と違いを解説します。
- [住んでいる地域の人口増減を一目でわかるWebサイトをつくった](https://suntory-n-water.com/blog/we-created-website-lets-you-see.md): 都道府県と市区町村を選択するだけで、その地域の人口動態を可視化できるWebサイトを作成しました。Next.js、Recharts、shadcn/uiを使用した実装を紹介します。
- [Wikipediaの全記事を学習させて、日本語で遊んでみる](https://suntory-n-water.com/blog/learn-all-wikipedia-articles-fun-them.md): Wikipediaの全記事をWord2Vecに学習させて、単語同士の足し算や引き算を行うことができるWebサイトを作成しました。FastAPIの復習も兼ねた実装を紹介します。
- [Tailwind CSS マーカーとテキストの重なりを防ぐ方法](https://suntory-n-water.com/blog/prevent-tailwind-css-marker-text-overlap.md): Tailwind CSSでリストアイテムが長くなった場合に、テキストがマーカーと重なってしまう問題の解決方法を解説します。
- [Playwrightでクエリパラメータが付与されているページのURLを取得する](https://suntory-n-water.com/blog/get-url-page-query-parameters-playwright.md): Playwrightでクエリパラメータが付与されているページのURLを取得する方法を解説します。page.on()メソッドでネットワークを監視する方法を紹介します。
- [Next.js AppRouterで動的OGP画像を作成する](https://suntory-n-water.com/blog/creating-dynamic-ogp-images-nextjs-approuter.md): Next.js AppRouterでImageResponse()を使用して動的OGP画像を作成する方法を解説します。エンドポイント作成から画像レイアウトの実装までを紹介します。
- [GitHub Actionsでビルドしたファイルをリリースノートに格納する](https://suntory-n-water.com/blog/include-build-files-release-notes-github.md): GitHub Actionsでビルドしたファイルをリリースノートに格納する方法を解説します。非エンジニアの友人でも簡単に拡張機能をアップデートできる仕組みを実装します。
- [API叩くときはしっかりデコードしよう](https://suntory-n-water.com/blog/sure-decode-properly-calling-api.md): Hono + LINE Messaging APIを使ったコンビニスイーツ提供BOTで、HTMLエンティティのデコードを忘れたことで発生したエラーと、その解決方法を解説します。APIを叩く際のデータ処理の重要性を学びます。
- [ニート→社会人になって睡眠の質は変化したのか調べてみた](https://suntory-n-water.com/blog/i-investigated-whether-quality-sleep-changed.md): ニートから社会人になって睡眠の質がどう変化したのか、iPhoneのヘルスケアアプリのデータを使って定量的に分析しました。睡眠に関するデータ解析の方法を紹介します。
- [今更だけどMarkdownでPowerPointが作成できるMarpに入門してみる](https://suntory-n-water.com/blog/little-late-ill-introduce-marp-allows.md): MarkdownでPowerPointスライドが作成できるMarpに入門します。ハンズオン形式でMarpの環境構築から実際のスライド作成までを解説します。
- [Docker + PostgreSQLで環境構築して、パーティションについて学ぶ](https://suntory-n-water.com/blog/build-environment-docker-postgresql-learn-about.md): Docker + PostgreSQLで環境構築を行い、パーティションについて学びます。実務でn千万からn億レコードのテーブルを扱う際に必要なパーティション構成の基礎を実践的に解説します。
- [Hono Service bindings入門](https://suntory-n-water.com/blog/introduction-hono-service-bindings.md): Cloudflare WorkersのService Bindings機能を使って、パブリックにアクセス可能なURLを経由せずに別のWorkersを呼び出す方法を解説します。Honoを使った複数Workersの連携実装例を紹介します。
- [Hono + DIでInversifyJSを使用する](https://suntory-n-water.com/blog/using-inversifyjs-hono-di.md): HonoとDIで実装したアプリケーションにInversifyJSを使用して改修します。依存性の注入をサポートする軽量のIoCコンテナであるInversifyJSの使い方を解説します。
- [手を動かして理解しようとするDI(依存性の注入)](https://suntory-n-water.com/blog/understanding-di-dependency-injection-through-hands-on.md): 依存性の注入(DI)という概念を手を動かしながら理解します。読んでもよく分からなかったので、実装を通じてナンモワカランからチョットワカッタカモになることを目指します。
- [Viteで始めるGoogleChrome拡張機能開発](https://suntory-n-water.com/blog/start-developing-google-chrome-extensions-vite.md): Vite + TypeScriptを使用してGoogle Chrome拡張機能を開発する方法を解説します。初めて拡張機能を開発する方の第一歩になる記事です。
- [コンビニスイーツをランダムに表示するLINE BOTをつくる](https://suntory-n-water.com/blog/create-line-bot-randomly-displays-convenience.md): CloudflareWorkersとHonoを使ってコンビニスイーツをランダムに表示するLINE BOTを作成。
- [Honoでランダムにアイスクリームを提案するLINE BOTを作る](https://suntory-n-water.com/blog/create-line-bot-randomly-suggests-ice.md): Hono + Cloudflare Workersを使用してランダムにアイスクリームを提案するLINE BOTを作成しました。チョコモナカジャンボに変わる新しい最強のアイスクリームを見つけることをコンセプトに、技術選定から実装までを解説します。
- [不動産情報ライブラリAPIを使ってみる！](https://suntory-n-water.com/blog/try-using-real-estate-information-library.md): 国土交通省の不動産情報ライブラリAPIを使ってみた体験記。
- [SQLAlchemy + pytestでRuntimeError Event loop is closedが起きたときにやったこと](https://suntory-n-water.com/blog/i-did-i-got-runtimeerror-event.md): SQLAlchemyとpytestでRuntimeError Event loop is closedエラーが発生した際の対処法。
- [Google Places API (New)で言語コードを設定せず沼りかけた](https://suntory-n-water.com/blog/i-almost-got-stuck-without-setting.md): Google Places API (New)で言語コードを設定せず沼りかけた経験。
- [【FastAPI】idをuuidで設定するときは型定義に気をつけたい](https://suntory-n-water.com/blog/setting-id-uuid-careful-type-definition.md): FastAPIでidをuuidで設定する際の型定義の注意点。
- [支離滅裂な文章を生成するアプリ](https://suntory-n-water.com/blog/app-generates-incoherent-sentences.md): GASのLanguageAppクラスを使って支離滅裂な文章を生成するアプリ。
- [Next.js13 デプロイ時にAPIのパスを動的に変えるやり方](https://suntory-n-water.com/blog/nextjs13-dynamically-change-api-path-during.md): Next.js13でデプロイ時にAPIのパスを動的に変更する方法。
- [ザ・ダークパターンをshadcn/uiで作成する](https://suntory-n-water.com/blog/creating-dark-pattern-shadcn-ui.md): shadcn/uiを使ってダークパターンを実装する例。
- [１０％の確率でドオーしか表示されないポケモン生成サイトを作った](https://suntory-n-water.com/blog/i-made-pokemon-generator-10percent-chance.md): PokeAPIを使って10%の確率でドオーしか表示されないポケモン生成サイトを作成。
- [【個人開発】水瀬いのりさんのライブで聴いたことのない曲を一覧表示するぞ](https://suntory-n-water.com/blog/list-songs-you-havent-heard-minase.md): 水瀬いのりさんのライブで聴いたことのない曲を一覧表示するアプリの開発。
- [自分だけのBookNotionを爆誕させた](https://suntory-n-water.com/blog/i-created-my-own-booknotion.md): KindleのハイライトをNotionにまとめる自分専用BookNotionアプリを開発。
- [BookNotionを更に神アプリにしたい その１](https://suntory-n-water.com/blog/i-want-make-booknotion-even-better.md): BookNotionをより便利にするための機能拡張について。
- [Angularの練習ということで船橋市の人口推移グラフを作ってみた](https://suntory-n-water.com/blog/angular-practice-i-made-population-graph.md): Angularの練習として船橋市の人口推移グラフを作成。
- [Postman localhostにリクエストが送信できない](https://suntory-n-water.com/blog/postman-unable-send-request-localhost.md): Postmanでlocalhostにリクエストを送信できない問題の解決方法。
- [ラーメン二郎のコールで学ぶ良いアルゴリズムとは何かをGPT先生に聞いてみる](https://suntory-n-water.com/blog/asking-gpt-sensei-good-algorithm-learn.md): ラーメン二郎のコールシステムを例に、良いアルゴリズムとは何かを学ぶ。
- [TypeScriptでコールバック関数を知る](https://suntory-n-water.com/blog/learn-about-callback-functions-typescript.md): TypeScriptでコールバック関数について学習した備忘録。
- [密結合と疎結合の理解を深める](https://suntory-n-water.com/blog/deepen-your-understanding-tight-loose-coupling.md): 密結合と疎結合の違いと、コードの品質への影響について。
- [Seleniumが本当にバレバレなのか試してみた](https://suntory-n-water.com/blog/i-tried-see-if-selenium-really.md): Seleniumによるスクレイピングが本当にバレるのか実際に検証。
- [TypeScript interfaceとtypeどっち使うんですか？](https://suntory-n-water.com/blog/typescript-should-i-use-interface-or.md): TypeScriptでinterfaceとtypeのどちらを使うべきかについての解説。
- [ReactとFlaskを連携させてみる part2](https://suntory-n-water.com/blog/integrating-react-flask-part-2.md): React→Flask→Reactのデータフロー実装について。FlaskとReactの連携part2。
- [React + Flaskを連携させてみる](https://suntory-n-water.com/blog/lets-integrate-react-flask.md): ReactとFlaskを連携させたアプリケーション開発の手順。
- [【React】初めてのフロントエンド〜ランダムで今日行くラーメン二郎を決めてもらう〜](https://suntory-n-water.com/blog/my-first-frontend-randomly-decide-ramen.md): Reactを使ってランダムでラーメン二郎の店舗を表示するアプリを作成。初めてのフロントエンド開発。
- [【ChatGPT】今更だけど本を要約してもらった](https://suntory-n-water.com/blog/little-late-i-got-summary-book.md): ChatGPTを使って読んだ本を要約してもらった実験記録。
- [メルカリShopsの再出品があまりにもだるすぎたので効率化してみた](https://suntory-n-water.com/blog/relisting-items-mercari-shops-so-tedious.md): メルカリShopsの再出品作業を効率化するため、Pythonとseleniumを使った自動化アプリを開発。
- [【Python】pyautogui入門 -Kindleのハイライトを削除してみる-](https://suntory-n-water.com/blog/introduction-pyautogui-trying-remove-highlights-kindle.md): デスクトップのKindleアプリでハイライトと注記を自動削除するPyAutoGUIスクリプト。
- [【Python】初めての自然言語処理？discord.pyでネガティブな単語に反応するbotを作ってみた。](https://suntory-n-water.com/blog/my-first-natural-language-processing-i.md): Pythonとdiscord.pyを使ってネガティブな単語に反応するbotを作成。自然言語処理と形態素解析の入門。
- [Anacondaはシステム環境変数の設定方法が異なるらしい](https://suntory-n-water.com/blog/anaconda-seems-different-way-setting-system.md): Anacondaとcmdでは環境変数の設定方法が異なるという発見についての備忘録。
- [【Python】pyautogui入門 -定型作業を自動化してみる-](https://suntory-n-water.com/blog/introduction-pyautogui-automating-routine-tasks.md): PyAutoGUIとOpenCVを使ってメルカリの定型作業を自動化する方法について。
- [Excel メジャーじゃないけど知っておくと便利な小技3選](https://suntory-n-water.com/blog/3-tips-excel-arent-major-useful.md): 職場でExcelを使う際によく使うショートカットキーやコマンドを紹介。
- [Django テンプレートタグに空白を入れると認識してくれません](https://suntory-n-water.com/blog/django-template-tags-not-recognized-if.md): Djangoテンプレートタグで空白を入れると認識されない問題についての備忘録。
- [技術書の読書術をざっくり読んで個人的に重要な部分をまとめてみた。](https://suntory-n-water.com/blog/i-quickly-read-through-book-read.md): 技術書の読書術の重要な部分をまとめた備忘録。効果的な読書方法とアウトプットについて。
- [【雑記】これ以上心臓に負荷をかけるな【光で目覚めよう】](https://suntory-n-water.com/blog/dont-put-any-more-strain-your.md): アラーム音による心臓への負担を軽減するため、光で目覚める方法を提案する雑記。
- [2022年秋 応用情報技術者試験""不""合格体験記](https://suntory-n-water.com/blog/fall-2022-applied-information-technology-engineer.md): 応用情報技術者試験の不合格体験をもとに、なぜ不合格だったのかを振り返る雑記。
- [リーダブルコードの個人的重要部分をざっくりまとめてみた](https://suntory-n-water.com/blog/rough-summary-important-parts-readable-code.md): リーダブルコードの重要な部分をざっくりまとめて、振り返れるようにした備忘録。
- [PyAutoGUI 画像認識と拡大比率の問題](https://suntory-n-water.com/blog/pyautogui-image-recognition-magnification-ratio-issue.md): PyAutoGUIを用いた作業自動化で発見した画像認識の課題。PCの画面解像度が異なる場合の画像認識の問題について。
- [Java コンパイルができない](https://suntory-n-water.com/blog/unable-compile-java.md): Java学習中にコンパイルができず無駄に時間を浪費した経験からの備忘録。Eclipseを使用したコンパイルエラーの解決方法。
- [Python BeautifulSoup find()を呼び出すつもりが、find_all()を呼び出してしまったのでしょうか？](https://suntory-n-water.com/blog/python-beautifulsoup-did-you-mean-call.md): Pythonでスクレイピングする際に何度も遭遇したfind()とfind_all()の使い分けエラーについての備忘録。
- [【MySQL】CSVファイルをDBにインポートする](https://suntory-n-water.com/blog/importing-csv-file-into-database.md): MySQLにCSVファイルをインポートする際に躓いた点と解決方法をまとめた備忘録。データベース、テーブル、権限設定について。
- [令和3年度秋 基本情報技術者試験 合格体験記](https://suntory-n-water.com/blog/fall-2021-fundamental-information-technology-engineer.md): 基本情報技術者試験に合格するまでに使用した参考書やWebサイト、午前免除試験での合格経験をまとめた体験記。
- [セブンイレブンで最適な食品を線形計画法を用いて決めたい](https://suntory-n-water.com/blog/i-want-use-linear-programming-determine.md): 線形計画法を用いてセブンイレブンの食品から栄養バランスと価格を最適化した食事を選択。PuLPライブラリを使用してPFCバランスと価格を考慮した最適解を計算した実験記録。