コードエディタをReactコンポーネントとして埋め込むSandpackという選択肢

はじめに

ドキュメントサイトやブログで「このコード、実際に動かして試してみたい」と思った経験はありませんか。かといって、コード実行環境を自前で作るのはWebWorkerやiframeのサンドボックス設計など考えることが多く、決して簡単ではありません。

そんな課題を解決してくれるのが、CodeSandboxが開発しているSandpackです。Reactコンポーネントを埋め込むだけで、ブラウザ上で完結する本格的なコードエディタ兼実行環境を手に入れられます。この記事では、Sandpackの特徴からインストール方法、実践的な使い方までを解説します。

Sandpackとは

SandpackはCodeSandboxのエディタ機能を支える中核エンジンをオープンソース化し、誰でもコンポーネントとして利用できるようにしたツールキットです。React・Vue・Vanilla JSなど複数のフレームワークに対応したテンプレートを用意しており、npm install不要でブラウザ上にコード実行環境を構築できます。

主な特徴

• サーバーレスで動作 - バンドリングやモジュール解決はブラウザ内で完結し、専用サーバーを用意する必要がありません
• 豊富なテンプレート - React、Vue、Svelte、Vanilla JS、Next.jsなど、主要なフレームワークのボイラープレートが標準で用意されています
• 柔軟なUI構成 - エディタ・プレビュー・コンソール・ファイルツリーなど、必要なパーツだけを組み合わせて独自のレイアウトを作れます
• npmパッケージの動的解決 - dependenciesを指定するだけで、任意のnpmパッケージをその場でインポートして試せます

インストール

Reactプロジェクトで使う場合は、以下のコマンドでインストールできます。

npm install @codesandbox/sandpack-react

Vueで利用する場合はsandpack-vue3、フレームワークに依存せず使いたい場合は@codesandbox/sandpack-clientも用意されています。

Sandpackコンポーネントの基本的な使い方

最もシンプルな構成は、Sandpackコンポーネントにtemplateを渡すだけです。これだけでエディタとプレビューが表示されます。骨格は次のとおりです。

import { Sandpack } from '@codesandbox/sandpack-react'

export default function App() {
  return (
    <Sandpack
      template="react"
      files={{
        '/App.js': `export default function App() {
  return <h1>Hello Sandpack!</h1>
}`,
      }}
    />
  )
}

実際に動かせるサンプルが以下です。エディタ内の<h1>Hello Sandpack!</h1>という文言を書き換えると、右側のプレビューがリアルタイムで更新される様子を確認できます。

filesにファイルパスとソースコードを渡すだけで、Sandpackコンポーネントがエディタとライブプレビューを即座に構築します。デフォルトでは編集した内容がリアルタイムでプレビューに反映されるため、templateを"vanilla"や"vue"に変更すれば、Reactに限らず別のフレームワーク向けの環境にもそのまま切り替えられます。

実践的なユースケース

Sandpackは組み立て方次第で様々な用途に対応できます。ここでは代表的な3つのパターンを紹介します。

Sandpackで複数ファイル構成のプレイグラウンドを作る

コンポーネントを複数ファイルに分割したサンプルを見せたい場合、Sandpackのfilesオブジェクトに複数のパスを渡すことで、ファイルタブ付きのエディタを構築できます。ドキュメントで「実際のプロジェクト構成」を見せたいときに便利です。要点は次のとおりです。

<Sandpack
  template="react"
  files={{
    '/App.js': `import Greeting from './Greeting'

export default function App() {
  return <Greeting name="Sandpack" />
}`,
    '/Greeting.js': `export default function Greeting({ name }) {
  return <p>Hello, {name} さん！</p>
}`,
  }}
  options={{
    showTabs: true,
  }}
/>

実際に動かせるサンプルが以下です。/Greeting.js側の<p>内の文言を書き換えると、/App.jsから読み込まれているコンポーネントの表示もそのまま切り替わります。

options.showTabsをfalseにすると、ファイルタブが非表示になり単一ファイルのように見せられます。逆にfilesにファイルを追加していくほど、タブの数が増えて実際のプロジェクト構成に近づいていきます。

Sandpackで外部npmパッケージを使ったデモを作る

SandpackのcustomSetup.dependenciesを指定すると、任意のnpmパッケージをその場でインポートして動かせます。ライブラリの紹介記事やAPIの使い方を示すデモに最適です。要点は次のとおりです。

<Sandpack
  template="react"
  customSetup={{
    dependencies: {
      'date-fns': '3.6.0',
    },
  }}
  files={{
    '/App.js': `import { format } from 'date-fns'

export default function App() {
  const today = format(new Date(), 'yyyy年MM月dd日')
  return <h1>今日は {today} です</h1>
}`,
  }}
/>

実際に動かせるサンプルが以下です。formatの第2引数を'yyyy/MM/dd(E)'のように書き換えると、日付フォーマットの表示結果がその場で変わります。

customSetup.dependenciesのキーとバージョンを差し替えれば、date-fns以外の任意のnpmパッケージ（例えばlodashやdayjs）に置き換えて同じ要領でデモを作れます。

Sandpackのパーツを個別に組み合わせたカスタムレイアウト

SandpackProviderとSandpackLayout、そして個別のパーツコンポーネント（SandpackCodeEditorやSandpackPreview）を組み合わせることで、標準のSandpackコンポーネントでは実現できない独自レイアウトを作れます。エディタだけを大きく見せたい、プレビューを非表示にしたいといった要望に対応できます。要点は次のとおりです。

<SandpackProvider template="react" files={{ '/App.js': '...' }}>
  <SandpackLayout>
    <SandpackCodeEditor showLineNumbers />
    <SandpackPreview showRefreshButton />
  </SandpackLayout>
</SandpackProvider>

実際に動かせるサンプルが以下です。<h1>の文言を書き換えるとプレビュー側に即反映されるほか、SandpackCodeEditorのshowLineNumbersをfalseにすると行番号表示を消せます。

SandpackLayoutの子要素にはSandpackCodeEditorとSandpackPreview以外にも、SandpackConsole（コンソール表示）やSandpackFileExplorer（ファイルツリー）などが用意されており、必要なパーツだけを選んで並べ替えるだけで独自のUIを組み立てられます。

まとめ

Sandpackを使えば、サーバーを用意することなくブラウザ完結のコード実行環境をReactコンポーネントとして組み込めます。基本のSandpackコンポーネントで手軽に始められる一方、SandpackProviderと個別パーツを組み合わせれば独自のレイアウトも自由に作れる柔軟さが魅力です。

ドキュメントサイトやブログに「動かして試せるコード例」を載せたいなら、まずは小さなサンプルから導入してみてはいかがでしょうか。

参考リンク

• Sandpack公式ドキュメント
• Sandpack GitHub
• @codesandbox/sandpack-react - npm