Skip to content

Commit ed4283c

Browse files
chvmvdchvmvd
authored
「Webプログラミングの基礎を学ぼう」の不適切なフォーマットを修正 (#710)
1 parent 6ddc5e9 commit ed4283c

File tree

14 files changed

+66
-68
lines changed

14 files changed

+66
-68
lines changed

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,15 +32,15 @@ VS Code の画面左端には、ファイル一覧が表示されています。
3232

3333
## ブラウザで <Term>HTML</Term> ファイルを開く
3434

35-
前頁で作成したフォルダを開き、`index.html` が作成されていることを確認しましょう。このファイルをダブルクリックして開きます。`Hello World!` (`World`の部分だけ太字) が表示されましたか？
35+
前頁で作成したフォルダを開き、`index.html` が作成されていることを確認しましょう。このファイルをダブルクリックして開きます。`Hello World!` (`World` の部分だけ太字) が表示されましたか？
3636

3737
<video src={openInBrowserVideo} controls />
3838

3939
:::info[拡張子]
4040

41-
VS Code 上で作成したファイルは `index.html` でした。しかしながら、Windows でフォルダの中身を見ると `index` しか表示されません（macOS の場合は正しく表示されます）。なぜでしょうか？
41+
VS Code 上で作成したファイルは `index.html` でした。しかしながら、Windows でフォルダの中身を見ると `index` しか表示されません (macOS の場合は正しく表示されます)。なぜでしょうか？
4242

43-
ファイル名の `.` (ピリオド) 以降の部分は<Term>**拡張子**</Term>と呼ばれ、ファイルの種類を識別するために用いられることが多いです。先ほど `index.html` という名前のファイルを作成したのは、<Term>HTML</Term>ファイルであることを明示するためです。
43+
ファイル名の `.` (ピリオド) 以降の部分は<Term>**拡張子**</Term>と呼ばれ、ファイルの種類を識別するために用いられることが多いです。先ほど `index.html` という名前のファイルを作成したのは、<Term>HTML</Term> ファイルであることを明示するためです。
4444

4545
実は Windows では、拡張子は標準で表示されません。下の動画を参考に、拡張子を表示する設定に変更しておきましょう。
4646

@@ -82,7 +82,7 @@ VS Code 上で作成したファイルは `index.html` でした。しかしな
8282

8383
:::tip[ショートカットキー]
8484

85-
ショートカットキーがうまく押せませんか？ <kbd>command</kbd> + <kbd>S</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>S</kbd> (Windows) はよく、「<kbd>command</kbd> (macOS) または <kbd>Ctrl</kbd> (Windows) キーと <kbd>S</kbd> キーを同時に押す」と言われますが、実は同時に押すと半分くらいの確率で失敗します。<kbd>command</kbd> (macOS) / <kbd>Ctrl</kbd> (Windows) キーを押した後、キーから指を離す前に <kbd>S</kbd> キーを押しましょう。
85+
ショートカットキーがうまく押せませんか？<kbd>command</kbd> + <kbd>S</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>S</kbd> (Windows) はよく、「<kbd>command</kbd> (macOS) または <kbd>Ctrl</kbd> (Windows) キーと <kbd>S</kbd> キーを同時に押す」と言われますが、実は同時に押すと半分くらいの確率で失敗します。<kbd>command</kbd> (macOS) / <kbd>Ctrl</kbd> (Windows) キーを押した後、キーから指を離す前に <kbd>S</kbd> キーを押しましょう。
8686

8787
ショートカットキーを使いこなせるようになると、パソコンの操作速度が飛躍的に上昇します。慣れている人がパソコンを操作しているのを見たら、ぜひ後ろから覗き込んでみましょう。便利そうなショートカットキーを使っている人がいたら身に付けるようにすると良いです。
8888

@@ -110,7 +110,7 @@ VS Code 上で作成したファイルは `index.html` でした。しかしな
110110

111111
という、「このファイルは <Term>HTML</Term> ファイルだ！」と宣言する定型句から始まります。
112112

113-
続けて記述されるのは `<html lang="ja">` 、つまり **`html` <Term>要素</Term>** です。<Term>HTML</Term> は、この `html` <Term>要素</Term>を根とした木構造になっています。このため、`html` <Term>タグ</Term>の閉じ<Term>タグ</Term>はファイルの末尾に現れます。
113+
続けて記述されるのは `<html lang="ja">`、つまり **`html` <Term>要素</Term>** です。<Term>HTML</Term> は、この `html` <Term>要素</Term>を根とした木構造になっています。このため、`html` <Term>タグ</Term>の閉じ<Term>タグ</Term>はファイルの末尾に現れます。
114114

115115
`html` <Term>要素</Term>の直属の子<Term>要素</Term>は、 **`head` <Term>要素</Term>** と **`body` <Term>要素</Term>** の二つだけです。このうち、後者 (`body` <Term>要素</Term>) が実際にブラウザの表示領域上に表示されることになります。
116116

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import helloWorldByJavascriptVideo from "./hello-world-by-javascript.mp4";
99
{/* prettier-ignore */}
1010
<Term>HTML</Term> がウェブサイトの構造を表す言語だとすれば、<Term>**JavaScript**</Term> はウェブサイトに振る舞いを与える言語といえます。ブラウザさえあれば環境に関係なく同じように実行可能な、強力なプログラミング言語です。
1111

12-
![Web開発で用いられる言語](../02-html/web-development-languages.drawio.svg)
12+
![Web 開発で用いられる言語](../02-html/web-development-languages.drawio.svg)
1313

1414
## <Term>JavaScript</Term> で Hello World!
1515

@@ -30,7 +30,7 @@ import helloWorldByJavascriptVideo from "./hello-world-by-javascript.mp4";
3030
</html>
3131
```
3232

33-
続いて、`script.js`を作成し、内容として次の通りに保存します。
33+
続いて、`script.js` を作成し、内容として次の通りに保存します。
3434

3535
```javascript title="script.js"
3636
document.write("Hello World!");
@@ -48,7 +48,7 @@ document.write("Hello World!");
4848
<script src="./script.js"></script>
4949
```
5050

51-
まず、この記述によって、 `script.js` ファイルがブラウザによって読み込まれます。この `script.js` に記述されているのが <Term>JavaScript</Term> です。
51+
まず、この記述によって、`script.js` ファイルがブラウザによって読み込まれます。この `script.js` に記述されているのが <Term>JavaScript</Term> です。
5252

5353
:::info
5454

@@ -71,7 +71,7 @@ document.write("Hello World3");
7171

7272
:::tip
7373

74-
改行が表示されず困っていますか？`document.write` で出力したテキストは、HTMLとして解釈されます。`br` 要素や `p` 要素を使いましょう。
74+
改行が表示されず困っていますか？`document.write` で出力したテキストは、HTML として解釈されます。`br` 要素や `p` 要素を使いましょう。
7575

7676
:::
7777

‎docs/1-trial-session/04-expressions/index.mdx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -67,15 +67,15 @@ document.write("Hello" + 1 + 2);
6767

6868
このような場合、<Term>演算子</Term>の**結合規則**を考える必要があります。
6969

70-
`+` の結合規則は左から右なので、`3 + 4 + "Hello"` は `(3 + 4) + "Hello"`、`"Hello" + 1 + 2` は`("Hello" + 1) + 2`と解釈されることになります。
70+
`+` の結合規則は左から右なので、`3 + 4 + "Hello"` は `(3 + 4) + "Hello"`、`"Hello" + 1 + 2` は `("Hello" + 1) + 2` と解釈されることになります。
7171

72-
`+` は、両辺が<Term>数値</Term>の場合のみ加算<Term>演算子</Term>として振る舞い、片方が<Term>数値</Term>で片方が<Term>文字列</Term>の場合は<Term>数値</Term>を<Term>文字列</Term>に変換してから<Term>文字列</Term>結合<Term>演算子</Term>として機能します。このため、最終的な<Term>式</Term>全体の<Term>評価</Term>結果は前者が `"7Hello"` 、後者が `"Hello12"` となるのです。
72+
`+` は、両辺が<Term>数値</Term>の場合のみ加算<Term>演算子</Term>として振る舞い、片方が<Term>数値</Term>で片方が<Term>文字列</Term>の場合は<Term>数値</Term>を<Term>文字列</Term>に変換してから<Term>文字列</Term>結合<Term>演算子</Term>として機能します。このため、最終的な<Term>式</Term>全体の<Term>評価</Term>結果は前者が `"7Hello"`、後者が `"Hello12"` となるのです。
7373

7474
### 代表的な演算子
7575

76-
| 演算子 | 意味 | 例 |
77-
| ------ | -------- | ------------------------------------- |
78-
| `+` | 　足す | `1 + 1` は `2`、`"A" + "B"` は `"AB"` |
79-
| `-` | 　引く | `2 - 1` は `1` |
80-
| `*` | 　掛ける | `2 * 2` は `4` |
81-
| `/` | 　割る | `4 / 2` は `2` |
76+
| 演算子 | 意味 | 例 |
77+
| ------ | ------ | ------------------------------------- |
78+
| `+` | 足す | `1 + 1` は `2`、`"A" + "B"` は `"AB"` |
79+
| `-` | 引く | `2 - 1` は `1` |
80+
| `*` | 掛ける | `2 * 2` は `4` |
81+
| `/` | 割る | `4 / 2` は `2` |

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ title: 論理値と論理演算子
66

77
{/* prettier-ignore */}
88
<Term>JavaScript</Term> で利用できる「<Term>値</Term>」として、これまで<Term>文字列</Term>と<Term>数値</Term>を扱いました。
9-
JavaScript ではこの他に、<Term>**論理値**</Term> と呼ばれる、「正しいか、正しくないか」を表すための<Term>値</Term>が存在します。
9+
JavaScript ではこの他に、<Term>**論理値**</Term>と呼ばれる、「正しいか、正しくないか」を表すための<Term>値</Term>が存在します。
1010

1111
{/* prettier-ignore */}
1212
<Term>論理値</Term>は、`true`（真）または `false`（偽）の 2 つだけです。ダブルクォーテーション `"` は必要ありません。通常の<Term>値</Term>ですので、<Term>変数</Term>に<Term>代入</Term>したり、計算に使ったりすることができます。
@@ -26,13 +26,13 @@ const shouldEscape = !isHunterStrong && isMonsterBig; // true
2626
const shouldFight = isHunterStrong || isMonsterSmall; // false
2727
```
2828

29-
詳細は以下の通りです。 `!` のみが作用する対象を 1 つしかとらないことに注意してください。
29+
詳細は以下の通りです。`!` のみが作用する対象を 1 つしかとらないことに注意してください。
3030

31-
| 演算子 | 意味 | 詳細 |
32-
| ------ | ---------- | -------------------------------------------------------------------- |
33-
| `!` | ～ではない | `true` ならば `false`、`false` ならば `true` |
34-
| `&&` | かつ | 両方 `true` ならば `true`、どちらか 1 つでも `false` ならば `false` |
35-
| `\|\|` | または | 両方 `false` ならば `false` 、どちらか 1 つでも `true` ならば `true` |
31+
| 演算子 | 意味 | 詳細 |
32+
| ------ | ---------- | ------------------------------------------------------------------- |
33+
| `!` | ～ではない | `true` ならば `false`、`false` ならば `true` |
34+
| `&&` | かつ | 両方 `true` ならば `true`、どちらか 1 つでも `false` ならば `false` |
35+
| `\|\|` | または | 両方 `false` ならば `false`、どちらか 1 つでも `true` ならば `true` |
3636

3737
## 比較<Term>演算子</Term>
3838

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ if (式1) {
7070
}
7171
```
7272

73-
![if文のフローチャート](./flowchart.drawio.svg)
73+
![if 文のフローチャート](./flowchart.drawio.svg)
7474

7575
## 演習
7676

‎docs/1-trial-session/08-functions/index.mdx‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,12 @@ greet();
2424
{/* prettier-ignore */}
2525
<Term>関数</Term>を定義すると、<Term>関数</Term>名に続けてかっこを記述することにより、その<Term>関数</Term>を実行できるようになります。
2626

27-
このプログラムでは、 `greet` <Term>関数</Term>が 2 回呼び出されているので、ブラウザに `Hello World!` が 2 つ表示されます。
27+
このプログラムでは、`greet` <Term>関数</Term>が 2 回呼び出されているので、ブラウザに `Hello World!` が 2 つ表示されます。
2828

2929
## <Term>**引数**</Term>
3030

3131
{/* prettier-ignore */}
32-
<Term>関数</Term>の振る舞いを呼び出し時に変更するため、<Term>関数</Term>に<Term>**引数**</Term>
33-
を与えることができます。
32+
<Term>関数</Term>の振る舞いを呼び出し時に変更するため、<Term>関数</Term>に<Term>**引数**</Term>を与えることができます。
3433
<Term>引数</Term>には任意の<Term>値</Term>が指定できます。
3534

3635
```javascript
@@ -43,7 +42,7 @@ greet("morning", "佐藤");
4342

4443
{/* prettier-ignore */}
4544
<Term>関数</Term>定義では、<Term>関数</Term>名直後のかっこ内に<Term>引数</Term>名をコンマ区切りで設定できます。
46-
上のプログラムで `greet` <Term>関数</Term>は、 `greetingType` や `myName` という名前の<Term>引数</Term>をとります。
45+
上のプログラムで `greet` <Term>関数</Term>は、`greetingType` や `myName` という名前の<Term>引数</Term>をとります。
4746
<Term>関数</Term>定義の中では、これらは<Term>変数</Term>のように振舞います。
4847

4948
呼び出し側では、括弧の中に<Term>関数</Term>に<Term>渡す</Term><Term>引数</Term>を指定します。このプログラムを実行すると、ブラウザに `Good morning, 佐藤!` が表示されるでしょう。
@@ -67,14 +66,14 @@ function add(a, b) {
6766
document.write(add(3, 4));
6867
```
6968

70-
上の例の 6 行目で、<Term>式</Term> `add(3, 4)` が<Term>評価</Term>されると、 `a = 3, b = 4` として `add` <Term>関数</Term>が実行されます。`add`<Term>関数</Term>の中で<Term>文</Term> `const sum = a + b;` が実行されると、<Term>式</Term> `a + b` が<Term>評価</Term>され、`7` になります。これにより、`sum` に`7`が代入されます。
69+
上の例の 6 行目で、<Term>式</Term> `add(3, 4)` が<Term>評価</Term>されると、`a = 3, b = 4` として `add` <Term>関数</Term>が実行されます。`add` <Term>関数</Term>の中で<Term>文</Term> `const sum = a + b;` が実行されると、<Term>式</Term> `a + b` が<Term>評価</Term>され、`7` になります。これにより、`sum` に `7` が代入されます。
7170
次の行 `return sum;` で `add` <Term>関数</Term>は<Term>変数</Term> `sum` を<Term>評価</Term>した結果である、`7` を<Term>返し</Term>ます。
7271
そして<Term>式</Term> `add(3, 4)` の<Term>評価</Term>結果が `7` となります。
7372

7473
<video src={returnValueVideo} controls muted />
7574

7675
:::tip
77-
**return 文** が実行された時点で<Term>関数</Term>の処理が終了するため、次のように書くことで [if ~ else 文](../if-statement/#if--else) や [&& (AND) 演算子](../boolean/#論理演算子)の繰り返しを避けつつ、複数の条件のついた処理を実行することができます。
76+
**return 文** が実行された時点で<Term>関数</Term>の処理が終了するため、次のように書くことで [if 〜 else 文](../if-statement/#if--else) や [&& (AND) 演算子](../boolean/#論理演算子)の繰り返しを避けつつ、複数の条件のついた処理を実行することができます。
7877

7978
```javascript
8079
let age = 21;
@@ -137,7 +136,7 @@ greet(); // あなたは2人目のお客様です。
137136

138137
[**複合代入演算子**](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#%E4%BB%A3%E5%85%A5%E6%BC%94%E7%AE%97%E5%AD%90) は、計算と代入を同時に行うことができる演算子です。
139138

140-
`x += y` は、`x = x + y` という意味になります。他にも `-=` や `*=` などの演算子が定義されています。`x -= y` は`x = x - y`、`x *= y` は`x = x * y` という意味になります。
139+
`x += y` は、`x = x + y` という意味になります。他にも `-=` や `*=` などの演算子が定義されています。`x -= y` は `x = x - y`、`x *= y` は `x = x * y` という意味になります。
141140

142141
```javascript
143142
guestCount += 1;
@@ -175,8 +174,8 @@ increment();
175174

176175
## 処理の分割
177176

178-
<Term>関数</Term>
179-
は、複数回使用する処理を簡便に記述するためだけでなく、複雑で長い処理の一部を切り出すことにも用いることができます。
177+
{/* prettier-ignore */}
178+
<Term>関数</Term>は、複数回使用する処理を簡便に記述するためだけでなく、複雑で長い処理の一部を切り出すことにも用いることができます。
180179

181180
長い処理をパーツに分割すると、次のようなメリットがあります。
182181

@@ -257,8 +256,8 @@ function showProbabilityAsGraph(probability) {
257256

258257
:::tip
259258

260-
<Term>if 文</Term>を使って、`a` が大きい場合と `b`
261-
が大きい場合で処理を書き分けます。
259+
{/* prettier-ignore */}
260+
<Term>if 文</Term>を使って、`a` が大きい場合と `b` が大きい場合で処理を書き分けます。
262261

263262
:::
264263

@@ -311,7 +310,7 @@ document.write(calculateCost(3.5));
311310

312311
`calculateCost` は、<Term>引数</Term>に月間転送量 `monthlyDataUsage` を取り、その月の携帯電話料金を<Term>戻り値</Term>として<Term>返す</Term><Term>関数</Term>です。携帯電話料金は、下のルールで決定されるとします。
313312

314-
> - 月間転送量 < 5.0 (GB) のとき、携帯電話料金は 月間転送量 × 600 (円/GB)
313+
> - 月間転送量 < 5.0 (GB) のとき、携帯電話料金は 月間転送量 × 600 (円 / GB)
315314
> - 月間転送量 >= 5.0 (GB) のとき、携帯電話料金は 3000 (円)
316315
317316
<Answer title="携帯電話料金">

‎docs/1-trial-session/09-loop/index.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ while (条件式) {
3333

3434
これをフローチャートの形式で表すと、次のようになります。
3535

36-
![while文の構造](./while-statement.drawio.svg)
36+
![while 文の構造](./while-statement.drawio.svg)
3737

3838
### 課題
3939

‎docs/1-trial-session/10-array/index.mdx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ for (const studentName of studentNames) {
6262
}
6363
```
6464

65-
このプログラムを実行すると、 `田中佐藤鈴木` と表示されます。
65+
このプログラムを実行すると、`田中佐藤鈴木` と表示されます。
6666

6767
`for 〜 of` 文の構造は次の通りです。
6868

@@ -72,11 +72,11 @@ for (変数の宣言/変数名 of 配列) {
7272
}
7373
```
7474

75-
配列の要素を順番に取り出し、 `of` の左側に指定された変数に設定してから、内部の処理を実行していきます。
75+
配列の要素を順番に取り出し、`of` の左側に指定された変数に設定してから、内部の処理を実行していきます。
7676

7777
## 配列の便利な機能
7878

79-
JavaScript の配列には、便利な変数や関数のようなものが定義されています。正確には[オブジェクト](/docs/trial-session/object)と[クラス](/docs/browser-apps/class)の回でそれぞれ扱う <Term>プロパティ</Term>、<Term>メソッド</Term> というものですが、今のところは特殊な書き方をする変数や関数であると考えればよいでしょう。
79+
JavaScript の配列には、便利な変数や関数のようなものが定義されています。正確には[オブジェクト](/docs/trial-session/object)と[クラス](/docs/browser-apps/class)の回でそれぞれ扱う<Term>プロパティ</Term>、<Term>メソッド</Term>というものですが、今のところは特殊な書き方をする変数や関数であると考えればよいでしょう。
8080

8181
### `配列.length`
8282

@@ -91,7 +91,7 @@ document.write(numbers.length); // 10
9191

9292
### `配列.push` 関数
9393

94-
[`配列.push` 関数](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/push) は、指定した配列の末尾に新しい値を追加する関数です。
94+
[`配列.push` 関数](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/push)は、指定した配列の末尾に新しい値を追加する関数です。
9595

9696
```javascript
9797
const studentNames = ["田中", "佐藤", "鈴木"];

‎docs/1-trial-session/11-object/index.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@ document.write(tanaka.scores.japanese);
126126

127127
<ViewSource url={import.meta.url} path="_samples/add-and-view-Japanese-score" />
128128

129-
2では、プロパティを自分で追加しています。
129+
2 では、プロパティを自分で追加しています。
130130

131131
</Answer>
132132

0 commit comments

Comments
 (0)