Tech2025-04-26

【Gatsby】gatsbyPluginSharpってそもそも何だよという記事

Gatsbyには「gatsby-plugin-sharp」という、画像をいい感じにしてくれるプラグインがありますが、この「sharp」って一体何でしょうか。ちょっと深堀りしてみました。

フロントエンド

Gatsby

Gatsbyプロジェクトで画像を扱う際に、gatsby-plugin-sharpというプラグインをよく使っています。画像の最適化やレスポンシブ対応などを自動でやってくれているとかやってくれていないとか。

しかし、

この名前に入っている「sharp」、何？

というアレがアレしています。

なんとなく気になったので調べてみることにしました。AIの力を借りながら。

`sharp` の正体

結論から言うと、このsharpというのは、Node.jsの画像処理ライブラリの名前です。gatsby-plugin-sharpは、この強力なsharpライブラリをGatsbyのGraphQLレイヤーと統合し、使いやすくしたプラグインらしい。

`sharp` ができること

sharp は、色々画像処理ができます。しかも速い。

リサイズ: 画像のサイズを自由に変更できます。
フォーマット変換: JPEG、PNG、WebP、AVIFなど、様々な画像フォーマットに変換できます。
最適化: 画像の品質を保ちつつ、ファイルサイズを小さくすることができます。
トリミング: 画像の一部を切り抜くことができます。
回転・反転: 画像を回転させたり、水平・垂直方向に反転させたりできます。
色調調整: 明るさ、コントラスト、彩度などを調整できます。
ぼかし・シャープ処理: 画像にぼかしをかけたり、逆にシャープにしたりできます。

これらの機能をGatsbyのビルド中に自動的に行うことで、高速で最適な画像をWebサイトに組み込めるらしい。へー。

公式サイト

High performance Node.js image processing

High performance Node.js image processing. The fastest module to resize JPEG, PNG, WebP and TIFF images.

sharp.pixelplumbing.com

Sharpは公式サイトがあります。GatsbyだけでなくNode.jsでアレコレするときにも使えるので、つかってみるといいかも。「特定のフォルダ内にある画像をすべて6度回転させた画像を生成しまくる」なんてこともできたりします。

Copy

const sharp = require('sharp');
const fs = require('fs').promises;
const path = require('path');

// 回転させたい画像の入っているフォルダパス
const inputFolderPath = './input_images';
// 回転後の画像を保存するフォルダパス
const outputFolderPath = './rotated_images';
// 回転角度（度）
const rotateAngle = 6;

async function processImages() {
  try {
    // 出力フォルダが存在しない場合は作成する
    await fs.mkdir(outputFolderPath, { recursive: true });

    // 入力フォルダ内のファイル一覧を取得
    const files = await fs.readdir(inputFolderPath);

    for (const file of files) {
      const inputFile = path.join(inputFolderPath, file);
      const outputFile = path.join(outputFolderPath, `rotated_${file}`);

      try {
        // ファイルの拡張子を確認して画像ファイルかどうかを判定 (簡易的な判定)
        const ext = path.extname(file).toLowerCase();
        if (['.jpg', '.jpeg', '.png', '.webp', '.gif', '.tiff'].includes(ext)) {
          // sharpで画像を読み込み、回転させて保存
          await sharp(inputFile)
            .rotate(rotateAngle)
            .toFile(outputFile);

          console.log(`Rotated and saved: ${outputFile}`);
        } else {
          console.log(`Skipping non-image file: ${inputFile}`);
        }
      } catch (error) {
        console.error(`Error processing ${inputFile}:`, error);
      }
    }

    console.log('All images processed!');

  } catch (error) {
    console.error('An error occurred:', error);
  }
}

processImages();