Skip to content

「変数のスコープ」の項をリライト #927

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nakaterm wants to merge 5 commits into
base: main
Choose a base branch
from
Open

「変数のスコープ」の項をリライト #927

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1c4b02e
「変数のスコープ」の項をリライト
nakaterm Feb 15, 2026
e615ec5
prettier-ignore を忘れていたので追加
nakaterm Feb 15, 2026
a5ef48a
let と const に限る旨を追加
nakaterm Feb 15, 2026
37c6674
const に統一して全体を整理
nakaterm Feb 21, 2026
5066c13
エラーになる行をコメントアウトしない
nakaterm Feb 21, 2026
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
65 changes: 33 additions & 32 deletions docs/1-trial-session/09-functions/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,61 +104,62 @@ 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>`siteName`を宣言しています。

```javascript
let guestCount = 0;

function greet() {
guestCount += 1;
document.write("あなたは" + guestCount + "人目のお客様です。");
const siteName = "田中のブログ";
document.write("ようこそ、" + siteName + "へ！");
}

greet(); // あなたは1人目のお客様です。
greet(); // あなたは2人目のお客様です。
greet(); // ようこそ、田中のブログへ！ と表示される
```

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

:::tip[複合代入演算子]
ここで、<Term>関数</Term>の外側から`siteName`を利用しようとするとエラーになります。

[**複合代入演算子**](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) は、計算と代入を同時に行うことができる演算子です。
```javascript
function greet() {
const siteName = "田中のブログ";
document.write("ようこそ、" + siteName + "へ！");
}

`x += y`は、`x = x + y`という意味になります。他にも`-=`や`*=`などの演算子が定義されています。`x -= y`は`x = x - y`、`x *= y`は`x = x * y`という意味になります。
greet(); // ようこそ、田中のブログへ！ と表示される

```javascript
guestCount += 1;
document.write(siteName); // これはエラーになる (Uncaught ReferenceError: siteName is not defined)
```

は以下の文のように読み替えられます。
一方で、<Term>関数</Term>の外側で宣言された<Term>変数</Term>を<Term>関数</Term>の内側から利用することは可能です。

```javascript
guestCount = guestCount + 1;
const siteName = "田中のブログ";
Copy link
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.

この節の上の例で使われている greetingType や myName にあたるものを使うことも考えたのですが、そうすると同じユースケースで上では引数で渡しており、こちらでは渡していないということになって混乱を招くので例を変えました。

定数としておいていても変ではないものを探した結果、siteName にしました。


function greet() {
document.write("ようこそ、" + siteName + "へ！");
}

greet(); // ようこそ、田中のブログへ！ と表示される
```

:::
:::tip[複合代入演算子]
Copy link
Contributor

@chvmvd chvmvd Feb 27, 2026

Choose a reason for hiding this comment

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

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


:::warning[<Term>変数</Term>の<Term>**スコープ**</Term>]
[**複合代入演算子**](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) は、計算と代入を同時に行うことができる演算子です。

{/* prettier-ignore */}
<Term>スコープ</Term>が終わった<Term>変数</Term>は、その時点で破棄されます。
`x += y`は、`x = x + y`という意味になります。他にも`-=`や`*=`などの演算子が定義されています。`x -= y`は`x = x - y`、`x *= y`は`x = x * y`という意味になります。

次の例の`greet`<Term>関数</Term>は、呼び出されるたびに`guestCount`に1を加えています。`guestCount += 1;`は、`guestCount = guestCount + 1;`のように読み替えられます。

```javascript
let outer = 0;

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

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

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

:::
Expand Down