Reactでサクッと画像表示！publicフォルダとsrcフォルダの違いと使い分けを図解

2024-05-23

ReactJS での画像資産の保存場所: public フォルダ vs src フォルダ

ReactJS で画像ファイルを扱う際、public フォルダ と src フォルダ のどちらに保存するのが適切か迷うことがあります。それぞれのメリットとデメリットを理解し、状況に応じて最適な保存場所を選択することが重要です。

public フォルダ

メリット

静的ファイル (画像、CSS、JavaScript など) を直接参照できるため、開発が簡単
デプロイ時に自動的にコピーされるため、設定不要
キャッシュ有効期限を設定できるため、パフォーマンス向上に役立つ

バージョン管理が難しい
ソースコードと混同しやすい
セキュリティ上のリスクがある

src フォルダ

ソースコードと明確に区別できる
Webpack などを使用してビルド時に処理できるため、最適化が可能

開発時に直接参照できないため、設定が必要
デプロイ時に手動でコピーする必要がある場合がある
パフォーマンスが低下する場合がある

一般的に、以下の状況に応じて保存場所を選択することをおすすめします。

頻繁に変更しない画像: public フォルダ
バージョン管理が必要な画像: src フォルダ

補足

上記は一般的なガイドラインであり、状況によって最適な選択は異なる場合があります。
複雑なプロジェクトでは、より詳細な設定が必要になる場合があります。
最新の情報については、ReactJS の公式ドキュメントを参照してください。

上記以外にも、画像を保存する方法はいくつかあります。例えば、CDN (Content Delivery Network) を利用したり、ベース64 エンコードしてソースコードに埋め込んだりするなどがあります。

注意事項

上記の情報は、あくまでも参考情報であり、専門的な知識や経験を保証するものではありません。
具体的な実装方法やトラブルシューティングについては、専門家に相談することをおすすめします。

サンプルコード: ReactJS で画像ファイルを扱う

import React from 'react';

const MyComponent = () => {
  return (
    <img src="/public/image.jpg" alt="Image description" />
  );
};

export default MyComponent;

import React from 'react';
import { useStaticAsset } from 'react-use-static-asset';

const MyComponent = () => {
  const image = useStaticAsset('/src/images/image.jpg');

  return (
    <img src={image} alt="Image description" />
  );
};

export default MyComponent;

説明

import React from 'react'; で React をインポートします。
const MyComponent = () => { でコンポーネントを定義します。
<img src="/public/image.jpg" alt="Image description" /> で画像要素をレンダリングします。
/public/image.jpg は、public フォルダにある image.jpg ファイルへのパスです。
alt="Image description" は、画像が表示されない場合に表示される代替テキストです。
}; でコンポーネントを終了します。
export default MyComponent; でコンポーネントをデフォルトエクスポートします。

import { useStaticAsset } from 'react-use-static-asset'; で useStaticAsset フックをインポートします。
const image = useStaticAsset('/src/images/image.jpg'); で useStaticAsset フックを使用して、画像ファイルのパスを取得します。
{image} は、useStaticAsset フックによって取得された画像ファイルのパスです。

上記はあくまでサンプルコードであり、実際のプロジェクトでは状況に応じて変更する必要があります。
useStaticAsset フックは、react-use-static-asset パッケージを使用する必要があります。
画像ファイルのパスは、プロジェクトの構造に応じて変更する必要があります。

ReactJS で画像ファイルを扱うその他の方法

CDN は、世界中にサーバーを配置し、画像などの静的ファイルを高速かつ効率的に配信するサービスです。ReactJS で CDN を利用すると、以下のメリットがあります。

パフォーマンス向上: CDN は、ユーザーに近いサーバーから画像を配信するため、読み込み速度が向上します。
スケーラビリティ: CDN は、トラフィックの増加に対応できるよう、自動的にスケーリングできます。
コスト削減: CDN は、帯域幅のコストを削減できます。

CDN を利用するには、以下の手順が必要です。

CDN プロバイダーを選択する (例: CloudFlare, Amazon CloudFront)
CDN アカウントを作成する
画像ファイルを CDN にアップロードする
CDN ドメイン名を取得する
ReactJS アプリケーションで CDN ドメイン名を使用する

例

import React from 'react';

const MyComponent = () => {
  return (
    <img src="https://cdn.example.com/image.jpg" alt="Image description" />
  );
};

export default MyComponent;

Base64 エンコードしてソースコードに埋め込む

小さな画像の場合は、Base64 エンコードしてソースコードに埋め込む方法もあります。この方法のメリットは、CDN を利用する必要がないことです。デメリットは、ファイルサイズが大きくなることと、コードが読みづらくなることです。

import React from 'react';

const imageData = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C9AAAAASUVORK5CYII=';

const MyComponent = () => {
  return (
    <img src={imageData} alt="Image description" />
  );
};

export default MyComponent;