<h2 id="codesandbox-(%E3%82%B3%E3%83%BC%E3%83%89%E3%83%BB%E3%82%B5%E3%83%B3%E3%83%89%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9)%E3%81%A8%E3%81%AF">CodeSandbox (コード・サンドボックス)とは</h2>
<p>CodeSandbox は Web アプリケーション開発のためのオンラインエディターです。<br>
Web ブラウザの上ですばやくプロトタイプを作成し、簡単に実験を行い、ワンクリックで共有できます。</p>


はじめに

<p>CodeSandbox の基本的な使い方を紹介します。</p>
<h2 id="%E7%94%BB%E9%9D%A2%E3%81%AE%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88">画面のレイアウト</h2>
<p><img src="https://i.gyazo.com/2dedff98cf5997e6582242e42f1401fd.png" alt="area" loading="lazy"></p>
<p>画面の左側のエリアから編集するファイルの選択などを行うことができます。</p>
<p>中央の大きなエリアがファイルを編集するところです。プログラムを書き換えることができます。</p>
<p>左側のエリアがプレビューです。ブラウザーでの表示を実際に確認できます。実際のブラウザーの画面で表示を確認するには、プレビューのエリアの右上の[Open In New Window]ボタンを選択します。</p>
<p><img src="https://i.gyazo.com/44c66d294361d40bd6109ed94fc8b0f0.png" alt="open-in-new-window" loading="lazy"></p>
<h2 id="%E3%82%B5%E3%82%A4%E3%83%B3%E3%82%A4%E3%83%B3">サインイン</h2>
<p>CodeSandbox は GitHub アカウントでサインインします。制限なく自分のサンドボックスを保存・作成できるようになります。</p>
<div class="msg ">
<p>GitHub は世界中のコードをホスティングしているサービスです。サインインすることによって CodeSandbox で作成したプログラムを GitHub で公開できます。</p>
</div>
<p><img src="https://i.gyazo.com/6253559e46d4dddc718d8d0d9c52a62a.png" alt="signin" loading="lazy"></p>
<h2 id="%E4%BF%9D%E5%AD%98">保存</h2>
<p>書き換えたファイルを保存するには、左上のメニューバーから、[File] → [Save] を選択します。</p>
<div class="msg alert">
<p>保存すると自動的にインターネットに公開されます。秘密の情報を書かないようにしましょう。</p>
</div>
<p><img src="https://i.imgur.com/5ipA65C.png" alt="menu" loading="lazy"></p>
<div class="msg ">
<p>(PC の場合) ショートカットキー <code>Ctrl</code>+<code>S</code> で保存できます。</p>
</div>
<p>保存すると開いているファイルのタブの見た目が変わり、表示結果も自動的に更新されます。</p>
<p><img src="https://i.imgur.com/cScnE7L.png" alt="on-save" loading="lazy"></p>
<h2 id="%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E4%BD%9C%E6%88%90">ファイルの作成</h2>
<p>新しいファイルを追加するには、ファイルの一覧の部分の右上にある[New File]ボタンを選択します。</p>
<p><img src="https://i.imgur.com/b5LF4Fg.png" alt="newfile" loading="lazy"></p>
<p>作成したファイルは、画面上からファイル名の変更や削除を行えます。</p>
<p><img src="https://i.imgur.com/WU3GwtD.png" alt="deletefile" loading="lazy"></p>
<h2 id="%E6%A9%9F%E8%83%BD">機能</h2>
<p>他にも CodeSandbox には Web アプリケーション開発に便利な機能があります。左端のアクティビティバーの中からいくつか機能を説明します。</p>
<p><img src="https://i.imgur.com/aqCK6jO.png" alt="activitybar" loading="lazy"></p>
<p>ファイル一覧</p>
<p>: ファイルの選択や追加・削除を行います。</p>
<p>設定</p>
<p>: このサンドボックスの設定の変更を行います。</p>
<p>GitHub 連携</p>
<p>: GitHub リポジトリとの連携を行います。コミットや PR (Pull Request)を作成できます。</p>
<p>Live</p>
<p>: 共同編集の設定を行います。共同編集するための URL を知ることができます。</p>


基本的な使い方

<p>サンドボックスを GitHub リポジトリと同期したり、サンドボックスからフォークして Pull Request を作成できます。</p>
<h2 id="github-%E3%81%8B%E3%82%89%E3%82%A4%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%88">GitHub からインポート</h2>
<p>GitHub のリポジトリを元にしてサンドボックスにインポートできます。<br>
<a href="https://codesandbox.io/s/" rel="nofollow">サンドボックスの作成ウィザード</a>から、[Import Project]を選択し、インポートしたい GitHub リポジトリの URL を貼り付け、[Import and Fork]を選択します。</p>
<p><img src="https://i.gyazo.com/199b75a0ef972b50793a34a6c10d5e0d.png" alt="import-from-github" loading="lazy"></p>
<p>ブランチやサブディレクトリもサポートしており、対応する URL を指定することでインポート可能です。</p>
<h3 id="%E5%88%A5%E3%81%AE%E6%96%B9%E6%B3%95%3A-githubbox.com-%E3%82%92%E4%BD%BF%E3%81%86">別の方法: GitHubBox.com を使う</h3>
<p>GitHubBox.com を使うことでブラウザーのアドレスバーから簡単にインポートすることもできます。<br>
インポートしたい GitHub リポジトリの URL のホスト名 <code>github.com</code> を <code>githubbox.com</code> に書き換えます。<br>
たとえば、このサイトの GitHub リポジトリ (<code>https://github.com/csb-jp/csb-jp.github.io</code>)をインポートするには、URL <a href="https://githubbox.com/csb-jp/csb-jp.github.io" rel="nofollow">https://githubbox.com/csb-jp/csb-jp.github.io</a> にアクセスします。</p>
<h2 id="%E3%83%AA%E3%83%9D%E3%82%B8%E3%83%88%E3%83%AA%E3%81%AE%E4%BD%9C%E6%88%90">リポジトリの作成</h2>
<div class="msg ">
<p>サインインが必要です。</p>
</div>
<p>サンドボックスを GitHub リポジトリとして書き出せます。<br>
画面左端のアクティビティバーの中から[GitHub]を選択します。</p>
<p><img src="https://i.gyazo.com/bdcd5e1c9701aa6412dc787a0543d74d.png" alt="activitybar-github" loading="lazy"></p>
<p>[Export to new GitHub repository] ペインの中で新しいリポジトリの名前を入力し、[Create new repository on GitHub] を選択すると、新しい GitHub リポジトリへの書き出しが開始されます。</p>
<p><img src="https://i.gyazo.com/114a6615162e3bffe711df9664d9f7db.png" alt="new-repo" loading="lazy"></p>
<p>成功すると、GitHub リポジトリ <code>https://github.com/{自分の GitHub アカウント名}/{入力したリポジトリ名}</code> が作成されます。</p>
<div class="msg ">
<p>"Unable to create the repo. Please refresh and try again or report issue." と通知され、書き出しに失敗した場合、GitHub リポジトリ側を操作して手動で片付けましょう。</p>
</div>
<h2 id="%E3%83%AA%E3%83%9D%E3%82%B8%E3%83%88%E3%83%AA%E3%81%A8%E3%81%AE%E7%B4%90%E3%81%A5%E3%81%91">リポジトリとの紐づけ</h2>
<div class="msg ">
<p>サインインが必要です。</p>
</div>
<p>サンドボックスを GitHub リポジトリと紐づけます。<br>
[Link to GitHub repository] ペインの中の [Link Sandbox] を選択します。</p>
<p><img src="https://i.gyazo.com/722f4e40161ab4e0989a0df224d7b0f0.png" alt="link-to-github" loading="lazy"></p>
<h2 id="pull-request">Pull Request</h2>
<div class="msg ">
<p>サインインが必要です。</p>
</div>
<p>紐づく GitHub リポジトリへの Pull Request を作成できます。</p>
<h3 id="%E3%82%B3%E3%83%9F%E3%83%83%E3%83%88">コミット</h3>
<p>コミットしたいファイルの変更を保存したら、[Changes] ペインの中の [Summary (required)] に変更内容の概要を入力します。</p>
<p><img src="https://i.gyazo.com/10cc7cffec0c7048d4e38890d316b226.png" alt="commit-changes" loading="lazy"></p>
<p>「ブランチを作成し PR を開始する ("Create branch csb-* for the commit and start a PR")」を選択し [Commit changes] を選択すると変更内容のコミットの含まれるブランチが作られ Pull Request が作成されます。</p>


GitHub 連携

<p>リアルタイムにサンドボックスを共有し共同編集を行うことができます。</p>
<div class="msg ">
<p>サインインが必要です。サインインされていない場合、事前にサインインしましょう。</p>
</div>
<h2 id="%E5%85%B1%E6%9C%89%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%AE%E5%8F%96%E5%BE%97">共有リンクの取得</h2>
<p>Live はデフォルトで有効です。共有するためのリンクを取得する方法を説明します。<br>
画面左端のアクティビティバーの中から[Live]を選択します。</p>
<p><img src="https://i.imgur.com/gnSa9R4.png" alt="activitybar" loading="lazy"></p>
<p>[Live]ペインの中を見ると、誰かを招待するための共有リンクが表示されます。<br>
招待するには共有リンクを選択しコピーして、共同編集したい相手に伝えます。</p>
<p><img src="https://i.imgur.com/PCQVQEX.png" alt="live" loading="lazy"></p>
<div class="msg ">
<p>PC の場合、選択範囲をコピーするにはショートカットキー <code>Ctrl</code>+<code>C</code></p>
</div>
<h2 id="%E5%85%B1%E5%90%8C%E7%B7%A8%E9%9B%86%E3%82%92%E8%A1%8C%E3%81%86">共同編集を行う</h2>
<div class="msg ">
<p>共同編集を行う相手もサインインが必要です。</p>
</div>
<p>Live Mode に応じて相手のできることが異なります。共有リンクを知っている人が誰でも編集ができるようにするには、[Live Mode]のペインの中のドロップダウンメニューの中から、[Everyone can edit]を選択します。</p>
<p><img src="https://i.imgur.com/0yJ8rEH.png" alt="live-mode" loading="lazy"></p>
<p>招待されると、相手は、ファイル、コードの編集、作成、名前の変更、更新、依存関係の追加と削除を共同で行うことができます。また、お互いに見ているファイルや現在の選択内容を確認することもできます。</p>
<h2 id="%E4%B8%AD%E6%96%AD">中断</h2>
<p>Live を中断するには、[■ Stop Session]ボタンを押します。</p>
<h2 id="live-mode">Live Mode</h2>
<p>相手との編集権限を設定を変更するペインです。</p>
<p>誰でも編集</p>
<p>: Everyone can edit<br>
共有リンクを知っている相手なら誰でも編集できます。</p>
<p>相手に応じた編集権限の制御</p>
<p>: Classroom mode<br>
許可した相手のみ編集を行えます。編集が許可された相手は[Editors]ペインに表示されます。[Viewers]ペインの中のユーザー名の隣にある[+]ボタンを押すとそのユーザーによる編集が許可されます。</p>
<h2 id="preferences-(%E8%A8%AD%E5%AE%9A)">Preferences (設定)</h2>
<p>共同編集の際に便利な機能の設定のためのペインです。</p>
<p>チャット</p>
<p>: Chat enabled<br>
チャット機能の有効化を行います。</p>
<p>通知</p>
<p>: Show notifications<br>
通知機能の有効化を行います。</p>


Live (共同編集)

<p>サンドボックスの設定方法とそれぞれのオプションを説明します。</p>
<h2 id="package.json">package.json</h2>
<p>パッケージに必要なモジュールの管理などの設定を行います。詳しくは<a href="https://docs.npmjs.com/files/package.json" rel="nofollow">npm 公式の package.json のドキュメント</a>を参照してください。</p>
<h2 id="sandbox.config.json">sandbox.config.json</h2>
<p>サンドボックスの設定は sandbox.config.json ファイルの内容を変更することで行います。左端のアクティビティの中から[Configuration Files]→[sandbox.config.json]→[Create]または[Edit]選択すると sandbox.config.json の内容を変更できます</p>
<p>Infinite Loop Protection</p>
<p>: <code>infiniteLoopProtection</code><br>
無限ループを検知したとき実行を停止するかどうか設定します。(デフォルト: <code>false</code> 停止しない)</p>
<div class="msg ">
<p>無限ループを動作したい場合は<code>true</code>に設定しましょう。</p>
</div>
<p>Hard Reload on Change</p>
<p>: <code>hardReloadOnChange</code><br>
ファイルを変更するたび強制的にリロードするかどうか設定します。(デフォルト: <code>false</code> 強制的なリロードをしない)</p>
<div class="msg ">
<p><code>setInterval()</code>などグローバルな状態を扱う際は<code>true</code>に設定しましょう。</p>
</div>
<p>Template</p>
<p>: <a href="https://github.com/codesandbox/codesandbox-importers/blob/2ef3155b84a056e808c146485def6016d43a7318/packages/types/index.d.ts#L34-L59" rel="nofollow"><code>template</code></a><br>
選択したテンプレートを使用します。(<code>static</code> 静的ファイル、<code>node</code> Node.js コンテナー環境)</p>
<h2 id=".prettierrc">.prettierrc</h2>
<p>コードの自動整形の設定を行います。詳しくは<a href="https://prettier.io/docs/en/configuration.html" rel="nofollow">Prettier の設定ファイルのドキュメント</a>を参照してください。</p>
<h2 id="netlify.toml">netlify.toml</h2>
<div class="msg alert">
<p>デプロイに関する設定です。</p>
</div>
<p>Netlify へのデプロイに関わる設定ファイルです。詳しくは<a href="https://docs.netlify.com/configure-builds/file-based-configuration/" rel="nofollow">Netlify の設定ファイルのドキュメント</a>を参照してください。</p>
<h2 id="now.json-(vercel.json)">now.json (vercel.json)</h2>
<div class="msg alert">
<p>デプロイに関する設定です。</p>
</div>
<p>Vercel へのデプロイに関わる設定ファイルです。詳しくは<a href="https://vercel.com/docs/configuration" rel="nofollow">Vercel の設定ファイルのドキュメント</a>を参照してください。</p>


設定

<p>実行環境は大きく分けて「クライアント」と「コンテナー」の 2 つがあります。<br>
「クライアント」は静的ファイルや React、Vue などフロントエンド向けの開発環境です。サーバー側で Node.js のプログラムを動的に実行することはできませんが、すばやくプロトタイプ作成に取り組むことができます。多くのテンプレートが通常こちらの環境です。<br>
一方「コンテナー」は Node.js のアプリケーションを実行可能なバックエンド向けの開発可能な環境です。サーバー側で Node.js のプログラムを動的に実行する場合に使います。</p>
<div class="msg ">
<p>現在コンテナー環境はベータ版です。コンテナー環境のサンドボックスを作成するためにはサインインする必要あります。</p>
</div>
<h2 id="%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3%E3%83%88">クライアント</h2>
<p><a href="https://github.com/codesandbox/codesandbox-templates/tree/461d9ba5861030d59b3aa72c5e564dcc89722e8b/packages/client" rel="nofollow">CodeSandbox 公式のクライアント環境のテンプレート一覧</a></p>
<h2 id="%E3%82%B3%E3%83%B3%E3%83%86%E3%83%8A%E3%83%BC">コンテナー</h2>
<p><a href="https://github.com/codesandbox/codesandbox-templates/tree/461d9ba5861030d59b3aa72c5e564dcc89722e8b/packages/container" rel="nofollow">CodeSandbox 公式のコンテナー環境のテンプレート一覧</a></p>


環境

<p>画像や音声などのテキスト以外のファイルをアップロードする方法を説明します。左側のファイル一覧のエリアにある[Upload Files]ボタンを選択し、アップロードするファイルを選択します。</p>
<p><img src="https://i.imgur.com/UdiaYG6.png" alt="uploadfile" loading="lazy"></p>
<h2 id="%E5%88%B6%E7%B4%84%E4%BA%8B%E9%A0%85">制約事項</h2>
<p>アップロードできるファイルのサイズは<a href="https://codesandbox.io/docs/uploading#static-file-uploading:~:text=As%20a%20patron%20you%20are%20allowed%20to%20upload%20a%20maximum%20of%20500MB%2C%20otherwise%20you%20are%20able%20to%20upload%2020MB." rel="nofollow">通常 20MB まで</a>です。</p>


静的ファイルのアップロード

<h2 id="%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E4%BF%9D%E5%AD%98%E3%81%99%E3%82%8B%E3%81%A8%E3%81%8D%E3%81%AE%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%83%E3%83%88%E3%82%92%E7%84%A1%E5%8A%B9%E5%8C%96%E3%81%97%E3%81%9F%E3%81%84">ファイルの保存するときのフォーマットを無効化したい</h2>
<div class="msg ">
<p>Prettier の設定は <a href="../configuration.md#prettierrc" rel="nofollow">.prettierrc</a> によって行います。</p>
</div>
<p><code>Ctrl</code>+<code>,</code> で Settings を開き "Editor: Format on Save" を検索して、ファイルを保存するときのフォーマットするか否かを選択します。</p>


よくある質問

<ul>
<li><a href="https://codesandbox.io/docs" rel="nofollow">CodeSandbox 公式ドキュメント</a></li>
<li><a href="https://docs.npmjs.com/" rel="nofollow">npm の公式ドキュメント</a></li>
<li><a href="https://prettier.io/docs/en/index.html" rel="nofollow">Prettier の公式ドキュメント</a></li>
</ul>


この本は非公開になっているか、URLが間違っている可能性があります。