カテゴリー: JavaScript

Reactで開発をしていると、副作用（side effects）をどう管理するかは非常に重要なテーマの1つです。API呼び出し、イベントリスナーの登録、ローカルストレージの読み書きなど、コンポーネントの描画とは直接関係しない処理をうまく扱わないと、バグやパフォーマンス低下につながります。

この記事では、ReactのuseEffectやuseCallbackの正しい使い方を、OGP画像（Open Graph Protocol image）の生成を例に丁寧に解説します。また、非同期処理のメモ化（memoization）戦略と、開発中のプロダクトfile-binへの応用についても紹介します。

なぜ useEffect が必要なのか？

Reactでは、描画（render）とは別に**副作用（side effects）**を扱う必要があります。たとえば、次のようなケース：

• サーバーからデータを取得
• ユーザーが入力した値に応じて処理を実行
• ページロード時に一度だけ何かをしたい

これらは、すべて useEffect の出番です。

基本形

useEffect(() => {
  // 副作用処理
}, []);

第二引数に []（空の配列）を渡すことで、初回マウント時にのみ実行されるという仕様になります。依存配列に変数を入れると、それが変化するたびに再実行されます。

useCallback を使う理由
次に useCallback。これは、関数の「再生成を防ぐ」ために使います。Reactでは、関数を毎回新しく作るのが普通ですが、依存配列に入れたときに予期しない再実行を防ぐために関数の「参照」を保つ必要があります。

以下のように書くと、title, filename, template が変わらない限り、同じ関数インスタンスが使われます：

const handleGenerate = useCallback(async () => {
  const svgMarkup = await createOgpImage(title, filename, template);
  setSvg(svgMarkup);
}, [title, filename, template]);

これにより、useEffect で handleGenerate を依存配列に入れても、意図しない副作用の再実行を防げます。

useEffect で handleGenerate を使う理由

useEffect(() => {
  handleGenerate();
}, [handleGenerate]);

このように、関数を依存配列に入れることはReactのルール上正しい書き方です。handleGenerate の中で title, filename, template を使っている以上、それが変わったら再実行すべきだからです。

では、逆にこれを空の依存配列 [] にするとどうなるでしょうか？

useEffect(() => {
  handleGenerate(); 
}, []); // ← NG！

この場合、title や filename が変わっても handleGenerate の中の値は更新されないので、古い状態のSVGを生成し続けるバグになります。

非同期処理のメモ化はできるのか？

ここで疑問が出てきます。

SVGを毎回生成するのはコストが高い。
同じパラメータなら、前に生成した結果を使えないのか？

これはいわゆるメモ化（memoization）の話です。

しかし、useMemoは使えない

ReactのuseMemoは値のメモ化には使えますが、非同期処理（Promise）には非対応です。以下のようなコードは動きません：

// ❌ useMemo は非同期の値を返せない
const svgMarkup = useMemo(async () => {
  return await createOgpImage(title, filename, template);
}, [title, filename, template]);

解決策：自前でキャッシュを作る

非同期処理をメモ化するには、Map や useRef を使った手動キャッシュ戦略が有効です。

シンプルな例

const cacheRef = useRef<Map<string, string>>(new Map());

useEffect(() => {
  const key = `${title}-${filename}-${template}`;
  const cached = cacheRef.current.get(key);
  if (cached) {
    setSvg(cached);
    return;
  }

  const generate = async () => {
    const svgMarkup = await createOgpImage(title, filename, template);
    cacheRef.current.set(key, svgMarkup);
    setSvg(svgMarkup);
  };
  generate();
}, [title, filename, template]);

このようにすれば、すでに生成されたSVGはキャッシュされ、再生成をスキップできます。

実用例：OGP画像のプレビューコンポーネント

ここまでの技術を使って、以下のような OgpPreview コンポーネントが実装できます。

export function OgpPreview({ title, filename, template = 0 }) {
  const [svg, setSvg] = useState<string | null>(null);

  const handleGenerate = useCallback(async () => {
    const svgMarkup = await createOgpImage(title, filename, template);
    setSvg(svgMarkup);
  }, [title, filename, template]);

  useEffect(() => {
    handleGenerate();
  }, [handleGenerate]);

  return (
    <div className="ogp-preview">
      {svg && <div dangerouslySetInnerHTML={{ __html: svg }} />}
    </div>
  );
}

この設計により、title, filename, template が変わったときだけ新しくSVGが生成され、他のケースでは再利用されるようになります。

file-binにおける応用

この記事で紹介した内容は、筆者が開発中のエンドツーエンド暗号化ファイル共有サービス「file-bin」のOGP生成にも活かされています。

file-binとは？

file-bin は、以下のような特徴を持つモダンなファイル共有サービスです：

• エンドツーエンド暗号化でセキュリティ重視
• ゲストアップロード対応（無料で10MBまで）
• Pro会員は容量制限の拡張、MyPage機能あり
• OGP画像の自動生成で共有リンクがリッチに見える
• AWS Amplify + Next.js + Stripe をフル活用

この中でも、共有リンクにOGP画像を生成する機能では、まさにここで解説した非同期処理のメモ化と副作用の最適管理が使われています。

画像生成APIの呼び出し回数が増えると、コストにも影響が出るため、再生成を抑えるキャッシュ戦略は必須でした。

まとめ

• useEffect は副作用の管理に必須
• useCallback で関数の再生成を防ぐ
• useMemo は非同期には使えないので、手動キャッシュを使う
• SVGや画像の生成などコストが高い処理にはメモ化戦略が効果的
• 実際のプロダクト（file-bin）でもこの設計が活きている

file-bin を使ってみよう！

あなたも、セキュアかつ手軽にファイルをシェアしたいなら、file-bin をぜひ試してみてください。

• https://file-bin.com にアクセスして即アップロード
• 登録すれば Pro 会員として高機能を解放
• SVGベースのOGP表示で、リンクを送るだけで魅力的なプレビューが表示

一意なIDの生成は、ウェブ開発・API設計・データベース設計などにおいて欠かせない技術です。この記事では、軽量・高速・安全なID生成ライブラリである「nanoid」の使い方を詳しく解説します。また、UUIDとの比較や、実際にnanoidを活用しているファイル共有サービス「file-bin」の事例も紹介します。

この記事でわかること

• nanoidとは？基本機能とインストール方法
• UUIDとの違いと使い分け
• nanoidのセキュリティと衝突率
• ファイル共有サービスfile-binでの実用例
• SEOにも強い短いURLの設計ノウハウ

nanoidとは何か？

nanoid（ナノアイディー）は、JavaScriptで使用できる短くて衝突しづらい一意なID（Unique ID）を生成するライブラリです。

従来、ID生成にはUUID（ユニバーサルユニークID）が広く使われてきましたが、UUIDは「長すぎる」「読みづらい」「URLに適さない」といった課題があります。

nanoidはこれらの課題を解決するために設計されました。

主な特徴

nanoidのインストール方法

Node.jsプロジェクトまたはフロントエンドのWebアプリケーションに簡単に導入できます。

npm install nanoid

フロントエンドで使いたい場合はCDNも利用可能：

<script src="https://cdn.jsdelivr.net/npm/nanoid"></script>

nanoidの使い方

デフォルト（21文字）

import { nanoid } from 'nanoid';

const id = nanoid(); 
console.log(id); // 例: "V1StGXR8_Z5jdHi6B-myT"

長さを指定（例: 12文字）

const shortId = nanoid(12);
console.log(shortId); // 例: "aK8s2Pz9QbTx"

カスタム文字セット（数字だけ）

import { customAlphabet } from 'nanoid';

const numbersOnly = customAlphabet('0123456789', 8);
console.log(numbersOnly()); // 例: "34829570"

UUIDとnanoidの比較

多くの開発者が使用するUUID（バージョン4）とnanoidの違いを以下にまとめました。

結論： 短く安全なIDが必要な場合は、UUIDよりもnanoidを使う方が効率的で実用的です。

SEO的に強い短いURL設計とは？

検索エンジンやSNSで共有されるURLにおいて、短くて意味のあるIDやパスを使うことは大きなSEOメリットになります。

• URLが短いとCTR（クリック率）が上がる
• SNSで切れずに表示されやすい
• 共有・コピーが簡単になる
• ブランディングやユーザー信頼感にも貢献

nanoidのように、英数字のみで構成された短く予測困難なIDをURLに使用することで、セキュリティとSEOの両方を高められます。

実例：file-binでのnanoid活用

file-binは、エンドツーエンド暗号化付きのファイルアップロード・共有サービスです。ファイルにアクセスするためのダウンロードリンクに、nanoidを使った短い一意IDを活用しています。

file-binの主な特徴

• 最大10MBの匿名ファイルアップロード（ゲスト）
• 登録ユーザーは大容量ファイル共有が可能
• 全ファイルを自動暗号化＆復号
• 高速ダウンロードリンク生成
• 管理者向けのアクセスログ機能付き

ダウンロードURLの一例

arduinoコピーする編集するhttps://file-bin.com/d/xYz8T9WqLsA

この部分（xYz8T9WqLsA）が、nanoidによって生成された短くて安全な一意IDです。

なぜnanoidを採用？

file-bin開発者の視点では以下の理由でnanoidが選ばれました：

1. 短くてユーザーフレンドリー：URLが見やすく、共有しやすい
2. セキュア：推測されにくく、意図しないアクセスを防止
3. 高速生成：APIレスポンスを最小化
4. 簡単に導入できる：追加の構成が不要でメンテナンスが楽

ユーザー体験（UX）とセキュリティを両立したいなら、UUIDよりもnanoidが正解！

まとめ：nanoidで次世代のID生成を

nanoidは、現代のWebアプリケーションに求められる「短くて、安全で、衝突しない」IDを簡単に実現できる素晴らしいライブラリです。

• UUIDに代わる次世代の一意ID生成手段
• URL設計・SEO対策にも強い
• セキュアなWebサービスとの相性抜群
• 実例：file-binのようなファイル共有サービスで大活躍

こんにちは。今回は、Node.js環境で使える高速な画像処理ライブラリ「sharp」を使って、PNG画像を生成する方法を詳しく紹介していきます。

WebアプリやAPI開発において、サーバーサイドで動的に画像を生成するシーンは意外と多くあります。たとえば次のようなケースです：

• テキスト入りサムネイル画像の自動生成
• OGP（Open Graph Protocol）画像のダイナミック生成
• QRコードやバーコードを画像として出力
• PDFからページごとに画像化する処理の一環

こうした場面で「sharp」は非常に頼れる存在です。この記事では、sharpでPNG画像を生成・加工し、ファイルとして保存するまでの具体的な流れを解説します。

sharpとは？

sharpは、Node.js上で使える高性能な画像処理ライブラリです。特徴としては：

• C++ベースのlibvipsを利用しているため、非常に高速かつ省メモリ
• JPEG、PNG、WebP、AVIF、TIFFなど多くの画像フォーマットをサポート
• リサイズ、トリミング、回転、フォーマット変換、合成など多彩な機能
• Promiseベースで非同期処理に対応

npmで簡単に導入でき、バックエンド処理だけでなく、静的サイトジェネレータやバッチ処理でも重宝します。

npm install sharp

sharpでPNG画像を生成する基本コード

まず、シンプルに「空のPNG画像を作成する」コードから見てみましょう。

const sharp = require('sharp');

// 透明な400x300のPNG画像を生成
sharp({
  create: {
    width: 400,
    height: 300,
    channels: 4,
    background: { r: 255, g: 255, b: 255, alpha: 0 } // 完全に透明
  }
})
  .png()
  .toFile('output.png')
  .then(() => {
    console.log('PNG画像が生成されました');
  })
  .catch(err => {
    console.error('エラー:', err);
  });

このように、createオプションで空の画像を定義し、それを.png()で出力しています。背景色をalpha: 1にすれば白背景になります。

テキストや画像を合成してサムネイル画像を生成する

もっと実用的な例として、画像上にテキストや他の画像を合成してOGP画像のようなものを生成してみます。

1. ベース画像の作成

const sharp = require('sharp');

const width = 800;
const height = 418;

const background = {
  create: {
    width,
    height,
    channels: 4,
    background: '#282c34'
  }
};

const base = sharp(background).png();

2.テキストの画像を作成（SVG形式で）

const titleSvg = `
<svg width="${width}" height="${height}">
  <style>
    .title { fill: white; font-size: 48px; font-family: sans-serif; }
  </style>
  <text x="50" y="100" class="title">SharpでOGP画像を作成してみた！</text>
</svg>
`;

const titleBuffer = Buffer.from(titleSvg);

3.合成してPNG画像として出力

base
  .composite([
    { input: titleBuffer, top: 0, left: 0 }
  ])
  .png()
  .toFile('ogp.png')
  .then(() => {
    console.log('OGP風画像が生成されました');
  });

このように、SVGでテキストを記述してからsharpで画像上に合成することで、簡単にダイナミックなサムネイルが作成できます。

PNG圧縮率を変えるオプション：.png({ compressionLevel })

PNGは可逆圧縮形式であり、品質を犠牲にせずにファイルサイズを最適化できます。sharpでは、.png()に次のようなオプションを渡すことで圧縮率を制御可能です。

.png({ compressionLevel: 9 }) // 最も高圧縮

compressionLevelは0〜9の範囲で指定できます：

• 0: 圧縮なし（最速、ファイルサイズ大）
• 9: 最大圧縮（最も遅いがファイルサイズ小）

たとえばバッチ処理でサイズ最小化を優先する場合はcompressionLevel: 9を、リアルタイムな生成が必要な場合は5〜6程度がおすすめです。

バッファで返す / Base64エンコードでWebに埋め込む

PNG画像をファイルとして保存せず、バッファ形式で得てWebに埋め込みたい場合もあります。

const buffer = await sharp({
  create: {
    width: 200,
    height: 200,
    channels: 4,
    background: '#00f'
  }
}).png({ compressionLevel: 6 }).toBuffer();

const base64 = buffer.toString('base64');
const dataUrl = `data:image/png;base64,${base64}`;

console.log(dataUrl); // HTMLのimgタグに埋め込める

生成したPNG画像をdata:image/png;base64,...形式でHTMLやOGP用メタタグに直接埋め込めるため、CDNを使わず画像を渡したいときに便利です。

使用上の注意点

• 圧縮率を高くすると処理時間が伸びるため、用途に応じたバランスが必要です。
• PNGは可逆形式のため、画質は劣化しませんが、写真用途にはWebPやJPEGの方がサイズが小さく済むケースがあります。
• 圧縮オプション以外にも、alphaチャンネルを含むかどうかでもファイルサイズは大きく変わります。

応用：QRコードやバーコードと連携

「sharp」は画像の合成にも強いため、別のライブラリ（たとえばqrcodeやbwip-js）と組み合わせて、QRコードを含んだPNG画像を自動生成することもできます。

const QRCode = require('qrcode');

QRCode.toBuffer('https://example.com').then(qrBuffer => {
  sharp({
    create: {
      width: 500,
      height: 500,
      channels: 4,
      background: '#ffffff'
    }
  })
    .composite([{ input: qrBuffer, top: 100, left: 100 }])
    .png({ compressionLevel: 6 })
    .toFile('qr_image.png');
});

こういった自動化処理は、Eコマースやチケットサービスでも活用できますね。

生成した画像を共有するなら：file-binがおすすめ

今回のようにsharpで生成したPNG画像を手軽に共有したいときにおすすめなのが、**Shota Ninomiya氏が開発中のファイル共有サービス「file-bin」**です。

file-binの特徴：

• ゲストユーザーでも最大10MBまでアップロード可能
• ログインユーザーは大容量ファイルも利用可能
• アップロード時にエンドツーエンド暗号化（E2EE）＆圧縮を自動実行
• ダウンロードリンクにOGP画像や説明文（メタデータ）を設定可能

「生成したPNGをアップロード → SNSで即共有」という流れがスムーズに行えるため、開発中のツールやプロトタイプ共有にも最適です。

今後のアップデートでは、ダウンロード通知やアクセス制限機能なども追加予定とのことで、セキュリティに配慮しつつ画像を共有したいユーザーには非常に心強いサービスとなりそうです。

ベータ版を公開中です！フィードバックをしてくださる方を募集中です！

https://file-bin.com

まとめ

この記事では、JavaScriptライブラリ「sharp」を使ってPNG画像を生成・加工・出力する一連の流れを解説しました。

sharpのポイント：

• 高速かつ高機能な画像処理ライブラリ
• PNGの背景・テキスト合成・他画像との合成が簡単
• .png({ compressionLevel })で圧縮率を制御できる
• ファイル保存、Base64埋め込み、API出力など応用自在
• QRコード・OGP生成にも相性抜群
• 共有はfile-binのような暗号化サービスと連携すると便利

sharpは、サーバーサイドでの画像処理における最強の相棒といっても過言ではありません。特にPNG生成では、透明背景や高圧縮による活用の幅が広がるため、アイデア次第でいろいろな場面に応用できるでしょう。

何か気になる点やsharpの応用例があれば、コメントで教えてください！file-binに関しても、別記事で詳しく取り上げていく予定です。