概要

Sandpackというツールキットを少し使ってみました。Hello worldレベルの実験メモです。
Sandpackとは、次のような良くみかけるコード変更を試せるようなコードサンプルを表示するためのフレームワークです。
これを使って、技術的なブロクなどでの学習体験を改善できます。
以下の例は、Viteを用いたReact/TypeScriptアプリで、Reactコードを表示させる例ですが、React/TypeScript, Vue, Svelte, バニラJavaScriptなど多用なコードを表示できます。

プロジェクトの作成

ターミナルで次を実行します。

$ pnpm create vite sandpack-demo --template react-ts
$ cd sandpack-demo
$ pnpm install
$ pnpm run dev

これで、ブラウザで http://127.0.0.1:5173/ にアクセスするとViteの雛形アプリが表示されます。
ターミナルで（必要に応じてCtrl + Cで開発サーバーを停止し）、次のパッケージをインストールします。

$ pnpm add @codesandbox/sandpack-react

コードの変更

エディタで src\App.tsx を次に変更します。

import './App.css'
import { Sandpack } from "@codesandbox/sandpack-react";

function App() {
  return (
    <div className="App">
      <Sandpack template="react" />
      <p>
        自由にコードを変更してください。
      </p>
    </div>
  )
}

export default App

開発サーバーを止めていた場合は再度実行します。

$ pnpm run dev

次のように表示されます。すごいですね。

ここで、Hello Worldでないコードを追加するには次のようにSandpackコンポーネントのfilesというpropsを使用します。

import './App.css';
import { Sandpack } from '@codesandbox/sandpack-react';

const files = {
  '/App.js': `
    import { useState } from 'react'

    function App() {
      const [count, setCount] = useState(0)
    
      return (
        <div>
          <h1>Vite + React</h1>
          <div>
            <button onClick={() => setCount((count) => count + 1)}>
              count is {count}
            </button>
          </div>
        </div>
      )
    }
    export default App;
  `,
};

function App() {
  return (
    <div className='App'>
      <Sandpack template='react' files={files} />
      <p>自由にコードを変更してください。</p>
    </div>
  );
}

export default App;

参考

詳細はこちらの記事をどうぞ。