-
Notifications
You must be signed in to change notification settings - Fork 3
「変数のスコープ」の項をリライト #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.
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
「変数のスコープ」の項をリライト #927
Changes from 1 commit
1c4b02e
e615ec5
a5ef48a
37c6674
5066c13
e32d573
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change | ||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
@@ -103,62 +103,63 @@ 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文などの中で宣言された<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!"; | ||||||||||||||||||||||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. (optional) 上の説明では、メッセージが utcode-learn/docs/1-trial-session/09-functions/index.mdx Lines 11 to 20 in 27d5138
Contributor
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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!"; | ||||||||||||||||||||||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 同様に |
||||||||||||||||||||||
| } | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| greet(); | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| // document.write(message); これはエラーになる | ||||||||||||||||||||||
|
Contributor
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. エラーになるサンプルコードを提供しない、という方針に従いコメントアウトしている
nakaterm marked this conversation as resolved.
Outdated
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. (optional) これを単にコメントアウトすると、
Contributor
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 改行したほうがいいか〜
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 個人的には次のようにエラーとなるところをコメントアウトせずに書くというのも悪くない気もしてきましたが。 utcode-learn/docs/4-advanced/03-typescript/index.mdx Lines 102 to 104 in c8ad394
https://github.com/mdn/translated-content/blob/7fa1e352b7db8747d8f1050c1d5c4444343047a0/files/ja/web/javascript/guide/grammar_and_types/index.md?plain=1#L132-L135
Contributor
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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; | ||||||||||||||||||||||
|
Contributor
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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[複合代入演算子] | ||||||||||||||||||||||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 複合代入演算子を使った例がなくなると、ここで複合代入演算子を説明する必要性もなくなってくるので、複合代入演算子をはじめて使うところに移動してもいいかもです。
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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; | ||||||||||||||||||||||
| ``` | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| ::: | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ここで
constではなく、letを使った理由が分からなかったのですが、何かあったりしますか?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
あー普通に忘れてました・・
ただ、下で関数外の変数を参照する例は
letでこちらがconstなのはノイズなのでどちらかに統一しようとは思いますまあ両方
constにして、+=の話は全部複合代入演算子のコラム内でやるようにしようかなぁUh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
こちらが
constで、下の例がletになってしまってもそんなに問題ないとは私は思いますが。いい例があれば、そのように統一しても良いと思います。