はじめに (対象読者・この記事でわかること)

この記事は、Reactを使ったWeb開発をしている方で、imgタグのsrc属性に動的なパスを設定したいと考えている方を対象にしています。この記事を読むことで、Reactコンポーネント内でimgタグのsrc属性にテキストと変数を連結する方法を理解できます。具体的には、テンプレートリテラルを使った方法や、動的に画像パスを生成するベストプラクティスを学べます。また、相対パスと絶対パスの扱い方や、画像が表示されない場合のトラブルシューティング方法も解説します。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 - JavaScriptの基本的な知識 - Reactの基本的なコンポーネント構文 - JSXの基本的な理解

Reactで画像を扱う基本

Reactで画像を扱う際、基本的にはimgタグのsrc属性に画像のパスを指定します。静的な画像であれば、以下のように直接パスを記述できます。

Jsx

function StaticImage() {
  return <img src="/images/sample.jpg" alt="サンプル画像" />;
}

しかし、動的な画像を表示したい場合、変数を使って画像パスを生成する必要があります。この記事では、その方法を詳しく解説します。

テキストと変数を連結する方法

Reactでimgタグのsrc属性にテキストと変数を連結するには、主に2つの方法があります。1つはテンプレートリテラルを使用する方法、もう1つは文字列の連結演算子を使用する方法です。

テンプレートリテラルを使用する方法

テンプレートリテラルはES6で導入された機能で、バッククック（`）で囲んだ文字列内に変数を埋め込むことができます。これが最も現代的で推奨される方法です。

Jsx

function DynamicImage() {
  const imageName = "sample";
  const imageFormat = "jpg";

  return (
    <img 
      src={`/images/${imageName}.${imageFormat}`} 
      alt="サンプル画像" 
    />
  );
}

この方法では、${変数名}という構文を使って変数を文字列に埋め込みます。可読性が高く、複数の変数を連結する場合にも便利です。

文字列の連結演算子を使用する方法

従来のJavaScriptの方法として、プラス（+）演算子を使って文字列を連結することもできます。

Jsx

function DynamicImage() {
  const imageName = "sample";
  const imageFormat = "jpg";

  return (
    <img 
      src={"/images/" + imageName + "." + imageFormat} 
      alt="サンプル画像" 
    />
  );
}

この方法も機能的には問題ありませんが、変数が増えるとコードが読みにくくなる傾向があります。

実践的な例：動的な画像表示

より実践的な例として、APIから取得したデータに基づいて動的に画像を表示するケースを見てみましょう。

Jsx

import React, { useState, useEffect } from 'react';

function UserProfile() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // ユーザーデータを取得するAPI呼び出し（例）
    fetch('/api/user/123')
      .then(response => response.json())
      .then(data => setUser(data));
  }, []);

  if (!user) {
    return <div>読み込み中...</div>;
  }

  return (
    <div>
      <h1>{user.name}のプロフィール</h1>
      <img 
        src={`/images/avatars/${user.avatarId}.png`} 
        alt={user.name} 
        style={{ width: '150px', borderRadius: '50%' }}
      />
      <p>{user.bio}</p>
    </div>
  );
}

この例では、ユーザーのIDに基づいてアバター画像を動的に表示しています。user.avatarIdはAPIから取得したデータに含まれる値です。

パスの扱い方：相対パスと絶対パス

Reactで画像パスを扱う際、相対パスと絶対パスの違いを理解しておく重要です。

相対パス

相対パスは、現在のファイルからの相対的な位置を示します。

Jsx

<img src="../images/sample.jpg" alt="サンプル画像" />

相対パスは、アプリケーションの構成が変更されると壊れやすいため、特に大規模なプロジェクトでは避けるべきです。

絶対パス

絶対パスは、アプリケーションのルートからのパスを示します。

Jsx

<img src="/images/sample.jpg" alt="サンプル画像" />

Reactアプリケーションでは、通常パブリックフォルダ（publicフォルダ）に画像を配置し、絶対パスで参照します。これにより、アプリケーションの構成が変更されてもパスが壊れにくくなります。

ハマった点やエラー解決

Reactで動的に画像を扱う際によく遭遇する問題とその解決方法を紹介します。

画像が表示されない

画像が表示されない場合、考えられる原因はいくつかあります。

  1. パスの誤り 確認ポイント： - パスの先頭にスラッシュ（/）があるか - ファイル名や拡張子にタイプミップがないか - 大文字小文字の区別を確認（特にLinux/Mac環境）

  2. 画像ファイルの存在確認 確認ポイント： - publicフォルダ内に画像ファイルが存在するか - ファイル名にスペースや特殊文字がないか

  3. CORS（クロスオリジンリソースシェアリング）の問題 外部ドメインの画像を使用する場合、CORSポリシーによってブロックされることがあります。

解決策：

Jsx

// 外部ドメインの画像を使用する場合
<img 
  src="https://example.com/images/sample.jpg" 
  alt="サンプル画像"
  crossOrigin="anonymous" 
/>

Webpackでの画像扱い

Create React Appなどのツールを使用している場合、Webpackが画像を扱う方法によっては問題が発生することがあります。

解決策： 1. publicフォルダに画像を配置し、絶対パスで参照する 2. import文を使って画像をインポートし、変数として扱う

Jsx

import sampleImage from '../images/sample.jpg';

function MyComponent() {
  return <img src={sampleImage} alt="サンプル画像" />;
}

ベストプラクティス

Reactで動的に画像を扱う際のベストプラクティスをいくつか紹介します。

1. publicフォルダの活用

静的な画像はpublicフォルダに配置し、絶対パスで参照することを推奨します。これにより、ビルドプロセスが簡素化され、パスの問題を回避できます。

2. 環境変数の使用

環境によって異なる画像パスを使用する必要がある場合、環境変数を活用すると便利です。

Jsx

const imageUrl = process.env.REACT_APP_IMAGE_BASE_URL + `/${imageName}.jpg`;

function MyComponent() {
  return <img src={imageUrl} alt="サンプル画像" />;
}

3. 画像の遅延読み込み

大量の画像を表示する場合、遅延読み込み（Lazy Loading）を実装するとパフォーマンスが向上します。

Jsx

function MyComponent() {
  const [imageLoaded, setImageLoaded] = useState(false);

  return (
    <div>
      {!imageLoaded && <div>画像読み込み中...</div>}
      <img 
        src={`/images/sample.jpg`} 
        alt="サンプル画像"
        onLoad={() => setImageLoaded(true)}
        style={{ display: imageLoaded ? 'block' : 'none' }}
      />
    </div>
  );
}

まとめ

本記事では、Reactでimgタグのsrc属性にテキストと変数を連結する方法について解説しました。

  • テンプレートリテラルを使う方法が最も現代的で推奨される
  • 絶対パスを使用することでパスの問題を回避できる
  • 画像が表示されない場合はパスの確認やCORSの問題を考慮する
  • publicフォルダに画像を配置し、環境変数を活用するベストプラクティスがある

この記事を通して、Reactアプリケーションで動的に画像を扱うための基本的な知識と実践的なテクニックを学ぶことができたと思います。今後は、画像の最適化や遅延読み込みの高度なテクニックについても記事にする予定です。

参考資料