画像処理をClaudeと実装する

画像処理はNode.jsプロジェクトでよく求められる機能ですが、SharpやCanvasのAPIは複雑で実装に時間がかかりがちです。Claude Codeを使えば、要件を伝えるだけで実装の大部分を任せられます。今回はSharpを中心に、WebP変換や画像最適化の実装をClaude Codeと進める方法を紹介します。

まずSharpのセットアップをClaudeに頼む

プロジェクトにSharpを導入するとき、インストールだけでなくバイナリのプラットフォーム対応など細かい設定が必要になることがあります。Claude Codeに次のように伝えましょう。

SharpをインストールしてJPEG画像をWebPに変換する関数を作ってください。
クオリティは80、リサイズは最大幅1280pxに収まるようにしてください。

Claude Codeはインストールコマンドから関数の実装まで一気に出力してくれます。生成されたコードは以下のような形になります。

import sharp from 'sharp';

export async function convertToWebP(inputPath: string, outputPath: string) {
  await sharp(inputPath)
    .resize({ width: 1280, withoutEnlargement: true })
    .webp({ quality: 80 })
    .toFile(outputPath);
}

バッチ処理や最適化パイプラインを依頼する

単一ファイルの変換ができたら、次はディレクトリ単位のバッチ処理や複数フォーマットへの同時出力を依頼しましょう。

inputsディレクトリ内の全画像をWebPとAVIFの両方に変換し、
outputsに保存するスクリプトを作ってください。
処理は並列実行してパフォーマンスを最大化してください。

このように要件を追加していくと、Claude CodeはPromise.allを使った並列処理や進捗表示なども含めた実装を提案してくれます。段階的に要件を積み重ねていくのがコツです。

※Docker: アプリケーションをコンテナと呼ばれる独立した環境で動かすためのツール。環境差異による問題を防ぐ。※npm: Node.jsのパッケージ管理ツール。`npm install` でライブラリをインストールする。

Canvas・WebAssemblyを使った高度な処理も対応できる

テキスト合成やフィルター処理など、Sharpだけでは難しい要件はnode-canvasやWasm版のライブラリが必要になります。Claude Codeに「Canvasでサムネイルに透かし文字を入れたい」と伝えれば、canvasパッケージのインストールからフォント設定・描画コードまでまとめて出力できます。WebAssemblyを使う場面では「@squoosh/libでブラウザ側でも動く画像圧縮を実装してほしい」のように具体的なライブラリ名を指定するとより精度の高い回答が得られます。画像処理は仕様が多岐にわたりますが、Claude Codeに細かく要件を伝えながら反復することで、実用的なパイプラインを短時間で構築できます。