Gatsby.js スタティックサイトのチュートリアル Part 3

Gatsby.jsでMDXを使用したブログサイトを作成するチュートリアルのPart3です。今回はプラグインの使い方を確認します。Gatsby Image plugin を使用してホームページに画像を追加します。

プラグインをインストール

プラグインを使用する流れは下記のようになります。

npmでプラグインをインストール
gatsby-config.jsファイルでプラグインを設定する
必要に応じてサイトにプラグインを適用する

それでは gatsby-plugin-image を使用して静的イメージをホームページに追加してみましょう。このプラグインを使用するとハイパフォーマンスを保ったまま、レスポンシブイメージを追加できます。今回はローカルの画像ファイルを使用します。

CLIで下記コマンドを実行し、プラグインとともに依存関係にあるプログラムもインストールします。

npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-source-filesystem

いくつか脆弱性に対する警告がでるので下記コマンドで更新できるプログラムは最新版に更新しておきましょう。

npm audit fix

プラグインの設定

ルートフォルダにあるgatsby-config.jsファイルを下記のように変更します。プラグインの設定には関係ありませんが、メタデータも記載できるので今のところtitleだけ記載しておきましょう。

gatsby-config.js

module.exports = {
  siteMetadata: {
    title: `Gatsby Static Site Tutorial`,
  },
  plugins: [
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
  ],
};

pluginsの配列に使用するプラグインを記載すればOKです。公式のチュートリアルにならって先に gatsby-source-filesystem もインストールしていますが、まだ設定しなくて問題ありません。なお、gatsby-config.jsファイルを編集した場合は、変更を適用するためにローカルサーバーを再起動する必要があります。

gatsby-config.jsファイルを記述する際の引用符はバッククォートにしています。シングルークォートやダブルクォートでも問題ありませんが、テンプレートリテラルを使用する項目を追加した際に、シングルークォートやダブルクォートとバッククォートが混在している見た目が好みではないのでバッククォートに統一しています。

プラグインをサイトに適用する

それではプラグインを使用してホームページに画像を追加します。使用する任意の画像をsrc/imagesに格納しておきます。ここで使用する画像はsample-image-01.pngとしています。gatsby-plugin-imageのStaticImageコンポーネントを使用します。index.jsを下記のようにします。

src/pages/index.js

import * as React from 'react'
import Layout from '../components/layout'
import { StaticImage } from 'gatsby-plugin-image'

const IndexPage = () => {
  return (
    <Layout pageTitle="Home Page">
      <p>I'm making this by following the Gatsby Tutorial.</p>
      <StaticImage
	alt="Sample Image 01"
	src="../images/sample-image-01.png"
      />
    </Layout>
  )
}

export const Head = () => <title>Home Page</title>

export default IndexPage

表示を確認してみましょう。

ブラウザのサイズを変更すれば画像がレスポンシブに表示されるのが確認できるかと思います。今回は以上です。

< Previous Article Next Article >

Back to Articles