review a content - function-expressions-arrows

Author: KenjiI

1-js/02-first-steps/15-function-expressions-arrows/article.md

@@ -4,15 +4,15 @@ JavaScriptでは、関数は "魔法の言語構造" ではなく、特別な種
 
 [cut]
 
-以前私たちが使っているた構文は *関数宣言* と呼ばれます:
+前に私たちが使っていた構文は *関数宣言* と呼ばれます:
 
 ```js
 function sayHi() {
   alert( "Hello" );
 }
 ```
 
-*関数式* と呼ばれる、関数を作るための別の構文があります。
+これとは別に、*関数式* と呼ばれる、関数を作るための別の構文があります。
 
 それはこのようになります:
 
@@ -22,10 +22,10 @@ let sayHi = function() {
 };
 ```
 
-ここで、他の任意の値と同じように、関数は作られ明示的に変数に代入されています。
+ここでは、関数は他の任意の値と同じように明示的に変数に代入されています。
 どのように変数が定義されても、それは単に変数 `sayHi` に格納される値です。
 
-これらのコード例の意味は同じです: "関数を作成し、変数 `sayHi` にそれを置きます"
+これらのコード例の意味は同じです: "関数を作成し、変数 `sayHi` にそれを格納します"
 
 `alert` を使ってその値を出力することもできます:
 
@@ -39,15 +39,15 @@ alert( sayHi ); // 関数のコードが表示されます
 */!*
 ```
 
-`sayHi` の後に括弧がないので、最後の行は関数が実行されないことに注意してください。関数名への言及がその実行を引き起こすプログラミング言語も存在しますが、JavaScriptはそうではありません。
+`sayHi` の後に括弧がないので、最後の行は関数は実行されないことに注意してください。関数名への言及がその実行となるプログラミング言語も存在しますが、JavaScriptはそうではありません。
 
-JavaScriptでは、関数は値です。そのため、それを値として扱うことができます。上のコードはその文字列表現を表示し、それはソースコードです。
+JavaScriptでは、関数は値です。そのため、それを値として扱うことができます。上のコードはその文字列表現を表示します(それはソースコードです)。
 
 `sayHi()` のように呼ぶことができる点で、もちろんそれは特別な値です。
 
-しかし、それはまだ値なので他の種類の値のようにそれを扱うことができます。
+しかし、それは値なので、他のタイプの値のように扱うことができます。
 
-関数を別の変数にコピーすることが出来ます:
+関数を別の変数にコピーすることができます:
 
 ```js run no-beautify
 function sayHi() {   // (1) 作成
@@ -60,15 +60,15 @@ func(); // Hello     // (3) コピーの実行(動きます)!
 sayHi(); // Hello    //     これもまだ動きます(なぜでしょう？)
 ```
 
-上記で起こっていることの詳細は次の通りです:
+上で起こっていることの詳細は次の通りです:
 
-1. 関数宣言 `(1)` で関数を生成し、変数名 `sayHi` に置きます。
+1. 関数宣言 `(1)` で関数を生成し、変数名 `sayHi` に格納します。
 2. 行 `(2)` でそれを変数 `func` にコピーします。
 
-    改めて注意してください:`sayHi` の後に括弧はありません。もしそれがあった場合、`sayHi` の *関数自身* ではなく、`func = sayHi()` は `sayHi()` の呼び出しの結果を `func` に書き込みます。
-3. 今や、関数は `sayHi()` と `func()` 両方で呼ぶことができます。
+    改めて注意してください:`sayHi` の後に括弧はありません。もし括弧があった場合、`sayHi` の *関数自身* ではなく、`func = sayHi()` は `sayHi()` の呼び出し結果を `func` に書き込みます。
+3. これで、関数は `sayHi()` と `func()` どちらでも呼ぶことができます。
 
-私たちは、1行目で、`sayHi` を宣言するために関数式を使うこともできます:
+また、1行目で `sayHi` を宣言するのに関数式を使うこともできます:
 
 ```js
 let sayHi = function() { ... };
@@ -77,7 +77,7 @@ let func = sayHi;
 // ...
 ```
 
-すべて同じように動作します。さらに何が起こっているのか、より明白ですね。
+すべて同じように動作します。何が起こっているのかより明白ですね。
 
 
 ````smart header="なぜ末尾にセミコロンがあるのでしょう？"
@@ -94,8 +94,8 @@ let sayHi = function() {
 ```
 
 答えはシンプルです:
-- コードブロックや `if { ... }`, `for {  }`, `function f { }` などの構文構造の末尾に `;` が必要ありません。
-- 関数式は文の内側で使われます: `let sayHi = ...;` を値として利用します。それはコードブロックではありません。セミコロン `;` はどんな値であれ文の最後に推奨されています。そのため、ここのセミコロンは関数式自体になんら関係しません、単に文の終わりです。
+- コードブロックや `if { ... }`, `for {  }`, `function f { }` などの構文構造の末尾には `;` が必要ありません。
+- 関数式は文の内側で使われます: `let sayHi = ...;` の値として利用します。これはコードブロックではありません。セミコロン `;` はどんな値であれ文の最後に推奨されています。従って、ここのセミコロンは関数式自体と関係はなく、単に文の終わりです。
 ````
 
 ## コールバック関数 
@@ -105,15 +105,15 @@ let sayHi = function() {
 私たちは、3つのパラメータを持つ関数 `ask(question, yes, no)` を書きます:
 
 `question`
-: 質問のテキスト
+: 質問内容
 
 `yes`
-: もしも答えが "はい" の場合に実行する関数
+: 答えが "はい" の場合に実行する関数
 
 `no`
-: もしも答えが "いいえ" の場合に実行する関数
+: 答えが "いいえ" の場合に実行する関数
 
-関数は `question` を訪ね、ユーザの回答に合わせて、`yes()` または `no()` を呼びます:
+関数は `question` を聞き、ユーザの回答に合わせて、`yes()` または `no()` を呼びます:
 
 ```js run
 *!*
@@ -135,13 +135,13 @@ function showCancel() {
 ask("Do you agree?", showOk, showCancel);
 ```
 
-これに関して、より短く記述する方法を探す前に、ブラウザ(といくつかのサーバサイドのケース)では、このような関数はかなり普及していることに留意しましょう。実際の実装と上の例の主な違いは、実際の関数は単純な `confirm` よりも、ユーザとやり取りするためにより複雑な方法を利用することです。ブラウザでは、このような関数は、通常良く見える質問ウィンドウに描画されます。しかしそれは別の話です。
+これをもっと簡単に書く方法を探る前に、ブラウザ(と場合によってはサーバ側)では、このような関数は非常に一般的であること留意しましょう。実際の実装と上の例の主な違いは、実際の関数は単純な `confirm` よりも、より複雑な方法でユーザとやり取りをすることです。ブラウザでは、通常このような関数は見栄えのよい質問ウィンドウを描画します。が、それはまた別の話です。
 
 **`ask`の引数は *コールバック関数* または単に *コールバック* と呼ばれます。**
 
-この考え方は、私たちは関数を渡し、それがもし必要であれば後で "呼び戻す" ことを期待します。このケースでは、`showOK` は "はい" のためのコールバックになり、`showCancel` は "いいえ" の回答のためです。
+この考え方は、私たちは関数を渡し、それが必要であれば後で "呼び戻す" ことを期待します。このケースでは、`showOK` は "はい" のためのコールバックになり、`showCancel` は "いいえ" の回答のためです。
 
-同じ関数をより短く書くために関数式を使うことが出来ます:
+同じ関数をより短く書くために関数式を使うことができます:
 
 ```js run no-beautify
 function ask(question, yes, no) {
@@ -158,17 +158,17 @@ ask(
 */!*
 ```
 
-ここでは、関数は `ask(...)` 呼び出しの中で正しく宣言されています。それらは名前を持たないので、*無名* と呼ばれます。
-このような関数は `ask` の外側からアクセスできません(変数に割り当てられていないため)、しかしそれはここで欲しいものです。
+ここでは、関数は `ask(...)` 呼び出しの中で正しく宣言されています。これらは名前を持たないので *無名* と呼ばれます。
+このような関数は、変数に割り当てられていないため `ask` の外側からアクセスできません。が、それはここで期待するものです。
 
-このようなコードは我々のスクリプトでとても自然に表れます。それは JavaScript の精神に基づいています。
+このようなコードはスクリプトの中で自然に現れます。それは JavaScript の精神に基づいています。
 
 ```smart header="関数は \"アクション\" を表す値です"
-文字列や数値のような通常の値は *データ* を表します。
+文字列や数値のような通常の値は *データ* を現します。
 
 関数は *アクション* として認識されます。
 
-私たちは、変数間でそれを渡し、必要な時に実行させることができます。
+変数間で渡し、必要な時に実行させることができます。
 ```
 
 
@@ -198,17 +198,17 @@ ask(
 
 よりささいな違いは、関数がJavaScriptエンジンによって *作られたとき* です。
 
-**関数式は、実行がそれに到達した時に作られ、それ以降、利用可能になります。**
+**関数式は、実行がそれに到達した時に作られ、それ以降で利用可能になります。**
 
 一度実行フローが代入 `let sum = function…` の右辺へ渡ったら -- 関数は作られ、そこから使えるようになります(代入や呼び出しなど)。
 
 関数宣言は異なります
 
 **関数宣言はスクリプト/コードブロック全体で使用できます。**
 
-言い換えると、JavaScriptがスクリプトまたはコードブロックの実行の準備をする時、最初にその中の関数定義を探し、関数を生成します。私たちはそれを "初期化段階" として考えることが出来ます。
+つまり、JavaScriptがスクリプトまたはコードブロックの実行の準備をする時、最初にその中の関数定義を探し、関数を生成します。それは "初期化段階" と考えることができます。
 
-そして、全ての関数宣言が処理されたあと、実行が続けられます。
+そして、すべての関数宣言が処理されたあと、実行が続けられます。
 
 結果的に、関数宣言として宣言された関数は、定義された関数よりも早く呼ぶことができます。
 
@@ -238,13 +238,13 @@ let sayHi = function(name) {  // (*) no magic any more
 };
 ```
 
-関数式は、実行がそれに到達した時に作られます。それは行 `(*)` でのみ起こります。遅すぎます。
+関数式は、実行がそれに到達した時に作られます。それは行 `(*)` で起こります。遅すぎます。
 
 **関数宣言がコードブロックの中で作られるとき、そのブロックの内側であればどこからでも見えます。しかし、その外側からは見えません。**
 
 必要とされるブロックの中だけでローカル変数を宣言することは、時には便利です。しかし、その機能も問題を引き起こす可能性があります。
 
-例えば、私たちがランタイムの中で得た `age` 変数に依存する関数 `welcome()` を宣言する必要があるとしましょう。そして、しばらくしてから使用することを予定します。
+例えば、ランタイムの中で得た `age` 変数に依存する関数 `welcome()` を宣言する必要があるとしましょう。そして、しばらくしてから使用する予定だとします。
 
 下のコードはうまく動作しません:
 
@@ -309,7 +309,7 @@ welcome(); // エラー: welcome は定義されていません
 
 `if` の外側で `welcome` を見えるようにするためにはどうしたらよいでしょうか？
 
-正しいアプローチは、関数式を使い、`welcome` を `if` の外で宣言され、適切なスコープをもつ変数に代入することです。
+正しいアプローチは、関数式を使い、`welcome` を `if` の外で宣言し、適切なスコープをもつ変数に代入することです。
 
 これは、意図したとおりに動作します:
 
@@ -353,17 +353,17 @@ welcome(); // ok now
 
 
 ```smart header="関数宣言と関数式のどちらを選択するのか？"
-経験則として、私たちが関数を宣言する必要があるとき、最初に考えるのは、以前私たちが使った関数宣言構文です。私たちはこれらの関数が宣言される前に呼ぶことができるため、コードを体系化する自由度が増します。
+経験則として、関数を宣言する必要があるとき、最初に考えるのは関数宣言構文です。関数が宣言される前に呼ぶことができるため、コードを体系化する自由度が増します。
 
 また、コードの中で、`let f = function(…) {…}` よりも `function f(…) {…}`  の方が調べるのが少し簡単です。関数宣言はより "目を引きます"。
 
-...しかし、関数宣言が幾つかの理由で適していない場合(上でみた例)、関数式が使われるべきです。
+...しかし、関数宣言が幾つかの理由で適していない場合(上でみた例)、関数式を使用するべきです。
 ```
 
 
 ## アロー関数 
 
-関数を作成ための、より非常にシンプルで簡潔な構文がもう1つあります。それはしばしば関数式よりも優れています。これは "アロー関数" と呼ばれ、次のようになります:
+関数を作成するための、より非常にシンプルで簡潔な構文がもう1つあります。それはしばしば関数式よりも優れています。これは "アロー関数" と呼ばれ、次のようになります:
 
 ```js
 let func = (arg1, arg2, ...argN) => expression
@@ -439,7 +439,7 @@ welcome(); // ok now
 
 上の例は、`=>` の左から引数を取得し、右側の式を評価しました。
 
-複数の式や文のようにもう少し複雑なものが必要な時があります。それもまた可能ですが、この場合は括弧で囲む必要があります。そして、その中で通常の `return` を使います。
+複数の式や文のように、もう少し複雑なものが必要な時があります。それも可能ですが、この場合は括弧で囲む必要があります。そして、その中で通常の `return` を使います。
 
 このようになります:
 
@@ -457,22 +457,22 @@ alert( sum(1, 2) ); // 3
 ```smart header="他にもあります"
 ここでは、簡潔にするためにアロー関数を賞賛しました。しかし、それだけではありません!!アロー関数は他にも興味深い機能を持っています。後ほどチャプター<info:arrow-functions> で触れます。
 
-現時点では、既にワンライナーの処理やコールバックのためにそれらを使うことが出来ます。
+今の時点で、我々はすでにワンライナーの処理やコールバック処理のためにアロー関数を使うことができます。
 ```
 
 ## サマリ 
 
-- 関数は値です。それらは、コード上のどの場所でも、割り当てたり、コピーしたり、宣言することができます。
-- もしも、関数がメインのコードフローの中で別の文として宣言されていたら、それは "関数宣言" と呼ばれます。
-- もしも関数が式の一部として作られたら、それは "関数式" と呼ばれます。
-- 関数宣言は、コードブロックが実行される前に処理されます。それらはブロックの中ではどこからでも見えます。
+- 関数は値です。それらはコード上のどの場所でも、割り当て、コピー、宣言をすることができます。
+- 関数がメインのコードフローの中で別の文として宣言されていたら、それは "関数宣言" と呼ばれます。
+- 関数が式の一部として作られたら、それは "関数式" と呼ばれます。
+- 関数宣言は、コードブロックが実行される前に処理されます。ブロックの中ではどこからでも見えます。
 - 関数式は、実行フローがそれに到達した時に作られます。
 
-ほとんどのケースでは、関数の宣言が必要な場合、関数宣言が望ましいです。なぜなら、それ自身の宣言の前で見えるためです。これにより、コード構成の柔軟性が増し、通常は読みやすくなります。
+たいていのケースでは、関数の宣言が必要な場合、関数宣言が望ましいです。なぜなら、それ自身の宣言の前でも利用することができるからです。これにより、コード構成の柔軟性が増し、通常は読みやすくなります。
 
 従って、関数宣言がそのタスクに適さない場合にのみ関数式を使うべきです。このチャプターで幾つかの例を見て来ました、そして今後もっと見ていくでしょう。
 
-アロー関数はワンライナーのために便利です。それらは2つの旨味があります:
+アロー関数はワンライナーに対し便利です。2つの種類があります:
 
 1. 括弧無し: `(...args) => expression` -- 右側は式です: 関数はそれを評価しその結果を返します。
 2. 括弧あり: `(...args) => { body }` -- 括弧があると、関数内で複数の文を書くことができます、しかし何かを返却する場合には、明確に `return` が必要です。