Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 29 additions & 29 deletions docs/1-trial-session/09-functions/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -104,61 +104,61 @@ document.write(multiply(3, 4));
## <Term>変数</Term>の<Term>スコープ</Term>

{/* prettier-ignore */}
<Term>関数</Term>内で<Term>宣言</Term>された<Term>変数</Term>は、<Term>関数</Term>内でのみ有効です。<Term>変数</Term>が有効な範囲のことを、その<Term>変数</Term>の<Term>**スコープ**</Term>と呼んでいます。
<Term>関数</Term>やif文などの中で`let`や`const`を使って宣言された<Term>変数</Term>は、それらの内部でのみ有効です。<Term>変数</Term>が有効な範囲のことを、その<Term>変数</Term>の<Term>**スコープ**</Term>と呼んでいます。

{/* prettier-ignore */}
<Term>関数</Term>外で<Term>宣言</Term>された<Term>変数</Term>は<Term>関数</Term>内でも利用できます。
次の例では、<Term>関数</Term>`greet`の中で<Term>変数</Term>`message`を宣言しています。

```javascript
function greet() {
let message = "Hello!";
Copy link
Contributor

Choose a reason for hiding this comment

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

ここでconstではなく、letを使った理由が分からなかったのですが、何かあったりしますか?

Copy link
Contributor

Choose a reason for hiding this comment

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

(optional)

上の説明では、メッセージが"Hello!"ではなく、"Hello World!"になっているため、そちらに統一すると認知負荷が少し小さくなるかもしれません。

```javascript
// 関数を定義しておけば
function greet() {
document.write("Hello World!");
}
// 後から呼び出すことができる
greet();
greet();
```

document.write(message); // Hello! と表示される
}

greet();
```

ここで、<Term>関数</Term>の外側から`message`を利用しようとするとエラーになります。

```javascript
function greet() {
let message = "Hello!";
Copy link
Contributor

Choose a reason for hiding this comment

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

同様にletconst

}

greet();

// document.write(message); これはエラーになる
Copy link
Contributor Author

Choose a reason for hiding this comment

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

エラーになるサンプルコードを提供しない、という方針に従いコメントアウトしている

Copy link
Contributor

Choose a reason for hiding this comment

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

(optional)

これを単にコメントアウトすると、document.write(message); これはエラーになるとなってしまい、これも構文エラーになってしまうため、単にコメントアウトしても構文エラーにならないようになっていると少し親切かもしれません。

```

一方で、<Term>関数</Term>の外側で宣言された<Term>変数</Term>を<Term>関数</Term>の内側から利用することは可能です。

```javascript
let guestCount = 0;

function greet() {
guestCount += 1;
guestCount = guestCount + 1;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

ここで初出の += が出てくるとノイズなので、ここでは普通に今まで扱った方法で書き、下のコラム内で「これを += に書き換えられる」という説明をするようにしています

document.write("あなたは" + guestCount + "人目のお客様です。");
}

greet(); // あなたは1人目のお客様です。
greet(); // あなたは2人目のお客様です。
```

この例における、`greet`<Term>関数</Term>は、呼び出されるたびに`guestCount`に1を加えています。

:::tip[複合代入演算子]

[**複合代入演算子**](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) は、計算と代入を同時に行うことができる演算子です。

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

```javascript
guestCount += 1;
```

は以下の文のように読み替えられます。
上の例の

```javascript
guestCount = guestCount + 1;
```

:::

:::warning[<Term>変数</Term>の<Term>**スコープ**</Term>]

{/* prettier-ignore */}
<Term>スコープ</Term>が終わった<Term>変数</Term>は、その時点で破棄されます。
は以下のように書き換えることができます。

```javascript
let outer = 0;

function increment() {
let inner = 0;
outer += 1;
inner += 1;
document.write(outer); // 1ずつ増える
document.write(inner); // 常に1
}

increment();
increment();
guestCount += 1;
```

:::
Expand Down