カテゴリー
Web開発者向け
Web開発者向けに関する記事を公開しています。
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フォルダ内に生成されます。
Nuxt3のApolloモジュールでBasic認証を使うには
Nuxt ApolloでBasic認証を使うにはPluginsフォルダ内にauth.tsファイルを作り、以下のコードを記述します。
Nuxt3で静的サイトを正常にプレビューするには
Nuxt3で静的サイトを構築し、いざ確認！と、nuxi prevewコマンドを叩くと、開発時（nuxi devコマンド実行時）には問題のなかったサイトが、何故か正常に表示されない現象に悩まされていました。
Next.jsのnext exportで生成された動的ページをLaravelで表示する
Next.jsのnext exportコマンドは通常、getStaticPropsとgetStaticPathsの返り値を設定し、静的ページ（例：slug.html）を生成しますが、この際、返り値を空にして、クライアントサイドの値で内容が変化するような静的ページ（例：[slug].html）を生成することもできます。
Headless CMSとしてのWordPress
Headless CMSとしてのWordPressの強みは2026年も有効です。一方で私はこのブログをWordPressからAstroベースの構成に移行しました。ヘッドレス化する・しない・WordPressから出る、それぞれの判断軸を実体験から整理します。
Gatsby.jsで動的にページを生成する
React製フレームワークのGatsby.jsで動的にページを生成する方法は、gatsby-node.jsファイルを使う方法と、src/pagesディレクトリ内のファイル名で設定する方法の2種類あります。バージョン2以降の主流は後者の方法で、ほとんどの場合でgatsby-node.jsファイルを扱う必要はありません。
WPGraphQLを認証ユーザーのみ使えるようにする
WordPressでWPGraphQLを使う場合、デフォルトでは誰でもアクセスおよびクエリの実行が可能ですが、WPGraphQL JWT Authenticationのプラグインを同時にインストールすることで、未承認のユーザーにはエラーが返却され、承認済みのユーザーのみデータ取得できるようになります。
WordPressサイトで外部からのアクセスを拒否するには
WordPressを完全にHeadLess CMSとして使いたい場合など、管理者やログインユーザーなどの一部のユーザーにだけアクセスを許可し、それ以外のユーザーからのアクセスを拒否するニーズがあるかと思います。デフォルトでは、REST API含め、誰でも自由にコンテンツを閲覧できるからです。
Node.jsの環境変数とは？プライベートリポジトリで使う必要はあるのか？
Next.jsやNuxt.jsなど、Node.jsで構築されるサイトにおいて、ローカル環境と本番環境（またはそれ以上の環境）とで同じ変数を利用しながら違う値を参照する方法に環境変数があります。公開したくない値（トークンやパスワード）を変数で管理する場合などに使います。
Netlifyで環境変数を設定する
Nuxt.jsの環境変数やNext.jsの環境変数をNetlifyで使うには、管理画面で定義した変数名と値をセットで設定します。基本的に.env系のファイルは.gitignoreで管理対象外になっているため、ここで設定しなければundefinedになって参照することができません。
Next.jsで環境変数を使うには
Next.jsで環境変数を使うには、ルートフォルダに.env.localファイルを作成します。next.config.jsへの記述などは不要です。process.env.変数名で、どのファイルからも参照できます。
Nuxt.jsで環境変数を使うには
Nuxt.jsで環境変数を使うには、ルートフォルダに.envファイルを作成します。外部モジュールのインストールやnuxt.config.jsへの記述は不要でデフォルトで利用できるようになっています。process.env.変数名で、どのファイルからも参照できます。
Vercelで環境変数を設定する — Production/Preview/Developmentの使い分けと「undefinedになる」原因
Vercelの環境変数はSettings→Environment Variablesから設定します。Production/Preview/Developmentの使い分け、vercel env pullでのローカル同期、「設定したのにundefined」の定番原因（再デプロイ忘れ）を整理しました。
NodemailerでBase64の画像を添付する
NodemailderでBase64エンコードされた画像を送る場合、pathに文字列をそのまま指定するだけで添付できます。前半のメタ部分data:image/jpeg;base64を正規表現で削除する必要も、エンコード形式にbase64を指定する必要もありません。
Nodemailer の使い方と TypeScript の型定義（v9 対応）
Node.js でメールを送る定番の Nodemailer を、2026 年 8 月時点の最新 v9 で動かし直して整理しました。型は今も本体に同梱されておらず @types/nodemailer を入れますが、createTransport のオーバーロードが 7 本あるため設定は SMTPTransport.Options で注釈しないとエラーの場所が分かりません。ローカルの SMTP サーバーに送って確かめると、存在しない宛先でも sendMail は 250 OK で成功扱いになり、認証失敗だけが EAUTH の例外になります。v8 / v9 の破壊的変更も含めて、TypeScript で使うときに要る型と「成功」の読み方をまとめます。
Netlify Functionsを使った問い合わせフォームの作り方
Netlifyには簡単に問い合わせフォームを導入できる機能がありますが、便利に導入できる反面、カスタマイズ性が乏しい、無料プランは月に10MBしかファイルを添付できない、自動返信メール機能がない、などの無視できない制約があります。しかし、Netlify Functionsの機能を使うことで、上記のデメリットがない使い勝手の良い問い合わせフォームを作ることができます。