「作ったコードをブログ上で実行できないだろうか？」
最近、ふとそんなことを思いました。
同じように考えている人も多いでしょう。
プログラミングを説明するときに、実際に動いたものを見せれると理解しやすいですよね。
僕は、６年間組み込みエンジニアをやったのちに、Web・アプリエンジニアに転向しました（今３年目）。
Web・アプリエンジニアとして勉強する際に、コードを共有「する」のにも「される」のにも「CodeSandbox」が便利だと感じています。
今回は、その「CodeSandbox」の紹介をしていきます。
ブログでコードを簡単に動かせるようになるので、是非この先を読んで試してもらいたいです。
CodeSandboxとは？
CodeSandboxとは、ブラウザ上で動くIDE（統合開発環境）です。
Webページ上でコードを書いて、それをWebページ上で動かすことできます。
個人がコードを作って動かす分にはお金はかかりません。
また、必要なものは、ブラウザのみ（ChromeやSafari、Edgeなど）です。
基本的にネットワークにつながっている現代のPCでブラウザが入っていないのはむしろ珍しいですね。
ブラウザだけあればいいので、
- まず簡単に動かしてみたい
- 動かしたものを誰かに共有したい
というときに、ぴったりのサービスです。
ただ、使えるプログラミング言語は限られていて、Web系の言語になります。
React, Vue, Angular, Preact, Svelte, Dojo, CX, Reason,
C言語、C++言語、Python
では、実際に動かしてみましょう。
実際にサンプルコードをブログ上で動かしてみる
CodeSandboxでコードを作成
まずは、CodeSandboxのサイトを開きます。
右上の「Create SandBox」ボタンをクリックします。
テンプレートを選べる画面がでてくるので、好きな言語を選んでください。
今回は「React」を選択しました。
テンプレートを選択すると、簡単なサンプルが動かすのに必要なファイルが生成されたプロジェクトが表示されます。
今回は、このサンプルコードのままこのブログに表示していきます。
実際は、ソースファイルやフォルダを追加して、オリジナルなプロジェクトを作っていくことができます。
もちろん、パッケージを追加することもできます。
npmやyarnで追加するのではなく、左下にあるDependenciesにパッケージ名を入力することで、新たにパッケージを追加することができます。
では、サンプルコードをブログに表示するために、HTMLコードを取得していきましょう。
作成したコードをブログに埋め込む用のHTMLを取得
「Share」ボタンをクリックすることで、共有することができます。
続いて、出てきた画面の「Embed」をクリックします。
（メールや「Copy Sandbox Link」でこのページ自体を共有することもできます。）
「Copy Embed Code」をクリックすると、ブログで表示するためのHTMLコードを取得することができます。
「Copy Embed Code」ボタンの上に見える
<iframe src= ・・・が実際のコードです。
最後に取得したコードをブログに埋め込んでいきましょう。
取得したHTMLをブログに埋め込んで表示
このブログ自体は
「WordPress＋Affinger6」
で作成されています。
（WordPressテーマ 「ACTION（AFFINGER6）」に興味がある方はこちら）なので、Affinger6に沿った説明になりますが、他のテーマでも同じような手順で表示できると思います。
もちろん、HTMLから自分で書いているならば、そのまま取得したコードを貼り付けてもらえれば表示されます。
では、埋め込んでいきます。
Affinger6だと「カスタムHTML」というブロックがあります。
そちらを選択します。
HTMLを入力できる画面が出てくるので、そちらに先ほど取得したHTMLコードを入力します。
このHTMLした結果がこちらです。
左手にソースコード、右手に実行結果が表示されます。
この場で、左手のソースコードを変更しても、右手の実行結果に反映されます。
まとめ：CodeSandboxでどんどんコードを公開しましょう
簡単にコードの共有ができましたね。
実際に動いたコードを共有することで、相手にも伝わり易いです。
また、プログラマーだと、新しい技術に触れる機会が多いと思います。
アウトプットすることで、自分の知識や備忘録になります。
是非、CodeSandboxを使ってコードを公開していきましょう。