React でテキストデータをクリップボードにコピーするボタンをつくる

こんにちは、広野です。

WEB 画面内のテキストをクリップボードにコピーさせるボタン作成ってめっちゃ簡単そうなのですが、React ではうまくいかず数時間ハマりました。せっかくなので成功したコードを書き落とします。

つくりたい画面

こんなのです。Google 翻訳でも同じボタン使ってますね。

ボタンを押したら、テキスト表示欄にあるテキストデータがクリップボードにコピーされるだけの機能です。

React コード

前提として、画面パーツは MUI を使っています。(MUI の説明は省略)

import React, { useState, useEffect } from 'react';
import Button from '@mui/material/Button';
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
import IconButton from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip';

const [resultText, setResultText] = useState();

//中略

//クリップボードにコピー関数
const copyToClipboard = async () => {
  await global.navigator.clipboard.writeText(resultText);
};

//中略

//ボタン部分抜粋
<Tooltip title="Copy to Clipboard" placement="top" arrow>
  <IconButton color="primary" size="small" onClick={() => copyToClipboard()}>
    <ContentCopyIcon fontSize="small" />
  </IconButton>
</Tooltip>
<Button onClick={handleCloseDialog}>閉じる</Button>
  1. コピーボタンを押すと copyToClipboard 関数が呼び出されます。
  2. その時点で resultText ステートに格納されているテキストデータをクリップボードにコピーします。

言ってみればただそれだけなのですが、赤線を引っ張っている箇所はその通りに書かないと動きませんでした。

  • 関数を async await にすること
  • global を入れること

他にもいくつかの React モジュールは試したのですがうまくいかず。このコードだけが動きました。

まとめ

いかがでしたでしょうか?

地味にハマったんで、自分の備忘を兼ねて記録に残しておきました。

本記事が皆様のお役に立てれば幸いです。

著者について
広野 祐司

AWS サーバーレスアーキテクチャを駆使して社内クラウド人材育成アプリとコンテンツづくりに勤しんでいます。React で SPA を書き始めたら快適すぎて、他の言語には戻れなくなりました。サーバーレス & React 仲間を増やしたいです。AWSは好きですが、それよりもフロントエンド開発の方が好きでして、バックエンド構築を簡単にしてくれたAWSには感謝の気持ちの方が強いです。
取得資格:AWS 認定は13資格、ITサービスマネージャ、ITIL v3 Expert 等
2020 - 2024 Japan AWS Top Engineer 受賞
2022 - 2024 AWS Ambassador 受賞
2023 当社初代フルスタックエンジニア認定
好きなAWSサービス:AWS Amplify / AWS AppSync / Amazon Cognito / AWS Step Functions / AWS CloudFormation

広野 祐司をフォローする

クラウドに強いによるエンジニアブログです。

SCSKでは、自社クラウドと3大メガクラウドの強みを活かし、ハイブリッドクラウド/マルチクラウドのソリューションを展開しています。業界の深い理解をもとに、お客様の業務要件に最適なアーキテクチャをご提案いたします。サービスサイトでは、お客様のDX推進をワンストップで支援するサービスの詳細や導入事例を紹介しています。

アプリケーション開発ソリューション
シェアする
タイトルとURLをコピーしました