SandPack React で動的コード プレイグラウンドを作成しましょう!

この記事では、CodeSandbox による人気のプレイグラウンド フレームワークである SandPack について調査し、それを使用してユーザーにとってより動的でインタラクティブな環境を作成する方法について説明します。

この記事では、SandPack について知っておくべき基本的な事項のほぼすべてを説明します。ただし、フックやカスタム コンポーネントなどのより高度な機能やクールなカスタマイズ オプションについては、私のブログで詳しく説明しています。

この記事の詳細版をご覧ください

---

サンドパックとは

SandPack は、ブログや技術ドキュメント用のライブ コード エディターを構築するためのコンポーネント ツールキットです。この記事では、軽量の JavaScript バンドラーである Sandpack-client ではなく、sandpack-react に焦点を当てます。

SandPack を際立たせているのは、利用可能な幅広いカスタマイズ オプションです。さらに、始めるのはとても簡単です。 Sandpack-react の最も便利な機能は次のとおりです:

• 一般的な言語とフレームワーク用の事前に構築されたテンプレート
• エディター用の多数の事前構築済みテーマと、カスタム テーマを作成するオプション。
• すべての npm 依存関係と主要な JavaScript フレームワークのサポート。
• UI とプレイグラウンドのほぼすべての側面をカスタマイズするオプション。
• 事前構築されたコンポーザブル コンポーネントを使用して、完全にカスタムのプレイグラウンドを作成できます。
• プロバイダーとカスタム フックを使用してカスタム コンポーネントを作成できます。

---

ザ プレイグラウンドの概要

sandpack-react を開始するには、次の npm または Yarn コマンドを実行します。

npm i @codesandbox/sandpack-react

または
糸追加 @codesandbox/sandpack-react

次に、Sandpack プレイグラウンドをインポートし、次のコードを使用してレンダリングします。

import { Sandpack } from "@codesandbox/sandpack-react";

export default function App() {
  return <Sandpack />
}

<サンドパック />コンポーネントは、すぐに参加できる空のプレイグラウンドを設定します。デフォルトでは、プレイグラウンドには基本的な React テンプレートが含まれています。テンプレートやテーマなどをカスタマイズするための基本的な小道具を見てみましょう:

• template: このプロパティは、テンプレートの事前定義されたリストを受け入れます。デフォルトではバニラが設定されています。
• files: これは非常に便利なプロパティです。通常のフォルダー構造と同様に、カスタム コードを使用して複数のファイルを作成できます。ファイル オブジェクトには、値 (相対ファイル パス) とキー (ファイルの内容) が含まれます。このオブジェクト内のファイルはタブにも自動的に表示されます。
• options: options オブジェクトを使用して、いくつかの機能をカスタマイズできます。完全なリストはここでご覧いただけます。最も役立つものには次のようなものがあります。
  • showLineNumbers: 行番号の表示を切り替えます。
  • showTabs: タブの表示/非表示を切り替えます。
  • クラス: 既存のテンプレート クラスにカスタム クラス名を割り当てて、さらにカスタマイズできます。
• 依存関係: 依存関係オブジェクトには、アプリに必要な任意の NPM パッケージを含めることができます。形式と構文は package.json ファイルの形式と構文に似ています。
• テーマ: 事前に構築されたテーマを選択するか、完全にカスタムのテーマを割り当てることができます。

PlayGround のカスタマイズ

私たちのスタイルに合うようにデフォルトのプレイグラウンドを微調整し、試してみる楽しいサンプルを作成しましょう。サイトのテーマに合わせてエディターをカスタマイズすると、エディターがシームレスに溶け込み、サードパーティ製の埋め込みのように感じられなくなります。まず、files プロップを使用して、単純なカウンター ボタンを作成しましょう。 App.js ファイルの他に、App.css ファイルも作成します。

以下の例とコードを見てください:

この例では、カウンター コンポーネントがプレイグラウンドにレンダリングされます。ファイル オブジェクトには、App.js と App.css の両方のコードが含まれています。前述の事前構築済みリストからテーマを選択し、サンドパック テーマをソースとして、スタイルのタッチを追加しました。行番号も true に設定されています。

さらに、遊び場のレイアウトを簡単にカスタマイズできます。これは、カスタム クラスを適用するか、SandPack が提供する事前構築されたオプションを利用することで実行できます。たとえば、次のようなカスタム クラスを使用できます:

import { Sandpack } from "@codesandbox/sandpack-react";

export default function App() {
  return <Sandpack />
}

その後、CSS を使用して外観とレイアウトを調整し、視覚的なデザインをさらに細かく制御できるようになります。

もう 1 つの便利な機能は、異なるレイアウト モードを切り替える機能です。 SandPack には、プレビュー、テスト、コンソールの 3 つのモードが用意されています。デフォルトのモードはプレビューですが、テスト モードはテストを実行するためのスイートを提供し、コンソール モードはプレビュー ウィンドウの代わりに端末/コンソール コンポーネントをレンダリングします。コンソール モードは、サーバー側ロジックの出力を表示するのに役立ちます。 rtl (右から左へのレイアウト) オプションを使用してレイアウトの方向を切り替えることもできます。

出力のカスタマイズ

エディタ自体に加えて、出力表示もカスタマイズできます。たとえば、コンソールの表示または非表示を選択したり、レイアウトを変更したり、プレビュー ウィンドウの外観を変更したりすることもできます。かなりクールですよね！コード エディターには、大幅にカスタマイズされた編集ウィンドウがあることがよくありますが、実際の出力にはそれほど注意が払われません。

コンソールには、あらゆる種類のエラーとコンソール ログが表示されます。表示されるコード スニペットの種類に応じて、コンソールを表示または非表示にする必要があります。 [コンソールを表示] ボタンの表示/非表示を切り替えることもできます。デフォルトでは、コンソールは非表示になっています。すべての SandPack コンポーネントと同様、カスタム CSS クラスを使用してスタイルを個別に変更できます。

import { Sandpack } from "@codesandbox/sandpack-react";

export default function App() {
  return <Sandpack />
}

コンソールの他に、表示ウィンドウ自体もカスタマイズできます。たとえば、showNavigator オプションを使用してナビゲータ バーをオンまたはオフにし、resizablePanels オプションを使用してパネルのサイズを変更できるかどうかを決定できます。

<Sandpack
  theme={theme}
  template="react"
  options={{
    classes: {
      "sp-wrapper": "custom-wrapper",
      "sp-layout": "custom-layout",
      "sp-tab-button": "custom-tab",
    },
  }}
/>

結果は次のようになります:

結論

Sandpack は使いやすいだけでなく、非常にカスタマイズ可能です。これにより、ブログ、ドキュメント、またはライブ コード編集によって価値が追加されるプラットフォームに最適な選択肢となり、同時に開発者がサイトに基づいてコードをカスタマイズできるようになります。

---

この記事の詳細版はここで確認できます

読んでいただきありがとうございます!

以上がSandPack React で動的コード プレイグラウンドを作成しましょう!の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。