演習問題にSandpackによる実行環境を追加

docs/1-trial-session/02-html/index.mdx

@@ -2,10 +2,13 @@
 title: HTML
 ---
 
+import { Sandpack } from "@codesandbox/sandpack-react";
 import createFileVideo from "./create-file.mp4";
 import openInBrowserVideo from "./open-in-browser.mp4";
 import showFileExtensionsVideo from "./show-file-extensions.mp4";
 import reloadBrowserVideo from "./reload-browser.mp4";
+import excursionHtml from "!!raw-loader!./_samples/excursion/index.html";
+import formHtml from "!!raw-loader!./_samples/form/index.html";
 
 Web開発に必ず用いられる言語があります。<Term>**HTML**</Term>とCSS、そしてJavaScriptです。これらは互いに異なる役割をもっています。まずは最も基本となる<Term>HTML</Term>から学んでいきましょう。
 
@@ -155,7 +158,15 @@ VS Code上で作成したファイルは`index.html`でした。しかしなが
 </html>
 ```
 
-<ViewSource url={import.meta.url} path="_samples/excursion" />
+<Sandpack
+  template="static"
+  files={{
+    "/index.html": excursionHtml,
+  }}
+  options={{
+    activeFile: "/index.html",
+  }}
+/>
 
 </Answer>
 
@@ -202,6 +213,14 @@ VS Code上で作成したファイルは`index.html`でした。しかしなが
 </html>
 ```
 
-<ViewSource url={import.meta.url} path="_samples/form" />
+<Sandpack
+  template="static"
+  files={{
+    "/index.html": formHtml,
+  }}
+  options={{
+    activeFile: "/index.html",
+  }}
+/>
 
 </Answer>

docs/1-trial-session/03-css/index.mdx

@@ -2,6 +2,14 @@
 title: CSS
 ---
 
+import { Sandpack } from "@codesandbox/sandpack-react";
+import firstCssHtml from "!!raw-loader!./_samples/first-css/index.html";
+import redHelloWorldHtml from "!!raw-loader!./_samples/red-hello-world/index.html";
+import redHelloWorldCss from "!!raw-loader!./_samples/red-hello-world/style.css";
+import yellowHelloCssHtml from "!!raw-loader!./_samples/yellow-hello-css/index.html";
+import yellowHelloCssCss from "!!raw-loader!./_samples/yellow-hello-css/style.css";
+import fooHtml from "!!raw-loader!./_samples/foo/index.html";
+
 この節では、Web開発で用いられるもう一つの言語である、CSSについて学びます。CSSはWebサイトの「見た目」をつかさどる言語です。多くの<Term>HTML要素</Term>は、<Term>CSS</Term>を用いることで、その見た目を細かくカスタマイズすることができます。
 
 ![Web開発で用いられる言語](../02-html/web-development-languages.drawio.svg)
@@ -15,7 +23,15 @@ title: CSS
 <div style="color: red; font-size: 24px;">Hello World!</div>
 ```
 
-<ViewSource url={import.meta.url} path="_samples/first-css" />
+<Sandpack
+  template="static"
+  files={{
+    "/index.html": firstCssHtml,
+  }}
+  options={{
+    activeFile: "/index.html",
+  }}
+/>
 
 ![Hello World!](./red-hello-world.png)
 
@@ -60,7 +76,16 @@ title: CSS
 }
 ```
 
-<ViewSource url={import.meta.url} path="_samples/red-hello-world" />
+<Sandpack
+  template="static"
+  files={{
+    "/index.html": redHelloWorldHtml,
+    "/style.css": redHelloWorldCss,
+  }}
+  options={{
+    activeFile: "/index.html",
+  }}
+/>
 
 ### `link`要素
 
@@ -127,7 +152,16 @@ HTMLファイルとCSSファイルを分けて作成する場合、`style`属性
 
 </Answer>
 
-<ViewSource url={import.meta.url} path="_samples/yellow-hello-css" />
+<Sandpack
+  template="static"
+  files={{
+    "/index.html": yellowHelloCssHtml,
+    "/style.css": yellowHelloCssCss,
+  }}
+  options={{
+    activeFile: "/index.html",
+  }}
+/>
 
 ## 演習問題2
 
@@ -183,6 +217,14 @@ HTMLファイルとCSSファイルを分けて作成する場合、`style`属性
 }
 ```
 
-<ViewSource url={import.meta.url} path="_samples/foo" />
+<Sandpack
+  template="static"
+  files={{
+    "/index.html": fooHtml,
+  }}
+  options={{
+    activeFile: "/index.html",
+  }}
+/>
 
 </Answer>

docs/1-trial-session/06-variables/index.mdx

@@ -2,6 +2,10 @@
 title: 変数
 ---
 
+import { Sandpack } from "@codesandbox/sandpack-react";
+import counterHtml from "!!raw-loader!./_samples/counter/index.html";
+import counterJs from "!!raw-loader!./_samples/counter/script.js";
+
 ## <Term>変数</Term>とは
 
 {/* prettier-ignore */}
@@ -87,8 +91,6 @@ price = price / 2;
 document.write(price);
 ```
 
-<ViewSource url={import.meta.url} path="_samples/compound-assignment" />
-
 {/* prettier-ignore */}
 <Term>代入</Term><Term>演算子</Term>は、まず右辺の<Term>式</Term>を<Term>評価</Term>します。これにより、右辺は`100 / 2`となります。よって、最終的に<Term>変数</Term>`price`の<Term>値</Term>は`50`となり、これは`price`を半分にする操作に対応します。
 
@@ -107,6 +109,15 @@ counter = counter + 1;
 document.write(counter);
 ```
 
-<ViewSource url={import.meta.url} path="_samples/counter" />
+<Sandpack
+  template="static"
+  files={{
+    "/index.html": counterHtml,
+    "/script.js": counterJs,
+  }}
+  options={{
+    activeFile: "/script.js",
+  }}
+/>
 
 </Answer>

docs/1-trial-session/07-boolean/index.mdx

@@ -2,6 +2,10 @@
 title: 論理値と論理演算子
 ---
 
+import { Sandpack } from "@codesandbox/sandpack-react";
+import quizShowHtml from "!!raw-loader!./_samples/quiz-show/index.html";
+import quizShowJs from "!!raw-loader!./_samples/quiz-show/script.js";
+
 ## <Term>論理値</Term>
 
 {/* prettier-ignore */}
@@ -92,8 +96,6 @@ document.write(takaoHeight < everestHeight < fujiHeight);
 document.write(takaoHeight = everestHeight);
 ```
 
-<ViewSource url={import.meta.url} path="_samples/weird-comparison" />
-
 - JavaScript で、数値と論理値に比較<Term>演算子</Term>を適用すると、`true`は`1`として、`false`は`0`として比較されます。
 - `=`は代入演算子です。代入<Term>演算子</Term>の<Term>式</Term>が<Term>評価</Term>されると、右辺の<Term>値</Term>になります。
 
@@ -131,6 +133,15 @@ const isTanakaWinner = tanakaScore >= 100 && tanakaScore - satoScore >= 20;
 document.write(isTanakaWinner); // true
 ```
 
-<ViewSource url={import.meta.url} path="_samples/quiz-show" />
+<Sandpack
+  template="static"
+  files={{
+    "/index.html": quizShowHtml,
+    "/script.js": quizShowJs,
+  }}
+  options={{
+    activeFile: "/script.js",
+  }}
+/>
 
 </Answer>

docs/1-trial-session/08-if-statement/index.mdx

@@ -2,6 +2,10 @@
 title: 条件分岐
 ---
 
+import { Sandpack } from "@codesandbox/sandpack-react";
+import theRightToVoteHtml from "!!raw-loader!./_samples/the-right-to-vote/index.html";
+import theRightToVoteJs from "!!raw-loader!./_samples/the-right-to-vote/script.js";
+
 ## if文
 
 **if文**は、<Term>JavaScript</Term>の<Term>**制御構造**</Term>で、特定の条件下のみで実行されるプログラムを記述することができます。
@@ -100,7 +104,16 @@ if (age < 18) {
 }
 ```
 
-<ViewSource url={import.meta.url} path="_samples/the-right-to-vote" />
+<Sandpack
+  template="static"
+  files={{
+    "/index.html": theRightToVoteHtml,
+    "/script.js": theRightToVoteJs,
+  }}
+  options={{
+    activeFile: "/script.js",
+  }}
+/>
 
 4行目の式は`age >= 18 && age < 25`ではないかと思うかもしれませんが、上のように`age < 25`としても同じ結果になります。これは、if～else if～else構文では、一つ目の条件が満たされた場合、二つ目の条件は実行されないためです。
 

docs/1-trial-session/09-functions/index.mdx

@@ -2,7 +2,14 @@
 title: 関数
 ---
 
+import { Sandpack } from "@codesandbox/sandpack-react";
 import returnValueVideo from "./return-value.mp4";
+import multiplyHtml from "!!raw-loader!./_samples/multiply/index.html";
+import multiplyJs from "!!raw-loader!./_samples/multiply/script.js";
+import maxHtml from "!!raw-loader!./_samples/max/index.html";
+import maxJs from "!!raw-loader!./_samples/max/script.js";
+import mobilePhoneBillHtml from "!!raw-loader!./_samples/mobile-phone-bill/index.html";
+import mobilePhoneBillJs from "!!raw-loader!./_samples/mobile-phone-bill/script.js";
 
 ## 処理の共通化
 
@@ -97,7 +104,16 @@ function multiply(a, b) {
 document.write(multiply(3, 4));
 ```
 
-<ViewSource url={import.meta.url} path="_samples/multiply" />
+<Sandpack
+  template="static"
+  files={{
+    "/index.html": multiplyHtml,
+    "/script.js": multiplyJs,
+  }}
+  options={{
+    activeFile: "/script.js",
+  }}
+/>
 
 </Answer>
 
@@ -187,7 +203,16 @@ function max(a, b) {
 }
 ```
 
-<ViewSource url={import.meta.url} path="_samples/max" />
+<Sandpack
+  template="static"
+  files={{
+    "/index.html": maxHtml,
+    "/script.js": maxJs,
+  }}
+  options={{
+    activeFile: "/script.js",
+  }}
+/>
 
 :::note
 
@@ -202,8 +227,6 @@ function max(a, b) {
 }
 ```
 
-<ViewSource url={import.meta.url} path="_samples/max-no-else" />
-
 :::
 
 </Answer>
@@ -238,6 +261,15 @@ function calculateCost(monthlyDataUsage) {
 document.write(calculateCost(3.5));
 ```
 
-<ViewSource url={import.meta.url} path="_samples/mobile-phone-bill" />
+<Sandpack
+  template="static"
+  files={{
+    "/index.html": mobilePhoneBillHtml,
+    "/script.js": mobilePhoneBillJs,
+  }}
+  options={{
+    activeFile: "/script.js",
+  }}
+/>
 
 </Answer>