Skip to content

Commit d66919b

Browse files
Yokomi422Yokomi422
committed
演習問題にsandpackの解答を追加
1 parent 98512c9 commit d66919b

File tree

12 files changed

+466
-93
lines changed

12 files changed

+466
-93
lines changed

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

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,13 @@
22
title: HTML
33
---
44

5+
import { Sandpack } from "@codesandbox/sandpack-react";
56
import createFileVideo from "./create-file.mp4";
67
import openInBrowserVideo from "./open-in-browser.mp4";
78
import showFileExtensionsVideo from "./show-file-extensions.mp4";
89
import reloadBrowserVideo from "./reload-browser.mp4";
10+
import excursionHtml from "!!raw-loader!./_samples/excursion/index.html";
11+
import formHtml from "!!raw-loader!./_samples/form/index.html";
912

1013
Web開発に必ず用いられる言語があります。<Term>**HTML**</Term>とCSS、そしてJavaScriptです。これらは互いに異なる役割をもっています。まずは最も基本となる<Term>HTML</Term>から学んでいきましょう。
1114

@@ -155,7 +158,15 @@ VS Code上で作成したファイルは`index.html`でした。しかしなが
155158
</html>
156159
```
157160

158-
<ViewSource url={import.meta.url} path="_samples/excursion" />
161+
<Sandpack
162+
template="static"
163+
files={{
164+
"/index.html": excursionHtml,
165+
}}
166+
options={{
167+
activeFile: "/index.html",
168+
}}
169+
/>
159170

160171
</Answer>
161172

@@ -202,6 +213,14 @@ VS Code上で作成したファイルは`index.html`でした。しかしなが
202213
</html>
203214
```
204215

205-
<ViewSource url={import.meta.url} path="_samples/form" />
216+
<Sandpack
217+
template="static"
218+
files={{
219+
"/index.html": formHtml,
220+
}}
221+
options={{
222+
activeFile: "/index.html",
223+
}}
224+
/>
206225

207226
</Answer>

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

Lines changed: 46 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,14 @@
22
title: CSS
33
---
44

5+
import { Sandpack } from "@codesandbox/sandpack-react";
6+
import firstCssHtml from "!!raw-loader!./_samples/first-css/index.html";
7+
import redHelloWorldHtml from "!!raw-loader!./_samples/red-hello-world/index.html";
8+
import redHelloWorldCss from "!!raw-loader!./_samples/red-hello-world/style.css";
9+
import yellowHelloCssHtml from "!!raw-loader!./_samples/yellow-hello-css/index.html";
10+
import yellowHelloCssCss from "!!raw-loader!./_samples/yellow-hello-css/style.css";
11+
import fooHtml from "!!raw-loader!./_samples/foo/index.html";
12+
513
この節では、Web開発で用いられるもう一つの言語である、CSSについて学びます。CSSはWebサイトの「見た目」をつかさどる言語です。多くの<Term>HTML要素</Term>は、<Term>CSS</Term>を用いることで、その見た目を細かくカスタマイズすることができます。
614

715
![Web開発で用いられる言語](../02-html/web-development-languages.drawio.svg)
@@ -15,7 +23,15 @@ title: CSS
1523
<div style="color: red; font-size: 24px;">Hello World!</div>
1624
```
1725

18-
<ViewSource url={import.meta.url} path="_samples/first-css" />
26+
<Sandpack
27+
template="static"
28+
files={{
29+
"/index.html": firstCssHtml,
30+
}}
31+
options={{
32+
activeFile: "/index.html",
33+
}}
34+
/>
1935

2036
![Hello World!](./red-hello-world.png)
2137

@@ -60,7 +76,16 @@ title: CSS
6076
}
6177
```
6278

63-
<ViewSource url={import.meta.url} path="_samples/red-hello-world" />
79+
<Sandpack
80+
template="static"
81+
files={{
82+
"/index.html": redHelloWorldHtml,
83+
"/style.css": redHelloWorldCss,
84+
}}
85+
options={{
86+
activeFile: "/index.html",
87+
}}
88+
/>
6489

6590
### `link`要素
6691

@@ -127,7 +152,16 @@ HTMLファイルとCSSファイルを分けて作成する場合、`style`属性
127152

128153
</Answer>
129154

130-
<ViewSource url={import.meta.url} path="_samples/yellow-hello-css" />
155+
<Sandpack
156+
template="static"
157+
files={{
158+
"/index.html": yellowHelloCssHtml,
159+
"/style.css": yellowHelloCssCss,
160+
}}
161+
options={{
162+
activeFile: "/index.html",
163+
}}
164+
/>
131165

132166
## 演習問題2
133167

@@ -183,6 +217,14 @@ HTMLファイルとCSSファイルを分けて作成する場合、`style`属性
183217
}
184218
```
185219

186-
<ViewSource url={import.meta.url} path="_samples/foo" />
220+
<Sandpack
221+
template="static"
222+
files={{
223+
"/index.html": fooHtml,
224+
}}
225+
options={{
226+
activeFile: "/index.html",
227+
}}
228+
/>
187229

188230
</Answer>

‎docs/1-trial-session/06-variables/index.mdx‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,12 @@
22
title: 変数
33
---
44

5+
import { Sandpack } from "@codesandbox/sandpack-react";
6+
import compoundAssignmentHtml from "!!raw-loader!./_samples/compound-assignment/index.html";
7+
import compoundAssignmentJs from "!!raw-loader!./_samples/compound-assignment/script.js";
8+
import counterHtml from "!!raw-loader!./_samples/counter/index.html";
9+
import counterJs from "!!raw-loader!./_samples/counter/script.js";
10+
511
## <Term>変数</Term>とは
612

713
{/* prettier-ignore */}
@@ -87,7 +93,16 @@ price = price / 2;
8793
document.write(price);
8894
```
8995

90-
<ViewSource url={import.meta.url} path="_samples/compound-assignment" />
96+
<Sandpack
97+
template="static"
98+
files={{
99+
"/index.html": compoundAssignmentHtml,
100+
"/script.js": compoundAssignmentJs,
101+
}}
102+
options={{
103+
activeFile: "/script.js",
104+
}}
105+
/>
91106

92107
{/* prettier-ignore */}
93108
<Term>代入</Term><Term>演算子</Term>は、まず右辺の<Term>式</Term>を<Term>評価</Term>します。これにより、右辺は`100 / 2`となります。よって、最終的に<Term>変数</Term>`price`の<Term>値</Term>は`50`となり、これは`price`を半分にする操作に対応します。
@@ -107,6 +122,15 @@ counter = counter + 1;
107122
document.write(counter);
108123
```
109124

110-
<ViewSource url={import.meta.url} path="_samples/counter" />
125+
<Sandpack
126+
template="static"
127+
files={{
128+
"/index.html": counterHtml,
129+
"/script.js": counterJs,
130+
}}
131+
options={{
132+
activeFile: "/script.js",
133+
}}
134+
/>
111135

112136
</Answer>

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

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,12 @@
22
title: 論理値と論理演算子
33
---
44

5+
import { Sandpack } from "@codesandbox/sandpack-react";
6+
import weirdComparisonHtml from "!!raw-loader!./_samples/weird-comparison/index.html";
7+
import weirdComparisonJs from "!!raw-loader!./_samples/weird-comparison/script.js";
8+
import quizShowHtml from "!!raw-loader!./_samples/quiz-show/index.html";
9+
import quizShowJs from "!!raw-loader!./_samples/quiz-show/script.js";
10+
511
## <Term>論理値</Term>
612

713
{/* prettier-ignore */}
@@ -92,7 +98,16 @@ document.write(takaoHeight < everestHeight < fujiHeight);
9298
document.write(takaoHeight = everestHeight);
9399
```
94100

95-
<ViewSource url={import.meta.url} path="_samples/weird-comparison" />
101+
<Sandpack
102+
template="static"
103+
files={{
104+
"/index.html": weirdComparisonHtml,
105+
"/script.js": weirdComparisonJs,
106+
}}
107+
options={{
108+
activeFile: "/script.js",
109+
}}
110+
/>
96111

97112
- JavaScript で、数値と論理値に比較<Term>演算子</Term>を適用すると、`true`は`1`として、`false`は`0`として比較されます。
98113
- `=`は代入演算子です。代入<Term>演算子</Term>の<Term>式</Term>が<Term>評価</Term>されると、右辺の<Term>値</Term>になります。
@@ -131,6 +146,15 @@ const isTanakaWinner = tanakaScore >= 100 && tanakaScore - satoScore >= 20;
131146
document.write(isTanakaWinner); // true
132147
```
133148

134-
<ViewSource url={import.meta.url} path="_samples/quiz-show" />
149+
<Sandpack
150+
template="static"
151+
files={{
152+
"/index.html": quizShowHtml,
153+
"/script.js": quizShowJs,
154+
}}
155+
options={{
156+
activeFile: "/script.js",
157+
}}
158+
/>
135159

136160
</Answer>

‎docs/1-trial-session/08-if-statement/index.mdx‎

Lines changed: 13 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22
title: 条件分岐
33
---
44

5-
import Sandpack from "@site/src/components/Sandpack";
5+
import { Sandpack } from "@codesandbox/sandpack-react";
6+
import theRightToVoteHtml from "!!raw-loader!./_samples/the-right-to-vote/index.html";
7+
import theRightToVoteJs from "!!raw-loader!./_samples/the-right-to-vote/script.js";
68

79
## if文
810

@@ -19,32 +21,6 @@ if (age < 18) {
1921

2022
このプログラムは、`未成年者の場合は法定代理人の同意が必要です。`と表示しますが、1行目を`const age = 20;`に変更すると何も表示されなくなります。
2123

22-
<Sandpack
23-
files={{
24-
"/index.html": {
25-
code: `<!DOCTYPE html>
26-
<html>
27-
<head>
28-
<meta charset="UTF-8">
29-
<title>条件分岐</title>
30-
</head>
31-
<body>
32-
<script src="script.js"></script>
33-
</body>
34-
</html>`,
35-
hidden: true,
36-
},
37-
"/script.js": `const age = 16;
38-
if (age < 18) {
39-
document.write("未成年者の場合は法定代理人の同意が必要です。");
40-
}`,
41-
}}
42-
options={{
43-
editorHeight: 250,
44-
activeFile: "/script.js",
45-
}}
46-
/>
47-
4824
2行目の`if (age < 18) {`部分がポイントです。ここに差し掛かると、括弧内の<Term>式</Term>`age < 18`が<Term>評価</Term>され、`true`になります。このため、直後の波括弧内の処理が実行されます。
4925

5026
if文の基本構造は
@@ -83,34 +59,6 @@ if (age >= 18) {
8359

8460
この例では、`age >= 18`の<Term>評価</Term>が`false`となるので、`子供です`が表示されます。
8561

86-
<Sandpack
87-
files={{
88-
"/index.html": {
89-
code: `<!DOCTYPE html>
90-
<html>
91-
<head>
92-
<meta charset="UTF-8">
93-
<title>if-else</title>
94-
</head>
95-
<body>
96-
<script src="script.js"></script>
97-
</body>
98-
</html>`,
99-
hidden: true,
100-
},
101-
"/script.js": `const age = 16;
102-
if (age >= 18) {
103-
document.write("大人です");
104-
} else {
105-
document.write("子供です");
106-
}`,
107-
}}
108-
options={{
109-
editorHeight: 250,
110-
activeFile: "/script.js",
111-
}}
112-
/>
113-
11462
## if～else if～else
11563

11664
if～else if～else構文を使うと、複数の条件を重ねることができます。
@@ -156,7 +104,16 @@ if (age < 18) {
156104
}
157105
```
158106

159-
<ViewSource url={import.meta.url} path="_samples/the-right-to-vote" />
107+
<Sandpack
108+
template="static"
109+
files={{
110+
"/index.html": theRightToVoteHtml,
111+
"/script.js": theRightToVoteJs,
112+
}}
113+
options={{
114+
activeFile: "/script.js",
115+
}}
116+
/>
160117

161118
4行目の式は`age >= 18 && age < 25`ではないかと思うかもしれませんが、上のように`age < 25`としても同じ結果になります。これは、if～else if～else構文では、一つ目の条件が満たされた場合、二つ目の条件は実行されないためです。
162119

0 commit comments

Comments
 (0)