【ITニュース解説】placeholder="blur" on a Next.js Image Silently Does Nothing If You Forget One Thing

Next.jsは、現代のウェブアプリケーション開発において広く利用されているフレームワークだ。このフレームワークには、ウェブサイト上で画像を効率的かつ魅力的に表示するためのImageコンポーネントという便利な機能が備わっている。このコンポーネントが提供する機能の一つに、placeholder="blur"というプロパティがある。これは、画像が完全に読み込まれるまでの間、元の画像がぼやけた状態で表示されることで、ユーザーがスムーズにコンテンツを閲覧できるような体験を提供する目的がある。しかし、このplaceholder="blur"は、ある特定の状況下では期待通りに機能せず、しかもエラーが出ずに「何も起こらない」ため、開発者が問題に気づきにくいという課題がある。

この問題の根本的な原因は、Next.jsが画像を処理するタイミングと、画像の取得元にある。まず、placeholder="blur"が問題なく機能するケースから説明しよう。それは、ウェブアプリケーションのプロジェクト内に直接保存されていて、コードから静的にインポートされる画像の場合である。例えば、import heroImage from '@/public/hero.jpg';のように画像ファイルを直接インポートし、<Image src={heroImage} alt="Hero" placeholder="blur" />のように使う場合がこれに該当する。このシナリオでは、Next.jsはアプリケーションが「ビルドされる段階」、つまりウェブサイトが公開される準備が整う段階で、この画像ファイルに直接アクセスできる。ビルド時にNext.jsは、そのローカルにある画像の実際のコンテンツを読み込み、非常に小さな、ぼかし加工された画像を自動的に生成する。このぼかし画像は、Base64という形式のデータURLとしてエンコードされ、最終的なHTMLコードに組み込まれる。結果として、実際の画像ファイルがネットワーク経由で読み込まれて表示されるまでの間、この自動生成されたぼかし画像がプレースホルダーとして表示されるのだ。Next.jsが画像ファイルに直接アクセスできる「ビルド時」にこの処理が完結するため、特別な設定なしでこのぼかし効果が得られる。

しかし、多くのウェブアプリケーションでは、画像はローカルに保存されているだけでなく、外部のサービスから取得されることが一般的である。例えば、コンテンツ管理システム（CMS）、クラウドストレージサービス（Amazon S3など）、あるいはデータベースに保存された画像URLを参照する場合などだ。これらの画像をNext.jsで表示しようとする際、例えば<Image src={product.imageUrl} alt={product.name} placeholder="blur" />のようにコードを記述することがあるだろう。ここでproduct.imageUrlは、http://example.com/images/product123.jpgのような外部サーバー上の画像を示すURL文字列である。この場合、placeholder="blur"プロパティは期待通りに機能しなくなる。その理由は、Next.jsがアプリケーションをビルドする段階では、このproduct.imageUrlが指すリモート画像の実際のコンテンツにはアクセスできないためだ。ビルド時には、Next.jsにとってproduct.imageUrlは単なる文字列に過ぎず、その文字列の先にどのような画像があるのかは分からない。リモート画像のコンテンツが実際に取得できるのは、ウェブページがユーザーのブラウザで表示され、そのページが画像をネットワーク経由でリクエストする「ランタイム」、つまりアプリケーションが実行されている段階になって初めて可能になる。Next.jsはビルド時にプレースホルダーを生成できないため、placeholder="blur"プロパティが指定されていても、利用できるぼかしプレースホルダーが存在しないことになる。その結果、このプロパティは何の効果も発揮せず、画像はぼかしプレースホルダーなしで直接表示されてしまう。

この状況が開発者にとって特に厄介なのは、何らかのエラーメッセージや警告がコンソールに表示されないことだ。コードはエラーなく実行され、画像も最終的にはページに表示される。しかし、開発者が意図したはずの、画像がぼやけてから表示されるという視覚効果だけが得られないという「サイレントな不動作」が発生する。Next.jsの視点から見れば、単に必要なデータ（ぼかしプレースホルダーのデータ）が提供されていないだけであり、プログラムとして間違っているわけではないと判断されるため、特に警告も出ないのだ。

この問題を解決するには、リモート画像に対しても、placeholder="blur"が機能するために必要な「ぼかしプレースホルダーのデータ」を明示的にNext.jsに提供してやる必要がある。具体的には、blurDataURLというプロパティを使用する。このblurDataURLには、実際の画像から生成された、小さなBase64形式のぼかし画像データを設定する。例えば、以下のように記述する。

Copy
1<Image
2  src={product.imageUrl}
3  alt={product.name}
4  placeholder="blur"
5  blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRg..." // 実際のBase64データ
6/>

このblurDataURLに指定するデータは、画像の内容を正確に反映したぼかし画像である必要がある。汎用的な適当なデータでは、画像ごとに適切なぼかし効果は得られない。では、このBase64形式のぼかし画像データはどのようにして準備するのか。最も効率的で推奨されるアプローチは、画像をシステムにアップロードする際に、このぼかしプレースホルダーも同時に生成し、画像URLと一緒にデータベースなどに保存しておくことだ。こうすることで、ウェブページで画像を表示するたびに、すでに生成されたblurDataURLをすぐに利用でき、ページの読み込み時に毎回プレースホルダーを生成する手間を省くことができる。

このようなぼかしプレースホルダーの生成を助けるためのライブラリも存在する。例えば、「plaiceholder」のようなライブラリを使えば、画像のバイナリデータ（コンピュータが処理できる形式のデータ）から、本物のぼかしプレースホルダーをBase64形式で生成できる。これを一度生成して保存しておけば、何度も再利用できるため、開発の効率性も高まる。

ただし、プロジェクトによっては、画像ごとにリアルなぼかしプレースホルダーを生成し、保存するためのシステム構築や手間をかけるのが難しい場合もあるだろう。そのような場合には、より手軽な代替策として、汎用的な単色のプレースホルダーを使用する方法がある。これは、画像のコンテンツとは直接関係ないが、単一の非常に小さなSVG画像をBase64形式でblurDataURLとして指定する方法だ。例えば、以下のように記述する。

Copy
1<Image
2  src={product.imageUrl}
3  alt={product.name}
4  placeholder="blur"
5  blurDataURL="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxIiBoZWlnaHQ9IjEiPjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9IiNlNWU3ZWIiLz48L3N2Zz4="
6/>

このBase64データは、幅1ピクセル、高さ1ピクセルの灰色の四角形を描画する非常に小さなSVG画像を表している。これは実際の画像の内容をぼかしたものではないため、完璧なぼかし効果は得られないが、何も表示されないよりは、画像がスムーズにフェードインするような視覚的なトランジション（画面遷移効果）をユーザーに提供できる。これは、機能しないplaceholder="blur"の代わりに、手軽に導入できる改善策として有効だ。

もし自分のウェブサイトでこの問題が発生していないか確認したい場合は、コードベース全体でplaceholder="blur"という記述を検索してみると良い。そして、そのplaceholder="blur"が使われているImageコンポーネントのsrcプロパティが、ローカルの静的インポートを参照しているのか、それとも外部のリモートURLを参照しているのかを確認する。もしリモートURLを参照しているにもかかわらず、blurDataURLプロパティが一緒に指定されていない場合は、そのplaceholder="blur"は現在何も機能していない状態である可能性が高い。

結論として、placeholder="blur"は、ローカルに静的にインポートされた画像に対してのみ、自動的にぼかしプレースホルダーを生成して機能する。リモートから取得する画像を使用する場合には、blurDataURLプロパティを使って、実際の画像コンテンツから生成されたぼかしプレースホルダーデータを明示的に提供する必要がある。最も適切な対応は、画像をアップロードする時点でこのプレースホルダーを生成し、保存しておくことだ。もしそれが難しい場合は、汎用的な単色のプレースホルダーを使用するだけでも、視覚的な改善につながるだろう。Next.jsでより良いユーザー体験を提供するためには、このplaceholder="blur"の正確な動作原理を理解し、適切に対応することが重要である。