Blog Article Image

Tech

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

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

2025/04/26

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

しかし、

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

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

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

sharp の正体

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

sharp ができること

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

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

公式サイト

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

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();

何に使うのかは知りません。軽く見た感じ暴走はしないと思いますが、AIに適当に書かせたので使う際は自己責任で。

当然ながら、実行前にはプロジェクトディレクトリ内でnpm i sharpとかyarn add sharpとかをしなければいけません。お気をつけて。

後記

この記事は、Bing AIに書かせて無駄添削をしまくって作りました。

しかし、gatsby-image-sharpなる存在しない(あるいは存在するけど超マイナー)なプラグインの記述をしてきてビビり散らかしました。やっぱ鵜呑みにできないし添削必須ですわね。

…と思っていたら、筆者が単にgatsby-plugin-sharpgatsby-image-sharpと間違えて覚えていただけでした。AIはわるくないけど指摘もしてくれません。タイトルぐらいは見直す癖をつけたいですね。

記事のタグ

フロントエンド Gatsby

役に立ったら記事をバラ撒こう