投稿者: tomato-note

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のようなファイル共有サービスで大活躍