【React】画像をギャラリー表示させてみる...!

2022年10月31日 2024年1月20日

どーもたかぽんです！

今回はReactを用いて画像をギャラリー形式で表示できるライブラリを使ってみようと思います...!

社会人三年目ということもあり、自分の自己紹介ができるポートフォリオサイトの作成を画策しているのですが、そこで使えるんではなかろうか？ということで試してみます...!

1 やりたいこと
2 react-image-galleryについて
3 react-image-galleryを導入してみる...!
4 できなさそうなこと
5 まとめ

やりたいこと

さて、今回筆者がやりたいなぁ〜と思ったのは...

画像をギャラリーで表示したかったんですね。

筆者の趣味の一つにカメラで風景を撮影しに行く...というものがあるんですが、せっかく撮った写真で自分がいいな！と思った写真は共有したい...！

あわよくば、その写真をもとにこれどこで撮った写真なんですか？みたいな感じで自己紹介のコミュニケーションにも使えればいいなぁ〜と。

なので、それを標示するためにいい感じの見せ方がないかなぁ？と探していいてよさそうなライブラリがあったので、軽く試してみようと思います。

react-image-galleryについて

さて、では今回は"react-image-gallery"というライブラリを試してみます...!

使用方法はめちゃくちゃ簡単でした...!

というか、紹介ページが優秀すぎて...

React carousel image gallery component with thumbnail and mobile support

基本は上記の記事を見れば全て書いてあります...!

では、実際に使ってみる前にざっくりどんな挙動になるのか確認を...

イメージとしては上記動画のように、定期的に自動でスライドし、自分で下部のサムネイルを選択すれば自由に選択できるようにもなっています。

また、めちゃくちゃ高頻度ではありませんが、2022/9/26に改修がされている点も個人的には良き！と思います。

では、早速使ってみようと思います...!

基本的には先程貼ったページの内容をそのまま試してちょっとオプションいじってみただけですが...w

react-image-galleryを導入してみる...!

ではやっていきます...!

まず最初にnpm installでライブラリのインストールを。

npm install react-image-gallery

上記でreact-image-galleryのインストールを行います。

taka@Taka laravel % npm install react-image-gallery

added 1 package, and audited 130 packages in 2s

11 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

addedになっていればOKです...!

インストールが完了したら、ライブラリで使用するコンポーネントのためのcssをimportします。

筆者の場合、ルーティングの大元の部分で前ルート先で読み込まれるようにしました。

あるページでしか使わない...!という場合はそのページで後述するパッケージと併せてimportの方がいい気も...

import "react-image-gallery/styles/css/image-gallery.css";

cssをimportしたら、今度は実際に表示をするファイルにて、併せて以下をimportします。

import ImageGallery from 'react-image-gallery';

これで使う準備は万端です...!

あとはコードを書いてあげればいいのですが、ざっくりと先ほどのに似た形のプログラムを以下に記載します。（画像は筆者の撮ったものではなく、公式の記事のリンクのものに置き換えています）

import React from "react";
import ImageGallery from "react-image-gallery";

const images = [
  {
    original: 'https://picsum.photos/id/1018/1000/600/',
    thumbnail: 'https://picsum.photos/id/1018/250/150/',
  },
  {
    original: 'https://picsum.photos/id/1015/1000/600/',
    thumbnail: 'https://picsum.photos/id/1015/250/150/',
  },
  {
    original: 'https://picsum.photos/id/1019/1000/600/',
    thumbnail: 'https://picsum.photos/id/1019/250/150/',
  },
];

const Portfolio = () => (
    <div>
        <ImageGallery
            items={images}
            showNav={false}
            autoPlay={true}
            showFullscreenButton={false}
            useBrowserFullscreen={false}
            showPlayButton={false}
        />
    </div>
);

export default Portfolio;

簡単に説明しておくと、ライブラリをimportしたことによって、ImageGalleryコンポーネントをつかえるので、引数としてitemsに以下の形式のデータを渡せばそれだけでそれっぽい感じに表示されます...!

images = [
  {
    original: 'https://picsum.photos/id/1018/1000/600/',
    thumbnail: 'https://picsum.photos/id/1018/250/150/',
  },
  {
    original: 'https://picsum.photos/id/1015/1000/600/',
    thumbnail: 'https://picsum.photos/id/1015/250/150/',
  },
  {
    original: 'https://picsum.photos/id/1019/1000/600/',
    thumbnail: 'https://picsum.photos/id/1019/250/150/',
  },
];

オプションとして、このimagesに渡すデータ一つを見ると、originalがオリジナル画像、thumbnailに画面下部に表示されるサムネイルの画像を置いたり...

他にも以下のPropsにある"images"に使えるオプションが記載されています。

Propの一覧

そして、ImageGalleryコンポーネントに渡すオプションもあり、先ほどのPropの一覧のitems以降のものがそれに該当します。

showNav（左右のナビゲーションの表示有無）や、autoPlay(自動で次画像へ移動させるか)といったオプションがあるので、あとはお好みにしてあげればOKです...!