ut-code · Yokomi422 · Oct 25, 2025 · Nov 15, 2025 · Nov 22, 2025 · Nov 22, 2025
diff --git a/docs/1-trial-session/02-html/index.mdx b/docs/1-trial-session/02-html/index.mdx
@@ -6,6 +6,8 @@ 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 +157,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 +212,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>
diff --git a/...sion/03-css/_samples/first-css/index.html → ...on/03-css/_samples/first-class/index.html b/...sion/03-css/_samples/first-css/index.html → ...on/03-css/_samples/first-class/index.html
diff --git a/docs/1-trial-session/03-css/_samples/foo/index.html b/docs/1-trial-session/03-css/_samples/foo/index.html
@@ -2,19 +2,10 @@
 <html lang="ja">
   <head>
     <meta charset="utf-8" />
+    <link rel="stylesheet" href="./style.css" />
     <title>Title</title>
   </head>
   <body>
-    <div
-      style="
-        border: 1px solid #aaa;
-        border-radius: 10px;
-        margin: 30px;
-        padding: 30px;
-        box-shadow: 0px 0px 2px 1px #aaa;
-      "
-    >
-      Foo
-    </div>
+    <div id="foo">Foo</div>
   </body>
 </html>
diff --git a/docs/1-trial-session/03-css/_samples/foo/style.css b/docs/1-trial-session/03-css/_samples/foo/style.css
@@ -0,0 +1,7 @@
+#foo {
+  border: 1px solid #aaa;
+  border-radius: 10px;
+  margin: 30px;
+  padding: 30px;
+  box-shadow: 0px 0px 2px 1px #aaa;
+}
diff --git a/docs/1-trial-session/03-css/_samples/red-hello-world/index.html b/docs/1-trial-session/03-css/_samples/red-hello-world/index.html
diff --git a/docs/1-trial-session/03-css/_samples/red-hello-world/style.css b/docs/1-trial-session/03-css/_samples/red-hello-world/style.css
diff --git a/docs/1-trial-session/03-css/index.mdx b/docs/1-trial-session/03-css/index.mdx
@@ -2,6 +2,11 @@
 title: 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";
+import fooCss from "!!raw-loader!./_samples/foo/style.css";
+
 この節では、Web開発で用いられるもう一つの言語である、CSSについて学びます。CSSはWebサイトの「見た目」をつかさどる言語です。多くの<Term>HTML要素</Term>は、<Term>CSS</Term>を用いることで、その見た目を細かくカスタマイズすることができます。
 
 ![Web開発で用いられる言語](../02-html/web-development-languages.drawio.svg)
@@ -15,8 +20,6 @@ title: CSS
 <div style="color: red; font-size: 24px;">Hello World!</div>
 ```
 
-<ViewSource url={import.meta.url} path="_samples/first-css" />
-
 ![Hello World!](./red-hello-world.png)
 
 {/* prettier-ignore */}
@@ -60,8 +63,6 @@ title: CSS
 }
 ```
 
-<ViewSource url={import.meta.url} path="_samples/red-hello-world" />
-
 ### `link`要素
 
 ```html title="index.html"
@@ -125,10 +126,18 @@ HTMLファイルとCSSファイルを分けて作成する場合、`style`属性
 </html>
 ```
 
+<Sandpack
+  template="static"
+  files={{
+    "/index.html": yellowHelloCssHtml,
+    "/style.css": yellowHelloCssCss,
+  }}
+  options={{
+    activeFile: "/style.css",
+  }}
+/>
 </Answer>
 
-<ViewSource url={import.meta.url} path="_samples/yellow-hello-css" />
-
 ## 演習問題2
 
 次のような条件を満たす要素を選択するセレクタは何でしょうか。
@@ -183,6 +192,15 @@ HTMLファイルとCSSファイルを分けて作成する場合、`style`属性
 }
 ```
 
-<ViewSource url={import.meta.url} path="_samples/foo" />
+<Sandpack
+  template="static"
+  files={{
+    "/index.html": fooHtml,
+    "/style.css": fooCss,
+  }}
+  options={{
+    activeFile: "/style.css",
+  }}
+/>
 
 </Answer>
diff --git a/docs/1-trial-session/06-variables/index.mdx b/docs/1-trial-session/06-variables/index.mdx
@@ -2,6 +2,9 @@
 title: 変数
 ---
 
+import counterHtml from "!!raw-loader!./_samples/counter/index.html";
+import counterJs from "!!raw-loader!./_samples/counter/script.js";
+
 ## <Term>変数</Term>とは
 
 {/* prettier-ignore */}
@@ -107,6 +110,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>
diff --git a/docs/1-trial-session/07-boolean/index.mdx b/docs/1-trial-session/07-boolean/index.mdx
@@ -2,6 +2,9 @@
 title: 論理値と論理演算子
 ---
 
+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,11 +95,11 @@ 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>になります。
 
+<ViewSource url={import.meta.url} path="_samples/weird-comparison" />
+
 :::
 
 ## 演習問題
@@ -131,6 +134,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>
diff --git a/docs/1-trial-session/08-if-statement/index.mdx b/docs/1-trial-session/08-if-statement/index.mdx
@@ -2,6 +2,9 @@
 title: 条件分岐
 ---
 
+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 +103,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構文では、一つ目の条件が満たされた場合、二つ目の条件は実行されないためです。
 

diff --git a/...functions/_samples/max-no-else/index.html → ...-session/09-functions/_samples/index.html b/...functions/_samples/max-no-else/index.html → ...-session/09-functions/_samples/index.html
diff --git a/...-functions/_samples/max-no-else/script.js → ...l-session/09-functions/_samples/script.js b/...-functions/_samples/max-no-else/script.js → ...l-session/09-functions/_samples/script.js
diff --git a/docs/1-trial-session/09-functions/index.mdx b/docs/1-trial-session/09-functions/index.mdx
@@ -3,6 +3,12 @@ title: 関数
 ---
 
 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 +103,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 +202,18 @@ function max(a, b) {
 }
 ```
 
-<ViewSource url={import.meta.url} path="_samples/max" />
+<ViewSource url={import.meta.url} path="_samples/max-no-else" />
+
+<Sandpack
+  template="static"
+  files={{
+    "/index.html": maxHtml,
+    "/script.js": maxJs,
+  }}
+  options={{
+    activeFile: "/script.js",
+  }}
+/>
 
 :::note
 
@@ -202,8 +228,6 @@ function max(a, b) {
 }
 ```
 
-<ViewSource url={import.meta.url} path="_samples/max-no-else" />
-
 :::
 
 </Answer>
@@ -238,6 +262,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>
diff --git a/...n/10-loop/_samples/nested-loop/index.html → ...trial-session/10-loop/_samples/index.html b/...n/10-loop/_samples/nested-loop/index.html → ...trial-session/10-loop/_samples/index.html
diff --git a/...on/10-loop/_samples/nested-loop/script.js → ...-trial-session/10-loop/_samples/script.js b/...on/10-loop/_samples/nested-loop/script.js → ...-trial-session/10-loop/_samples/script.js