Skip to content

Commit 5b8665f

Browse files
sYakusHininekosYakusHinineko
committed
変数の章でコメントの大部分を修正しました。
1 parent 130bd07 commit 5b8665f

File tree

2 files changed

+38
-23
lines changed

2 files changed

+38
-23
lines changed

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ Web 開発に必ず用いられる言語があります。<Term type="html" stro
1515

1616
## <Term type="html">HTML</Term> を書き始める
1717

18-
エディタの画面左端には、ファイル一覧が表示されています。新しいファイルを作成して、`index.html` と名付けましょう。ファイルの中身を次のようにした後、保存します。保存にはショートカットキー ( `command / Ctrl + S` ) を用いてください。
18+
エディタの画面左端には、ファイル一覧が表示されています。新しいファイルを作成して、`index.html` と名付けましょう。ファイルの中身を次のようにした後、保存します。保存にはショートカットキー ( `command / ctrl + S` ) を用いてください。
1919

2020
```html title="index.html"
2121
<!doctype html>
@@ -76,13 +76,13 @@ VS Code 上で作成したファイルは `index.html` でした。しかしな
7676
</html>
7777
```
7878

79-
繰り返しになりますが、<Term type="html">HTML</Term> を編集したら、`command / Ctrl + S` キーを押してファイルを保存します。ファイル名の横に表示されている丸い記号が消えたら保存が完了しています。
79+
繰り返しになりますが、<Term type="html">HTML</Term> を編集したら、`command / ctrl + S` キーを押してファイルを保存します。ファイル名の横に表示されている丸い記号が消えたら保存が完了しています。
8080

8181
![ファイルを保存する](./save-file.png)
8282

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

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

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

‎docs/1-trial-session/05-variables/index.md‎

Lines changed: 35 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,15 @@ let myGreatName = "Becky Jones";
1818
document.write(myGreatName);
1919
```
2020

21-
`let` は、<Term type="javascriptVariable">変数</Term>を<Term type="javascriptDeclaration">宣言</Term>するためのキーワードです。 1 行目では、`myGrateName` という名前の<Term type="javascriptVariable">変数</Term>を<Term type="javascriptDeclaration">宣言</Term>し、そこに`"Becky Jones"` という文字列を保存しています。<Term type="javascriptVariable">変数</Term>に`=` を使って<Term type="javascriptValue">値</Term>を保存することを<Term type="javascriptAssignment">代入</Term>と呼びます。
21+
`let` は、<Term type="javascriptVariable">変数</Term>を<Term type="javascriptDeclaration">宣言</Term>するためのキーワードです。 1 行目では、`myGreatName` という名前の<Term type="javascriptVariable">変数</Term>を<Term type="javascriptDeclaration">宣言</Term>し、そこに`"Becky Jones"` という文字列を保存しています。<Term type="javascriptVariable">変数</Term>に値を保存する操作を<Term strong type="javascriptAssignment">代入</Term>と呼びます。<Term type="javascriptAssignment">代入</Term>をするときには`=` の記号を用います。左側に<Term type="javascriptVariable">変数</Term>、右側に保存する<Term type="javascriptValue">値</Term>を指定することで<Term type="javascriptAssignment">代入</Term>を行います。
2222

2323
2 行目では、<Term type="javascriptVariable">変数</Term> `myGreatName` が<Term type="javascriptEvaluation">評価</Term>され、<Term type="javascriptAssignment">代入</Term>されていた<Term type="javascriptString">文字列</Term><Term type="javascriptValue">値</Term> `"Becky Jones"` が画面に表示されます。
2424

25-
<p><Term type="javascriptVariable">変数</Term>を<Term type="javascriptDeclaration">宣言</Term>するキーワードには、<code>let</code> 以外にも<code>const</code> というものがあります。記法自体は<code>let</code> と同様です。</p>
25+
<p><Term type="javascriptVariable">変数</Term>を<Term type="javascriptDeclaration">宣言</Term>するキーワードには、<code>let</code> 以外にも<code>const</code> があります。記法自体は<code>let</code> と同様です。</p>
2626

2727
```javascript title="script.js"
28-
const myGrateName = "Becky Jones";
29-
document.write(myGrateName);
28+
const myGreatName = "Becky Jones";
29+
document.write(myGreatName);
3030
```
3131

3232
ここまでの例では、`my great name` というフレーズを、`myGreatName` のように記述しています。
@@ -41,7 +41,7 @@ document.write(myGrateName);
4141

4242
:::tip
4343

44-
<Term type="javascriptVariable">変数</Term>や<Term type="javascriptFunction">関数</Term>は適切に命名することが大切です。以下の例を見てみましょう。
44+
<Term type="javascriptVariable">変数</Term>は適切に命名することが大切です。以下の例を見てみましょう。
4545

4646
```javascript
4747
const a = 500;
@@ -51,19 +51,19 @@ document.write(c);
5151
```
5252

5353
```javascript
54-
const pricePerItem = 500;
55-
const numberOfItems = 3;
56-
const paymentTotal = pricePerItem * numberOfItems;
57-
document.write(paymentTotal);
54+
const itemPrice = 500;
55+
const countItem = 3;
56+
const totalPayment = itemPrice * countItem;
57+
document.write(totalPayment);
5858
```
5959

60-
この二つでは、前者は何を言いたいのかさっぱりですが、後者はコードを通じて書きたいことが分かりやすく、後から読み返しても困りません。他人と開発を行うときや、過去のコードを自分が書き換えるときには、コードの可読性が必要になります。変数名は多少長くなっても良いので、とにかく分かりやすいことを心がけましょう。
60+
一つ目のコードでは、`a` `b` `c` に何が保存されているのかが分かりにくいですね。二つ目のコードでは変数名がその変数の説明も兼ねているので、保存されている値が分かりやすいと思います。プログラムを書いているときには`a` に何が入っていたか覚えていても、後から読み返すときには忘れていることが多いです。コードを読み返すときや他人が読むときに備え、わかりやすい変数の命名を心がけましょう。
6161

6262
:::
6363

6464
## <Term type="javascriptVariable">変数</Term>の再代入
6565

66-
`let` と`const` の大きな違いは、再<Term type="javascriptAssignment">代入</Term>ができるかです。`let` では再<Term type="javascriptAssignment">代入</Term>が可能ですが、`const` はできません。
66+
`let` と`const` の大きな違いは、再<Term type="javascriptAssignment">代入</Term>ができるかどうかです。`let` では再<Term type="javascriptAssignment">代入</Term>が可能ですが、`const` ではできません。
6767

6868
```javascript title="script.js"
6969
let mysteriousNumber = 0;
@@ -72,9 +72,13 @@ mysteriousNumber = 2;
7272
document.write(mysteriousNumber); // 2
7373
```
7474

75-
上の例では、<Term type="javascriptVariable">変数</Term>の<Term type="javascriptValue">値</Term>が次々と変化しています。`let` で<Term type="javascriptDeclaration">宣言</Term>された<Term type="javascriptVariable">変数</Term>は最後に<Term type="javascriptAssignment">代入</Term>された<Term type="javascriptValue">値</Term>のみを保持します。<Term type="javascriptVariable">変数</Term> `mysteriousNumber` は 3 回<Term type="javascriptAssignment">代入</Term>されていますが、最後に<Term type="javascriptAssignment">代入</Term>された `2` が表示されます。
75+
上の例では、<Term type="javascriptVariable">変数</Term>が`let` で<Term type="javascriptDeclaration">宣言</Term>され、<Term type="javascriptVariable">変数</Term>の<Term type="javascriptValue">値</Term>が次々と変化しています。このように、<Term type="javascriptVariable">変数</Term>に新たな<Term type="javascriptValue">値</Term>を<Term type="javascriptAssignment">代入</Term>することを再<Term type="javascriptAssignment">代入</Term>と呼びます。
76+
77+
`const` で<Term type="javascriptDeclaration">宣言</Term>された<Term type="javascriptVariable">変数</Term>は、再<Term type="javascriptAssignment">代入</Term>ができません。すなわち、<Term type="javascriptValue">値</Term>の書き換えができません。上記のコードの`let` を`const` に置き換えると、エラーが発生します。
78+
79+
`const` で<Term type="javascriptVariable">変数</Term>を<Term type="javascriptDeclaration">宣言</Term>した場合も、最後に<Term type="javascriptAssignment">代入</Term>された<Term type="javascriptValue">値</Term>が保存されます。`const` は再<Term type="javascriptAssignment">代入</Term>ができないので、実質的には<Term type="javascriptDeclaration">宣言</Term>時の<Term type="javascriptValue">値</Term>が保存されるということになります。
7680

77-
一方、`const` で<Term type="javascriptDeclaration">宣言</Term>された<Term type="javascriptVariable">変数</Term>は、再<Term type="javascriptAssignment">代入</Term>ができません。すなわち、<Term type="javascriptValue">値</Term>の書き換えができません。上記のコードの`let` を`const` に置き換えると、エラーが発生します。
81+
<Term type="javascriptVariable">変数</Term>には最後に<Term type="javascriptAssignment">代入</Term>された<Term type="javascriptValue">値</Term>のみを保存する性質があるので、上のコードの例では<Term type="javascriptVariable">変数</Term> <code>mysteriousNumber</code> に最後に<Term type="javascriptAssignment">代入</Term>された<code>2</code> が表示されます。
7882

7983
`let` を使った<Term type="javascriptVariable">変数</Term>の<Term type="javascriptDeclaration">宣言</Term>について、もう少し見てみましょう。
8084

@@ -92,12 +96,23 @@ document.write(price);
9296

9397
## constとletの用途
9498

95-
`const` と`let` は用途によって使い分けがあります。基本的には、意図せず<Term type="javascriptValue">値</Term>を書き換えてしまうことを防ぐために`const` が使われます。`let` が必要な場合は様々ですが、状態を保存しておくための<Term type="javascriptVariable">変数</Term>を<Term type="javascriptDeclaration">宣言</Term>することに使われることが多いです。[繰り返し](./../08-loop/index.md)の章にあるカウンタ<Term type="javascriptVariable">変数</Term>がその一例です。他にも、<Term type="javascriptVariable">変数</Term>の値を踏まえて条件分岐を行うなど、様々な用途があります。
99+
`const` と`let` は用途によって使い分けがあります。基本的には、意図せず<Term type="javascriptValue">値</Term>を書き換えてしまうことを防ぐために`const` が使われます。
96100

97-
```javascript title="script.js"
98-
let i = 0;
99-
while (i < 5) {
100-
i += 1;
101-
document.write("Hello world!");
102-
}
101+
```javascript
102+
const mysteriousNumber = 1;
103+
/* めちゃめちゃ長いコード
104+
--------------
105+
--------------
106+
--------------
107+
--------------
108+
めちゃめちゃ長いコード */
109+
document.write(mysteriousNumber);
103110
```
111+
112+
`mysteriousNumber` は何を表しているのかを読み取る場合を考えましょう。もしこれを`let` で<Term type="javascriptDeclaration">宣言</Term>した場合、`mysteriousNumber` は`/* めちゃめちゃ長いコード */` の中で書き換えられているかもしれません。そのため、変数の<Term type="javascriptValue">値</Term>を読み取るためにはコード全体を読み返す必要があります。しかし、このように`const` を用いることで`mysteriousNumber` の<Term type="javascriptValue">値</Term>は一意に決まります。`const` を使用できる場面では`const` を使用しましょう。
113+
114+
:::info
115+
116+
実際に開発をする場面では、`const` を使う場面がかなり多いです。この教材内でも基本的には`const` が用いられています。
117+
118+
:::

0 commit comments

Comments
 (0)