はじめに
ドキュメントサイトやブログで「このコード、実際に動かして試してみたい」と思った経験はありませんか。かといって、コード実行環境を自前で作るのは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コンポーネントにtemplateを渡すだけです。これだけでエディタとプレビューが表示されます。
filesにファイルパスとソースコードを渡すだけで、エディタとライブプレビューが即座に構築されます。デフォルトでは編集した内容がリアルタイムでプレビューに反映されます。
実践的なユースケース
Sandpackは組み立て方次第で様々な用途に対応できます。ここでは代表的な3つのパターンを紹介します。
複数ファイル構成のプレイグラウンド
コンポーネントを複数ファイルに分割したサンプルを見せたい場合、filesオブジェクトに複数のパスを渡すことで、ファイルタブ付きのエディタを構築できます。ドキュメントで「実際のプロジェクト構成」を見せたいときに便利です。
外部npmパッケージを使ったデモ
customSetup.dependenciesを指定すると、任意のnpmパッケージをその場でインポートして動かせます。ライブラリの紹介記事やAPIの使い方を示すデモに最適です。
パーツを個別に組み合わせたカスタムレイアウト
SandpackProviderとSandpackLayout、そして個別のパーツコンポーネント（SandpackCodeEditorやSandpackPreview）を組み合わせることで、標準のSandpackコンポーネントでは実現できない独自レイアウトを作れます。エディタだけを大きく見せたい、プレビューを非表示にしたいといった要望に対応できます。
まとめ
Sandpackを使えば、サーバーを用意することなくブラウザ完結のコード実行環境をReactコンポーネントとして組み込めます。基本のSandpackコンポーネントで手軽に始められる一方、SandpackProviderと個別パーツを組み合わせれば独自のレイアウトも自由に作れる柔軟さが魅力です。
ドキュメントサイトやブログに「動かして試せるコード例」を載せたいなら、まずは小さなサンプルから導入してみてはいかがでしょうか。