ReactJS 画像管理

ReactJSにおけるpublicフォルダの画像使用

ReactJSでは、画像ファイルは通常、プロジェクトルートのpublicフォルダに配置されます。これは、画像ファイルがビルドプロセスによってコピーされ、最終的な出力ファイルに含まれるためです。

画像の配置

• publicフォルダ内に画像ファイルを配置します。

  public/
    images/
      image1.jpg
      image2.png
  

画像のインポートと使用

• インポートした画像をJSXで使用できます。

  <img src={image1} alt="Image 1" />
  <img src={image2} alt="Image 2" />
  

• 画像をインポートするには、ファイルの相対パスを使用します。

  import image1 from './images/image1.jpg';
  import image2 from './images/image2.png';
  

ビルドプロセス

• これにより、ブラウザが画像を適切に読み込むことができます。
• Reactプロジェクトをビルドすると、publicフォルダ内の画像ファイルが最終的な出力ファイルにコピーされます。

注意

• srcフォルダは、JavaScriptコードのソースコードを配置する場所です。画像ファイルはここに配置しないようにしてください。
• 画像ファイル以外の静的なアセット（CSS、HTMLなど）も配置できます。
• publicフォルダは、ビルドプロセスによって静的なアセットを配信するための場所です。

例

import React from 'react';

function App() {
  return (
    <div>
      <h1>Welcome to React!</h1>
      <img src="./images/image1.jpg" alt="Image 1" />
    </div>
  );
}

export default App;

ReactJSにおける画像管理のコード例

import React from 'react';
import image1 from './images/image1.jpg';

function App() {
  return (
    <div>
      <h1>Welcome to React!</h1>
      <img src={image1} alt="Image 1" />
    </div>
  );
}

export default App;

• 画像の表示
  <img src={image1} alt="Image 1" />
  • JSX要素のsrc属性にインポートした画像の変数を指定して、画像を表示します。
  • alt属性は、画像が読み込めなかった場合に表示される代替テキストを設定します。
• 画像のインポート
  import image1 from './images/image1.jpg';
  • image1という変数に、./images/image1.jpgという画像ファイルをインポートします。

画像の条件付き表示

import React, { useState } from 'react';
import image1 from './images/image1.jpg';

function App() {
  const [showImage, setShowImage] = useState(false);

  const handleButtonClick = () => {
    setShowImage(!showImage);
  };

  return (
    <div>
      <h1>Welcome to React!</h1>
      <button onClick={handleButtonClick}>Show/Hide Image</button>
      {showImage && <img src={image1} alt="Image 1" />}
    </div>
  );
}

export default App;

• 条件付き表示
  {showImage && <img src={image1} alt="Image 1" />}
  • showImageがtrueの場合のみ、画像を表示します。
• ボタンクリック時の処理
  const handleButtonClick = () => { setShowImage(!showImage); };
  • ボタンがクリックされたときに、showImageの状態を反転させます。
• 状態管理
  const [showImage, setShowImage] = useState(false);
  • showImageという状態変数を定義し、初期値をfalseに設定します。

画像の遅延読み込み

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

function LazyImage({ src }) {
  const imgRef = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        imgRef.current.src = src;
        observer.disconnect();
      }
    });

    observer.observe(imgRef.current);
  }, [src]);

  return <img ref={imgRef} alt="Lazy Image" />;
}

function App() {
  return (
    <div>
      <h1>Welcome to React!</h1>
      <LazyImage src="./images/image1.jpg" />
    </div>
  );
}

export default App;

• 遅延読み込み
  画像がビューポートに入るまで、src属性を設定しないことで、画像の読み込みを遅延させます。
• Intersection Observer
  useEffectフックを使用して、画像要素がビューポートに入ったときに画像を読み込むためのIntersection Observerを設定します。
• 参照の取得
  const imgRef = useRef(null);
  • imgRefという参照変数を定義し、画像要素への参照を保持します。

CSSのbackground-imageプロパティ:

• CSSのbackground-imageプロパティを使用して、画像を要素の背景に設定できます。

.image-container {
  background-image: url('./images/image1.jpg');
  background-size: cover;
  background-position: center;
}

• この方法を使用すると、画像を直接HTML要素に設定する代わりに、CSSスタイルとして定義できます。

画像のインラインスタイル:

• JSX要素のスタイル属性を使用して、画像をインラインでスタイル設定できます。

<img src="./images/image1.jpg" alt="Image 1" style={{ width: '200px', height: '200px' }} />

• この方法を使用すると、画像のスタイルを直接JSX要素に設定できます。

画像のプレースホルダー:

• 画像が読み込まれるまでの間に、プレースホルダーを表示することができます。

<img src="./images/image1.jpg" alt="Image 1" onError={(e) => { e.target.src = './images/placeholder.png'; }} />

• この方法を使用すると、画像が読み込めなかった場合に、プレースホルダー画像を表示できます。

画像のキャッシュ:

• ブラウザのキャッシュを利用して、画像の読み込みを高速化することができます。

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

function App() {
  const [imageSrc, setImageSrc] = useState('./images/image1.jpg');

  useEffect(() => {
    const cachedImage = localStorage.getItem('cachedImage');
    if (cachedImage) {
      setImageSrc(cachedImage);
    } else {
      // 画像を読み込んでキャッシュ
      fetch('./images/image1.jpg')
        .then((response) => response.blob())
        .then((blob) => {
          const imageUrl = URL.createObjectURL(blob);
          setImageSrc(imageUrl);
          localStorage.setItem('cachedImage', imageUrl);
        });
    }
  }, []);

  return <img src={imageSrc} alt="Image 1" />;
}

export default App;

• この方法を使用すると、画像を一度読み込んでキャッシュすることで、次回の読み込みを高速化できます。