ブログ
Web 制作・システム開発に関する記事を公開しています。
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の機能を使うことで、上記のデメリットがない使い勝手の良い問い合わせフォームを作ることができます。
busboyのデータ解析がタイムアウトで失敗する
Netlify Functionsのイベントで、postされたデータを解析（パース）するためにbusboyを使ったのですが、開発環境時netlify devは上手くいくのに、本番環境時netlify build && netlify deployでは、処理が時間内に終わらずにタイムアウトするエラーが発生しました。
Netlify Functionsをローカルで動かす — netlify devで確認してからデプロイする
Netlifyでデプロイ（公開）しているサイトには、レンタルサーバーのようなサーバー機能がないため（サーバーレス）、サーバーサイドの処理をするためにNetlify Functionsの機能が提供されています。代表例が「問い合わせフォーム」で、クライアントサイドからpostされたデータを受け取って何らかの処理をする時に、このNetlify Functionsを使います。
busboyでパースした画像が開けない時の対応
Netlify Functionsを使った問い合わせフォームを作る時に、multipart/form-data形式でpost送信されたデータをパースするためにbusboyを使ったのですが、画像のパースが上手くいかず、開けない画像として扱われてしまいました。結局、クライアント側でpost送信する前に、画像をbase64にエンコードすることで対応できたので、参考までに。
VercelとNetlifyの選定基準
Next.jsやNuxt.jsで構築したWebサイトやWebアプリを公開する時、VercelとNetlify、無料プランならどちらを選ぶべきか、判断基準をまとめました。
Gatsby.jsとNext.jsとNuxt.jsを比較する
ReactフレームワークのGatsby.jsとNext.js、VueフレームワークのNuxt.js、これらの主要なJSフレームワークで静的サイトを構築して得た気づきをご紹介します。
All-in-One WP Migrationでインポートに失敗する
WordPressのサイト移行にはWordPressプラグイン「All-in-One WP Migration」を使うのが1番簡単で確実ですが、移行に失敗するケースもあります。移行失敗のほとんどの原因は【インポートサイズ上限よりもファイルサイズが大きい】ことですが、この問題を回避する方法がいくつかあります。
WordPressサイトのローカル⇄本番の移行
WordPressサイトの【ローカル環境から本番環境への移行】または【本番環境からローカル環境への移行】はWordPressプラグイン「All-in-One WP Migration」を使えば、難しいデータベースの操作不要で、誰でも簡単に実行できます。
JavaScriptを最適化してページ表示を高速化する
JavaScriptの主な最適化アプローチは、「圧縮」「ファイルのバンドル」「軽量ライブラリの使用」です。ライブラリを使う場合は「読み込む順番」にも気をつけなければいけません。ファイルサイズが大きくなりがちなので、上手く最適化しましょう。
WordPressのphpMyAdminのログイン情報を調べる
phpMyAdminへのログイン情報は、WordPressのコアフォルダの1番上にある「wp-config.php」に記述されています。ユーザー名はdefine( 'DB_USER', 'root' );のrootの部分、パスワードはdefine( 'DB_PASSWORD', 'pass' );のpassの部分になります。
WordPressのユーザー名とパスワードを忘れたときの確認・変更方法
WordPressのパスワードを変えたい・忘れたときの手順を3つに分けて書きました。ログインできるなら管理画面の「プロフィール」→「新しいパスワードを設定」、ログインできないならログイン画面の「パスワードをお忘れですか ?」から再発行、メールも届かずユーザー名も分からないならphpMyAdminでwp_usersを確認・変更します。WordPress 6.8（bcrypt移行後）でもMD5指定での変更は有効です。ユーザー名は管理画面から変更できない点も補足しています。
CSS最適化はどこまで自動化されたか — 圧縮・不要CSS削除・インライン化の現在地
2026年現在、CSSの圧縮・不要CSSの削除・インライン化はどこまでビルドツール任せにできるのか。Bootstrap 5.3.8で実測した圧縮効果（gzip後の差は約9%）をもとに、手を動かす価値が残っている部分と、もう自動化されている部分を切り分けます。
Webページの表示速度はどうすれば上がるのか
Webページを高速化する方法はいくつもありますが、基本的には、スペックの良いWebサーバーにを使う、画像を遅延読み込みする、重いファイルの読み込みを最適化する、ページの構成を見直す、の4点に集約されます。それぞれどのように最適化すればいいのかシェアします。
WordPressの管理者メールアドレスを変更する — 管理画面が使えないときはデータベースから
WordPressの管理者メールアドレスは通常、WordPressサイトの管理画面から変更しますが、データベースからも変更可能です。テスト環境から本番環境へ移行する時や、WordPressの管理画面にログインせずにメールアドレスを変更したい場合などに便利な方法です。