SCALE — Build Lab
開発パターン · JAVASCRIPT PATTERN

クリップボードコピーヘルパ

CATEGORY開発パターン TYPEJavaScript Pattern EFFORT15〜30分 DIFFICULTY
PRIMARY CODE
ts
export async function copyToClipboard(text: string, onSuccess?: () => void): Promise<boolean> {
  try {
    if (navigator.clipboard?.writeText) {
      await navigator.clipboard.writeText(text);
    } else {
      // フォールバック
      const ta = document.createElement('textarea');
      ta.value = text;
      ta.style.position = 'fixed';
      ta.style.opacity = '0';
      document.body.appendChild(ta);
      ta.select();
      document.execCommand('copy');
      document.body.removeChild(ta);
    }
    onSuccess?.();
    return true;
  } catch (err) {
    console.error('Copy failed:', err);
    return false;
  }
}
前提条件
Tailwind CSS v4TypeScript 5
USE CASES
  • 任意のダッシュボードに組み込み

クリップボードコピーヘルパ

:LiTarget: 用途

navigator.clipboard + フォールバック(document.execCommand)+ トースト通知。

:LiSparkle: 特徴

  • Clipboard API
  • フォールバック対応
  • 旧ブラウザOK
  • トースト連携

:LiCode: コード(コピペ用)

export async function copyToClipboard(text: string, onSuccess?: () => void): Promise<boolean> {
  try {
    if (navigator.clipboard?.writeText) {
      await navigator.clipboard.writeText(text);
    } else {
      // フォールバック
      const ta = document.createElement('textarea');
      ta.value = text;
      ta.style.position = 'fixed';
      ta.style.opacity = '0';
      document.body.appendChild(ta);
      ta.select();
      document.execCommand('copy');
      document.body.removeChild(ta);
    }
    onSuccess?.();
    return true;
  } catch (err) {
    console.error('Copy failed:', err);
    return false;
  }
}

:LiHandPointer: 使い方

対象プロジェクトに該当ファイルをコピーして、props を流し込むだけ。

:LiAlertCircle: 注意事項

  • 依存パッケージを忘れず追加