ブログ
Web 制作・システム開発に関する記事を公開しています。
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で環境変数を設定する
Vercelの環境変数はSettings→Environment Variablesから設定します。Production/Preview/Developmentの使い分け、vercel env pullでのローカル同期、「設定したのにundefined」の定番原因（再デプロイ忘れ）を整理しました。
NodemailerでBase64の画像を添付する
NodemailderでBase64エンコードされた画像を送る場合、pathに文字列をそのまま指定するだけで添付できます。前半のメタ部分data:image/jpeg;base64を正規表現で削除する必要も、エンコード形式にbase64を指定する必要もありません。
Nodemailerの使い方
Node.jsの定番メール送信ライブラリNodemailerの設定から送信までを、現行のv8で確認したコードで解説します。TypeScriptでは型定義@types/nodemailerを別途インストールします。
Netlify Functionsを使った問い合わせフォームの作り方
Netlifyには簡単に問い合わせフォームを導入できる機能がありますが、便利に導入できる反面、カスタマイズ性が乏しい、無料プランは月に10MBしかファイルを添付できない、自動返信メール機能がない、などの無視できない制約があります。しかし、Netlify Functionsの機能を使うことで、上記のデメリットがない使い勝手の良い問い合わせフォームを作ることができます。
busboyのデータ解析がタイムアウトで失敗する
Netlify Functionsのイベントで、postされたデータを解析（パース）するためにbusboyを使ったのですが、開発環境時netlify devは上手くいくのに、本番環境時netlify build && netlify deployでは、処理が時間内に終わらずにタイムアウトするエラーが発生しました。
Netlify Functionsをローカル環境で使うには
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のユーザー名とパスワードを忘れたときの確認・変更方法
パスワードを忘れたらまずログイン画面から再発行。ユーザー名やメールアドレスごとわからない場合は、phpMyAdminでwp_usersを確認・変更します。WordPress 6.8（bcrypt移行後）でもMD5指定での変更は有効です。
CSSの最適化アプローチ。インライン化、圧縮、そして削除
CSSの圧縮・不要CSSの削除・インライン化は、2026年現在ほぼすべてビルドツールとフレームワークの仕事になりました。Bootstrap 5.3.8で実測した圧縮効果（gzip後の差は約9%）と合わせて、現状を整理します。
Webページの表示速度はどうすれば上がるのか
Webページを高速化する方法はいくつもありますが、基本的には、スペックの良いWebサーバーにを使う、画像を遅延読み込みする、重いファイルの読み込みを最適化する、ページの構成を見直す、の4点に集約されます。それぞれどのように最適化すればいいのかシェアします。