カテゴリー
Web開発者向け
Web開発者向けに関する記事を公開しています。
Nuxt3で外部画像を静的生成する — NuxtImgとNuxtPictureの使い分け
Nuxt3で内部画像と外部画像を静的生成し、各デバイス毎に画像サイズを最適化するには、公式モジュールのNuxt Imageを使います。
Nuxt ContentでコンポーネントにクラスやIDを付ける
Nuxt Contentでスタイリングする際、直接要素にCSSを当てるのが簡単ですが、クラスやIDなど各種属性を付けることもできます。Tailwind CSSなどのUIライブラリを使う場合に便利な方法です。
さようならVuetify。ようこそTailwind CSS
Nuxt2の時から愛用していたVuetifyの使用をやめ、Tailwind CSSに乗り換えました。Nuxt2からNuxt3への移行と同じく、Vuetify2から3への移行も一筋縄ではいかなかったのですが、久しぶりにバージョンアップしてみたところ（v3.3.9）、またバグが発生して対応が必要だったため、ここら辺で見切りをつけることにしました。
Vercel, Netlify, Cloudflare Pages 課金するならどれ？
2023年版では「1ドル安いNetlify」が結論でしたが、NetlifyはPro月20ドルのクレジット制になり、Cloudflareは課金の入口がWorkers Paid（月5ドル〜）に変わりました。2026年の現行料金で考え直しています。
Next/ImageはCloudflare Pagesの無料プランで使えない
Next.jsには、画像をキャッシュして各デバイスサイズに最適化して配信するNext/Imageコンポーネントがあり、通常は面倒な画像最適化を簡単に実現できますが、Cloudflare Pagesの無料プランでは使えません。
Cloudflare Pages Functionsの制限サイズエラー
Next.js製のサイトをCloudflare Pagesにデプロイする際、Functionsのスクリプトサイズが大きすぎる旨のエラーが発生してデプロイに失敗しました。
Vercel, Netlify, Cloudflare Pages 無料で使うならどれ？
JAMstackのWebサイトなどをホスティングする際、主な選択肢になるのがVercel, Netlify, Cloudflare Pagesの3つかと思います。どれも無料で利用できるため、まずは体験してみるのが1番ですが、無料で使う場合Cloudflare Pagesが最強です。
WhisperとNext.js(Edge Runtime)で文字起こし
OpenAIのサービスの1つであるWhisperのAPIを使い、Next.jsのアプリケーションで文字起こしをする実践的な手順をご紹介します。
Whisperの文字起こしで表記ゆれをなくす簡単な方法
音声をテキストに変換するWhisperは、音声データをAPIにそのまま投げるだけで精度の高い文字起こしが簡単にできるのですが、プロンプトも一緒に投げると、表記揺れも簡単に解消できます。
Nuxt2から3へ移行した感想。なぜ人々はNuxtを選ぶのか
数年前にNuxt2で構築した当サイトをNuxt3で再構築しました。便利ツールのはずのNuxt Bridgeがまったく使い物にならず1から始めることになり、安定版リリースは延期に延期を重ね、「なぜ私はNuxt3を使わなければいけないのか？」と自問自答しながらのフルリニューアルでしたが、色々と経験できたのでアウトプットしたいと思います。
Nuxt3の動的ルーティングで404エラーを表示する
Nuxt3では、存在しないページにアクセスされた時に自動的に404ページを表示してくれますが、動的ルーティング（例：/pages/[postId].vue）の場合は、存在しないページがあったとしても404エラーになりません。
Nuxt3で404ページをカスタマイズする
Nuxt3で404エラーのページをカスタマイズするには、app.vueと同じ階層（ルートフォルダ）にerror.vueを作成します。エラーメッセージはuseError()関数で取得できるため、それを元に思い通りのページを作ることができます。
CMSの画像を静的サイト（SSG）で表示する3つの方法
CMSを利用して静的サイト（SSG）を構築する際、意外と悩むポイントが画像の表示方法です。CMS側に画像用のリソースを提供していることもありますが、帯域制限ありでアクセスが多いと画像が表示されなくなったり、画像配信元とパス（URL）が違うことで都合が悪いこともあったりします。
外部リソースの画像を静的生成する（静的サイト用）
静的サイト（SSG）から直接画像を配信するには、staticやpublicのフォルダに画像を入れるだけでOKですが、CMSからコンテンツを取得して動的にページを生成する場合、外部リソースからの配信になってしまうため、外部リソースを元に静的生成するニーズがあります。
Cloudflare Pagesでお問い合わせフォーム（自動返信あり）を作る
この記事で紹介していたMailChannels無料連携は2024年8月に終了しました。2026年現在のCloudflareでの問い合わせフォームの作り方を、Slack通知・Email Service・メールAPI（自動返信）・MailChannels継続の4通りで解説します。
Astroでサイトマップを自作する — @astrojs/sitemapで足りないSSR対応
@astrojs/sitemapの「3桁数字のURLが除外されるバグ」は修正済みです。2026年現在、サイトマップを自作する実質的な理由はSSR（オンデマンドレンダリング）対応。このブログでも使っている、リクエスト時に生成するエンドポイントの作り方を解説します。
Astroで静的サイトを構築してみて
2023年にAstroで初めて静的サイトを作ったときのレビューに、3年後の答え合わせを追記しました。ClientRouterの登場、SSR対応。このブログ自体をAstroに移行した今も「静的サイトならAstro一択」は変わりません。
Nuxt3で画像の静的生成機能を自前で実装する（Static Images）
Nuxt3には画像変換モジュールとしてNuxt/Imageがありますが、長らく静的画像の生成機能がサポートされていないため、自前で実装してみました。
Cloudflare PagesでNuxt3サイトのホスティングに失敗する
おそらく一時的なエラーかと思いますが、執筆時点、Cloudflare PagesでBuild output directory（出力先のフォルダ）の値にdistを指定してNuxt3の静的ビルド（SSG）をすると失敗します。
Nuxt3でサイトマップを生成する
Nuxt3でサイトマップが生成できるモジュール、Simple-Sitemapが公開されました。難しい設定不要で、動的ルーティング含め、ちゃんとしたsitemap.xmlが.output/publicフォルダ内に生成されます。