Webアプリの高速化に貢献！ReactJS、Webpack、ECMAScript-6で画像を効率的に扱う

2024-04-27

ReactJS、Webpack、ECMAScript-6 を用いたディレクトリからの画像の動的インポート

前提条件

このチュートリアルを始める前に、以下のものがインストールされている必要があります。

Node.js
npm
ReactJS
Webpack

ファイル構成

以下のファイル構成を使用します。

src
├── App.js
├── components
│   ├── Image.js
│   └── ImageList.js
├── images
│   ├── image1.jpg
│   └── image2.png
└── index.js

Webpack 設定ファイル webpack.config.js を作成します。このファイルでは、画像のローダーとファイルの解決方法を定義します。

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(jpg|png|gif|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[path][hash].[ext]',
              outputPath: 'images'
            }
          }
        ]
      }
    ]
  },
  resolve: {
    alias: {
      images: path.resolve(__dirname, 'src/images')
    }
  }
};

この設定では、file-loader を使用して画像をファイルとしてロードし、images ディレクトリに保存します。また、resolve オプションを使用して、images ディレクトリへのエイリアスを作成します。

画像コンポーネント

components/Image.js ファイルを作成します。このファイルでは、画像を表示する React コンポーネントを定義します。

import React from 'react';

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

export default Image;

このコンポーネントは、src プロパティを受け取り、画像の URL を渡します。

画像リストコンポーネント

import React, { useState } from 'react';
import Image from './Image';

const ImageList = () => {
  const [images, setImages] = useState([]);

  const importImages = async () => {
    const context = require.context('../images', true, /\.jpg|\.png|\.gif|\.svg$/);
    const imageFiles = context.keys();

    const imagesData = await Promise.all(
      imageFiles.map(async (imageFile) => {
        const image = await context(imageFile);
        return { src: image.default };
      })
    );

    setImages(imageData);
  };

  useEffect(() => {
    importImages();
  }, []);

  return (
    <div>
      {images.map((image) => (
        <Image key={image.src} src={image.src} />
      ))}
    </div>
  );
};

export default ImageList;

このコンポーネントは、useState フックを使用して、画像のリストを保持します。useEffect フックを使用して、importImages 関数を呼び出し、画像をインポートします。importImages 関数は、require.context API を使用して、images ディレクトリ内のすべての画像ファイルを検索します。その後、各ファイルに対して、import を使用して画像を動的にインポートし、imagesData 配列に保存します。

メインアプリケーション

src/App.js ファイルを作成します。このファイルでは、React アプリケーションのメインコンポーネントを定義します。

import React from 'react';
import ImageList from './components/ImageList';

const App = () => {
  return (
    <div className="App">
      <ImageList />
    </div>
  );
};

export default App;

このコンポーネントは、ImageList コンポーネントをレンダリングします。

ReactJS、Webpack、ECMAScript-6 を用いたディレクトリからの画像の動的インポート - サンプルコード

以下のサンプルコードは、チュートリアルで説明した内容を実装しています。

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(jpg|png|gif|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[path][hash].[ext]',
              outputPath: 'images'
            }
          }
        ]
      }
    ]
  },
  resolve: {
    alias: {
      images: path.resolve(__dirname, 'src/images')
    }
  }
};

画像コンポーネント

import React from 'react';

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

export default Image;

import React, { useState } from 'react';
import Image from './Image';

const ImageList = () => {
  const [images, setImages] = useState([]);

  const importImages = async () => {
    const context = require.context('../images', true, /\.jpg|\.png|\.gif|\.svg$/);
    const imageFiles = context.keys();

    const imagesData = await Promise.all(
      imageFiles.map(async (imageFile) => {
        const image = await context(imageFile);
        return { src: image.default };
      })
    );

    setImages(imageData);
  };

  useEffect(() => {
    importImages();
  }, []);

  return (
    <div>
      {images.map((image) => (
        <Image key={image.src} src={image.src} />
      ))}
    </div>
  );
};

export default ImageList;

メインアプリケーション

import React from 'react';
import ImageList from './components/ImageList';

const App = () => {
  return (
    <div className="App">
      <ImageList />
    </div>
  );
};

export default App;

使用方法

上記のコードを src ディレクトリに保存します。
ターミナルで、以下のコマンドを実行します。

npm install

以下のコマンドを実行して、Webpack を起動します。

npx webpack-dev-server

ブラウザで http://localhost:3000 にアクセスすると、画像が動的にインポートされた React アプリケーションが表示されます。

補足

このサンプルコードは、基本的な例です。実際のアプリケーションでは、より複雑なロジックが必要になる場合があります。
Webpack の設定は、プロジェクトのニーズに合わせて変更する必要があります。
画像の最適化については、Webpack のドキュメントを参照してください。

このサンプルコードが、ReactJS、Webpack、ECMAScript

ReactJS、Webpack、ECMAScript-6 を用いたディレクトリからの画像の動的インポート - 他の方法

import() を使用して、個々の画像ファイルを動的にインポートできます。

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

const ImageList = () => {
  const [images, setImages] = useState([]);

  useEffect(() => {
    const importImages = async () => {
      const imagePromises = [
        import('../images/image1.jpg'),
        import('../images/image2.png'),
        // ...
      ];

      const imagesData = await Promise.all(imagePromises);

      const images = imagesData.map((imageData) => ({ src: imageData.default }));
      setImages(images);
    };

    importImages();
  }, []);

  return (
    <div>
      {images.map((image) => (
        <Image key={image.src} src={image.src} />
      ))}
    </div>
  );
};

export default ImageList;

この方法の利点は、個々の画像ファイルのパスを明示的に指定できることです。ただし、多くの画像ファイルをインポートする場合は、コードが冗長になる可能性があります。

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

const ImageList = () => {
  const [images, setImages] = useState([]);

  useEffect(() => {
    const importImages = async () => {
      const imagesData = await Promise.all([
        dynamic(() => import('../images/image1.jpg')),
        dynamic(() => import('../images/image2.png')),
        // ...
      ]);

      const images = imagesData.map((imageData) => ({ src: imageData.default }));
      setImages(images);
    };

    importImages();
  }, []);

  return (
    <div>
      {images.map((image) => (
        <Image key={image.src} src={image.src} />
      ))}
    </div>
  );
};

export default ImageList;

この方法の利点は、コード分割を使用して、個々の画像ファイルのロードを遅らせることができることです。ただし、dynamic import() は、古いブラウザではサポートされていないことに注意する必要があります。

カスタムフックを使用して、画像のインポートロジックをカプセル化できます。

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

const useImportImages = () => {
  const [images, setImages] = useState([]);

  useEffect(() => {
    const importImages = async () => {
      const imagePromises = [
        import('../images/image1.jpg'),
        import('../images/image2.png'),
        // ...
      ];

      const imagesData = await Promise.all(imagePromises);

      const images = imagesData.map((imageData) => ({ src: imageData.default }));
      setImages(images);
    };

    importImages();
  }, []);

  return images;
};

const ImageList = () => {
  const images = useImportImages();

  return (
    <div>
      {images.map((image) => (
        <Image key={image.src} src={image.src} />
      ))}
    </div>
  );
};

export default ImageList;