クリップボードコピーボタン

解説

このクリップボードコピーボタンは、コードブロックの中身をワンクリックで複製できる UI です。ボタンを押すと、ブラウザ標準の navigator.clipboard.writeText でコード文字列をクリップボードへ書き込みます。成功するとボタンの表示がチェックマークと「コピー済」に変わり、しばらくして元のアイコンへ戻ります。コピー対象は code 要素のテキストから取得しているので、表示内容と実際にコピーされる文字列が一致します。

使う場面

• インストールコマンドや API キーなど、間違えず正確にコピーさせたいとき
• 技術ドキュメントやライブラリ紹介ページのコードサンプル
• 長い文字列の手入力ミスを防ぎ、操作を一手で済ませたいとき

コピー後のフィードバックは色やアイコンを変えるだけで調整できます。注意点として navigator.clipboard は安全な接続（HTTPS）や localhost でのみ動作します。古い環境にも備えるなら、失敗時に旧来の方式へ切り替える分岐を足すと安心です。視覚に頼らない利用者のために、コピー完了を伝える文言を支援技術へ通知する工夫も有効です。