使用CopilotによるTauriの開発

環境#

System：Windows 11
IDE：VSCode + Github Copilot Chat + Rust + Tauri プラグイン
Env：npm、Rust
npm create tauri-app@latestを使用してプロジェクトフレームワークを作成しました。
以下のタイトルはすべて VSCode の Copilot チャットに入力されたテキストであり、Copilot が出力したコードを更新して置き換えます。

ホームページを次のように変更します：左側はナビゲーションエリアで、ツリー状のビューで異なる機能のページリンクを表示します；左側のナビゲーションエリアの機能メニュー項目をクリックすると、右側に対応する機能ページが読み込まれます#

Note

ここでは 'App.tsx' を参照しています

GitHub Copilot: この機能を実現するために、App.tsxで以下の手順を実行する必要があります：

ナビゲーションバーコンポーネントを作成し、ツリー状のビューで異なる機能のページリンクを表示します。
ページナビゲーションを処理するために React Router を使用します。
右側のエリアに対応する機能ページを読み込みます。

まず、React Router をインストールします：

npm install react-router-dom

次に、App.tsxファイルを以下のように変更します：

import { useState } from "react";
import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";
import reactLogo from "./assets/react.svg";
import { invoke } from "@tauri-apps/api/core";
import "./App.css";

function Home() {
  return <h2>ホームページ</h2>;
}

function Feature1() {
  return <h2>機能1ページ</h2>;
}

function Feature2() {
  return <h2>機能2ページ</h2>;
}

function App() {
  const [greetMsg, setGreetMsg] = useState("");
  const [name, setName] = useState("");

  async function greet() {
    setGreetMsg(await invoke("greet", { name }));
  }

  return (
    <Router>
      <div className="container">
        <nav className="sidebar">
          <ul>
            <li>
              <Link to="/">ホーム</Link>
            </li>
            <li>
              <Link to="/feature1">機能1</Link>
            </li>
            <li>
              <Link to="/feature2">機能2</Link>
            </li>
          </ul>
        </nav>
        <div className="content">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/feature1" element={<Feature1 />} />
            <Route path="/feature2" element={<Feature2 />} />
          </Routes>
        </div>
      </div>
    </Router>
  );
}

export default App;

同時に、新しいレイアウトに合わせてApp.cssファイルを更新します：

.container {
  display: flex;
}

.sidebar {
  width: 200px;
  background-color: #f0f0f0;
  padding: 10px;
}

.content {
  flex-grow: 1;
  padding: 10px;
}

これにより、左側にナビゲーションバーが表示され、右側にはナビゲーションバーの選択に応じて対応する機能ページが読み込まれます。

Similar code found with 1 license type

独立した Home コンポーネントを作成します#

GitHub Copilot: はい、Homeコンポーネントを独立したファイルに抽出できます。手順は以下の通りです：

新しいファイルHome.tsxを作成します。
HomeコンポーネントのコードをHome.tsxファイルに移動します。
App.tsxでHomeコンポーネントをインポートします。

まず、Home.tsxファイルを作成し、以下のコードを追加します：

// Home.tsx
import React from "react";

function Home() {
  return <h2>ホームページ</h2>;
}

export default Home;

次に、App.tsxファイルを変更し、Homeコンポーネントをインポートします：

import { useState } from "react";
import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";
import reactLogo from "./assets/react.svg";
import { invoke } from "@tauri-apps/api/core";
import "./App.css";
import Home from "./Home";

function Feature1() {
  return <h2>機能1ページ</h2>;
}

function Feature2() {
  return <h2>機能2ページ</h2>;
}

function App() {
  const [greetMsg, setGreetMsg] = useState("");
  const [name, setName] = useState("");

  async function greet() {
    setGreetMsg(await invoke("greet", { name }));
  }

  return (
    <Router>
      <div className="container">
        <nav className="sidebar">
          <ul>
            <li>
              <Link to="/">ホーム</Link>
            </li>
            <li>
              <Link to="/feature1">機能1</Link>
            </li>
            <li>
              <Link to="/feature2">機能2</Link>
            </li>
          </ul>
        </nav>
        <div className="content">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/feature1" element={<Feature1 />} />
            <Route path="/feature2" element={<Feature2 />} />
          </Routes>
        </div>
      </div>
    </Router>
  );
}

export default App;

これにより、Homeコンポーネントが独立したファイルに抽出されました。

Similar code found with 1 license type

左側のナビゲーションバーを垂直に引き伸ばしてページ全体を占めるようにします#

Note

左側のナビゲーションバーはテキストを含む領域しか占有していないため、全体を占めるようにしたいです。

GitHub Copilot: 左側のナビゲーションバーをページ全体を占めるようにするために、CSS スタイルを調整する必要があります。具体的な手順は以下の通りです：

App.cssファイルを変更し、ナビゲーションバーがページの高さを占めるようにします。
コンテナの高さもページ全体を占めるようにします。

以下は更新されたApp.cssファイルです：

/* App.css */
html, body, #root {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  height: 100%;
}

.sidebar {
  width: 200px;
  background-color: #f0f0f0;
  padding: 10px;
  height: 100%;
}

.content {
  flex-grow: 1;
  padding: 10px;
}

App.tsxファイルには以下のコードが含まれていることを確認してください：

import { useState } from "react";
import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";
import { invoke } from "@tauri-apps/api/core";
import "./App.css";
import Home from "./Home";

function Feature1() {
  return <h2>機能1ページ</h2>;
}

function Feature2() {
  return <h2>機能2ページ</h2>;
}

function App() {
  const [greetMsg, setGreetMsg] = useState("");
  const [name, setName] = useState("");

  async function greet() {
    setGreetMsg(await invoke("greet", { name }));
  }

  return (
    <Router>
      <div className="container">
        <nav className="sidebar">
          <ul>
            <li>
              <Link to="/">ホーム</Link>
            </li>
            <li>
              <Link to="/feature1">機能1</Link>
            </li>
            <li>
              <Link to="/feature2">機能2</Link>
            </li>
          </ul>
        </nav>
        <div className="content">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/feature1" element={<Feature1 />} />
            <Route path="/feature2" element={<Feature2 />} />
          </Routes>
        </div>
      </div>
    </Router>
  );
}

export default App;

これにより、左側のナビゲーションバーがページ全体の高さを占めるようになります。

Similar code found with 1 license type

右側のページと左側のナビゲーションバーを上部で揃えます#

Note

右側のコンテンツエリアがナビゲーションエリアの下に表示される状況が発生しました。4、5、6 は修正を試みたプロンプトであり、後に CSS の.container スタイルが完全に置き換えられていないことがわかり、再度置き換えた後に正常に表示されました。

GitHub Copilot: 右側のページと左側のナビゲーションバーを上部で揃えるために、CSS スタイルを調整する必要があります。具体的な手順は以下の通りです：

コンテナの高さがページ全体を占め、ナビゲーションバーとコンテンツエリアが上部から揃うようにします。
レイアウトが正しいことを確認するためにApp.cssファイルを更新します。

以下は更新されたApp.cssファイルです：

/* App.css */
html, body, #root {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  height: 100%;
  align-items: flex-start; /* 子要素を上部で揃える */
}

.sidebar {
  width: 200px;
  background-color: #f0f0f0;
  padding: 10px;
  height: 100%;
}

.content {
  flex-grow: 1;
  padding: 10px;
}

App.tsxファイルには以下のコードが含まれていることを確認してください：

import { useState } from "react";
import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";
import { invoke } from "@tauri-apps/api/core";
import "./App.css";
import Home from "./Home";

function Feature1() {
  return <h2>機能1ページ</h2>;
}

function Feature2() {
  return <h2>機能2ページ</h2>;
}

function App() {
  const [greetMsg, setGreetMsg] = useState("");
  const [name, setName] = useState("");

  async function greet() {
    setGreetMsg(await invoke("greet", { name }));
  }

  return (
    <Router>
      <div className="container">
        <nav className="sidebar">
          <ul>
            <li>
              <Link to="/">ホーム</Link>
            </li>
            <li>
              <Link to="/feature1">機能1</Link>
            </li>
            <li>
              <Link to="/feature2">機能2</Link>
            </li>
          </ul>
        </nav>
        <div className="content">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/feature1" element={<Feature1 />} />
            <Route path="/feature2" element={<Feature2 />} />
          </Routes>
        </div>
      </div>
    </Router>
  );
}

export default App;

これにより、右側のページと左側のナビゲーションバーが上部で揃います。

Similar code found with 1 license type

.container 内の子要素を左右に配置します#

GitHub Copilot: .container内の子要素を左右に配置するために、CSS スタイルを調整する必要があります。具体的な手順は以下の通りです：

.containerがflexレイアウトを使用し、子要素が左右に配置されることを確認します。
重複した.containerスタイル定義を削除します。

以下は更新されたApp.cssファイルです：

/* App.css */
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;

html, body, #root {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  height: 100%;
  align-items: flex-start; /* 子要素を上部で揃える */
}

.sidebar {
  width: 200px;
  background-color: #f0f0f0;
  padding: 10px;
  height: 100%;
}

.content {
  flex-grow: 1;
  padding: 10px;
}

App.tsxファイルには以下のコードが含まれていることを確認してください：

import { useState } from "react";
import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";
import { invoke } from "@tauri-apps/api/core";
import "./App.css";
import Home from "./Home";

function Feature1() {
  return <h2>機能1ページ</h2>;
}

function Feature2() {
  return <h2>機能2ページ</h2>;
}

function App() {
  const [greetMsg, setGreetMsg] = useState("");
  const [name, setName] = useState("");

  async function greet() {
    setGreetMsg(await invoke("greet", { name }));
  }

  return (
    <Router>
      <div className="container">
        <nav className="sidebar">
          <ul>
            <li>
              <Link to="/">ホーム</Link>
            </li>
            <li>
              <Link to="/feature1">機能1</Link>
            </li>
            <li>
              <Link to="/feature2">機能2</Link>
            </li>
          </ul>
        </nav>
        <div className="content">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/feature1" element={<Feature1 />} />
            <Route path="/feature2" element={<Feature2 />} />
          </Routes>
        </div>
      </div>
    </Router>
  );
}

export default App;

これにより、.container内の子要素が左右に配置され、上部で揃います。

Similar code found with 1 license type

ナビゲーションバーの背景色をシステムの背景色に設定します#

Note

システムテーマは暗色ですが、デフォルトの背景色は白色であり、このコードは実際には効果がなく、最終的に.sidebarの背景色設定を手動で削除しました。

GitHub Copilot: ナビゲーションバーの背景色をシステムの背景色に設定するには、CSS のbackground-colorプロパティを使用し、その値をbackgroundシステムカラーに設定します。以下は更新されたApp.cssファイルです：

/* App.css */
html, body, #root {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  height: 100%;
  align-items: flex-start; /* 子要素を上部で揃える */
}

.sidebar {
  width: 200px;
  background-color: var(--system-background-color, #f0f0f0); /* システムの背景色を使用 */
  padding: 10px;
  height: 100%;
}

.content {
  flex-grow: 1;
  padding: 10px;
}

.logo {
  height: 6em;
}

上記のコードでは、var(--system-background-color, #f0f0f0)を使用して背景色を設定しています。システムの背景色が未定義の場合は、デフォルトの色#f0f0f0が使用されます。必要に応じてデフォルトの色を調整できます。

Feature1 を独立した Features サブディレクトリに移動します#

GitHub Copilot: はい、Feature1コンポーネントを独立したファイルに抽出し、Featuresサブディレクトリに配置できます。手順は以下の通りです：

新しいディレクトリFeaturesを作成します。
Featuresディレクトリ内に新しいファイルFeature1.tsxを作成します。
Feature1コンポーネントのコードをFeature1.tsxファイルに移動します。
App.tsxでFeature1コンポーネントをインポートします。

まず、Features/Feature1.tsxファイルを作成し、以下のコードを追加します：

// Features/Feature1.tsx
import React from "react";

function Feature1() {
  return <h2>機能1ページ</h2>;
}

export default Feature1;

次に、App.tsxファイルを変更し、Feature1コンポーネントをインポートします：

import { useState } from "react";
import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";
import { invoke } from "@tauri-apps/api/core";
import "./App.css";
import Home from "./Home";
import Feature1 from "./Features/Feature1";

function Feature2() {
  return <h2>機能2ページ</h2>;
}

function App() {
  const [greetMsg, setGreetMsg] = useState("");
  const [name, setName] = useState("");

  async function greet() {
    setGreetMsg(await invoke("greet", { name }));
  }

  return (
    <Router>
      <div className="container">
        <nav className="sidebar">
          <ul>
            <li>
              <Link to="/">ホーム</Link>
            </li>
            <li>
              <Link to="/feature1">機能1</Link>
            </li>
            <li>
              <Link to="/feature2">機能2</Link>
            </li>
          </ul>
        </nav>
        <div className="content">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/feature1" element={<Feature1 />} />
            <Route path="/feature2" element={<Feature2 />} />
          </Routes>
        </div>
      </div>
    </Router>
  );
}

export default App;

これにより、Feature1コンポーネントがFeaturesサブディレクトリに独立したモジュールとして移動されました。

Similar code found with 1 license type

同様に Feature2 を独立したファイルに移動します#

GitHub Copilot: はい、Feature2コンポーネントを独立したファイルに抽出し、Featuresサブディレクトリに配置できます。手順は以下の通りです：

Featuresディレクトリ内に新しいファイルFeature2.tsxを作成します。
Feature2コンポーネントのコードをFeature2.tsxファイルに移動します。
App.tsxでFeature2コンポーネントをインポートします。

まず、Features/Feature2.tsxファイルを作成し、以下のコードを追加します：

// Features/Feature2.tsx
import React from "react";

function Feature2() {
  return <h2>機能2ページ</h2>;
}

export default Feature2;

次に、App.tsxファイルを変更し、Feature2コンポーネントをインポートします：

import { useState } from "react";
import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";
import { invoke } from "@tauri-apps/api/core";
import "./App.css";
import Home from "./Home";
import Feature1 from "./Features/Feature1";
import Feature2 from "./Features/Feature2";

function App() {
  const [greetMsg, setGreetMsg] = useState("");
  const [name, setName] = useState("");

  async function greet() {
    setGreetMsg(await invoke("greet", { name }));
  }

  return (
    <Router>
      <div className="container">
        <nav className="sidebar">
          <ul>
            <li>
              <Link to="/">ホーム</Link>
            </li>
            <li>
              <Link to="/feature1">機能1</Link>
            </li>
            <li>
              <Link to="/feature2">機能2</Link>
            </li>
          </ul>
        </nav>
        <div className="content">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/feature1" element={<Feature1 />} />
            <Route path="/feature2" element={<Feature2 />} />
          </Routes>
        </div>
      </div>
    </Router>
  );
}

export default App;

これにより、Feature2コンポーネントがFeaturesサブディレクトリに独立したモジュールとして移動されました。

Similar code found with 1 license type

ページのデフォルトにスクロールバーが表示されないようにページの高さを調整します#

Note

デフォルトのコンテンツエリアにスクロールバーが表示されました。

GitHub Copilot: ページの高さを調整してスクロールバーが表示されないようにするために、コンテナの高さとコンテンツの高さが正しく設定されていることを確認する必要があります。overflow: hiddenを使用してスクロールバーの表示を防ぎ、コンテンツエリアの高さがビューポートの高さを超えないようにします。

以下は更新されたApp.cssファイルです：

/* App.css */
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;

html, body, #root {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* スクロールバーの表示を防ぐ */
}

.container {
  display: flex;
  height: 100%;
  align-items: flex-start; /* 子要素を上部で揃える */
}

.sidebar {
  width: 200px;
  padding: 10px;
  height: 100%;
  background-color: var(--system-background-color, #f0f0f0); /* システムの背景色を使用 */
}

.content {
  flex-grow: 1;
  padding: 10px;
  height: 100%;
  overflow: auto; /* コンテンツエリアにスクロールを許可 */
}

App.tsxファイルには以下のコードが含まれていることを確認してください：

import { useState } from "react";
import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";
import { invoke } from "@tauri-apps/api/core";
import "./App.css";
import Home from "./Home";
import Feature1 from "./Features/Feature1";
import Feature2 from "./Features/Feature2";

function App() {
  const [greetMsg, setGreetMsg] = useState("");
  const [name, setName] = useState("");

  async function greet() {
    setGreetMsg(await invoke("greet", { name }));
  }

  return (
    <Router>
      <div className="container">
        <nav className="sidebar">
          <ul>
            <li>
              <Link to="/">ホーム</Link>
            </li>
            <li>
              <Link to="/feature1">機能1</Link>
            </li>
            <li>
              <Link to="/feature2">機能2</Link>
            </li>
          </ul>
        </nav>
        <div className="content">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/feature1" element={<Feature1 />} />
            <Route path="/feature2" element={<Feature2 />} />
          </Routes>
        </div>
      </div>
    </Router>
  );
}

export default App;

これにより、ページの高さが調整され、スクロールバーが表示されないようになります。また、コンテンツエリアはスクロール可能です。

Similar code found with 1 license type

greetMsg の段落を新しい行に表示します#

Note

ここでの理由は、例の中で greet のインタラクションを保持するために、手動でコードをApp.tsxからHome.tsxに移動しましたが、<p>タグが機能せず、テキスト出力エリアが同じ行に表示されました。次のプロンプトで<div>タグを使用して問題を解決しました。

GitHub Copilot: greetMsgを新しい行に表示するために、段落（<p>）タグに入れることができます。以下は更新されたHome.tsxファイルです：

// Home.tsx
import React from "react";

function Home({ greetMsg }: { greetMsg: string }) {
  return (
    <div>
      <h2>ホームページ</h2>
      <p>{greetMsg}</p>
    </div>
  );
}

export default Home;

同時に、App.tsxでgreetMsgをHomeコンポーネントのプロパティとして渡すことを確認します：

import { useState } from "react";
import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";
import { invoke } from "@tauri-apps/api/core";
import "./App.css";
import Home from "./Home";
import Feature1 from "./Features/Feature1";
import Feature2 from "./Features/Feature2";

function App() {
  const [greetMsg, setGreetMsg] = useState("");
  const [name, setName] = useState("");

  async function greet() {
    setGreetMsg(await invoke("greet", { name }));
  }

  return (
    <Router>
      <div className="container">
        <nav className="sidebar">
          <ul>
            <li>
              <Link to="/">ホーム</Link>
            </li>
            <li>
              <Link to="/feature1">機能1</Link>
            </li>
            <li>
              <Link to="/feature2">機能2</Link>
            </li>
          </ul>
        </nav>
        <div className="content">
          <Routes>
            <Route path="/" element={<Home greetMsg={greetMsg} />} />
            <Route path="/feature1" element={<Feature1 />} />
            <Route path="/feature2" element={<Feature2 />} />
          </Routes>
        </div>
      </div>
    </Router>
  );
}

export default App;

これにより、greetMsgがHomeコンポーネント内の新しい行に表示されます。

Similar code found with 1 license type

greetMsg は App から渡す必要はありません#

GitHub Copilot: はい、Homeコンポーネント内で直接greetMsgを定義し、Appから渡す必要はありません。以下は更新されたHome.tsxファイルです：

// Home.tsx
import React, { useState } from "react";
import { invoke } from "@tauri-apps/api/core";

function Home() {
  const [greetMsg, setGreetMsg] = useState("");
  const [name, setName] = useState("");

  async function greet() {
    setGreetMsg(await invoke("greet", { name }));
  }

  return (
    <div>
      <h2>ホームページ</h2>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="名前を入力"
      />
      <button onClick={greet}>挨拶</button>
      <p>{greetMsg}</p>
    </div>
  );
}

export default Home;

同時に、App.tsxファイルは変更する必要がなく、greetMsgはもはやAppから渡されません：

import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";
import "./App.css";
import Home from "./Home";
import Feature1 from "./Features/Feature1";
import Feature2 from "./Features/Feature2";

function App() {
  return (
    <Router>
      <div className="container">
        <nav className="sidebar">
          <ul>
            <li>
              <Link to="/">ホーム</Link>
            </li>
            <li>
              <Link to="/feature1">機能1</Link>
            </li>
            <li>
              <Link to="/feature2">機能2</Link>
            </li>
          </ul>
        </nav>
        <div className="content">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/feature1" element={<Feature1 />} />
            <Route path="/feature2" element={<Feature2 />} />
          </Routes>
        </div>
      </div>
    </Router>
  );
}

export default App;

これにより、greetMsgはHomeコンポーネント内で定義され、使用されます。

Similar code found with 2 license types

Feature1 を ClipBoard にリネームします#

GitHub Copilot: はい、Feature1コンポーネントをClipBoardにリネームできます。手順は以下の通りです：

Feature1.tsxファイルの名前をFeatures/ClipBoard.tsxに変更します。
コンポーネント名をClipBoardに更新します。
App.tsxでClipBoardコンポーネントをインポートします。

まず、Feature1.tsxファイルの名前をFeatures/ClipBoard.tsxに変更し、ファイル内容を以下のように更新します：

// Features/ClipBoard.tsx
import React from "react";

function ClipBoard() {
  return <h2>クリップボードページ</h2>;
}

export default ClipBoard;

次に、App.tsxファイルを変更し、ClipBoardコンポーネントをインポートします：

import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";
import "./App.css";
import Home from "./Home";
import ClipBoard from "./Features/ClipBoard";
import Feature2 from "./Features/Feature2";

function App() {
  return (
    <Router>
      <div className="container">
        <nav className="sidebar">
          <ul>
            <li>
              <Link to="/">ホーム</Link>
            </li>
            <li>
              <Link to="/clipboard">クリップボード</Link>
            </li>
            <li>
              <Link to="/feature2">機能2</Link>
            </li>
          </ul>
        </nav>
        <div className="content">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/clipboard" element={<ClipBoard />} />
            <Route path="/feature2" element={<Feature2 />} />
          </Routes>
        </div>
      </div>
    </Router>
  );
}

export default App;

これにより、Feature1コンポーネントがClipBoardにリネームされ、App.tsxで正しくインポートされ、使用されます。

クリップボードページに最近のクリップボード内容を表示し、時間の逆順で並べ、最大 100 件を表示します#

GitHub Copilot: クリップボードページに最近のクリップボード内容を表示し、時間の逆順で並べ、最大 100 件を表示するために、以下の手順が必要です：

クリップボード内容を保存するための状態を作成します。
useEffectフックを使用してクリップボード内容を取得するシミュレーションを行います。
クリップボード内容を時間の逆順で並べ、表示を 100 件に制限します。

以下は更新されたClipBoard.tsxファイルです：

// Features/ClipBoard.tsx
import React, { useState, useEffect } from "react";

interface ClipboardItem {
  content: string;
  timestamp: number;
}

function ClipBoard() {
  const [clipboardItems, setClipboardItems] = useState<ClipboardItem[]>([]);

  useEffect(() => {
    // クリップボード内容を取得するシミュレーション
    const fetchClipboardItems = () => {
      const items = [
        { content: "アイテム1", timestamp: Date.now() - 1000 },
        { content: "アイテム2", timestamp: Date.now() - 2000 },
        // さらにシミュレーションデータを追加
      ];
      setClipboardItems(items);
    };

    fetchClipboardItems();
  }, []);

  // 時間の逆順で並べ、表示を100件に制限
  const sortedItems = clipboardItems
    .sort((a, b) => b.timestamp - a.timestamp)
    .slice(0, 100);

  return (
    <div>
      <h2>クリップボードページ</h2>
      <ul>
        {sortedItems.map((item, index) => (
          <li key={index}>
            <p>{item.content}</p>
            <small>{new Date(item.timestamp).toLocaleString()}</small>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ClipBoard;

この実装では、以下のことを行いました：

ClipboardItemインターフェースを定義してクリップボード内容項目を表します。
useStateフックを使用してクリップボード内容を保存します。
useEffectフックを使用してクリップボード内容を取得するシミュレーションを行い、状態に保存します。
クリップボード内容を時間の逆順で並べ、表示を 100 件に制限します。
コンポーネント内でクリップボード内容のリストをレンダリングします。

必要に応じて、シミュレーションデータ部分を実際のクリップボード