Skip to content
Merged
Changes from 3 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
Copy Markdown
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
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

あー普通に忘れてました・・
ただ、下で関数外の変数を参照する例は let でこちらが const なのはノイズなのでどちらかに統一しようとは思います
まあ両方 const にして、+= の話は全部複合代入演算子のコラム内でやるようにしようかなぁ

Copy link
Copy Markdown
Contributor

@chvmvd chvmvd Feb 21, 2026

Choose a reason for hiding this comment

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

こちらがconstで、下の例がletになってしまってもそんなに問題ないとは私は思いますが。いい例があれば、そのように統一しても良いと思います。

Copy link
Copy Markdown
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();
```

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

確かにそうですね!

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

greet();
```

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

```javascript
function greet() {
let message = "Hello!";
Copy link
Copy Markdown
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
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

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

Copy link
Copy Markdown
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); これはエラーになるとなってしまい、これも構文エラーになってしまうため、単にコメントアウトしても構文エラーにならないようになっていると少し親切かもしれません。

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

改行したほうがいいか〜

Copy link
Copy Markdown
Contributor

@chvmvd chvmvd Feb 21, 2026

Choose a reason for hiding this comment

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

個人的には次のようにエラーとなるところをコメントアウトせずに書くというのも悪くない気もしてきましたが。

sum = "7"; // Type 'string' is not assignable to type 'number'.
add("3", "4"); // Argument of type 'string' is not assignable to parameter of type 'number'.

https://github.com/mdn/translated-content/blob/7fa1e352b7db8747d8f1050c1d5c4444343047a0/files/ja/web/javascript/guide/grammar_and_types/index.md?plain=1#L132-L135

Copy link
Copy Markdown
Contributor Author

@nakaterm nakaterm Feb 21, 2026

Choose a reason for hiding this comment

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

あー別にエラーになるコードを書いちゃってる例もあるんですね
ならそれが一番わかりやすそう
(ただまあ今回のはランタイムエラーだし議論の余地はありそう?)

```

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

```javascript
let guestCount = 0;

function greet() {
guestCount += 1;
guestCount = guestCount + 1;
Copy link
Copy Markdown
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[複合代入演算子]
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

複合代入演算子を使った例がなくなると、ここで複合代入演算子を説明する必要性もなくなってくるので、複合代入演算子をはじめて使うところに移動してもいいかもです。

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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


[**複合代入演算子**](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