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

Yokomi422 · 2025-10-25T11:55:14Z

変更内容

@codesandbox/sandpack-react を追加
raw-loader を使ってサンプルファイルを読み込むように変更
以下のセクションの解答にSandpack実行環境を追加
- HTML (02-html)
- CSS (03-css)
- 変数 (06-variables)
- 論理値と論理演算子 (07-boolean)
- if文 (08-if-statement)
- 関数 (09-functions)
- ループ (10-loop)
- 配列 (11-array)
- オブジェクト (12-object)
- DOM (13-dom)
- イベント (14-events)
- プロジェクト (15-project)

削除したファイル

Sandpack導入に伴い、ViewSource用に存在していた一部のサンプルファイルを削除

cloudflare-workers-and-pages · 2025-10-25T11:58:32Z

Deploying utcode-learn with Cloudflare Pages

Latest commit:	`9215bc0`
Status:	✅ Deploy successful!
Preview URL:	https://488042e9.utcode-learn.pages.dev
Branch Preview URL:	https://code-sandpack.utcode-learn.pages.dev

View logs

chvmvd

途中までですが

後は、Pull requestのタイトルと説明欄を書いていただけると、ありがたいです 🙇
Pull requestの大まかな内容と差分だけからではわからない意図などを書いていただけるとレビューがしやすくなり助かります 🥰

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

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

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

chvmvd · 2025-11-28T14:47:46Z

docs/1-trial-session/10-loop/index.mdx

+<Sandpack
+  template="static"
+  files={{
+    "/index.html": answerWhileHtml,
+    "/script.js": answerWhileJs,
+  }}
+  options={{
+    activeFile: "/script.js",
+  }}
+/>


こちら動いていなさそうです...
macOSでFirefoxとGoogle Chromeで確認したのですが、いずれも表示されていなさそうでした。

うーむ
これはどうしよう。

SyntaxError: Identifier 'i' has already been declared

となっている。

chvmvd

途中ですが、Sandpackを用いて実行環境を追加すること以外の差分が多く含まれているような気がします。たとえば、既存のViewSourceコンポーネントの削除や場所の移動などが挙げられます。一旦、Sandpackを用いて実行環境を追加することのみに絞っても良いかと思います。

chvmvd · 2025-12-12T14:47:58Z

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

+    "/style.css": yellowHelloCssCss,
+  }}
+  options={{
+    activeFile: "/index.html",


これはCSSに関する演習問題なので、CSSファイルをアクティブにする方が良いように思います。

chvmvd · 2025-12-12T14:49:25Z

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

+    "/style.css": fooCss,
+  }}
+  options={{
+    activeFile: "/index.html",


chvmvd · 2025-12-12T14:59:01Z

docs/1-trial-session/10-loop/index.mdx

-<ViewSource url={import.meta.url} path="_samples/answer-while" />
-


なぜこちらは削除しているのでしょうか。

復活しました

chvmvd · 2025-12-12T14:59:19Z

docs/1-trial-session/10-loop/_samples/answer-while/index.html

削除されています。

復活しました

chvmvd · 2025-12-12T14:59:26Z

docs/1-trial-session/10-loop/_samples/answer-while/script.js

削除されています。

復活しました

Yokomi422 · 2025-12-14T12:23:29Z

@chvmvd
Sandpackがある場所はOpenSandboxボタンがあるから、ViewSourceは不要？

chvmvd

今回の変更に関係のない差分がまだまだありそうです 👀 またそれによって動かなくなっている箇所も散見されます。

GitHubではPull request内で提案された変更Files Changedタブで表示することができるため、その差分をよく確認してすべての差分が適切な差分となっていることを確認すると事故が防げて便利です。今回の場合はこちらから確認できます。
また、GitHubに限らずGitでソースコードを管理している場合はVS Codeを利用して差分を確認することができるため便利です。 cf. https://learn.utcode.net/docs/web-servers/git/#%E5%A4%89%E6%9B%B4%E5%B1%A5%E6%AD%B4%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B

また、動作確認を行うとソフトウェアなどが正常に動作するかを未然に確認でき事故を防げます。ut.code(); LearnのリポジトリではCloudflareの機能を利用してPull requestで提案された内容のプレビューが自動で生成されるようになっています。今回の場合は、こちらから確認できます。また、ドキュメント内のコードについてもCodeSandboxの機能を用いてプレビューを確認できます。

Yokomi422 · 2025-12-28T10:11:03Z

docs/1-trial-session/03-css/_samples/foo/index.html

現状でstyle.cssに分かれていないため、index.htmlとstyle.cssに分離した。

Yokomi422 · 2025-12-28T10:53:43Z

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

 }
 ```

-<ViewSource url={import.meta.url} path="_samples/max-no-else" />


ut.code(); Learnではどうして、2つとの同じViewSourceなのに2つ置いてあるのか。

Yokomi422 · 2025-12-28T11:14:54Z

@chvmvd
差分も見て

ViewSourceが消えている場所はSandpackに変わっている
それ以外はViewSourceが消えていない
を確認したから、今回は大丈夫と思いたい。。。

Yokomi422 · 2025-12-28T11:15:18Z

Sandpackもpreviewで確認しました。

chvmvd

ざっと見たところ、まだ少なくとも最低で2件は不要な差分が混じっていそうです 👀

Yokomi422 · 2025-12-28T13:43:48Z

7d017aa
こいつかー

chvmvd

軽く差分を見た感じ最低でもまだ3件はありますね👀

Yokomi422 · 2025-12-29T03:03:38Z

大量のFile renamed without changes.があった！こいつらは見逃していた。

code sandbox

98512c9

Yokomi422 marked this pull request as draft October 25, 2025 11:55

Yokomi422 added 4 commits November 15, 2025 20:57

演習問題にsandpackの解答を追加

d66919b

プロジェクトを解答例に含めた

7e8a5fa

prettier

24c10dc

raw loader dep

a21741e

Yokomi422 marked this pull request as ready for review November 22, 2025 08:51

Yokomi422 added 3 commits November 22, 2025 18:03

check

1f48692

不要なcomponentを削除

25ed472

不要なファイルを削除

25a0a33

chvmvd reviewed Nov 28, 2025

View reviewed changes

Yokomi422 changed the title ~~code sandbox~~ 演習問題にSandpackによる実行環境を追加 Dec 6, 2025

Yokomi422 added 7 commits December 6, 2025 19:58

演習問題以外のファイルを削除

180a1df

Answerの中に移動

2d52afd

css 演習問題3の解答を修正

3878e6b

importを1つに

4b04494

weired comparisonはview soruceのままに

8469084

fix prettier

afaa34c

whileのsandpackはなし

27a8ecf

chvmvd reviewed Dec 12, 2025

View reviewed changes

Yokomi422 and others added 4 commits December 14, 2025 21:11

cssをactiveにした

756c1e1

view sourceを追加

97064c8

format

12432c5

Merge branch 'main' into code-sandpack

8a10b37

Yokomi422 added 4 commits December 14, 2025 21:29

chore: trigger CI

bf57164

Merge remote-tracking branch 'origin/main' into code-sandpack

cd708f8

fix

5d581e2

変数の章のviewsourceを追加

5da31d5

Yokomi422 added 5 commits December 20, 2025 20:49

関数のviewsource追加

1bdb2c0

ループの章のview source 追加

a70b65f

domの章にviewsource 復活

8d96eb9

おみくじをAnswerで囲った

2d4b004

cssのview source復活

6f1f7ff

chvmvd reviewed Dec 28, 2025

View reviewed changes

Yokomi422 added 2 commits December 28, 2025 19:57

削除されていたview sourceなどを復元

8b464f0

format

a100914

Yokomi422 commented Dec 28, 2025

View reviewed changes

view sourceの位置がずれていた

620fd09

Yokomi422 requested a review from chvmvd December 28, 2025 11:13

chvmvd reviewed Dec 28, 2025

View reviewed changes

不要なindex.htmlとscript.jsを削除

7d017aa

chvmvd reviewed Dec 29, 2025

View reviewed changes

Yokomi422 added 3 commits December 29, 2025 11:57

first classになっていたものをfirst cssに変更

cd53d86

nested-loopを移動

5aee802

fix typo

9215bc0

Yokomi422 requested a review from chvmvd December 29, 2025 03:24

		<ViewSource url={import.meta.url} path="_samples/answer-while" />

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

Are you sure you want to change the base?

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

Uh oh!

Conversation

Yokomi422 commented Oct 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

変更内容

削除したファイル

Uh oh!

cloudflare-workers-and-pages bot commented Oct 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying utcode-learn with Cloudflare Pages

Uh oh!

chvmvd left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

chvmvd left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Yokomi422 commented Dec 14, 2025

Uh oh!

chvmvd left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Yokomi422 commented Dec 28, 2025

Uh oh!

Yokomi422 commented Dec 28, 2025

Uh oh!

chvmvd left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Yokomi422 commented Dec 28, 2025

Uh oh!

chvmvd left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Yokomi422 commented Dec 29, 2025

Uh oh!

Reviewers

Assignees

Yokomi422 commented Oct 25, 2025 •

edited

Loading

cloudflare-workers-and-pages bot commented Oct 25, 2025 •

edited

Loading

chvmvd left a comment •

edited

Loading

chvmvd left a comment •

edited

Loading

chvmvd left a comment •

edited

Loading