カテゴリー
Web開発者向け
Web開発者向けに関する記事を公開しています。
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フレームワークで静的サイトを構築して得た気づきをご紹介します。
JavaScriptを最適化してページ表示を高速化する
JavaScriptの主な最適化アプローチは、「圧縮」「ファイルのバンドル」「軽量ライブラリの使用」です。ライブラリを使う場合は「読み込む順番」にも気をつけなければいけません。ファイルサイズが大きくなりがちなので、上手く最適化しましょう。
CSS最適化はどこまで自動化されたか — 圧縮・不要CSS削除・インライン化の現在地
2026年現在、CSSの圧縮・不要CSSの削除・インライン化はどこまでビルドツール任せにできるのか。Bootstrap 5.3.8で実測した圧縮効果(gzip後の差は約9%)をもとに、手を動かす価値が残っている部分と、もう自動化されている部分を切り分けます。