From 98512c93106194869340dffb1ba8c507efb315c2 Mon Sep 17 00:00:00 2001 From: Rei Tsukada Date: Sat, 25 Oct 2025 20:55:01 +0900 Subject: [PATCH 01/26] code sandbox --- .../1-trial-session/08-if-statement/index.mdx | 56 ++ package-lock.json | 552 ++++++++++++++++++ package.json | 1 + src/components/Sandpack/index.jsx | 30 + 4 files changed, 639 insertions(+) create mode 100644 src/components/Sandpack/index.jsx diff --git a/docs/1-trial-session/08-if-statement/index.mdx b/docs/1-trial-session/08-if-statement/index.mdx index 6e21bb95..569ad8d5 100644 --- a/docs/1-trial-session/08-if-statement/index.mdx +++ b/docs/1-trial-session/08-if-statement/index.mdx @@ -2,6 +2,8 @@ title: 条件分岐 --- +import Sandpack from "@site/src/components/Sandpack"; + ## if文 **if文**は、JavaScriptの**制御構造**で、特定の条件下のみで実行されるプログラムを記述することができます。 @@ -17,6 +19,32 @@ if (age < 18) { このプログラムは、`未成年者の場合は法定代理人の同意が必要です。`と表示しますが、1行目を`const age = 20;`に変更すると何も表示されなくなります。 + + + + + 条件分岐 + + + + +`, + hidden: true, + }, + "/script.js": `const age = 16; +if (age < 18) { + document.write("未成年者の場合は法定代理人の同意が必要です。"); +}`, + }} + options={{ + editorHeight: 250, + activeFile: "/script.js", + }} +/> + 2行目の`if (age < 18) {`部分がポイントです。ここに差し掛かると、括弧内の式`age < 18`が評価され、`true`になります。このため、直後の波括弧内の処理が実行されます。 if文の基本構造は @@ -55,6 +83,34 @@ if (age >= 18) { この例では、`age >= 18`の評価が`false`となるので、`子供です`が表示されます。 + + + + + if-else + + + + +`, + hidden: true, + }, + "/script.js": `const age = 16; +if (age >= 18) { + document.write("大人です"); +} else { + document.write("子供です"); +}`, + }} + options={{ + editorHeight: 250, + activeFile: "/script.js", + }} +/> + ## if～else if～else if～else if～else構文を使うと、複数の条件を重ねることができます。 diff --git a/package-lock.json b/package-lock.json index 63d7f587..adb5cccb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "utcode-learn", "version": "0.0.0", "dependencies": { + "@codesandbox/sandpack-react": "^2.20.0", "@docusaurus/core": "^3.9.1", "@docusaurus/preset-classic": "^3.9.1", "@docusaurus/theme-mermaid": "^3.9.1", @@ -2104,6 +2105,191 @@ "integrity": "sha512-YslZMgtJUyuMbZ+aKvfF3x1f5liK4mWNxghFRv7jqRR9C3R3fAOGTTKvxXDa2Y1s9zSbcpuO0cAxDYsc9SrXoQ==", "license": "Apache-2.0" }, + "node_modules/@codemirror/autocomplete": { + "version": "6.19.1", + "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.19.1.tgz", + "integrity": "sha512-q6NenYkEy2fn9+JyjIxMWcNjzTL/IhwqfzOut1/G3PrIFkrbl4AL7Wkse5tLrQUUyqGoAKU5+Pi5jnnXxH5HGw==", + "license": "MIT", + "dependencies": { + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.17.0", + "@lezer/common": "^1.0.0" + } + }, + "node_modules/@codemirror/commands": { + "version": "6.10.0", + "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.10.0.tgz", + "integrity": "sha512-2xUIc5mHXQzT16JnyOFkh8PvfeXuIut3pslWGfsGOhxP/lpgRm9HOl/mpzLErgt5mXDovqA0d11P21gofRLb9w==", + "license": "MIT", + "dependencies": { + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.4.0", + "@codemirror/view": "^6.27.0", + "@lezer/common": "^1.1.0" + } + }, + "node_modules/@codemirror/lang-css": { + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.3.1.tgz", + "integrity": "sha512-kr5fwBGiGtmz6l0LSJIbno9QrifNMUusivHbnA1H6Dmqy4HZFte3UAICix1VuKo0lMPKQr2rqB+0BkKi/S3Ejg==", + "license": "MIT", + "dependencies": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@lezer/common": "^1.0.2", + "@lezer/css": "^1.1.7" + } + }, + "node_modules/@codemirror/lang-html": { + "version": "6.4.11", + "resolved": "https://registry.npmjs.org/@codemirror/lang-html/-/lang-html-6.4.11.tgz", + "integrity": "sha512-9NsXp7Nwp891pQchI7gPdTwBuSuT3K65NGTHWHNJ55HjYcHLllr0rbIZNdOzas9ztc1EUVBlHou85FFZS4BNnw==", + "license": "MIT", + "dependencies": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/lang-css": "^6.0.0", + "@codemirror/lang-javascript": "^6.0.0", + "@codemirror/language": "^6.4.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.17.0", + "@lezer/common": "^1.0.0", + "@lezer/css": "^1.1.0", + "@lezer/html": "^1.3.12" + } + }, + "node_modules/@codemirror/lang-javascript": { + "version": "6.2.4", + "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.2.4.tgz", + "integrity": "sha512-0WVmhp1QOqZ4Rt6GlVGwKJN3KW7Xh4H2q8ZZNGZaP6lRdxXJzmjm4FqvmOojVj6khWJHIb9sp7U/72W7xQgqAA==", + "license": "MIT", + "dependencies": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/language": "^6.6.0", + "@codemirror/lint": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.17.0", + "@lezer/common": "^1.0.0", + "@lezer/javascript": "^1.0.0" + } + }, + "node_modules/@codemirror/language": { + "version": "6.11.3", + "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.11.3.tgz", + "integrity": "sha512-9HBM2XnwDj7fnu0551HkGdrUrrqmYq/WC5iv6nbY2WdicXdGbhR/gfbZOH73Aqj4351alY1+aoG9rCNfiwS1RA==", + "license": "MIT", + "dependencies": { + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.23.0", + "@lezer/common": "^1.1.0", + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0", + "style-mod": "^4.0.0" + } + }, + "node_modules/@codemirror/lint": { + "version": "6.9.1", + "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.9.1.tgz", + "integrity": "sha512-te7To1EQHePBQQzasDKWmK2xKINIXpk+xAiSYr9ZN+VB4KaT+/Hi2PEkeErTk5BV3PTz1TLyQL4MtJfPkKZ9sw==", + "license": "MIT", + "dependencies": { + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.35.0", + "crelt": "^1.0.5" + } + }, + "node_modules/@codemirror/state": { + "version": "6.5.2", + "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.5.2.tgz", + "integrity": "sha512-FVqsPqtPWKVVL3dPSxy8wEF/ymIEuVzF1PK3VbUgrxXpJUSHQWWZz4JMToquRxnkw+36LTamCZG2iua2Ptq0fA==", + "license": "MIT", + "dependencies": { + "@marijn/find-cluster-break": "^1.0.0" + } + }, + "node_modules/@codemirror/view": { + "version": "6.38.6", + "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.38.6.tgz", + "integrity": "sha512-qiS0z1bKs5WOvHIAC0Cybmv4AJSkAXgX5aD6Mqd2epSLlVJsQl8NG23jCVouIgkh4All/mrbdsf2UOLFnJw0tw==", + "license": "MIT", + "dependencies": { + "@codemirror/state": "^6.5.0", + "crelt": "^1.0.6", + "style-mod": "^4.1.0", + "w3c-keyname": "^2.2.4" + } + }, + "node_modules/@codesandbox/nodebox": { + "version": "0.1.8", + "resolved": "https://registry.npmjs.org/@codesandbox/nodebox/-/nodebox-0.1.8.tgz", + "integrity": "sha512-2VRS6JDSk+M+pg56GA6CryyUSGPjBEe8Pnae0QL3jJF1mJZJVMDKr93gJRtBbLkfZN6LD/DwMtf+2L0bpWrjqg==", + "license": "SEE LICENSE IN ./LICENSE", + "dependencies": { + "outvariant": "^1.4.0", + "strict-event-emitter": "^0.4.3" + } + }, + "node_modules/@codesandbox/sandpack-client": { + "version": "2.19.8", + "resolved": "https://registry.npmjs.org/@codesandbox/sandpack-client/-/sandpack-client-2.19.8.tgz", + "integrity": "sha512-CMV4nr1zgKzVpx4I3FYvGRM5YT0VaQhALMW9vy4wZRhEyWAtJITQIqZzrTGWqB1JvV7V72dVEUCUPLfYz5hgJQ==", + "license": "Apache-2.0", + "dependencies": { + "@codesandbox/nodebox": "0.1.8", + "buffer": "^6.0.3", + "dequal": "^2.0.2", + "mime-db": "^1.52.0", + "outvariant": "1.4.0", + "static-browser-server": "1.0.3" + } + }, + "node_modules/@codesandbox/sandpack-client/node_modules/mime-db": { + "version": "1.54.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz", + "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==", + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/@codesandbox/sandpack-react": { + "version": "2.20.0", + "resolved": "https://registry.npmjs.org/@codesandbox/sandpack-react/-/sandpack-react-2.20.0.tgz", + "integrity": "sha512-takd1YpW/PMQ6KPQfvseWLHWklJovGY8QYj8MtWnskGKbjOGJ6uZfyZbcJ6aCFLQMpNyjTqz9AKNbvhCOZ1TUQ==", + "license": "Apache-2.0", + "dependencies": { + "@codemirror/autocomplete": "^6.4.0", + "@codemirror/commands": "^6.1.3", + "@codemirror/lang-css": "^6.0.1", + "@codemirror/lang-html": "^6.4.0", + "@codemirror/lang-javascript": "^6.1.2", + "@codemirror/language": "^6.3.2", + "@codemirror/state": "^6.2.0", + "@codemirror/view": "^6.7.1", + "@codesandbox/sandpack-client": "^2.19.8", + "@lezer/highlight": "^1.1.3", + "@react-hook/intersection-observer": "^3.1.1", + "@stitches/core": "^1.2.6", + "anser": "^2.1.1", + "clean-set": "^1.1.2", + "dequal": "^2.0.2", + "escape-carriage": "^1.3.1", + "lz-string": "^1.4.4", + "react-devtools-inline": "4.4.0", + "react-is": "^17.0.2" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17 || ^18 || ^19", + "react-dom": "^16.8.0 || ^17 || ^18 || ^19" + } + }, + "node_modules/@codesandbox/sandpack-react/node_modules/react-is": { + "version": "17.0.2", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", + "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", + "license": "MIT" + }, "node_modules/@colors/colors": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz", @@ -4483,6 +4669,69 @@ "integrity": "sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==", "license": "MIT" }, + "node_modules/@lezer/common": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.3.0.tgz", + "integrity": "sha512-L9X8uHCYU310o99L3/MpJKYxPzXPOS7S0NmBaM7UO/x2Kb2WbmMLSkfvdr1KxRIFYOpbY0Jhn7CfLSUDzL8arQ==", + "license": "MIT" + }, + "node_modules/@lezer/css": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@lezer/css/-/css-1.3.0.tgz", + "integrity": "sha512-pBL7hup88KbI7hXnZV3PQsn43DHy6TWyzuyk2AO9UyoXcDltvIdqWKE1dLL/45JVZ+YZkHe1WVHqO6wugZZWcw==", + "license": "MIT", + "dependencies": { + "@lezer/common": "^1.2.0", + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.3.0" + } + }, + "node_modules/@lezer/highlight": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.2.tgz", + "integrity": "sha512-z8TQwaBXXQIvG6i2g3e9cgMwUUXu9Ib7jo2qRRggdhwKpM56Dw3PM3wmexn+EGaaOZ7az0K7sjc3/gcGW7sz7A==", + "license": "MIT", + "dependencies": { + "@lezer/common": "^1.3.0" + } + }, + "node_modules/@lezer/html": { + "version": "1.3.12", + "resolved": "https://registry.npmjs.org/@lezer/html/-/html-1.3.12.tgz", + "integrity": "sha512-RJ7eRWdaJe3bsiiLLHjCFT1JMk8m1YP9kaUbvu2rMLEoOnke9mcTVDyfOslsln0LtujdWespjJ39w6zo+RsQYw==", + "license": "MIT", + "dependencies": { + "@lezer/common": "^1.2.0", + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "node_modules/@lezer/javascript": { + "version": "1.5.4", + "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.5.4.tgz", + "integrity": "sha512-vvYx3MhWqeZtGPwDStM2dwgljd5smolYD2lR2UyFcHfxbBQebqx8yjmFmxtJ/E6nN6u1D9srOiVWm3Rb4tmcUA==", + "license": "MIT", + "dependencies": { + "@lezer/common": "^1.2.0", + "@lezer/highlight": "^1.1.3", + "@lezer/lr": "^1.3.0" + } + }, + "node_modules/@lezer/lr": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.2.tgz", + "integrity": "sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==", + "license": "MIT", + "dependencies": { + "@lezer/common": "^1.0.0" + } + }, + "node_modules/@marijn/find-cluster-break": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz", + "integrity": "sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==", + "license": "MIT" + }, "node_modules/@mdx-js/mdx": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-3.1.1.tgz", @@ -4846,6 +5095,12 @@ "node": ">= 8" } }, + "node_modules/@open-draft/deferred-promise": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@open-draft/deferred-promise/-/deferred-promise-2.2.0.tgz", + "integrity": "sha512-CecwLWx3rhxVQF6V4bAgPS5t+So2sTbPgAzafKkVizyi7tlwpcFpdFqq+wqF2OwNBmqFuu6tOyouTuxgpMfzmA==", + "license": "MIT" + }, "node_modules/@opentelemetry/api": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.9.0.tgz", @@ -4912,6 +5167,28 @@ "url": "https://opencollective.com/popperjs" } }, + "node_modules/@react-hook/intersection-observer": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/@react-hook/intersection-observer/-/intersection-observer-3.1.2.tgz", + "integrity": "sha512-mWU3BMkmmzyYMSuhO9wu3eJVP21N8TcgYm9bZnTrMwuM818bEk+0NRM3hP+c/TqA9Ln5C7qE53p1H0QMtzYdvQ==", + "license": "MIT", + "dependencies": { + "@react-hook/passive-layout-effect": "^1.2.0", + "intersection-observer": "^0.10.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/@react-hook/passive-layout-effect": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@react-hook/passive-layout-effect/-/passive-layout-effect-1.2.1.tgz", + "integrity": "sha512-IwEphTD75liO8g+6taS+4oqz+nnroocNfWVHWz7j+N+ZO2vYrc6PV1q7GQhuahL0IOR7JccFTsFKQ/mb6iZWAg==", + "license": "MIT", + "peerDependencies": { + "react": ">=16.8" + } + }, "node_modules/@sideway/address": { "version": "4.1.5", "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.5.tgz", @@ -4968,6 +5245,12 @@ "integrity": "sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==", "license": "MIT" }, + "node_modules/@stitches/core": { + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/@stitches/core/-/core-1.2.8.tgz", + "integrity": "sha512-Gfkvwk9o9kE9r9XNBmJRfV8zONvXThnm1tcuojL04Uy5uRyqg93DC83lDebl0rocZCfKSjUv+fWYtMQmEDJldg==", + "license": "MIT" + }, "node_modules/@svgr/babel-plugin-add-jsx-attribute": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz", @@ -6297,6 +6580,12 @@ "algoliasearch": ">= 3.1 < 6" } }, + "node_modules/anser": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/anser/-/anser-2.3.2.tgz", + "integrity": "sha512-PMqBCBvrOVDRqLGooQb+z+t1Q0PiPyurUQeZRR5uHBOVZcW8B04KMmnT12USnhpNX2wCPagWzLVppQMUG3u0Dw==", + "license": "MIT" + }, "node_modules/ansi-align": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz", @@ -6565,6 +6854,26 @@ "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", "license": "MIT" }, + "node_modules/base64-js": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz", + "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "license": "MIT" + }, "node_modules/baseline-browser-mapping": { "version": "2.8.8", "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.8.tgz", @@ -6754,6 +7063,30 @@ "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" } }, + "node_modules/buffer": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz", + "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "license": "MIT", + "dependencies": { + "base64-js": "^1.3.1", + "ieee754": "^1.2.1" + } + }, "node_modules/buffer-from": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz", @@ -7135,6 +7468,12 @@ "node": ">=0.10.0" } }, + "node_modules/clean-set": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/clean-set/-/clean-set-1.1.2.tgz", + "integrity": "sha512-cA8uCj0qSoG9e0kevyOWXwPaELRPVg5Pxp6WskLMwerx257Zfnh8Nl0JBH59d7wQzij2CK7qEfJQK3RjuKKIug==", + "license": "MIT" + }, "node_modules/clean-stack": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz", @@ -7604,6 +7943,12 @@ } } }, + "node_modules/crelt": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz", + "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==", + "license": "MIT" + }, "node_modules/cross-spawn": { "version": "7.0.6", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", @@ -8111,6 +8456,19 @@ "integrity": "sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg==", "license": "MIT" }, + "node_modules/d": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/d/-/d-1.0.2.tgz", + "integrity": "sha512-MOqHvMWF9/9MX6nza0KgvFH4HpMU0EF5uUDXqX/BtxtU8NfB0QzRtJ8Oe/6SuS4kbhyzVJwjd97EA4PKrzJ8bw==", + "license": "ISC", + "dependencies": { + "es5-ext": "^0.10.64", + "type": "^2.7.2" + }, + "engines": { + "node": ">=0.12" + } + }, "node_modules/d3": { "version": "7.9.0", "resolved": "https://registry.npmjs.org/d3/-/d3-7.9.0.tgz", @@ -8942,6 +9300,18 @@ "node": ">=8" } }, + "node_modules/dotenv": { + "version": "16.6.1", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.6.1.tgz", + "integrity": "sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==", + "license": "BSD-2-Clause", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://dotenvx.com" + } + }, "node_modules/dunder-proto": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz", @@ -9103,6 +9473,46 @@ "node": ">= 0.4" } }, + "node_modules/es5-ext": { + "version": "0.10.64", + "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.64.tgz", + "integrity": "sha512-p2snDhiLaXe6dahss1LddxqEm+SkuDvV8dnIQG0MWjyHpcMNfXKPE+/Cc0y+PhxJX3A4xGNeFCj5oc0BUh6deg==", + "hasInstallScript": true, + "license": "ISC", + "dependencies": { + "es6-iterator": "^2.0.3", + "es6-symbol": "^3.1.3", + "esniff": "^2.0.1", + "next-tick": "^1.1.0" + }, + "engines": { + "node": ">=0.10" + } + }, + "node_modules/es6-iterator": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz", + "integrity": "sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==", + "license": "MIT", + "dependencies": { + "d": "1", + "es5-ext": "^0.10.35", + "es6-symbol": "^3.1.1" + } + }, + "node_modules/es6-symbol": { + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.4.tgz", + "integrity": "sha512-U9bFFjX8tFiATgtkJ1zg25+KviIXpgRvRHS8sau3GfhVzThRQrOeksPeT0BWW2MNZs1OEWJ1DPXOQMn0KKRkvg==", + "license": "ISC", + "dependencies": { + "d": "^1.0.2", + "ext": "^1.7.0" + }, + "engines": { + "node": ">=0.12" + } + }, "node_modules/esast-util-from-estree": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/esast-util-from-estree/-/esast-util-from-estree-2.0.0.tgz", @@ -9144,6 +9554,12 @@ "node": ">=6" } }, + "node_modules/escape-carriage": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/escape-carriage/-/escape-carriage-1.3.1.tgz", + "integrity": "sha512-GwBr6yViW3ttx1kb7/Oh+gKQ1/TrhYwxKqVmg5gS+BK+Qe2KrOa/Vh7w3HPBvgGf0LfcDGoY9I6NHKoA5Hozhw==", + "license": "MIT" + }, "node_modules/escape-goat": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/escape-goat/-/escape-goat-4.0.0.tgz", @@ -9187,6 +9603,21 @@ "node": ">=8.0.0" } }, + "node_modules/esniff": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/esniff/-/esniff-2.0.1.tgz", + "integrity": "sha512-kTUIGKQ/mDPFoJ0oVfcmyJn4iBDRptjNVIzwIFR7tqWXdVI9xfA2RMwY/gbSpJG3lkdWNEjLap/NqVHZiJsdfg==", + "license": "ISC", + "dependencies": { + "d": "^1.0.1", + "es5-ext": "^0.10.62", + "event-emitter": "^0.3.5", + "type": "^2.7.2" + }, + "engines": { + "node": ">=0.10" + } + }, "node_modules/esprima": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", @@ -9375,6 +9806,16 @@ "node": ">= 0.8" } }, + "node_modules/event-emitter": { + "version": "0.3.5", + "resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.5.tgz", + "integrity": "sha512-D9rRn9y7kLPnJ+hMq7S/nhvoKwwvVJahBi2BPmx3bvbsEdK3W9ii8cBSGjP+72/LnM4n6fo3+dkCX5FeTQruXA==", + "license": "MIT", + "dependencies": { + "d": "1", + "es5-ext": "~0.10.14" + } + }, "node_modules/eventemitter3": { "version": "4.0.7", "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz", @@ -9516,6 +9957,15 @@ "integrity": "sha512-VO5fQUzZtI6C+vx4w/4BWJpg3s/5l+6pRQEHzFRM8WFi4XffSP1Z+4qi7GbjWbvRQEbdIco5mIMq+zX4rPuLrw==", "license": "MIT" }, + "node_modules/ext": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/ext/-/ext-1.7.0.tgz", + "integrity": "sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==", + "license": "ISC", + "dependencies": { + "type": "^2.7.2" + } + }, "node_modules/extend": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz", @@ -10843,6 +11293,26 @@ "postcss": "^8.1.0" } }, + "node_modules/ieee754": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz", + "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "license": "BSD-3-Clause" + }, "node_modules/ignore": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz", @@ -10952,6 +11422,13 @@ "node": ">=12" } }, + "node_modules/intersection-observer": { + "version": "0.10.0", + "resolved": "https://registry.npmjs.org/intersection-observer/-/intersection-observer-0.10.0.tgz", + "integrity": "sha512-fn4bQ0Xq8FTej09YC/jqKZwtijpvARlRp6wxL5WTA6yPe2YWSJ5RJh7Nm79rK2qB0wr6iDQzH60XGq5V/7u8YQ==", + "deprecated": "The Intersection Observer polyfill is no longer needed and can safely be removed. Intersection Observer has been Baseline since 2019.", + "license": "W3C-20150513" + }, "node_modules/invariant": { "version": "2.2.4", "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", @@ -11764,6 +12241,15 @@ "integrity": "sha512-hWUAb2KqM3L7J5bcrngszzISY4BxrXn/Xhbb9TTCJYEGqlR1nG67/M14sp09+PTIRklobrn57IAxcdcO/ZFyNA==", "license": "MPL-1.1" }, + "node_modules/lz-string": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz", + "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==", + "license": "MIT", + "bin": { + "lz-string": "bin/bin.js" + } + }, "node_modules/mark.js": { "version": "8.11.1", "resolved": "https://registry.npmjs.org/mark.js/-/mark.js-8.11.1.tgz", @@ -14391,6 +14877,12 @@ "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==", "license": "MIT" }, + "node_modules/next-tick": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz", + "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==", + "license": "ISC" + }, "node_modules/no-case": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", @@ -14684,6 +15176,12 @@ "integrity": "sha512-KiOAIsdpUTcAXuykya5fnVVT+/5uS0Q1mrkRHcF89tpieSmY33O/tmc54CqwA+bfhbtEfZUNLHaPUiB9X3jt1A==", "license": "MIT" }, + "node_modules/outvariant": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/outvariant/-/outvariant-1.4.0.tgz", + "integrity": "sha512-AlWY719RF02ujitly7Kk/0QlV+pXGFDHrHf9O2OKqyqgBieaPOIeuSkL8sRK6j2WK+/ZAURq2kZsY0d8JapUiw==", + "license": "MIT" + }, "node_modules/p-cancelable": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-3.0.0.tgz", @@ -16848,6 +17346,15 @@ "react": ">=15" } }, + "node_modules/react-devtools-inline": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/react-devtools-inline/-/react-devtools-inline-4.4.0.tgz", + "integrity": "sha512-ES0GolSrKO8wsKbsEkVeiR/ZAaHQTY4zDh1UW8DImVmm8oaGLl3ijJDvSGe+qDRKPZdPRnDtWWnSvvrgxXdThQ==", + "license": "MIT", + "dependencies": { + "es6-symbol": "^3" + } + }, "node_modules/react-dom": { "version": "19.1.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.1.tgz", @@ -18342,6 +18849,27 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/static-browser-server": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/static-browser-server/-/static-browser-server-1.0.3.tgz", + "integrity": "sha512-ZUyfgGDdFRbZGGJQ1YhiM930Yczz5VlbJObrQLlk24+qNHVQx4OlLcYswEUo3bIyNAbQUIUR9Yr5/Hqjzqb4zA==", + "license": "Apache-2.0", + "dependencies": { + "@open-draft/deferred-promise": "^2.1.0", + "dotenv": "^16.0.3", + "mime-db": "^1.52.0", + "outvariant": "^1.3.0" + } + }, + "node_modules/static-browser-server/node_modules/mime-db": { + "version": "1.54.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz", + "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==", + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, "node_modules/statuses": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz", @@ -18357,6 +18885,12 @@ "integrity": "sha512-UGvjygr6F6tpH7o2qyqR6QYpwraIjKSdtzyBdyytFOHmPZY917kwdwLG0RbOjWOnKmnm3PeHjaoLLMie7kPLQw==", "license": "MIT" }, + "node_modules/strict-event-emitter": { + "version": "0.4.6", + "resolved": "https://registry.npmjs.org/strict-event-emitter/-/strict-event-emitter-0.4.6.tgz", + "integrity": "sha512-12KWeb+wixJohmnwNFerbyiBrAlq5qJLwIt38etRtKtmmHyDSoGlIqFE9wx+4IwG0aDjI7GV8tc8ZccjWZZtTg==", + "license": "MIT" + }, "node_modules/string_decoder": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz", @@ -18486,6 +19020,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/style-mod": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.3.tgz", + "integrity": "sha512-i/n8VsZydrugj3Iuzll8+x/00GH2vnYsk1eomD8QiRrSAeW6ItbCQDtfXCeJHd0iwiNagqjQkvpvREEPtW3IoQ==", + "license": "MIT" + }, "node_modules/style-to-js": { "version": "1.1.17", "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.17.tgz", @@ -18854,6 +19394,12 @@ "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", "license": "0BSD" }, + "node_modules/type": { + "version": "2.7.3", + "resolved": "https://registry.npmjs.org/type/-/type-2.7.3.tgz", + "integrity": "sha512-8j+1QmAbPvLZow5Qpi6NCaN8FB60p/6x8/vfNqOk/hC+HuvFZhL4+WfekuhQLiqFZXOgQdrs3B+XxEmCc6b3FQ==", + "license": "ISC" + }, "node_modules/type-fest": { "version": "2.19.0", "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz", @@ -19508,6 +20054,12 @@ "integrity": "sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==", "license": "MIT" }, + "node_modules/w3c-keyname": { + "version": "2.2.8", + "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz", + "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==", + "license": "MIT" + }, "node_modules/watchpack": { "version": "2.4.4", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.4.tgz", diff --git a/package.json b/package.json index 1f902ba2..b29e0761 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "format:check": "prettier --check ." }, "dependencies": { + "@codesandbox/sandpack-react": "^2.20.0", "@docusaurus/core": "^3.9.1", "@docusaurus/preset-classic": "^3.9.1", "@docusaurus/theme-mermaid": "^3.9.1", diff --git a/src/components/Sandpack/index.jsx b/src/components/Sandpack/index.jsx new file mode 100644 index 00000000..d2607f68 --- /dev/null +++ b/src/components/Sandpack/index.jsx @@ -0,0 +1,30 @@ +import { Sandpack as SandpackBase } from "@codesandbox/sandpack-react"; + +/** + * Interactive code editor using Sandpack + */ +export default function Sandpack({ + files = {}, + template = "static", + theme = "auto", + options = {}, + customSetup = {}, + ...props +}) { + return ( + + ); +} From d66919b03d0a7e3b2e4ec91d12a96fea08117a09 Mon Sep 17 00:00:00 2001 From: Rei Tsukada Date: Sat, 15 Nov 2025 20:57:20 +0900 Subject: [PATCH 02/26] =?UTF-8?q?=E6=BC=94=E7=BF=92=E5=95=8F=E9=A1=8C?= =?UTF-8?q?=E3=81=ABsandpack=E3=81=AE=E8=A7=A3=E7=AD=94=E3=82=92=E8=BF=BD?= =?UTF-8?q?=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/1-trial-session/02-html/index.mdx | 23 +++++- docs/1-trial-session/03-css/index.mdx | 50 +++++++++++- docs/1-trial-session/06-variables/index.mdx | 28 ++++++- docs/1-trial-session/07-boolean/index.mdx | 28 ++++++- .../1-trial-session/08-if-statement/index.mdx | 69 +++------------- docs/1-trial-session/09-functions/index.mdx | 53 +++++++++++- docs/1-trial-session/10-loop/index.mdx | 79 ++++++++++++++++-- docs/1-trial-session/11-array/index.mdx | 54 ++++++++++++- docs/1-trial-session/12-object/index.mdx | 54 ++++++++++++- docs/1-trial-session/13-dom/index.mdx | 80 +++++++++++++++++-- docs/1-trial-session/14-events/index.mdx | 14 +++- docs/1-trial-session/15-project/index.mdx | 27 ++++++- 12 files changed, 466 insertions(+), 93 deletions(-) diff --git a/docs/1-trial-session/02-html/index.mdx b/docs/1-trial-session/02-html/index.mdx index f7fa54d7..876f804b 100644 --- a/docs/1-trial-session/02-html/index.mdx +++ b/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開発に必ず用いられる言語があります。**HTML**とCSS、そしてJavaScriptです。これらは互いに異なる役割をもっています。まずは最も基本となるHTMLから学んでいきましょう。 @@ -155,7 +158,15 @@ VS Code上で作成したファイルは`index.html`でした。しかしなが ``` - + @@ -202,6 +213,14 @@ VS Code上で作成したファイルは`index.html`でした。しかしなが ``` - + diff --git a/docs/1-trial-session/03-css/index.mdx b/docs/1-trial-session/03-css/index.mdx index 6ec61b5f..f394c684 100644 --- a/docs/1-trial-session/03-css/index.mdx +++ b/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サイトの「見た目」をつかさどる言語です。多くのHTML要素は、CSSを用いることで、その見た目を細かくカスタマイズすることができます。 ![Web開発で用いられる言語](../02-html/web-development-languages.drawio.svg) @@ -15,7 +23,15 @@ title: CSS
Hello World!
``` - + ![Hello World!](./red-hello-world.png) @@ -60,7 +76,16 @@ title: CSS } ``` - + ### `link`要素 @@ -127,7 +152,16 @@ HTMLファイルとCSSファイルを分けて作成する場合、`style`属性 - + ## 演習問題2 @@ -183,6 +217,14 @@ HTMLファイルとCSSファイルを分けて作成する場合、`style`属性 } ``` - + diff --git a/docs/1-trial-session/06-variables/index.mdx b/docs/1-trial-session/06-variables/index.mdx index 6ab73f3d..441adfab 100644 --- a/docs/1-trial-session/06-variables/index.mdx +++ b/docs/1-trial-session/06-variables/index.mdx @@ -2,6 +2,12 @@ title: 変数 --- +import { Sandpack } from "@codesandbox/sandpack-react"; +import compoundAssignmentHtml from "!!raw-loader!./_samples/compound-assignment/index.html"; +import compoundAssignmentJs from "!!raw-loader!./_samples/compound-assignment/script.js"; +import counterHtml from "!!raw-loader!./_samples/counter/index.html"; +import counterJs from "!!raw-loader!./_samples/counter/script.js"; + ## 変数とは {/* prettier-ignore */} @@ -87,7 +93,16 @@ price = price / 2; document.write(price); ``` - + {/* prettier-ignore */} 代入演算子は、まず右辺の式を評価します。これにより、右辺は`100 / 2`となります。よって、最終的に変数`price`の値は`50`となり、これは`price`を半分にする操作に対応します。 @@ -107,6 +122,15 @@ counter = counter + 1; document.write(counter); ``` - + diff --git a/docs/1-trial-session/07-boolean/index.mdx b/docs/1-trial-session/07-boolean/index.mdx index 43397e48..bbeded54 100644 --- a/docs/1-trial-session/07-boolean/index.mdx +++ b/docs/1-trial-session/07-boolean/index.mdx @@ -2,6 +2,12 @@ title: 論理値と論理演算子 --- +import { Sandpack } from "@codesandbox/sandpack-react"; +import weirdComparisonHtml from "!!raw-loader!./_samples/weird-comparison/index.html"; +import weirdComparisonJs from "!!raw-loader!./_samples/weird-comparison/script.js"; +import quizShowHtml from "!!raw-loader!./_samples/quiz-show/index.html"; +import quizShowJs from "!!raw-loader!./_samples/quiz-show/script.js"; + ## 論理値 {/* prettier-ignore */} @@ -92,7 +98,16 @@ document.write(takaoHeight < everestHeight < fujiHeight); document.write(takaoHeight = everestHeight); ``` - + - JavaScript で、数値と論理値に比較演算子を適用すると、`true`は`1`として、`false`は`0`として比較されます。 - `=`は代入演算子です。代入演算子の式が評価されると、右辺の値になります。 @@ -131,6 +146,15 @@ const isTanakaWinner = tanakaScore >= 100 && tanakaScore - satoScore >= 20; document.write(isTanakaWinner); // true ``` - + diff --git a/docs/1-trial-session/08-if-statement/index.mdx b/docs/1-trial-session/08-if-statement/index.mdx index 569ad8d5..1ee1a3e4 100644 --- a/docs/1-trial-session/08-if-statement/index.mdx +++ b/docs/1-trial-session/08-if-statement/index.mdx @@ -2,7 +2,9 @@ title: 条件分岐 --- -import Sandpack from "@site/src/components/Sandpack"; +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文 @@ -19,32 +21,6 @@ if (age < 18) { このプログラムは、`未成年者の場合は法定代理人の同意が必要です。`と表示しますが、1行目を`const age = 20;`に変更すると何も表示されなくなります。 - - - - - 条件分岐 - - - - -`, - hidden: true, - }, - "/script.js": `const age = 16; -if (age < 18) { - document.write("未成年者の場合は法定代理人の同意が必要です。"); -}`, - }} - options={{ - editorHeight: 250, - activeFile: "/script.js", - }} -/> - 2行目の`if (age < 18) {`部分がポイントです。ここに差し掛かると、括弧内の式`age < 18`が評価され、`true`になります。このため、直後の波括弧内の処理が実行されます。 if文の基本構造は @@ -83,34 +59,6 @@ if (age >= 18) { この例では、`age >= 18`の評価が`false`となるので、`子供です`が表示されます。 - - - - - if-else - - - - -`, - hidden: true, - }, - "/script.js": `const age = 16; -if (age >= 18) { - document.write("大人です"); -} else { - document.write("子供です"); -}`, - }} - options={{ - editorHeight: 250, - activeFile: "/script.js", - }} -/> - ## if～else if～else if～else if～else構文を使うと、複数の条件を重ねることができます。 @@ -156,7 +104,16 @@ if (age < 18) { } ``` - + 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 index ede6bbe7..b762693b 100644 --- a/docs/1-trial-session/09-functions/index.mdx +++ b/docs/1-trial-session/09-functions/index.mdx @@ -2,7 +2,16 @@ 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 maxNoElseHtml from "!!raw-loader!./_samples/max-no-else/index.html"; +import maxNoElseJs from "!!raw-loader!./_samples/max-no-else/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 +106,16 @@ function multiply(a, b) { document.write(multiply(3, 4)); ``` - + @@ -187,7 +205,16 @@ function max(a, b) { } ``` - + :::note @@ -202,7 +229,16 @@ function max(a, b) { } ``` - + ::: @@ -238,6 +274,15 @@ function calculateCost(monthlyDataUsage) { document.write(calculateCost(3.5)); ``` - + diff --git a/docs/1-trial-session/10-loop/index.mdx b/docs/1-trial-session/10-loop/index.mdx index 3f5f8f2c..ebe831a6 100644 --- a/docs/1-trial-session/10-loop/index.mdx +++ b/docs/1-trial-session/10-loop/index.mdx @@ -2,7 +2,20 @@ title: 繰り返し --- +import { Sandpack } from "@codesandbox/sandpack-react"; import whileLoopVideo from "./while-loop.mp4"; +import answerWhileHtml from "!!raw-loader!./_samples/answer-while/index.html"; +import answerWhileJs from "!!raw-loader!./_samples/answer-while/script.js"; +import answerForHtml from "!!raw-loader!./_samples/answer-for/index.html"; +import answerForJs from "!!raw-loader!./_samples/answer-for/script.js"; +import nestedLoopHtml from "!!raw-loader!./_samples/nested-loop/index.html"; +import nestedLoopJs from "!!raw-loader!./_samples/nested-loop/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文 @@ -57,7 +70,16 @@ while (i <= 10) { document.write(sum); ``` - + @@ -102,7 +124,16 @@ for (let i = 1; i <= 10; i += 1) { document.write(sum); ``` - + @@ -118,7 +149,16 @@ for (let x = 0; x < 5; x += 1) { } ``` - + :::tip[テンプレートリテラル] @@ -149,7 +189,16 @@ for (let i = 1; i <= 10; i = i + 1) { document.write(product); ``` - + 別解 @@ -163,7 +212,16 @@ for (let i = 1; i <= 10; i += 1) { document.write(product); ``` - + @@ -205,6 +263,15 @@ document.write(checkPrime(57)); // false document.write(checkPrime(-1)); // false ``` - + diff --git a/docs/1-trial-session/11-array/index.mdx b/docs/1-trial-session/11-array/index.mdx index e6dd24f8..3ff25685 100644 --- a/docs/1-trial-session/11-array/index.mdx +++ b/docs/1-trial-session/11-array/index.mdx @@ -2,6 +2,16 @@ title: 配列 --- +import { Sandpack } from "@codesandbox/sandpack-react"; +import arrayHtml from "!!raw-loader!./_samples/array/index.html"; +import arrayJs from "!!raw-loader!./_samples/array/script.js"; +import arraySumForOfHtml from "!!raw-loader!./_samples/array-sum-for-of/index.html"; +import arraySumForOfJs from "!!raw-loader!./_samples/array-sum-for-of/script.js"; +import arraySumSimpleForHtml from "!!raw-loader!./_samples/array-sum-simple-for/index.html"; +import arraySumSimpleForJs from "!!raw-loader!./_samples/array-sum-simple-for/script.js"; +import arrayMaxHtml from "!!raw-loader!./_samples/array-max/index.html"; +import arrayMaxJs from "!!raw-loader!./_samples/array-max/script.js"; + ## 配列 JavaScriptにおける配列は、複数の値を並べて一つにまとめた値です。`[`から`]`で囲まれた部分は配列を生成する式になります。 @@ -47,7 +57,16 @@ document.write([3, 2, 1][0]); `[3, 2, 1]`で配列が生成され、`[0]`で0番目の要素が指定されているので、`3`と表示されます。 - + @@ -129,7 +148,16 @@ for (const number of numbers) { document.write(`配列の合計値は ${sum} です。`); ``` - + 別解 @@ -146,7 +174,16 @@ for (let i = 0; i < numbers.length; i += 1) { document.write(`配列の合計値は ${sum} です。`); ``` - + @@ -194,6 +231,15 @@ document.write( 配列の長さにかかわらず配列の最初の値を使うような処理をする場合は、長さが0である空の配列を除外することを忘れないでください！ ::: - + diff --git a/docs/1-trial-session/12-object/index.mdx b/docs/1-trial-session/12-object/index.mdx index 74f7ac11..81e61407 100644 --- a/docs/1-trial-session/12-object/index.mdx +++ b/docs/1-trial-session/12-object/index.mdx @@ -2,6 +2,16 @@ title: オブジェクト --- +import { Sandpack } from "@codesandbox/sandpack-react"; +import createUserObjectHtml from "!!raw-loader!./_samples/create-user-object/index.html"; +import createUserObjectJs from "!!raw-loader!./_samples/create-user-object/script.js"; +import changeBioPropertyHtml from "!!raw-loader!./_samples/change-bio-property/index.html"; +import changeBioPropertyJs from "!!raw-loader!./_samples/change-bio-property/script.js"; +import changeLanguagePropertyHtml from "!!raw-loader!./_samples/change-language-property/index.html"; +import changeLanguagePropertyJs from "!!raw-loader!./_samples/change-language-property/script.js"; +import averageScoreHtml from "!!raw-loader!./_samples/average-score/index.html"; +import averageScoreJs from "!!raw-loader!./_samples/average-score/script.js"; + ## オブジェクト JavaScriptで利用することができる値の種類として、これまで数値と文字列、論理値を扱いました。数値や文字列、論理値などの「それ以上分解できない」値のことを**プリミティブ**と呼びます。JavaScriptには、この他にも、**オブジェクト**と呼ばれる値が存在します。JavaScriptにおいて、プリミティブでない値はすべてオブジェクトです。 @@ -62,7 +72,16 @@ const user = { }; ``` - + @@ -104,7 +123,16 @@ user.bio = "JavaScriptでWebアプリを作っています。"; document.write(user.bio); // JavaScriptでWebアプリを作っています。 ``` - + @@ -157,7 +185,16 @@ user.settings.language = "English"; document.write(user.settings.language); // English ``` - + @@ -186,6 +223,15 @@ const averageScore = document.write(`平均点は${averageScore}点です。`); ``` - + diff --git a/docs/1-trial-session/13-dom/index.mdx b/docs/1-trial-session/13-dom/index.mdx index c636a821..8ded2017 100644 --- a/docs/1-trial-session/13-dom/index.mdx +++ b/docs/1-trial-session/13-dom/index.mdx @@ -2,6 +2,20 @@ title: DOM --- +import { Sandpack } from "@codesandbox/sandpack-react"; +import getElementByIdHtml from "!!raw-loader!./_samples/get-element-by-id/index.html"; +import getElementByIdJs from "!!raw-loader!./_samples/get-element-by-id/script.js"; +import goodEveningHtml from "!!raw-loader!./_samples/good-evening/index.html"; +import goodEveningJs from "!!raw-loader!./_samples/good-evening/script.js"; +import changeStylesHtml from "!!raw-loader!./_samples/change-styles/index.html"; +import changeStylesJs from "!!raw-loader!./_samples/change-styles/script.js"; +import addElementExerciseHtml from "!!raw-loader!./_samples/add-element-exercise/index.html"; +import addElementExerciseJs from "!!raw-loader!./_samples/add-element-exercise/script.js"; +import changeShoppingMemoHtml from "!!raw-loader!./_samples/change-shopping-memo/index.html"; +import changeShoppingMemoJs from "!!raw-loader!./_samples/change-shopping-memo/script.js"; +import fruitBasketHtml from "!!raw-loader!./_samples/fruit-basket/index.html"; +import fruitBasketJs from "!!raw-loader!./_samples/fruit-basket/script.js"; + ## HTML要素をJavaScriptで取得する {/* prettier-ignore */} @@ -28,7 +42,16 @@ const greetingElement = document.getElementById("greeting"); greetingElement.textContent = "Hello DOM"; ``` - + {/* prettier-ignore */} 変数`greetingElement`には、`index.html`に記述された`div`要素に対応するオブジェクトが代入されています。 @@ -63,7 +86,16 @@ const greetingType = document.getElementById("greeting-type"); greetingType.textContent = "evening"; ``` - + @@ -104,7 +136,16 @@ greetingElement.style.color = "yellow"; greetingElement.style.backgroundColor = "black"; ``` - + @@ -159,7 +200,16 @@ capElement.textContent = "帽子"; packingList.appendChild(capElement); ``` - + @@ -183,7 +233,16 @@ const targetItem = document.getElementById("item2"); targetItem.textContent = "レモン"; ``` - + @@ -214,6 +273,15 @@ for (const fruit of fruits) { } ``` - + diff --git a/docs/1-trial-session/14-events/index.mdx b/docs/1-trial-session/14-events/index.mdx index 4bebcc7e..c5d05eb3 100644 --- a/docs/1-trial-session/14-events/index.mdx +++ b/docs/1-trial-session/14-events/index.mdx @@ -2,8 +2,11 @@ title: イベント --- +import { Sandpack } from "@codesandbox/sandpack-react"; import handleClickVideo from "./handle-click.mp4"; import projectMovieForDom from "./project-movie-for-dom.mp4"; +import projectJackInABoxHtml from "!!raw-loader!./_samples/project-jack-in-a-box/index.html"; +import projectJackInABoxJs from "!!raw-loader!./_samples/project-jack-in-a-box/script.js"; ## 値としての関数 @@ -127,6 +130,15 @@ function onGreetingButtonClick() { buttonElement.onclick = onGreetingButtonClick; ``` - + diff --git a/docs/1-trial-session/15-project/index.mdx b/docs/1-trial-session/15-project/index.mdx index 769ac2ed..d336a478 100644 --- a/docs/1-trial-session/15-project/index.mdx +++ b/docs/1-trial-session/15-project/index.mdx @@ -2,8 +2,13 @@ title: プロジェクト --- +import { Sandpack } from "@codesandbox/sandpack-react"; import omikujiVideo from "./omikuji.mp4"; import stopwatchVideo from "./stopwatch.mp4"; +import omikujiHtml from "!!raw-loader!./_samples/omikuji/index.html"; +import omikujiJs from "!!raw-loader!./_samples/omikuji/script.js"; +import stopwatchHtml from "!!raw-loader!./_samples/stopwatch/index.html"; +import stopwatchJs from "!!raw-loader!./_samples/stopwatch/script.js"; これまで学んできた知識を利用して、はじめてのWebアプリケーション作りに挑戦してみましょう。題材が思いつかない場合は、下の例を参考にしてみてください。 @@ -59,7 +64,16 @@ omikujiButton.onclick = omikuji; ### 解答例 - + ## ストップウォッチ @@ -128,4 +142,13 @@ stopButton.onclick = stop; ### 解答例 - + From 7e8a5fa01fa306e6677b410abf5b43fa126d02a0 Mon Sep 17 00:00:00 2001 From: Rei Tsukada Date: Sat, 22 Nov 2025 17:36:30 +0900 Subject: [PATCH 03/26] =?UTF-8?q?=E3=83=97=E3=83=AD=E3=82=B8=E3=82=A7?= =?UTF-8?q?=E3=82=AF=E3=83=88=E3=82=92=E8=A7=A3=E7=AD=94=E4=BE=8B=E3=81=AB?= =?UTF-8?q?=E5=90=AB=E3=82=81=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/1-trial-session/15-project/index.mdx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/1-trial-session/15-project/index.mdx b/docs/1-trial-session/15-project/index.mdx index d336a478..28dff69e 100644 --- a/docs/1-trial-session/15-project/index.mdx +++ b/docs/1-trial-session/15-project/index.mdx @@ -141,6 +141,7 @@ stopButton.onclick = stop; ``` ### 解答例 + + \ No newline at end of file From 24c10dc4f5ffcb4b2e2e6d3e1aa878bff0c91bdd Mon Sep 17 00:00:00 2001 From: Rei Tsukada Date: Sat, 22 Nov 2025 17:38:54 +0900 Subject: [PATCH 04/26] prettier --- docs/1-trial-session/15-project/index.mdx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/1-trial-session/15-project/index.mdx b/docs/1-trial-session/15-project/index.mdx index 28dff69e..0c3bc808 100644 --- a/docs/1-trial-session/15-project/index.mdx +++ b/docs/1-trial-session/15-project/index.mdx @@ -141,6 +141,7 @@ stopButton.onclick = stop; ``` ### 解答例 + - \ No newline at end of file + From a21741e56d62fbdaaf1cc2b61becc581ed1a2c57 Mon Sep 17 00:00:00 2001 From: Rei Tsukada Date: Sat, 22 Nov 2025 17:50:52 +0900 Subject: [PATCH 05/26] raw loader dep --- docusaurus.config.js | 27 ++++++++++++++++ package-lock.json | 77 +++++++++++++++++++++++++++++++++++++++++++- package.json | 3 +- 3 files changed, 105 insertions(+), 2 deletions(-) diff --git a/docusaurus.config.js b/docusaurus.config.js index dbe18463..7ae78586 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -36,6 +36,33 @@ const config = { docsRouteBasePath: "/docs", }, ], + function (_context, _options) { + return { + name: "custom-webpack-config", + configureWebpack(_config, _isServer, _utils) { + return { + module: { + rules: [ + { + test: /\.html$/, + use: "raw-loader", + }, + { + test: /\.css$/, + resourceQuery: /raw/, + type: "asset/source", + }, + { + test: /\.js$/, + resourceQuery: /raw/, + type: "asset/source", + }, + ], + }, + }; + }, + }; + }, ], presets: [ [ diff --git a/package-lock.json b/package-lock.json index adb5cccb..2d15e2a2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -30,7 +30,8 @@ }, "devDependencies": { "@types/react-slick": "^0.23.13", - "prettier": "^3.6.2" + "prettier": "^3.6.2", + "raw-loader": "^4.0.2" }, "engines": { "node": ">=18.0" @@ -17298,6 +17299,80 @@ "node": ">=0.10.0" } }, + "node_modules/raw-loader": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-4.0.2.tgz", + "integrity": "sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==", + "dev": true, + "license": "MIT", + "dependencies": { + "loader-utils": "^2.0.0", + "schema-utils": "^3.0.0" + }, + "engines": { + "node": ">= 10.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "webpack": "^4.0.0 || ^5.0.0" + } + }, + "node_modules/raw-loader/node_modules/ajv": { + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "dev": true, + "license": "MIT", + "dependencies": { + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, + "node_modules/raw-loader/node_modules/ajv-keywords": { + "version": "3.5.2", + "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", + "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "ajv": "^6.9.1" + } + }, + "node_modules/raw-loader/node_modules/json-schema-traverse": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", + "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", + "dev": true, + "license": "MIT" + }, + "node_modules/raw-loader/node_modules/schema-utils": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz", + "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/json-schema": "^7.0.8", + "ajv": "^6.12.5", + "ajv-keywords": "^3.5.2" + }, + "engines": { + "node": ">= 10.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + } + }, "node_modules/rc": { "version": "1.2.8", "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz", diff --git a/package.json b/package.json index b29e0761..40bc5e85 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,7 @@ }, "devDependencies": { "@types/react-slick": "^0.23.13", - "prettier": "^3.6.2" + "prettier": "^3.6.2", + "raw-loader": "^4.0.2" } } From 1f48692003e7c8c7dcb41d080b7b747ec8f446e3 Mon Sep 17 00:00:00 2001 From: Rei Tsukada Date: Sat, 22 Nov 2025 18:03:06 +0900 Subject: [PATCH 06/26] check --- docusaurus.config.js | 27 --------------------------- 1 file changed, 27 deletions(-) diff --git a/docusaurus.config.js b/docusaurus.config.js index 7ae78586..dbe18463 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -36,33 +36,6 @@ const config = { docsRouteBasePath: "/docs", }, ], - function (_context, _options) { - return { - name: "custom-webpack-config", - configureWebpack(_config, _isServer, _utils) { - return { - module: { - rules: [ - { - test: /\.html$/, - use: "raw-loader", - }, - { - test: /\.css$/, - resourceQuery: /raw/, - type: "asset/source", - }, - { - test: /\.js$/, - resourceQuery: /raw/, - type: "asset/source", - }, - ], - }, - }; - }, - }; - }, ], presets: [ [ From 25ed4724b7a6e6359f4472713c004aa4ed0989c0 Mon Sep 17 00:00:00 2001 From: Rei Tsukada Date: Sat, 22 Nov 2025 18:10:16 +0900 Subject: [PATCH 07/26] =?UTF-8?q?=E4=B8=8D=E8=A6=81=E3=81=AAcomponent?= =?UTF-8?q?=E3=82=92=E5=89=8A=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Sandpack/index.jsx | 30 ------------------------------ 1 file changed, 30 deletions(-) delete mode 100644 src/components/Sandpack/index.jsx diff --git a/src/components/Sandpack/index.jsx b/src/components/Sandpack/index.jsx deleted file mode 100644 index d2607f68..00000000 --- a/src/components/Sandpack/index.jsx +++ /dev/null @@ -1,30 +0,0 @@ -import { Sandpack as SandpackBase } from "@codesandbox/sandpack-react"; - -/** - * Interactive code editor using Sandpack - */ -export default function Sandpack({ - files = {}, - template = "static", - theme = "auto", - options = {}, - customSetup = {}, - ...props -}) { - return ( - - ); -} From 25a0a33b292ba3da8ef0b4e1eedb43345aaad3ea Mon Sep 17 00:00:00 2001 From: Rei Tsukada Date: Sat, 22 Nov 2025 18:22:02 +0900 Subject: [PATCH 08/26] =?UTF-8?q?=E4=B8=8D=E8=A6=81=E3=81=AA=E3=83=95?= =?UTF-8?q?=E3=82=A1=E3=82=A4=E3=83=AB=E3=82=92=E5=89=8A=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../_samples/compound-assignment/index.html | 10 ---------- .../_samples/compound-assignment/script.js | 3 --- docs/1-trial-session/06-variables/index.mdx | 13 ------------- .../07-boolean/_samples/weird-comparison/index.html | 10 ---------- .../07-boolean/_samples/weird-comparison/script.js | 6 ------ docs/1-trial-session/07-boolean/index.mdx | 13 ------------- .../09-functions/_samples/max-no-else/index.html | 10 ---------- .../09-functions/_samples/max-no-else/script.js | 8 -------- docs/1-trial-session/09-functions/index.mdx | 13 ------------- .../13-dom/_samples/get-element-by-id/index.html | 11 ----------- .../13-dom/_samples/get-element-by-id/script.js | 2 -- docs/1-trial-session/13-dom/index.mdx | 13 ------------- 12 files changed, 112 deletions(-) delete mode 100644 docs/1-trial-session/06-variables/_samples/compound-assignment/index.html delete mode 100644 docs/1-trial-session/06-variables/_samples/compound-assignment/script.js delete mode 100644 docs/1-trial-session/07-boolean/_samples/weird-comparison/index.html delete mode 100644 docs/1-trial-session/07-boolean/_samples/weird-comparison/script.js delete mode 100644 docs/1-trial-session/09-functions/_samples/max-no-else/index.html delete mode 100644 docs/1-trial-session/09-functions/_samples/max-no-else/script.js delete mode 100644 docs/1-trial-session/13-dom/_samples/get-element-by-id/index.html delete mode 100644 docs/1-trial-session/13-dom/_samples/get-element-by-id/script.js diff --git a/docs/1-trial-session/06-variables/_samples/compound-assignment/index.html b/docs/1-trial-session/06-variables/_samples/compound-assignment/index.html deleted file mode 100644 index df19d188..00000000 --- a/docs/1-trial-session/06-variables/_samples/compound-assignment/index.html +++ /dev/null @@ -1,10 +0,0 @@ - - - - - Title - - - - - diff --git a/docs/1-trial-session/06-variables/_samples/compound-assignment/script.js b/docs/1-trial-session/06-variables/_samples/compound-assignment/script.js deleted file mode 100644 index cdeef199..00000000 --- a/docs/1-trial-session/06-variables/_samples/compound-assignment/script.js +++ /dev/null @@ -1,3 +0,0 @@ -let price = 100; -price = price / 2; -document.write(price); diff --git a/docs/1-trial-session/06-variables/index.mdx b/docs/1-trial-session/06-variables/index.mdx index 441adfab..ae407ce1 100644 --- a/docs/1-trial-session/06-variables/index.mdx +++ b/docs/1-trial-session/06-variables/index.mdx @@ -3,8 +3,6 @@ title: 変数 --- import { Sandpack } from "@codesandbox/sandpack-react"; -import compoundAssignmentHtml from "!!raw-loader!./_samples/compound-assignment/index.html"; -import compoundAssignmentJs from "!!raw-loader!./_samples/compound-assignment/script.js"; import counterHtml from "!!raw-loader!./_samples/counter/index.html"; import counterJs from "!!raw-loader!./_samples/counter/script.js"; @@ -93,17 +91,6 @@ price = price / 2; document.write(price); ``` - - {/* prettier-ignore */} 代入演算子は、まず右辺の式を評価します。これにより、右辺は`100 / 2`となります。よって、最終的に変数`price`の値は`50`となり、これは`price`を半分にする操作に対応します。 diff --git a/docs/1-trial-session/07-boolean/_samples/weird-comparison/index.html b/docs/1-trial-session/07-boolean/_samples/weird-comparison/index.html deleted file mode 100644 index df19d188..00000000 --- a/docs/1-trial-session/07-boolean/_samples/weird-comparison/index.html +++ /dev/null @@ -1,10 +0,0 @@ - - - - - Title - - - - - diff --git a/docs/1-trial-session/07-boolean/_samples/weird-comparison/script.js b/docs/1-trial-session/07-boolean/_samples/weird-comparison/script.js deleted file mode 100644 index 96ee5f29..00000000 --- a/docs/1-trial-session/07-boolean/_samples/weird-comparison/script.js +++ /dev/null @@ -1,6 +0,0 @@ -let takaoHeight = 599; -let everestHeight = 8849; -let fujiHeight = 3776; -document.write(takaoHeight < everestHeight < fujiHeight); -// prettier-ignore -document.write(takaoHeight = everestHeight); diff --git a/docs/1-trial-session/07-boolean/index.mdx b/docs/1-trial-session/07-boolean/index.mdx index bbeded54..e8e959be 100644 --- a/docs/1-trial-session/07-boolean/index.mdx +++ b/docs/1-trial-session/07-boolean/index.mdx @@ -3,8 +3,6 @@ title: 論理値と論理演算子 --- import { Sandpack } from "@codesandbox/sandpack-react"; -import weirdComparisonHtml from "!!raw-loader!./_samples/weird-comparison/index.html"; -import weirdComparisonJs from "!!raw-loader!./_samples/weird-comparison/script.js"; import quizShowHtml from "!!raw-loader!./_samples/quiz-show/index.html"; import quizShowJs from "!!raw-loader!./_samples/quiz-show/script.js"; @@ -98,17 +96,6 @@ document.write(takaoHeight < everestHeight < fujiHeight); document.write(takaoHeight = everestHeight); ``` - - - JavaScript で、数値と論理値に比較演算子を適用すると、`true`は`1`として、`false`は`0`として比較されます。 - `=`は代入演算子です。代入演算子の式が評価されると、右辺の値になります。 diff --git a/docs/1-trial-session/09-functions/_samples/max-no-else/index.html b/docs/1-trial-session/09-functions/_samples/max-no-else/index.html deleted file mode 100644 index ca212b86..00000000 --- a/docs/1-trial-session/09-functions/_samples/max-no-else/index.html +++ /dev/null @@ -1,10 +0,0 @@ - - - - - max関数 解答例 - - - - - diff --git a/docs/1-trial-session/09-functions/_samples/max-no-else/script.js b/docs/1-trial-session/09-functions/_samples/max-no-else/script.js deleted file mode 100644 index 7327845b..00000000 --- a/docs/1-trial-session/09-functions/_samples/max-no-else/script.js +++ /dev/null @@ -1,8 +0,0 @@ -function max(a, b) { - if (a > b) { - return a; - } - return b; -} - -document.write(`${4}と${7}のうち大きいのは${max(4, 7)}です。`); diff --git a/docs/1-trial-session/09-functions/index.mdx b/docs/1-trial-session/09-functions/index.mdx index b762693b..e94cced4 100644 --- a/docs/1-trial-session/09-functions/index.mdx +++ b/docs/1-trial-session/09-functions/index.mdx @@ -8,8 +8,6 @@ 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 maxNoElseHtml from "!!raw-loader!./_samples/max-no-else/index.html"; -import maxNoElseJs from "!!raw-loader!./_samples/max-no-else/script.js"; import mobilePhoneBillHtml from "!!raw-loader!./_samples/mobile-phone-bill/index.html"; import mobilePhoneBillJs from "!!raw-loader!./_samples/mobile-phone-bill/script.js"; @@ -229,17 +227,6 @@ function max(a, b) { } ``` - - ::: diff --git a/docs/1-trial-session/13-dom/_samples/get-element-by-id/index.html b/docs/1-trial-session/13-dom/_samples/get-element-by-id/index.html deleted file mode 100644 index fe0e1ad7..00000000 --- a/docs/1-trial-session/13-dom/_samples/get-element-by-id/index.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - - Title - - -
Hello World
- - - diff --git a/docs/1-trial-session/13-dom/_samples/get-element-by-id/script.js b/docs/1-trial-session/13-dom/_samples/get-element-by-id/script.js deleted file mode 100644 index 4d9efe9b..00000000 --- a/docs/1-trial-session/13-dom/_samples/get-element-by-id/script.js +++ /dev/null @@ -1,2 +0,0 @@ -const element = document.getElementById("greeting"); -element.textContent = "Hello DOM"; diff --git a/docs/1-trial-session/13-dom/index.mdx b/docs/1-trial-session/13-dom/index.mdx index 8ded2017..e73d1738 100644 --- a/docs/1-trial-session/13-dom/index.mdx +++ b/docs/1-trial-session/13-dom/index.mdx @@ -3,8 +3,6 @@ title: DOM --- import { Sandpack } from "@codesandbox/sandpack-react"; -import getElementByIdHtml from "!!raw-loader!./_samples/get-element-by-id/index.html"; -import getElementByIdJs from "!!raw-loader!./_samples/get-element-by-id/script.js"; import goodEveningHtml from "!!raw-loader!./_samples/good-evening/index.html"; import goodEveningJs from "!!raw-loader!./_samples/good-evening/script.js"; import changeStylesHtml from "!!raw-loader!./_samples/change-styles/index.html"; @@ -42,17 +40,6 @@ const greetingElement = document.getElementById("greeting"); greetingElement.textContent = "Hello DOM"; ``` - - {/* prettier-ignore */} 変数`greetingElement`には、`index.html`に記述された`div`要素に対応するオブジェクトが代入されています。 From 180a1df5d8b4eeac3aa21fc77cc9597e115c59c9 Mon Sep 17 00:00:00 2001 From: Rei Tsukada Date: Sat, 6 Dec 2025 19:58:25 +0900 Subject: [PATCH 09/26] =?UTF-8?q?=E6=BC=94=E7=BF=92=E5=95=8F=E9=A1=8C?= =?UTF-8?q?=E4=BB=A5=E5=A4=96=E3=81=AE=E3=83=95=E3=82=A1=E3=82=A4=E3=83=AB?= =?UTF-8?q?=E3=82=92=E5=89=8A=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../03-css/_samples/first-css/index.html | 10 -------- .../_samples/red-hello-world/index.html | 11 --------- .../03-css/_samples/red-hello-world/style.css | 3 --- docs/1-trial-session/03-css/index.mdx | 24 ------------------- .../10-loop/_samples/nested-loop/index.html | 10 -------- .../10-loop/_samples/nested-loop/script.js | 5 ---- docs/1-trial-session/10-loop/index.mdx | 12 ---------- 7 files changed, 75 deletions(-) delete mode 100644 docs/1-trial-session/03-css/_samples/first-css/index.html delete mode 100644 docs/1-trial-session/03-css/_samples/red-hello-world/index.html delete mode 100644 docs/1-trial-session/03-css/_samples/red-hello-world/style.css delete mode 100644 docs/1-trial-session/10-loop/_samples/nested-loop/index.html delete mode 100644 docs/1-trial-session/10-loop/_samples/nested-loop/script.js diff --git a/docs/1-trial-session/03-css/_samples/first-css/index.html b/docs/1-trial-session/03-css/_samples/first-css/index.html deleted file mode 100644 index b32bd1fc..00000000 --- a/docs/1-trial-session/03-css/_samples/first-css/index.html +++ /dev/null @@ -1,10 +0,0 @@ - - - - - Title - - -
Hello World!
- - 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 deleted file mode 100644 index a02ac135..00000000 --- a/docs/1-trial-session/03-css/_samples/red-hello-world/index.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - Title - - -
Hello World!
- - 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 deleted file mode 100644 index 542be487..00000000 --- a/docs/1-trial-session/03-css/_samples/red-hello-world/style.css +++ /dev/null @@ -1,3 +0,0 @@ -#greeting { - color: red; -} diff --git a/docs/1-trial-session/03-css/index.mdx b/docs/1-trial-session/03-css/index.mdx index f394c684..0614f496 100644 --- a/docs/1-trial-session/03-css/index.mdx +++ b/docs/1-trial-session/03-css/index.mdx @@ -3,9 +3,6 @@ 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"; @@ -23,16 +20,6 @@ import fooHtml from "!!raw-loader!./_samples/foo/index.html";
Hello World!
``` - - ![Hello World!](./red-hello-world.png) {/* prettier-ignore */} @@ -76,17 +63,6 @@ import fooHtml from "!!raw-loader!./_samples/foo/index.html"; } ``` - - ### `link`要素 ```html title="index.html" diff --git a/docs/1-trial-session/10-loop/_samples/nested-loop/index.html b/docs/1-trial-session/10-loop/_samples/nested-loop/index.html deleted file mode 100644 index 5136c57c..00000000 --- a/docs/1-trial-session/10-loop/_samples/nested-loop/index.html +++ /dev/null @@ -1,10 +0,0 @@ - - - - - ネストされたループ - - - - - diff --git a/docs/1-trial-session/10-loop/_samples/nested-loop/script.js b/docs/1-trial-session/10-loop/_samples/nested-loop/script.js deleted file mode 100644 index 219574d0..00000000 --- a/docs/1-trial-session/10-loop/_samples/nested-loop/script.js +++ /dev/null @@ -1,5 +0,0 @@ -for (let x = 0; x < 5; x += 1) { - for (let y = 0; y < 5; y += 1) { - document.write(`(x, y) = (${x}, ${y})
`); - } -} diff --git a/docs/1-trial-session/10-loop/index.mdx b/docs/1-trial-session/10-loop/index.mdx index ebe831a6..57a03718 100644 --- a/docs/1-trial-session/10-loop/index.mdx +++ b/docs/1-trial-session/10-loop/index.mdx @@ -8,8 +8,6 @@ import answerWhileHtml from "!!raw-loader!./_samples/answer-while/index.html"; import answerWhileJs from "!!raw-loader!./_samples/answer-while/script.js"; import answerForHtml from "!!raw-loader!./_samples/answer-for/index.html"; import answerForJs from "!!raw-loader!./_samples/answer-for/script.js"; -import nestedLoopHtml from "!!raw-loader!./_samples/nested-loop/index.html"; -import nestedLoopJs from "!!raw-loader!./_samples/nested-loop/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"; @@ -149,16 +147,6 @@ for (let x = 0; x < 5; x += 1) { } ``` - :::tip[テンプレートリテラル] From 2d52afdb4a36e7c62bb65fa0013097d04207aafd Mon Sep 17 00:00:00 2001 From: Rei Tsukada Date: Sat, 6 Dec 2025 20:00:23 +0900 Subject: [PATCH 10/26] =?UTF-8?q?Answer=E3=81=AE=E4=B8=AD=E3=81=AB?= =?UTF-8?q?=E7=A7=BB=E5=8B=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/1-trial-session/03-css/index.mdx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/1-trial-session/03-css/index.mdx b/docs/1-trial-session/03-css/index.mdx index 0614f496..94a9c05b 100644 --- a/docs/1-trial-session/03-css/index.mdx +++ b/docs/1-trial-session/03-css/index.mdx @@ -126,8 +126,6 @@ HTMLファイルとCSSファイルを分けて作成する場合、`style`属性 ``` - - + ## 演習問題2 From 3878e6b0d765b4beeba75b7d22655fbb03b61bc0 Mon Sep 17 00:00:00 2001 From: Rei Tsukada Date: Sat, 6 Dec 2025 20:08:37 +0900 Subject: [PATCH 11/26] =?UTF-8?q?css=20=E6=BC=94=E7=BF=92=E5=95=8F?= =?UTF-8?q?=E9=A1=8C3=E3=81=AE=E8=A7=A3=E7=AD=94=E3=82=92=E4=BF=AE?= =?UTF-8?q?=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/1-trial-session/03-css/_samples/foo/index.html | 13 ++----------- docs/1-trial-session/03-css/_samples/foo/style.css | 7 +++++++ docs/1-trial-session/03-css/index.mdx | 2 ++ 3 files changed, 11 insertions(+), 11 deletions(-) create mode 100644 docs/1-trial-session/03-css/_samples/foo/style.css diff --git a/docs/1-trial-session/03-css/_samples/foo/index.html b/docs/1-trial-session/03-css/_samples/foo/index.html index 7b0a9580..e616bbb4 100644 --- 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 @@ + Title -
- Foo -
+
Foo
diff --git a/docs/1-trial-session/03-css/_samples/foo/style.css b/docs/1-trial-session/03-css/_samples/foo/style.css new file mode 100644 index 00000000..90ea2c7c --- /dev/null +++ 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 index 94a9c05b..e9e8d889 100644 --- a/docs/1-trial-session/03-css/index.mdx +++ b/docs/1-trial-session/03-css/index.mdx @@ -6,6 +6,7 @@ import { Sandpack } from "@codesandbox/sandpack-react"; 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サイトの「見た目」をつかさどる言語です。多くのHTML要素は、CSSを用いることで、その見た目を細かくカスタマイズすることができます。 @@ -196,6 +197,7 @@ HTMLファイルとCSSファイルを分けて作成する場合、`style`属性 template="static" files={{ "/index.html": fooHtml, + "/style.css": fooCss, }} options={{ activeFile: "/index.html", From 4b04494482b98372e87e89bc89d14ab9762845e6 Mon Sep 17 00:00:00 2001 From: Rei Tsukada Date: Sat, 6 Dec 2025 20:16:31 +0900 Subject: [PATCH 12/26] =?UTF-8?q?import=E3=82=921=E3=81=A4=E3=81=AB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/1-trial-session/02-html/index.mdx | 1 - docs/1-trial-session/03-css/index.mdx | 1 - docs/1-trial-session/06-variables/index.mdx | 1 - docs/1-trial-session/07-boolean/index.mdx | 1 - docs/1-trial-session/08-if-statement/index.mdx | 1 - docs/1-trial-session/09-functions/index.mdx | 1 - docs/1-trial-session/10-loop/index.mdx | 1 - docs/1-trial-session/11-array/index.mdx | 1 - docs/1-trial-session/12-object/index.mdx | 1 - docs/1-trial-session/13-dom/index.mdx | 1 - docs/1-trial-session/14-events/index.mdx | 1 - docs/1-trial-session/15-project/index.mdx | 1 - src/theme/MDXComponents.js | 2 ++ 13 files changed, 2 insertions(+), 12 deletions(-) diff --git a/docs/1-trial-session/02-html/index.mdx b/docs/1-trial-session/02-html/index.mdx index 876f804b..7ae88003 100644 --- a/docs/1-trial-session/02-html/index.mdx +++ b/docs/1-trial-session/02-html/index.mdx @@ -2,7 +2,6 @@ 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"; diff --git a/docs/1-trial-session/03-css/index.mdx b/docs/1-trial-session/03-css/index.mdx index e9e8d889..4df64897 100644 --- a/docs/1-trial-session/03-css/index.mdx +++ b/docs/1-trial-session/03-css/index.mdx @@ -2,7 +2,6 @@ title: CSS --- -import { Sandpack } from "@codesandbox/sandpack-react"; 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"; diff --git a/docs/1-trial-session/06-variables/index.mdx b/docs/1-trial-session/06-variables/index.mdx index ae407ce1..1c845c45 100644 --- a/docs/1-trial-session/06-variables/index.mdx +++ b/docs/1-trial-session/06-variables/index.mdx @@ -2,7 +2,6 @@ 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"; diff --git a/docs/1-trial-session/07-boolean/index.mdx b/docs/1-trial-session/07-boolean/index.mdx index e8e959be..74cef0a3 100644 --- a/docs/1-trial-session/07-boolean/index.mdx +++ b/docs/1-trial-session/07-boolean/index.mdx @@ -2,7 +2,6 @@ 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"; diff --git a/docs/1-trial-session/08-if-statement/index.mdx b/docs/1-trial-session/08-if-statement/index.mdx index 1ee1a3e4..9057aec2 100644 --- a/docs/1-trial-session/08-if-statement/index.mdx +++ b/docs/1-trial-session/08-if-statement/index.mdx @@ -2,7 +2,6 @@ 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"; diff --git a/docs/1-trial-session/09-functions/index.mdx b/docs/1-trial-session/09-functions/index.mdx index e94cced4..8fdf2068 100644 --- a/docs/1-trial-session/09-functions/index.mdx +++ b/docs/1-trial-session/09-functions/index.mdx @@ -2,7 +2,6 @@ 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"; diff --git a/docs/1-trial-session/10-loop/index.mdx b/docs/1-trial-session/10-loop/index.mdx index 57a03718..4dc2b5c6 100644 --- a/docs/1-trial-session/10-loop/index.mdx +++ b/docs/1-trial-session/10-loop/index.mdx @@ -2,7 +2,6 @@ title: 繰り返し --- -import { Sandpack } from "@codesandbox/sandpack-react"; import whileLoopVideo from "./while-loop.mp4"; import answerWhileHtml from "!!raw-loader!./_samples/answer-while/index.html"; import answerWhileJs from "!!raw-loader!./_samples/answer-while/script.js"; diff --git a/docs/1-trial-session/11-array/index.mdx b/docs/1-trial-session/11-array/index.mdx index 3ff25685..a50be9c6 100644 --- a/docs/1-trial-session/11-array/index.mdx +++ b/docs/1-trial-session/11-array/index.mdx @@ -2,7 +2,6 @@ title: 配列 --- -import { Sandpack } from "@codesandbox/sandpack-react"; import arrayHtml from "!!raw-loader!./_samples/array/index.html"; import arrayJs from "!!raw-loader!./_samples/array/script.js"; import arraySumForOfHtml from "!!raw-loader!./_samples/array-sum-for-of/index.html"; diff --git a/docs/1-trial-session/12-object/index.mdx b/docs/1-trial-session/12-object/index.mdx index 81e61407..78297a51 100644 --- a/docs/1-trial-session/12-object/index.mdx +++ b/docs/1-trial-session/12-object/index.mdx @@ -2,7 +2,6 @@ title: オブジェクト --- -import { Sandpack } from "@codesandbox/sandpack-react"; import createUserObjectHtml from "!!raw-loader!./_samples/create-user-object/index.html"; import createUserObjectJs from "!!raw-loader!./_samples/create-user-object/script.js"; import changeBioPropertyHtml from "!!raw-loader!./_samples/change-bio-property/index.html"; diff --git a/docs/1-trial-session/13-dom/index.mdx b/docs/1-trial-session/13-dom/index.mdx index e73d1738..3cb01c68 100644 --- a/docs/1-trial-session/13-dom/index.mdx +++ b/docs/1-trial-session/13-dom/index.mdx @@ -2,7 +2,6 @@ title: DOM --- -import { Sandpack } from "@codesandbox/sandpack-react"; import goodEveningHtml from "!!raw-loader!./_samples/good-evening/index.html"; import goodEveningJs from "!!raw-loader!./_samples/good-evening/script.js"; import changeStylesHtml from "!!raw-loader!./_samples/change-styles/index.html"; diff --git a/docs/1-trial-session/14-events/index.mdx b/docs/1-trial-session/14-events/index.mdx index c5d05eb3..de3067b9 100644 --- a/docs/1-trial-session/14-events/index.mdx +++ b/docs/1-trial-session/14-events/index.mdx @@ -2,7 +2,6 @@ title: イベント --- -import { Sandpack } from "@codesandbox/sandpack-react"; import handleClickVideo from "./handle-click.mp4"; import projectMovieForDom from "./project-movie-for-dom.mp4"; import projectJackInABoxHtml from "!!raw-loader!./_samples/project-jack-in-a-box/index.html"; diff --git a/docs/1-trial-session/15-project/index.mdx b/docs/1-trial-session/15-project/index.mdx index 0c3bc808..c0a0f079 100644 --- a/docs/1-trial-session/15-project/index.mdx +++ b/docs/1-trial-session/15-project/index.mdx @@ -2,7 +2,6 @@ title: プロジェクト --- -import { Sandpack } from "@codesandbox/sandpack-react"; import omikujiVideo from "./omikuji.mp4"; import stopwatchVideo from "./stopwatch.mp4"; import omikujiHtml from "!!raw-loader!./_samples/omikuji/index.html"; diff --git a/src/theme/MDXComponents.js b/src/theme/MDXComponents.js index bac48cc5..10c5ea20 100644 --- a/src/theme/MDXComponents.js +++ b/src/theme/MDXComponents.js @@ -11,6 +11,7 @@ import Details from "@theme/Details"; import Tabs from "@theme/Tabs"; import TabItem from "@theme/TabItem"; import CodeBlock from "@theme/CodeBlock"; +import { Sandpack } from "@codesandbox/sandpack-react"; // custom components import Answer from "@site/src/components/Answer"; @@ -27,6 +28,7 @@ export default { Tabs, TabItem, CodeBlock, + Sandpack, // export custom Components Answer, From 84690843b55d457a84ed07fb3425dde7b28d1ad2 Mon Sep 17 00:00:00 2001 From: Rei Tsukada Date: Sat, 6 Dec 2025 20:24:39 +0900 Subject: [PATCH 13/26] =?UTF-8?q?weired=20comparison=E3=81=AFview=20soruce?= =?UTF-8?q?=E3=81=AE=E3=81=BE=E3=81=BE=E3=81=AB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../07-boolean/_samples/weird-comparison/index.html | 10 ++++++++++ .../07-boolean/_samples/weird-comparison/script.js | 6 ++++++ docs/1-trial-session/07-boolean/index.mdx | 2 ++ 3 files changed, 18 insertions(+) create mode 100644 docs/1-trial-session/07-boolean/_samples/weird-comparison/index.html create mode 100644 docs/1-trial-session/07-boolean/_samples/weird-comparison/script.js diff --git a/docs/1-trial-session/07-boolean/_samples/weird-comparison/index.html b/docs/1-trial-session/07-boolean/_samples/weird-comparison/index.html new file mode 100644 index 00000000..df19d188 --- /dev/null +++ b/docs/1-trial-session/07-boolean/_samples/weird-comparison/index.html @@ -0,0 +1,10 @@ + + + + + Title + + + + + diff --git a/docs/1-trial-session/07-boolean/_samples/weird-comparison/script.js b/docs/1-trial-session/07-boolean/_samples/weird-comparison/script.js new file mode 100644 index 00000000..96ee5f29 --- /dev/null +++ b/docs/1-trial-session/07-boolean/_samples/weird-comparison/script.js @@ -0,0 +1,6 @@ +let takaoHeight = 599; +let everestHeight = 8849; +let fujiHeight = 3776; +document.write(takaoHeight < everestHeight < fujiHeight); +// prettier-ignore +document.write(takaoHeight = everestHeight); diff --git a/docs/1-trial-session/07-boolean/index.mdx b/docs/1-trial-session/07-boolean/index.mdx index 74cef0a3..81363819 100644 --- a/docs/1-trial-session/07-boolean/index.mdx +++ b/docs/1-trial-session/07-boolean/index.mdx @@ -98,6 +98,8 @@ document.write(takaoHeight = everestHeight); - JavaScript で、数値と論理値に比較演算子を適用すると、`true`は`1`として、`false`は`0`として比較されます。 - `=`は代入演算子です。代入演算子の式が評価されると、右辺の値になります。 + + ::: ## 演習問題 From afaa34cd84eb3e03d3564b2fd071ea416fc3485c Mon Sep 17 00:00:00 2001 From: Rei Tsukada Date: Sat, 6 Dec 2025 21:27:59 +0900 Subject: [PATCH 14/26] fix prettier --- docs/1-trial-session/10-loop/index.mdx | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/1-trial-session/10-loop/index.mdx b/docs/1-trial-session/10-loop/index.mdx index 4dc2b5c6..0da705f4 100644 --- a/docs/1-trial-session/10-loop/index.mdx +++ b/docs/1-trial-session/10-loop/index.mdx @@ -146,7 +146,6 @@ for (let x = 0; x < 5; x += 1) { } ``` - :::tip[テンプレートリテラル] テンプレートリテラルは、文字列をプログラム中に記述する方法の一種です。ただ、文字列中に別の式を埋め込めるという特徴があります。 From 27a8ecff8e933a154d50aa79e2dba33eed088beb Mon Sep 17 00:00:00 2001 From: Rei Tsukada Date: Sat, 6 Dec 2025 21:39:01 +0900 Subject: [PATCH 15/26] =?UTF-8?q?while=E3=81=AEsandpack=E3=81=AF=E3=81=AA?= =?UTF-8?q?=E3=81=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../10-loop/_samples/answer-while/index.html | 10 ---------- .../10-loop/_samples/answer-while/script.js | 7 ------- docs/1-trial-session/10-loop/index.mdx | 13 ------------- 3 files changed, 30 deletions(-) delete mode 100644 docs/1-trial-session/10-loop/_samples/answer-while/index.html delete mode 100644 docs/1-trial-session/10-loop/_samples/answer-while/script.js diff --git a/docs/1-trial-session/10-loop/_samples/answer-while/index.html b/docs/1-trial-session/10-loop/_samples/answer-while/index.html deleted file mode 100644 index 8722ae51..00000000 --- a/docs/1-trial-session/10-loop/_samples/answer-while/index.html +++ /dev/null @@ -1,10 +0,0 @@ - - - - - 確認問題の解答 - - - - - diff --git a/docs/1-trial-session/10-loop/_samples/answer-while/script.js b/docs/1-trial-session/10-loop/_samples/answer-while/script.js deleted file mode 100644 index 20a12a83..00000000 --- a/docs/1-trial-session/10-loop/_samples/answer-while/script.js +++ /dev/null @@ -1,7 +0,0 @@ -let i = 1; -let sum = 0; -while (i <= 10) { - sum = sum + i; - i = i + 1; -} -document.write(sum); diff --git a/docs/1-trial-session/10-loop/index.mdx b/docs/1-trial-session/10-loop/index.mdx index 0da705f4..a4710f30 100644 --- a/docs/1-trial-session/10-loop/index.mdx +++ b/docs/1-trial-session/10-loop/index.mdx @@ -3,8 +3,6 @@ title: 繰り返し --- import whileLoopVideo from "./while-loop.mp4"; -import answerWhileHtml from "!!raw-loader!./_samples/answer-while/index.html"; -import answerWhileJs from "!!raw-loader!./_samples/answer-while/script.js"; 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"; @@ -67,17 +65,6 @@ while (i <= 10) { document.write(sum); ``` - - ## for 文 From 756c1e1b8a6046d5f29c92d4f4800045e78ad37c Mon Sep 17 00:00:00 2001 From: Rei Tsukada Date: Sun, 14 Dec 2025 21:11:18 +0900 Subject: [PATCH 16/26] =?UTF-8?q?css=E3=82=92active=E3=81=AB=E3=81=97?= =?UTF-8?q?=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/1-trial-session/03-css/index.mdx | 4 ++-- docs/1-trial-session/10-loop/index.mdx | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/1-trial-session/03-css/index.mdx b/docs/1-trial-session/03-css/index.mdx index 4df64897..f34ce28d 100644 --- a/docs/1-trial-session/03-css/index.mdx +++ b/docs/1-trial-session/03-css/index.mdx @@ -133,7 +133,7 @@ HTMLファイルとCSSファイルを分けて作成する場合、`style`属性 "/style.css": yellowHelloCssCss, }} options={{ - activeFile: "/index.html", + activeFile: "/style.css", }} /> @@ -199,7 +199,7 @@ HTMLファイルとCSSファイルを分けて作成する場合、`style`属性 "/style.css": fooCss, }} options={{ - activeFile: "/index.html", + activeFile: "/style.css", }} /> diff --git a/docs/1-trial-session/10-loop/index.mdx b/docs/1-trial-session/10-loop/index.mdx index a4710f30..ba9c66ea 100644 --- a/docs/1-trial-session/10-loop/index.mdx +++ b/docs/1-trial-session/10-loop/index.mdx @@ -64,6 +64,7 @@ while (i <= 10) { } document.write(sum); ``` + From 97064c8467e656fc307d54e05ba030aecb2546c8 Mon Sep 17 00:00:00 2001 From: Rei Tsukada Date: Sun, 14 Dec 2025 21:13:09 +0900 Subject: [PATCH 17/26] =?UTF-8?q?view=20source=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../10-loop/_samples/answer-while/index.html | 10 ++++++++++ .../10-loop/_samples/answer-while/script.js | 7 +++++++ 2 files changed, 17 insertions(+) create mode 100644 docs/1-trial-session/10-loop/_samples/answer-while/index.html create mode 100644 docs/1-trial-session/10-loop/_samples/answer-while/script.js diff --git a/docs/1-trial-session/10-loop/_samples/answer-while/index.html b/docs/1-trial-session/10-loop/_samples/answer-while/index.html new file mode 100644 index 00000000..fe3c818f --- /dev/null +++ b/docs/1-trial-session/10-loop/_samples/answer-while/index.html @@ -0,0 +1,10 @@ + + + + + 確認問題の解答 + + + + + \ No newline at end of file diff --git a/docs/1-trial-session/10-loop/_samples/answer-while/script.js b/docs/1-trial-session/10-loop/_samples/answer-while/script.js new file mode 100644 index 00000000..1150d36c --- /dev/null +++ b/docs/1-trial-session/10-loop/_samples/answer-while/script.js @@ -0,0 +1,7 @@ +let i = 1; +let sum = 0; +while (i <= 10) { + sum = sum + i; + i = i + 1; +} +document.write(sum); \ No newline at end of file From 12432c583c7fa8b0ac476d6e3e66f0b9b04d0d06 Mon Sep 17 00:00:00 2001 From: Rei Tsukada Date: Sun, 14 Dec 2025 21:15:24 +0900 Subject: [PATCH 18/26] format --- docs/1-trial-session/10-loop/_samples/answer-while/index.html | 2 +- docs/1-trial-session/10-loop/_samples/answer-while/script.js | 2 +- docs/1-trial-session/10-loop/index.mdx | 1 + 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/1-trial-session/10-loop/_samples/answer-while/index.html b/docs/1-trial-session/10-loop/_samples/answer-while/index.html index fe3c818f..8722ae51 100644 --- a/docs/1-trial-session/10-loop/_samples/answer-while/index.html +++ b/docs/1-trial-session/10-loop/_samples/answer-while/index.html @@ -7,4 +7,4 @@ - \ No newline at end of file + diff --git a/docs/1-trial-session/10-loop/_samples/answer-while/script.js b/docs/1-trial-session/10-loop/_samples/answer-while/script.js index 1150d36c..20a12a83 100644 --- a/docs/1-trial-session/10-loop/_samples/answer-while/script.js +++ b/docs/1-trial-session/10-loop/_samples/answer-while/script.js @@ -4,4 +4,4 @@ while (i <= 10) { sum = sum + i; i = i + 1; } -document.write(sum); \ No newline at end of file +document.write(sum); diff --git a/docs/1-trial-session/10-loop/index.mdx b/docs/1-trial-session/10-loop/index.mdx index ba9c66ea..99c54bc0 100644 --- a/docs/1-trial-session/10-loop/index.mdx +++ b/docs/1-trial-session/10-loop/index.mdx @@ -64,6 +64,7 @@ while (i <= 10) { } document.write(sum); ``` + From bf5716443c1b614d5b497851d49354ad3e555b7a Mon Sep 17 00:00:00 2001 From: Rei Tsukada Date: Sun, 14 Dec 2025 21:29:56 +0900 Subject: [PATCH 19/26] chore: trigger CI From 5d581e2c5882716e1321153335369d738a1e83be Mon Sep 17 00:00:00 2001 From: Rei Tsukada Date: Sat, 20 Dec 2025 20:35:41 +0900 Subject: [PATCH 20/26] fix --- package-lock.json | 3 +-- package.json | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index a6ad5dba..7f5a85c7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -35,9 +35,8 @@ "@docusaurus/types": "^3.9.1", "@types/react-slick": "^0.23.13", "prettier": "^3.6.2", - "raw-loader": "^4.0.2" + "raw-loader": "^4.0.2", "typescript": "^5.9.3" - }, "engines": { "node": ">=18.0" diff --git a/package.json b/package.json index d2c48967..ce8f3bf3 100644 --- a/package.json +++ b/package.json @@ -55,7 +55,7 @@ "@docusaurus/types": "^3.9.1", "@types/react-slick": "^0.23.13", "prettier": "^3.6.2", - "raw-loader": "^4.0.2" + "raw-loader": "^4.0.2", "typescript": "^5.9.3" } } From 5da31d5488ff30418ff96336bb89f4e510bf68cb Mon Sep 17 00:00:00 2001 From: Rei Tsukada Date: Sat, 20 Dec 2025 20:43:40 +0900 Subject: [PATCH 21/26] =?UTF-8?q?=E5=A4=89=E6=95=B0=E3=81=AE=E7=AB=A0?= =?UTF-8?q?=E3=81=AEviewsource=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../_samples/compound-assignment/index.html | 10 ++++++++++ .../_samples/compound-assignment/script.js | 3 +++ docs/1-trial-session/06-variables/index.mdx | 2 ++ 3 files changed, 15 insertions(+) create mode 100644 docs/1-trial-session/06-variables/_samples/compound-assignment/index.html create mode 100644 docs/1-trial-session/06-variables/_samples/compound-assignment/script.js diff --git a/docs/1-trial-session/06-variables/_samples/compound-assignment/index.html b/docs/1-trial-session/06-variables/_samples/compound-assignment/index.html new file mode 100644 index 00000000..df19d188 --- /dev/null +++ b/docs/1-trial-session/06-variables/_samples/compound-assignment/index.html @@ -0,0 +1,10 @@ + + + + + Title + + + + + diff --git a/docs/1-trial-session/06-variables/_samples/compound-assignment/script.js b/docs/1-trial-session/06-variables/_samples/compound-assignment/script.js new file mode 100644 index 00000000..cdeef199 --- /dev/null +++ b/docs/1-trial-session/06-variables/_samples/compound-assignment/script.js @@ -0,0 +1,3 @@ +let price = 100; +price = price / 2; +document.write(price); diff --git a/docs/1-trial-session/06-variables/index.mdx b/docs/1-trial-session/06-variables/index.mdx index 1c845c45..cbdd4881 100644 --- a/docs/1-trial-session/06-variables/index.mdx +++ b/docs/1-trial-session/06-variables/index.mdx @@ -90,6 +90,8 @@ price = price / 2; document.write(price); ``` + + {/* prettier-ignore */} 代入演算子は、まず右辺の式を評価します。これにより、右辺は`100 / 2`となります。よって、最終的に変数`price`の値は`50`となり、これは`price`を半分にする操作に対応します。 From 1bdb2c0e5e833f5539f6f6ed1a1c430dd38e545e Mon Sep 17 00:00:00 2001 From: Rei Tsukada Date: Sat, 20 Dec 2025 20:49:21 +0900 Subject: [PATCH 22/26] =?UTF-8?q?=E9=96=A2=E6=95=B0=E3=81=AEviewsource?= =?UTF-8?q?=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/1-trial-session/09-functions/_samples/index.html | 10 ++++++++++ docs/1-trial-session/09-functions/_samples/script.js | 8 ++++++++ docs/1-trial-session/09-functions/index.mdx | 2 ++ 3 files changed, 20 insertions(+) create mode 100644 docs/1-trial-session/09-functions/_samples/index.html create mode 100644 docs/1-trial-session/09-functions/_samples/script.js diff --git a/docs/1-trial-session/09-functions/_samples/index.html b/docs/1-trial-session/09-functions/_samples/index.html new file mode 100644 index 00000000..ca212b86 --- /dev/null +++ b/docs/1-trial-session/09-functions/_samples/index.html @@ -0,0 +1,10 @@ + + + + + max関数 解答例 + + + + + diff --git a/docs/1-trial-session/09-functions/_samples/script.js b/docs/1-trial-session/09-functions/_samples/script.js new file mode 100644 index 00000000..7327845b --- /dev/null +++ b/docs/1-trial-session/09-functions/_samples/script.js @@ -0,0 +1,8 @@ +function max(a, b) { + if (a > b) { + return a; + } + return b; +} + +document.write(`${4}と${7}のうち大きいのは${max(4, 7)}です。`); diff --git a/docs/1-trial-session/09-functions/index.mdx b/docs/1-trial-session/09-functions/index.mdx index 8fdf2068..21791a1e 100644 --- a/docs/1-trial-session/09-functions/index.mdx +++ b/docs/1-trial-session/09-functions/index.mdx @@ -202,6 +202,8 @@ function max(a, b) { } ``` + + Date: Sat, 20 Dec 2025 20:52:09 +0900 Subject: [PATCH 23/26] =?UTF-8?q?=E3=83=AB=E3=83=BC=E3=83=97=E3=81=AE?= =?UTF-8?q?=E7=AB=A0=E3=81=AEview=20source=20=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/1-trial-session/10-loop/_samples/index.html | 10 ++++++++++ docs/1-trial-session/10-loop/_samples/script.js | 5 +++++ docs/1-trial-session/10-loop/index.mdx | 2 ++ 3 files changed, 17 insertions(+) create mode 100644 docs/1-trial-session/10-loop/_samples/index.html create mode 100644 docs/1-trial-session/10-loop/_samples/script.js diff --git a/docs/1-trial-session/10-loop/_samples/index.html b/docs/1-trial-session/10-loop/_samples/index.html new file mode 100644 index 00000000..5136c57c --- /dev/null +++ b/docs/1-trial-session/10-loop/_samples/index.html @@ -0,0 +1,10 @@ + + + + + ネストされたループ + + + + + diff --git a/docs/1-trial-session/10-loop/_samples/script.js b/docs/1-trial-session/10-loop/_samples/script.js new file mode 100644 index 00000000..219574d0 --- /dev/null +++ b/docs/1-trial-session/10-loop/_samples/script.js @@ -0,0 +1,5 @@ +for (let x = 0; x < 5; x += 1) { + for (let y = 0; y < 5; y += 1) { + document.write(`(x, y) = (${x}, ${y})
`); + } +} diff --git a/docs/1-trial-session/10-loop/index.mdx b/docs/1-trial-session/10-loop/index.mdx index 99c54bc0..29393e4c 100644 --- a/docs/1-trial-session/10-loop/index.mdx +++ b/docs/1-trial-session/10-loop/index.mdx @@ -135,6 +135,8 @@ for (let x = 0; x < 5; x += 1) { } ``` + + :::tip[テンプレートリテラル] テンプレートリテラルは、文字列をプログラム中に記述する方法の一種です。ただ、文字列中に別の式を埋め込めるという特徴があります。 From 8d96eb9f89b7abdcb9767730e513dbd9a565b4d7 Mon Sep 17 00:00:00 2001 From: Rei Tsukada Date: Sat, 20 Dec 2025 20:56:49 +0900 Subject: [PATCH 24/26] =?UTF-8?q?dom=E3=81=AE=E7=AB=A0=E3=81=ABviewsource?= =?UTF-8?q?=20=E5=BE=A9=E6=B4=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../13-dom/_samples/get-element-by-id/index.html | 11 +++++++++++ .../13-dom/_samples/get-element-by-id/scripts.js | 2 ++ docs/1-trial-session/13-dom/index.mdx | 2 ++ 3 files changed, 15 insertions(+) create mode 100644 docs/1-trial-session/13-dom/_samples/get-element-by-id/index.html create mode 100644 docs/1-trial-session/13-dom/_samples/get-element-by-id/scripts.js diff --git a/docs/1-trial-session/13-dom/_samples/get-element-by-id/index.html b/docs/1-trial-session/13-dom/_samples/get-element-by-id/index.html new file mode 100644 index 00000000..fe0e1ad7 --- /dev/null +++ b/docs/1-trial-session/13-dom/_samples/get-element-by-id/index.html @@ -0,0 +1,11 @@ + + + + + Title + + +
Hello World
+ + + diff --git a/docs/1-trial-session/13-dom/_samples/get-element-by-id/scripts.js b/docs/1-trial-session/13-dom/_samples/get-element-by-id/scripts.js new file mode 100644 index 00000000..4d9efe9b --- /dev/null +++ b/docs/1-trial-session/13-dom/_samples/get-element-by-id/scripts.js @@ -0,0 +1,2 @@ +const element = document.getElementById("greeting"); +element.textContent = "Hello DOM"; diff --git a/docs/1-trial-session/13-dom/index.mdx b/docs/1-trial-session/13-dom/index.mdx index 3cb01c68..d7d18a9c 100644 --- a/docs/1-trial-session/13-dom/index.mdx +++ b/docs/1-trial-session/13-dom/index.mdx @@ -39,6 +39,8 @@ const greetingElement = document.getElementById("greeting"); greetingElement.textContent = "Hello DOM"; ``` + + {/* prettier-ignore */} 変数`greetingElement`には、`index.html`に記述された`div`要素に対応するオブジェクトが代入されています。 From 2d4b004f8bd1de871651c4357d22f6bf776fc940 Mon Sep 17 00:00:00 2001 From: Rei Tsukada Date: Sat, 20 Dec 2025 20:58:42 +0900 Subject: [PATCH 25/26] =?UTF-8?q?=E3=81=8A=E3=81=BF=E3=81=8F=E3=81=98?= =?UTF-8?q?=E3=82=92Answer=E3=81=A7=E5=9B=B2=E3=81=A3=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/1-trial-session/15-project/index.mdx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/1-trial-session/15-project/index.mdx b/docs/1-trial-session/15-project/index.mdx index c0a0f079..bb02e8bd 100644 --- a/docs/1-trial-session/15-project/index.mdx +++ b/docs/1-trial-session/15-project/index.mdx @@ -63,6 +63,8 @@ omikujiButton.onclick = omikuji; ### 解答例 + + + + ## ストップウォッチ シンプルなストップウォッチです。おみくじの課題より難易度が高いです。 From 6f1f7ffd12c5bf24b4ca763e8675cf7af1c72f64 Mon Sep 17 00:00:00 2001 From: Rei Tsukada Date: Sat, 20 Dec 2025 21:15:41 +0900 Subject: [PATCH 26/26] =?UTF-8?q?css=E3=81=AEview=20source=E5=BE=A9?= =?UTF-8?q?=E6=B4=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../03-css/_samples/first-class/index.html | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 docs/1-trial-session/03-css/_samples/first-class/index.html diff --git a/docs/1-trial-session/03-css/_samples/first-class/index.html b/docs/1-trial-session/03-css/_samples/first-class/index.html new file mode 100644 index 00000000..b32bd1fc --- /dev/null +++ b/docs/1-trial-session/03-css/_samples/first-class/index.html @@ -0,0 +1,10 @@ + + + + + Title + + +
Hello World!
+ +