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/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/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)
@@ -125,10 +130,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 +196,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 */}
@@ -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/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,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
 
@@ -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/docs/1-trial-session/10-loop/index.mdx b/docs/1-trial-session/10-loop/index.mdx
@@ -3,6 +3,14 @@ title: 繰り返し
 ---
 
 import whileLoopVideo from "./while-loop.mp4";
+import answerForHtml from "!!raw-loader!./_samples/answer-for/index.html";
+import answerForJs from "!!raw-loader!./_samples/answer-for/script.js";
+import productHtml from "!!raw-loader!./_samples/product/index.html";
+import productJs from "!!raw-loader!./_samples/product/script.js";
+import productAltHtml from "!!raw-loader!./_samples/product-alt/index.html";
+import productAltJs from "!!raw-loader!./_samples/product-alt/script.js";
+import isPrimeHtml from "!!raw-loader!./_samples/is-prime/index.html";
+import isPrimeJs from "!!raw-loader!./_samples/is-prime/script.js";
 
 ## while文
 
@@ -102,7 +110,16 @@ for (let i = 1; i <= 10; i += 1) {
 document.write(sum);
 ```
 
-<ViewSource url={import.meta.url} path="_samples/answer-for" />
+<Sandpack
+  template="static"
+  files={{
+    "/index.html": answerForHtml,
+    "/script.js": answerForJs,
+  }}
+  options={{
+    activeFile: "/script.js",
+  }}
+/>
 
 </Answer>
 
@@ -149,7 +166,16 @@ for (let i = 1; i <= 10; i = i + 1) {
 document.write(product);
 ```
 
-<ViewSource url={import.meta.url} path="_samples/product" />
+<Sandpack
+  template="static"
+  files={{
+    "/index.html": productHtml,
+    "/script.js": productJs,
+  }}
+  options={{
+    activeFile: "/script.js",
+  }}
+/>
 
 別解
 
@@ -163,7 +189,16 @@ for (let i = 1; i <= 10; i += 1) {
 document.write(product);
 ```
 
-<ViewSource url={import.meta.url} path="_samples/product-alt" />
+<Sandpack
+  template="static"
+  files={{
+    "/index.html": productAltHtml,
+    "/script.js": productAltJs,
+  }}
+  options={{
+    activeFile: "/script.js",
+  }}
+/>
 
 </Answer>
 
@@ -205,6 +240,15 @@ document.write(checkPrime(57)); // false
 document.write(checkPrime(-1)); // false
 ```
 
-<ViewSource url={import.meta.url} path="_samples/is-prime" />
+<Sandpack
+  template="static"
+  files={{
+    "/index.html": isPrimeHtml,
+    "/script.js": isPrimeJs,
+  }}
+  options={{
+    activeFile: "/script.js",
+  }}
+/>
 
 </Answer>