Skip to content

Conversation

@Yokomi422
Copy link
Contributor

@Yokomi422 Yokomi422 commented Oct 25, 2025

変更内容

  • @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用に存在していた一部のサンプルファイルを削除

@Yokomi422 Yokomi422 marked this pull request as draft October 25, 2025 11:55
@cloudflare-workers-and-pages
Copy link

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

Deploying utcode-learn with  Cloudflare Pages  Cloudflare Pages

Latest commit: 27a8ecf
Status: ✅  Deploy successful!
Preview URL: https://28fc5bf2.utcode-learn.pages.dev
Branch Preview URL: https://code-sandpack.utcode-learn.pages.dev

View logs

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

@chvmvd chvmvd left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

途中までですが

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

title: HTML
---

import { Sandpack } from "@codesandbox/sandpack-react";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Comment on lines 26 to 34
<Sandpack
template="static"
files={{
"/index.html": firstCssHtml,
}}
options={{
activeFile: "/index.html",
}}
/>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

説明でコードと画像があり、ここでもコードとプレビューをつけると、重複してわかりにくいように思います。

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

演習問題以外にあったので削除しました。
180a1df

Comment on lines +155 to +164
<Sandpack
template="static"
files={{
"/index.html": yellowHelloCssHtml,
"/style.css": yellowHelloCssCss,
}}
options={{
activeFile: "/index.html",
}}
/>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Answerコンポーネントの外に出てしまっています。

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

2d52afd

中に移動しました。

Comment on lines 220 to 228
<Sandpack
template="static"
files={{
"/index.html": fooHtml,
}}
options={{
activeFile: "/index.html",
}}
/>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

もとからで申し訳ないですが、_samples/fooフォルダの中身が実際の教材とズレていそうですね。

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

3878e6b

直しました。

Comment on lines -95 to -96
<ViewSource url={import.meta.url} path="_samples/weird-comparison" />

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

この後の説明の答えを確認するためにCodeSandboxが置いてあったので、これを消すなら説明も変えた方が良さそうですね。

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ここはViewSourceがあった方が良さそうですね。

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Comment on lines 73 to 82
<Sandpack
template="static"
files={{
"/index.html": answerWhileHtml,
"/script.js": answerWhileJs,
}}
options={{
activeFile: "/script.js",
}}
/>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Screenshot 2025-11-28 at 23 46 33

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

SyntaxError: Identifier 'i' has already been declared

となっている。

@Yokomi422 Yokomi422 changed the title code sandbox 演習問題にSandpackによる実行環境を追加 Dec 6, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants