diff --git a/book.pdf b/book.pdf deleted file mode 100644 index 6927031c4a..0000000000 Binary files a/book.pdf and /dev/null differ diff --git a/source/basic/array/README.md b/source/basic/array/README.md index c2ffe4f9a8..b828377e81 100644 --- a/source/basic/array/README.md +++ b/source/basic/array/README.md @@ -447,7 +447,7 @@ console.log(newArray); // => ["A", "B", "C", "新しい要素"] ### `Array#splice` {#splice} 配列の先頭や末尾の要素を削除する場合は`Array#shift`や`Array#pop`で行えます。 -しかし、配列の任意のインデックスにある要素を削除することはできません。 +しかし、配列の任意のインデックスにある要素を削除できません。 配列の任意のインデックスの要素削除するには`Array#splice`を利用できます。 `Array#splice`メソッドを利用すると、削除した要素を自動で詰めることができます。 @@ -786,7 +786,7 @@ myFunc("a", "b", "c"); ## メソッドチェーンと高階関数 {#method-chain-and-high-order-function} 配列で頻出するパターンとしてメソッドチェーンがあります。 -メソッドチェーンとは名前のとおり、メソッドの呼び出しを行いその結果の値に対してさらにメソッドを呼び出すパターンのことを言います。 +メソッドチェーンとは名前のとおり、メソッドを呼び出した返り値に対してメソッド呼び出しをするパターンのことを言います。 次のコードでは、`Array#concat`メソッドの返り値、つまり配列に対してさらに`concat`メソッドを呼び出すというメソッドチェーンが行われています。 @@ -844,4 +844,4 @@ console.log(versionNames); // => ["ECMAScript 1", "ECMAScript 2", "ECMAScript 3" [ループと反復処理]: ../loop/README.md [immutable-array-prototype]: https://github.com/azu/immutable-array-prototype "azu/immutable-array-prototype: A collection of Immutable Array prototype methods(Per method packages)." [Lodash]: https://lodash.com/ "Lodash" -[Immutable.js]: https://facebook.github.io/immutable-js/ "Immutable.js" \ No newline at end of file +[Immutable.js]: https://facebook.github.io/immutable-js/ "Immutable.js" diff --git a/source/basic/async/README.md b/source/basic/async/README.md index 20eb25e07d..67eda8e2e6 100644 --- a/source/basic/async/README.md +++ b/source/basic/async/README.md @@ -22,7 +22,7 @@ author: azu 同期処理では実行している処理はひとつだけとなるため、とても直感的な動作となります。 一方、同期的にブロックする処理が行われていた場合には問題があります。 -同期処理ではひとつの処理が終わるまで次の処理を行うことができないためです。 +同期処理ではひとつの処理が終わるまで、次の処理へ進むことができないためです。 次のコードの`blockTime`関数は指定した`timeout`ミリ秒だけ無限ループを行い同期的にブロックする処理です。 この`blockTime`関数を呼び出すと、指定時間経過するまで次の処理（次の行）が呼ばれません。 @@ -47,7 +47,7 @@ console.log("この行が呼ばれるまで処理が1秒間ブロックされる このような同期的にブロックするのは、ブラウザでは大きな問題となります。 なぜなら、JavaScriptは基本的にブラウザのメインスレッド（UIスレッドとも呼ばれる）で実行されるためです。 -そのため、JavaScriptで同期的にブロックする処理を行うと他の処理ができなくなるため、画面がフリーズしたような体感を与えてしまいます。 +そのため、JavaScriptで同期的にブロックする処理を行うと、他の処理ができなくなるため、画面がフリーズしたような体感を与えてしまいます。 さきほどの例では1秒間も処理をブロックしているため、1秒間スクロールやクリックなどの他の操作が効かないといった悪影響がでます。 @@ -59,7 +59,7 @@ console.log("この行が呼ばれるまで処理が1秒間ブロックされる また非同期処理はコードを順番に処理していきますが、ひとつの非同期処理が終わるのを待たずに次の処理を評価します。 つまり、非同期処理では同時に実行している処理は複数あります。 -JavaScriptにおいて代表的な非同期処理を行う関数として`setTimeout`関数があります。 +JavaScriptにおいて非同期処理をする代表的な関数として`setTimeout`関数があります。 `setTimeout`関数は`delay`ミリ秒後に、`コールバック関数`を呼び出すようにタイマーへ登録する非同期処理です。 @@ -97,11 +97,15 @@ console.log("2. 同期的な処理を実行します"); このコードを実行した結果のコンソールログは次のようになります。 + + 1. setTimeoutのコールバック関数を10ミリ秒後に実行します 2. 同期的な処理を実行します 3. ブロックする処理を開始します 4. ブロックする処理が完了しました + + このように、非同期処理（`setTimeout`のコールバック関数）は、コードの見た目上の並びとは異なる順番で実行されることがわかります。 ## 非同期処理はメインスレッドで実行される {#async-and-main-thread} @@ -114,7 +118,7 @@ JavaScriptにおいて多くの非同期処理はメインスレッドで実行 このセクションでは非同期処理がどのようにメインスレッドで実行されているかを簡潔に見ていきます。 次のコードは、`setTimeout`関数でタイマーに登録したコールバック関数が呼ばれるまで、実際にどの程度の時間がかかったかを計測しています。 -また、`setTimeout`関数でタイマーに登録した次の行で同期的にブロックする処理を実行しています。 +また、`setTimeout`関数でタイマーに登録した次の行で、同期的にブロックする処理を実行しています。 非同期処理（コールバック関数）がメインスレッド以外のスレッドで実行されるならば、 この非同期処理はメインスレッドでの同期的にブロックする処理の影響を受けないはずです。 @@ -185,7 +189,7 @@ console.log("この文は実行されます"); 非同期処理では、`try...catch`構文を使っても非同期的に発生した例外をキャッチできません。 次のコードでは、10ミリ秒後に非同期的なエラーを発生させています。 -しかし、`try...catch`構文では次のような非同期エラーをキャッチすることはできません。 +しかし、`try...catch`構文では次のような非同期エラーをキャッチできません。 {{book.console}} @@ -258,12 +262,12 @@ fs.readFile("./example.txt", (error, data) => { }); ``` -このエラーファーストコールバックはNode.jsでは広く使われ、Node.jsの標準APIにおいても非同期処理を行う関数では利用されています。 +このエラーファーストコールバックはNode.jsでは広く使われ、Node.jsの標準APIの非同期処理をする関数において利用されています。 詳しい扱い方については[ユースケース: Node.jsでCLIアプリケーション][]にて紹介します。 実際にエラーファーストコールバックで非同期な例外処理を扱うコードを書いてみましょう。 -次のコードの`dummyFetch`関数は、擬似的なリソースの取得を行う非同期な処理です。 +次のコードの`dummyFetch`関数は、擬似的なリソースの取得をする非同期な処理です。 第1引数に任意のパスを受け取り、第2引数にエラーファーストコールバックスタイルの関数を受けとります。 この`dummyFetch`関数は、任意のパスにマッチするリソースがある場合には、第2引数のコールバック関数に`null`とレスポンスオブジェクトを渡して呼び出します。 @@ -1213,7 +1217,7 @@ Promise.race([ このようにPromiseを使うことで非同期処理のさまざまなパターンが形成できます。 より詳しいPromiseの使い方については[JavaScript Promiseの本][]というオンラインで公開されている文書にまとめられています。 -一方でPromiseはただのビルトインオブジェクトであるため、非同期処理間の連携を行うにはPromiseチェーンのように少し特殊な書き方や見た目になります。 +一方でPromiseはただのビルトインオブジェクトであるため、非同期処理間の連携をするにはPromiseチェーンのように少し特殊な書き方や見た目になります。 また、エラーハンドリングについても`Promise#catch`メソッドや`Promise#finally`メソッドなど`try...catch`構文とよく似た名前を使います。 しかし、Promiseは構文ではなくただのオブジェクトであるため、それらをメソッドチェーンとして実現しないといけないといった制限があります。 @@ -1354,7 +1358,7 @@ async function asyncMain() { } ``` -普通の処理の流れでは非同期処理を実行した場合にその非同期処理の完了を待つことなく、次の行（次の文）を実行します。 +普通の処理の流れでは、非同期処理を実行した場合にその非同期処理の完了を待つことなく、次の行（次の文）を実行します。 しかし`await`式では非同期処理を実行し完了するまで、次の行（次の文）を実行しません。 そのため`await`式を使うことで非同期処理が同期処理のように上から下へと順番に実行するような処理順で書けます。 @@ -1601,7 +1605,7 @@ fetchResources().then((results) => { }); ``` -Promiseチェーンで`fetchResources`関数書いた場合はコールバックの中で処理を行うためややこしい見た目になりがちです。 +Promiseチェーンで`fetchResources`関数書いた場合は、コールバックの中で処理するためややこしい見た目になりがちです。 一方、Async Functionと`await`式で書いた場合は、取得と追加を順番に行うだけとなりネストがなく見た目はシンプルです。 このようにAsync Functionと`await`式でも非同期処理を同期処理のような見た目で書けます。 diff --git a/source/basic/class/README.md b/source/basic/class/README.md index b6b1dee366..6347ec1c2b 100644 --- a/source/basic/class/README.md +++ b/source/basic/class/README.md @@ -317,7 +317,7 @@ console.log(counterA.increment === counterB.increment); // => true `class`構文でのメソッド定義はプロトタイプメソッドとなり、インスタンス間で共有されます。 -一方、クラスのインスタンスに対して直接メソッドを定義することも可能です。 +一方、クラスのインスタンスに対して、直接メソッドを定義する方法もあります。 これは、コンストラクタ関数内でインスタンスオブジェクトに対してメソッドを定義するだけです。 次のコードでは、`Counter`クラスのコンストラクタ関数で、インスタンスオブジェクトに`increment`メソッドを定義しています。 @@ -629,7 +629,7 @@ const arrayWrapper = ArrayWrapper.of(1, 2, 3); console.log(arrayWrapper.length); // => 3 ``` -このように静的メソッドでの`this`はクラス自身を参照するため、インスタンスメソッドのようにインスタンスを参照することはできません。 +このように静的メソッドでの`this`はクラス自身を参照するため、クラスのインスタンスは参照できません。 そのため静的メソッドは、クラスのインスタンスを作成する処理やクラスに関係する処理を書くために利用されます。 ## 2種類のインスタンスメソッドの定義 {#two-instance-method-definition} @@ -939,10 +939,10 @@ const child = new Child("引数1", "引数2"); // "Childコンストラクタの処理", "引数1", "引数2" ``` -`class`構文でのクラス定義では、`constructor`メソッド（コンストラクタ）で何も処理を行わない場合は省略できることを紹介しました。 +`class`構文でのクラス定義では、`constructor`メソッド（コンストラクタ）で何も処理しない場合は省略できることを紹介しました。 これは、継承した子クラスでも同じです。 -次のコードでは、`Child`クラスのコンストラクタでは何も処理を行っていません。 +次のコードの`Child`クラスのコンストラクタでは、何も処理を行っていません。 そのため、`Child`クラスの`constructor`メソッドの定義を省略できます。 {{book.console}} @@ -971,7 +971,7 @@ class Child extends Parent { 子クラスのコンストラクタでは、`this`を触る前に`super()`で親クラスのコンストラクタ処理を呼び出さないと`SyntaxError`となるためです。 次のコードでは、`Parent`と`Child`でそれぞれインスタンス（`this`）の`name`プロパティに値を書き込んでいます。 -子クラスでは先に`super()`を呼び出してからでないと`this`を参照することはできません。 +子クラスでは先に`super()`を呼び出してからでないと`this`を参照できません。 そのため、コンストラクタの処理順は`Parent`から`Child`という順番に限定されます。 diff --git a/source/basic/comments/README.md b/source/basic/comments/README.md index a23d999b53..4cf23b8903 100644 --- a/source/basic/comments/README.md +++ b/source/basic/comments/README.md @@ -69,4 +69,4 @@ ECMAScriptは一度入った仕様が使えなくなることは殆どないた [Annex B (normative)]: http://www.ecma-international.org/ecma-262/6.0/#sec-additional-ecmascript-features-for-web-browsers [ES6 In Depth: Arrow functions]: https://dev.mozilla.jp/2016/03/es6-in-depth-arrow-functions/ "ES6 In Depth: Arrow functions | Mozilla Developer Street (modest)" -[JSDoc]: https://ja.wikipedia.org/wiki/JSDoc \ No newline at end of file +[JSDoc]: https://ja.wikipedia.org/wiki/JSDoc diff --git a/source/basic/condition/README.md b/source/basic/condition/README.md index a1b9a75fdb..7b28a7ca6c 100644 --- a/source/basic/condition/README.md +++ b/source/basic/condition/README.md @@ -50,7 +50,7 @@ if (x > 10) { ``` if文の`条件式`には`true`または`false`といった真偽値以外の値も指定できます。 -真偽値以外の値の場合、その値を暗黙的に真偽値へ変換した評価結果を使い、if文の判定を行います。 +真偽値以外の値の場合、その値を暗黙的に真偽値へ変換してから、条件式として判定します。 真偽値へ変換した結果が`true`となる値の種類は多いため、逆に変換した結果が`false`となる値を覚えるのが簡単です。JavaScriptでは次の値は`false`に変換され、これらの値は**falsy** と呼ばれます。（「[暗黙的な型変換][]の章」を参照） @@ -253,4 +253,4 @@ switch文のcase節では基本的に`break;`を使いswitch文を抜けるよ - [制御フローとエラー処理 - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) -[暗黙的な型変換]: ../implicit-coercion/README.md \ No newline at end of file +[暗黙的な型変換]: ../implicit-coercion/README.md diff --git a/source/basic/data-type/README.md b/source/basic/data-type/README.md index f011d64a71..ffe8aa2819 100644 --- a/source/basic/data-type/README.md +++ b/source/basic/data-type/README.md @@ -15,7 +15,7 @@ JavaScriptは動的型付け言語に分類される言語であるため、 データ型を大きく分けると、**プリミティブ型**と**オブジェクト**の2つに分類されます。 プリミティブ型（基本型）は名前のとおり、文字列や数値などの基本的な値の型のことです。 -プリミティブ型の値は、一度作成したらその値自体を変更することはできないというイミュータブル（immutable）の特性を持ちます。 +プリミティブ型の値は、一度作成したらその値自体を変更できないというイミュータブル（immutable）の特性を持ちます。 一方、プリミティブ型ではないものをオブジェクト（複合型）とよび、 オブジェクトは複数のプリミティブ型の値またはオブジェクトからなる集合です。 @@ -45,7 +45,7 @@ JavaScriptは動的型付け言語に分類される言語であるため、 他のプリミティブ型の値については、`typeof`演算子でそれぞれのデータ型を調べることができます。 オブジェクトと一言にいってもJavaScriptではすべてがオブジェクトであると言われるほど、多くの種類が存在します。 -`typeof`演算子ではすべてのオブジェクトの種類を判定することはできません。 +`typeof`演算子ではすべてのオブジェクトの種類を判定できません。 つまり、`typeof`演算子は、プリミティブ型またはオブジェクトかを判別するもので、 オブジェクトの詳細なデータ型については別の方法を判定するようになっています。 @@ -177,7 +177,7 @@ PHPやRubyなどとは違い、どちらのリテラルでも評価結果は同 "8 o'clock"; // => "8 o'clock" ``` -ダブルクオートとシングルクオートどちらも改行をそのまま入力することはできません。 +ダブルクオートとシングルクオートどちらも、改行をそのままは入力できません。 次のように改行を含んだ文字列は定義できずに構文エラー（`SyntaxError`）となります。 [import, multiple-line-string-invalid.js](src/multiple-line-string-invalid.js) @@ -348,8 +348,8 @@ const numberRegExp = /\d+/; // 1文字以上の数字にマッチする正規表 console.log(numberRegExp.test(123)); // => true ``` -`RegExp`コンストラクタを使うことで文字列から正規表現オブジェクトを作成することもできますが、 -特殊文字の二重エスケープが必要になり直感的に書くことが難しくなります。 +`RegExp`コンストラクタを使うことで、文字列から正規表現オブジェクトを作成できます。 +しかし、特殊文字の二重エスケープが必要になり直感的に書くことが難しくなります。 正規表現オブジェクトについて詳しくは、[文字列の章][]で紹介します。 diff --git a/source/basic/ecmascript/README.md b/source/basic/ecmascript/README.md index 0edf348b2f..6f71c20fbe 100644 --- a/source/basic/ecmascript/README.md +++ b/source/basic/ecmascript/README.md @@ -7,7 +7,7 @@ author: azu ここまでJavaScriptの基本文法について見ていきましたが、その文法を定めるECMAScriptという仕様自体がどのように変化していくのかを見ていきましょう。 ECMAScriptは[Ecma International][]という団体によって標準化されている仕様です。 -Ecma InternationalはECMAScript以外にもC#やDartなどの標準化作業を行っています。 +Ecma InternationalはECMAScript以外にもC#やDartなどの標準化作業をしています。 Ecma International中のTechnical Committee 39（TC39）という技術委員会が中心となって、ECMAScript仕様についてを議論しています。 この技術委員会はMicrosoft、Mozilla、Google、AppleといったブラウザベンダーやECMAScriptに関心のある企業などによって構成されます。 @@ -97,7 +97,7 @@ ECMAScriptの策定プロセスのステージ4に「2つ以上の実装が存 またTranspilerやPolyfillといった手段で、プロポーザルの機能をエミュレートできる場合があります。 Transpilerとは、新しい構文を既存の機能で再現できるようにソースコードを変換するツールのことです。 -たとえば、ES2015で`class`構文が導入されましたが、ES5では`class`は予約語であるため構文エラーとなり実行することはできません。 +たとえば、ES2015で`class`構文が導入されましたが、ES5では`class`は予約語であるため構文エラーとなり実行できません。 Transpilerでは、`class`構文を含むソースコードを`function`キーワードを使い擬似的に再現するコードへ変換します。 Transpilerとしては[Babel][]や[TypeScript][]などが有名です。 diff --git a/source/basic/error-try-catch/README.md b/source/basic/error-try-catch/README.md index d5643dd0e3..34b50b1af6 100644 --- a/source/basic/error-try-catch/README.md +++ b/source/basic/error-try-catch/README.md @@ -144,7 +144,7 @@ try { [SyntaxError][]は構文的に不正なコードを解釈しようとした場合のエラーです。 `SyntaxError`例外はJavaScriptを実行する前のパース段階で発生します。 -この構文エラーは`try...catch`文でcatchすることはできません。 +この構文エラーは`try...catch`文でcatchできません。 ``` // 正しくない構文 @@ -186,8 +186,9 @@ try { ### ビルトインエラーを投げる {#throw-built-in-error} -ユーザーがビルトインエラーのインスタンスを作成することもできます。 -通常の`Error`オブジェクトと同じように、それぞれのオブジェクトをnewします。 +ユーザーはビルトインエラーのインスタンスを作成できます。 +通常の`Error`オブジェクトと同じように、それぞれのエラーオブジェクトをnewします。 + たとえば関数の引数を数値に限定したい場合は、次のように`TypeError`例外を投げるとよいでしょう。 メッセージを確認しなくても、エラーの名前だけで型に関する例外だとすぐにわかります。 diff --git a/source/basic/function-declaration/README.md b/source/basic/function-declaration/README.md index 6e3fbf831b..af903df5db 100644 --- a/source/basic/function-declaration/README.md +++ b/source/basic/function-declaration/README.md @@ -7,7 +7,7 @@ description: 関数の宣言方法とメソッドについて 関数とは、ある一連の手続き（文の集まり）を1つの処理としてまとめる機能です。 関数を利用することで、同じ処理を毎回書くのではなく、一度定義した関数を呼び出すことで同じ処理を実行できます。 -これまで利用してきたコンソール表示を行うConsole APIも関数です。 +これまで利用してきたコンソール表示をするConsole APIも関数です。 `console.log`は「受け取った値をコンソールへ出力する」という処理をまとめた関数です。 この章では、関数の定義方法や呼び出し方について見ていきます。 @@ -401,7 +401,7 @@ myFunc(); このように関数が値として扱えることを、ファーストクラスファンクション（第一級関数）と呼びます。 -さきほどのコードでは、関数宣言をしてから変数へ代入していましたが、最初から関数を値として定義することも可能です。 +さきほどのコードでは、関数宣言をしてから変数へ代入していましたが、最初から関数を値として定義できます。 関数を値として定義する場合には、関数宣言と同じ`function`キーワードを使った方法とArrow Functionを使った方法があります。 どちらの方法も、関数を式（代入する値）として扱うため**関数式**と呼びます。 diff --git a/source/basic/function-scope/README.md b/source/basic/function-scope/README.md index 7becc6a68b..90944492a4 100644 --- a/source/basic/function-scope/README.md +++ b/source/basic/function-scope/README.md @@ -850,8 +850,8 @@ newCountUp(); // => 1 これらはクロージャーの特徴でもあるので、同時に使われることがあります。 -たとえば次の例では、`privateCount`という変数を関数の中に定義していますが、 -外からはその変数を直接参照はできません。言い換えると外から直接参照して値を変更することはできません。 +たとえば次の例では、`privateCount`という変数を関数の中に定義しています。 +この`privateCount`変数は、外からは直接参照はできません。 外から参照する必要がない変数をクロージャーとなる関数に閉じ込めることは、言い換えるとグローバルに定義する変数を減らすことができます。 {{book.console}} diff --git a/source/basic/implicit-coercion/README.md b/source/basic/implicit-coercion/README.md index 457abc878e..f3e8f9c659 100644 --- a/source/basic/implicit-coercion/README.md +++ b/source/basic/implicit-coercion/README.md @@ -9,7 +9,7 @@ author: azu [演算子][]の章にて、等価演算子において**暗黙的な型変換**による意図しない挙動について紹介しました。 > 等価演算子（`==`）はオペランド同士が異なる型の値であった場合に、 -> 同じ型となるように**暗黙的な型変換**してから比較を行います。 +> 同じ型となるように**暗黙的な型変換**をしてから比較します。 暗黙的な型変換の例として、数値と真偽値の加算を見てみましょう。 多くの言語では、数値と真偽値の加算は型エラーとなり、コンパイルエラーまたは実行時エラーとなります。 @@ -338,7 +338,7 @@ typeof NaN; // => "number" ``` NaNしか持っていない特殊な性質として、自分自身と一致しないという特徴があります。 -この特徴を利用することで、ある値が`NaN`であるかを判定することもできます。 +この特徴を利用することで、ある値が`NaN`であるかを判定できます。 {{book.console}} ```js @@ -353,7 +353,7 @@ isNaN([]); // => false isNaN(NaN); // => true ``` -同様の処理を行う方法として`Number.isNaN(x)`メソッドがあります。 +同様の処理をする方法として`Number.isNaN(x)`メソッドがあります。 実際に値が`NaN`かを判定する際には、`Number.isNaN(x)`メソッドを利用するとよいでしょう。 {{book.console}} @@ -392,7 +392,7 @@ sum(1, undefined, 10); // => NaN NaN + 10; // => NaN ``` -これは、`sum`関数において引数を明示的にNumber型へ変換したとしても回避することはできません。 +これは、`sum`関数において引数を明示的にNumber型へ変換したとしても回避できません。 つまり、次のように明示的な型変換しても解決できない問題あることが分かります。 {{book.console}} @@ -454,8 +454,8 @@ sum(x, y, z); // => Error エラーとなった時に呼ばれる側と呼び出し側でどちらに問題があるのかが明確になります。 この場合は、`sum`関数へ`undefined`な値を渡している呼び出し側に問題があります。 -JavaScriptは、型エラーに対して暗黙的な型変換を行うなど驚くほど許容しています。 -そのため、大きなJavaScriptアプリケーションを書く場合は、このような検出しにくいバグを見つけられるように書くことは重要です。 +JavaScriptは、型エラーに対して暗黙的な型変換してしまうなど、驚くほど曖昧さを許容しています。 +そのため、大きなアプリケーションを書く場合は、このような検出しにくいバグを見つけられるように書くことは重要です。 ## 明示的な変換でも解決しないこと {#unsolved-problem} @@ -472,7 +472,7 @@ JavaScriptの型変換は基本的に情報が減る方向へしか変換でき `""`（空文字）はfalsyな値であるため、明示的に`Boolean`コンストラクタ関数で真偽値へ変換できます。 しかし、falsyな値は空文字以外にもあるため、明示的に変換したからといって空文字だけを判定できるわけではありません。 -次のコードでは、明示的な型変換を行っていますが、`0`も**空文字**となってしまい意図しない挙動になっています。 +次のコードでは、明示的な型変換をしていますが、`0`も**空文字**となってしまい意図しない挙動になっています。 {{book.console}} ```js diff --git a/source/basic/loop/README.md b/source/basic/loop/README.md index 2f3a13a3d7..b24b359d12 100644 --- a/source/basic/loop/README.md +++ b/source/basic/loop/README.md @@ -21,10 +21,14 @@ while (条件式) while文の実行フローは次のようになります。 最初から`条件式`が`false`である場合は、何も実行せずwhile文は終了します。 + + 1. `条件式` の評価結果が`true`なら処理を続け、`false`なら終了 2. `実行する文`を実行 3. ステップ1へ戻る + + 次のコードでは`x`の値が10未満であるなら、コンソールへ繰り返しログが出力されます。 また、`実行する文`にて、`x`の値を増やし`条件式`が`false`となるようにしています。 @@ -172,7 +176,7 @@ switch文で出てきたものと同様で、処理中のループ文を終了 1つでも偶数があるかが分かればいいため、配列内から最初の偶数を見つけたらfor文での反復処理を終了します。 このような処理はベタ書きせずに、関数として実装するのが一般的です。 -同様の処理を行う `isEvenIncluded` 関数を実装してみます。 +同様の処理をする `isEvenIncluded` 関数を実装してみます。 次のコードでは、break文が実行され、ループを抜けた後にreturn文で結果を返しています。 {{book.console}} @@ -343,7 +347,7 @@ for...of文はそれらに対して反復処理を行うことができます。 ## [コラム] `let`ではなく`const`で反復処理をする {#const-iteration} -先ほどのfor文や`forEach`メソッドでは`let`を`const`に変更することはできませんでした。 +先ほどのfor文や`forEach`メソッドでは`let`を`const`に変更できませんでした。 なぜなら、for文は一度定義した変数に値の代入を繰り返し行う処理といえるからです。 `const` は再代入できない変数を宣言するキーワードであるためfor文とは相性がよくありません。 diff --git a/source/basic/object/README.md b/source/basic/object/README.md index 6abf93cd89..0363858825 100644 --- a/source/basic/object/README.md +++ b/source/basic/object/README.md @@ -208,7 +208,7 @@ console.log(object[key]); // => "value" ``` JavaScriptのオブジェクトは、変更不可能と明示しない限り、変更可能なmutableの特性をもつことを紹介しました。 -そのため、関数が受け取ったオブジェクトに対して、勝手にプロパティを追加することもできてしまいます。 +そのため、関数が受け取ったオブジェクトに対して、勝手にプロパティを追加できてしまいます。 {{book.console}} ```js @@ -222,7 +222,7 @@ console.log(object.key); // => "value" ``` このように、プロパティを初期化時以外に追加してしまうと、そのオブジェクトがどのようなプロパティを持っているかがわかりにくくなります。 -そのため、できる限り作成後に新しいプロパティの追加を行わないほうがよいでしょう。 +そのため、できる限り作成後に新しいプロパティは追加しないほうがよいでしょう。 つまり、オブジェクトの作成時のオブジェクトリテラルの中でプロパティを定義することを推奨します。 ### [コラム] constで定義したオブジェクトは変更可能 {#const-and-object} @@ -454,7 +454,7 @@ const merged = Object.assign({}, objectA, objectB); console.log(merged); // => { a: "a", b: "b" } ``` -第一引数には空のオブジェクトではなく、既存のオブジェクトを指定することもできます。 +第一引数には空のオブジェクトではなく、既存のオブジェクトも指定できます。 第一引数に既存のオブジェクトを指定した場合は、指定されたオブジェクトのプロパティが変更されます。 次のコードでは第一引数に指定された`objectA`に対してプロパティが追加されています。 @@ -611,4 +611,4 @@ console.log(cloneObject.nest === object.nest); // => false [ループと反復処理]: ../loop/README.md "ループと反復処理" [変数と宣言]: ../variables/README.md "変数と宣言" [クラス]: ../class/README.md "クラス" -[変数と宣言のconstについて]: ../variables/README.md#const \ No newline at end of file +[変数と宣言のconstについて]: ../variables/README.md#const diff --git a/source/basic/operator/README.md b/source/basic/operator/README.md index d4d041b822..6bd504258e 100644 --- a/source/basic/operator/README.md +++ b/source/basic/operator/README.md @@ -5,7 +5,7 @@ author: azu # 演算子 {#operator} 演算子はよく利用する計算を関数やメソッドではなく、記号として表現したものです。 -たとえば、足し算を行う `+` も演算子の一種で、演算子には多くの種類があります。 +たとえば、足し算する `+` も演算子の一種で、演算子には多くの種類があります。 演算子は演算する対象をもちます。この演算子の対象のことを**被演算子（オペランド）**と呼びます。 @@ -351,7 +351,7 @@ console.log(objA == objA); // => true ``` しかし、等価演算子（`==`）はオペランド同士が異なる型の値であった場合に、 -同じ型となるように**暗黙的な型変換**してから比較を行います。 +同じ型となるように**暗黙的な型変換**してから比較します。 そのため、次のような、見た目からは結果を予測できない挙動が多く存在します。 @@ -392,7 +392,7 @@ if (value == null) { ``` このように等価演算子（`==`）を使う例外的なケースはありますが、 -基本的に等価演算子（`==`）は[暗黙的な型変換][]を行うためバグを引き起こしやすいです。 +等価演算子（`==`）は[暗黙的な型変換][]をするため、バグを引き起こしやすいです。 そのため、仕組みを理解するまでは常に厳密等価演算子（`===`）を利用することを推奨します。 ### 不等価演算子（`!=`） {#not-equal-operator} @@ -412,7 +412,7 @@ console.log(objA != objB); // => true console.log(objA != objA); // => false ``` -不等価演算子も、等価演算子（`==`）と同様に異なる型のオペランドを比較する際に、暗黙的な型変換を行ってから比較します。 +不等価演算子も、等価演算子（`==`）と同様に異なる型のオペランドを比較する際に、暗黙的な型変換をしてから比較します。 {{book.console}} ```js @@ -423,7 +423,7 @@ console.log(null != undefined); // => false ``` そのため、不等価演算子（`!=`）は、利用するべきではありません。 -代わりに暗黙的な型変換を行わない厳密不等価演算子（`!==`）を利用します。 +代わりに暗黙的な型変換をしない厳密不等価演算子（`!==`）を利用します。 ### 大なり演算子/より大きい（`>`） {#more-than} @@ -943,4 +943,4 @@ console.log(c); // => 3 [暗黙的な型変換]: ../implicit-coercion/README "暗黙的な型変換について解説する章" [^1]: カンマ演算子を活用したテクニックとしてindirect callというものがあります。 -[演算子の優先順序]: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#Table "演算子の優先順位 - JavaScript | MDN" \ No newline at end of file +[演算子の優先順序]: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#Table "演算子の優先順位 - JavaScript | MDN" diff --git a/source/basic/read-eval-print/README.md b/source/basic/read-eval-print/README.md index 4f18a98ada..d6f5242c0b 100644 --- a/source/basic/read-eval-print/README.md +++ b/source/basic/read-eval-print/README.md @@ -74,7 +74,7 @@ Shift + Enterで改行して複数行の入力もできます。 注意点としては、REPLではそのREPLを終了するまで`const`キーワードなどで宣言した変数が残り続けます。 たとえば、`const`での変数宣言は同じ変数名を二度定義できないというルールでした。 -そのため1行づつ実行しても同じ変数名の定義を行うと構文エラー（`SyntaxError`）となります。 +そのため1行ずつ実行しても、同じ変数名を定義すると構文エラー（`SyntaxError`）となります。 ``` » const bookTitle = "JavaScriptの本"; @@ -123,7 +123,7 @@ REPLでは自動で評価結果のコンソール表示まで行いますが、J ## Console API {#console-api} -JavaScriptの多くの実行環境では、Console APIが**コンソール表示**を行うAPIとなっています。 +JavaScriptの多くの実行環境では、Console APIが**コンソール表示**をするAPIとなっています。 `console.log(引数)`の引数にコンソール表示したい値を入れることで、評価結果がコンソールに表示されます。 先ほどの`index.js`の中身を次のように書きかえます。 diff --git a/source/basic/statement-expression/README.md b/source/basic/statement-expression/README.md index eed8260dce..ce093d54af 100644 --- a/source/basic/statement-expression/README.md +++ b/source/basic/statement-expression/README.md @@ -38,7 +38,7 @@ console.log(fn()); // => 1 ## 文 {#statement} -**文**（Statement）を簡潔に述べると、処理を実行する1ステップが1つの文といえます。 +**文**（Statement）を簡潔に述べると、処理する1ステップが1つの文といえます。 JavaScriptでは、文の末尾にセミコロン(`;`)を置くことで文と文に区切りを付けます。 ソースコードとして書かれた文を上から処理していくことで、プログラムが実行されます。 @@ -62,7 +62,7 @@ if (isTrue) { 一方、if文などは文であり式になることはできません。 -**式**ではないため、if文を変数へ代入することはできません。 +**式**ではないため、if文を変数へ代入できません。 そのため、次のようなコードは`SyntaxError`となります。 [import, statement-not-expression-invalid.js](src/statement-not-expression-invalid.js) @@ -165,7 +165,7 @@ JavaScriptには、特殊なルールにもとづき、セミコロンがない エディタやIDEの中にはセミコロンの入力の補助をしてくれるものや、[ESLint][]などのLintツールを使うことで、 セミコロンが必要なのかをチェックできます。 -セミコロンが必要か見分けるにはある程度慣れが必要ですが、ツールを使い静的にチェックすることもできます。 +セミコロンが必要か見分けるにはある程度慣れが必要ですが、ツールを使い静的にチェックできます。 そのため、ツールなどの支援を受けて経験的に慣れていくこともよい方法といえます。 [関数と宣言]: ../function-declaration/README.md diff --git a/source/basic/string/README.md b/source/basic/string/README.md index e67484fdb5..08b210fce3 100644 --- a/source/basic/string/README.md +++ b/source/basic/string/README.md @@ -59,8 +59,7 @@ const name = "JavaScript"; console.log("Hello " + name + "!");// => "Hello JavaScript!" ``` -特定の書式に値を埋め込みために文字列結合を行う場合には、 -テンプレートリテラルを使うとより宣言的に書くことができます。 +特定の書式に文字列を埋め込むには、テンプレートリテラルを使うとより宣言的に書くことができます。 テンプレートリテラルは `` ` ``（バッククオート）で文字列を作成できる点は、`"`（ダブルクオート）や`'`（シングルクオート）と同じです。 加えて、テンプレートリテラルは文字列中に変数を埋め込むことができます。 @@ -247,7 +246,7 @@ const string = "赤・青・緑".split("・").join("、"); console.log(string); // => "赤、青、緑" ``` -`String#split`メソッドの第一引数には正規表現を指定することもできます。 +`String#split`メソッドの第一引数には正規表現も指定できます。 これを利用すると、次のように文字列をスペースで区切るような処理が簡単に書くことができます。 ```js @@ -302,7 +301,7 @@ for (const codePoint of string) { 絵文字などサロゲートペアを含む文字列をそれぞれの**Code Unit**で分解すると、加工して結合すると化けてしまうなどの問題が発生しやすいです。 Iteratorを利用すればサロゲートペアもそれぞれの**Code Point**で扱うことができます。 -しかし、JavaScriptにおいて、見た目どおりの**文字**ごとに処理を行う標準的な方法は用意されていません。 +しかし、JavaScriptにおいて、見た目どおりの**文字**ごとに処理する標準的な方法は用意されていません。 結合文字などを考慮した**文字**について、詳しくは[JavaScript has a Unicode problem · Mathias Bynens][]を参照してください。 ## 文字列の長さ {#length} @@ -367,10 +366,10 @@ console.log("JS" === "ES"); // => false - 文字列の長さ（length）は同じか また、`===`などの比較演算子だけではなく、 -`>`、`、`、`>=`、`<=`など大小の関係演算子で文字列同士を比較することもできます。 +`>`、`、`、`>=`、`<=`など大小の関係演算子で文字列同士の比較もできます。 これらの関係演算子も、文字列の要素であるCode Unitの数値を先頭から順番に比較します。 -しかし、これらの関係演算子は暗黙的な型変換を行うため事前に文字列同士であるかのチェックが必要です。 +しかし、これらの関係演算子は暗黙的な型変換をするため、事前に文字列同士であるかのチェックが必要です。 文字列からCode Unitの数値を取得するには`String#charCodeAt`メソッドを利用します。 @@ -599,7 +598,7 @@ const pattern = /\s{3}/; ``` 一方、`RegExp`コンストラクタは、文字列から正規表現オブジェクトを動的に生成できます。 -正規表現リテラルでは、動的に正規表現オブジェクトを生成することはできません。 +正規表現リテラルでは、動的に正規表現オブジェクトを生成できません。 そのため、`RegExp`コンストラクタは、変数をパターンに埋め込んだ正規表現を生成する際に利用されます。 注意点として、`\`（バックスラッシュ）自体が、文字列中ではエスケープ文字であることに注意してください。 @@ -956,7 +955,7 @@ URLを扱うものとしてブラウザ上のAPIである[URL][]オブジェク ### タグ付きテンプレート関数 {#tagged-template-function} -文字列操作を行う場合にコンテキストをもつ文字列では気をつける必要があります。 +URLやパスのようにコンテキストをもつ文字列では、文字列操作に気をつける必要があります。 しかし、文字列処理をする際に毎回関数で囲んで書くとコードの見た目が分かりにくい場合もあります。 次のようなユーザー入力を受け取り構築されるURLを考えてみましょう。 @@ -1071,7 +1070,7 @@ console.log(escapedURL); // => "https://example.com/search?q=A%26B&sort=desc" ## おわりに {#string-summary} この章では、JavaScriptにおける文字列とは何かやUnicodeとの関係について紹介しました。 -文字列処理を行うStringメソッドにはさまざまなものがあり、正規表現との組み合わせ使うものも含まれます。 +文字列処理するStringメソッドにはさまざまなものがあり、正規表現との組み合わせ使うものも含まれます。 正規表現については、正規表現のみでひとつの本が作れるようなJavaScript言語内にある別言語です。 詳細は[正規表現 - JavaScript | MDN][]などを参照してください。 diff --git a/source/basic/variables/README.md b/source/basic/variables/README.md index 92720a7568..73ab1314ac 100644 --- a/source/basic/variables/README.md +++ b/source/basic/variables/README.md @@ -34,7 +34,7 @@ var bookTitle; bookTitle = "JavaScriptの本"; ``` -変数宣言と同時に初期値を代入することもできます。 +変数宣言と同時に初期値の代入もできます。 次のコードでは、`bookTitle`という変数を宣言し、同時に`"JavaScriptの本"`という文字列で初期化しています。 ```js diff --git a/source/intro/feedback/README.md b/source/intro/feedback/README.md index cae11582c8..c9e0965930 100644 --- a/source/intro/feedback/README.md +++ b/source/intro/feedback/README.md @@ -35,7 +35,7 @@ GitHubのアカウントを持っていない方は、次のフォームから - -そのため、あなたは問題を報告するだけではなく、修正することもできます。 +そのため、問題を報告するだけではなく修正もできます。 GitHubでソースコードが公開されているため、修正内容を[Pull Request][]することで問題を修正できます。 詳しいPull Requestの送り方は[CONTRIBUTING.md][]に書かれているので参考にしてください。 diff --git a/source/use-case/ajaxapp/README.md b/source/use-case/ajaxapp/README.md index a75019a17b..371b8ff2c2 100644 --- a/source/use-case/ajaxapp/README.md +++ b/source/use-case/ajaxapp/README.md @@ -4,7 +4,7 @@ author: laco # ユースケース: Ajax通信 {#usecase-ajax} -ここではウェブブラウザ上でAjax通信を行うユースケースとして、GitHubのユーザーIDからプロフィール情報を取得するアプリケーションを作成します。 +ここではウェブブラウザ上でAjax通信をするユースケースとして、GitHubのユーザーIDからプロフィール情報を取得するアプリケーションを作成します。 作成するアプリケーションは次の要件を満たすものとします。 diff --git a/source/use-case/ajaxapp/display/README.md b/source/use-case/ajaxapp/display/README.md index 800b49b8f0..ef7a3b781b 100644 --- a/source/use-case/ajaxapp/display/README.md +++ b/source/use-case/ajaxapp/display/README.md @@ -93,7 +93,7 @@ JavaScriptによってHTML要素をDOMに追加する方法は、大きく分け ひとつは、今回のようにHTML文字列を[Element#innerHTML][]プロパティにセットする方法です。 もうひとつは、文字列ではなく[Element][]オブジェクトを生成して[手続き的にツリー構造を構築する][]方法です。 後者はセキュリティ的に安全ですが、コードは少し冗長になります。 -今回は`Element#innerHTML`プロパティを使いつつ、セキュリティのための処理を行うこととします。 +今回は`Element#innerHTML`プロパティを使いつつ、セキュリティのためのエスケープ処理を行います。 ## HTML文字列をエスケープする {#escape-html} diff --git a/source/use-case/ajaxapp/promise/README.md b/source/use-case/ajaxapp/promise/README.md index f9e0830f39..25116a3ee3 100644 --- a/source/use-case/ajaxapp/promise/README.md +++ b/source/use-case/ajaxapp/promise/README.md @@ -10,7 +10,7 @@ author: laco ## 関数の分割 {#split-function} まずは、大きくなりすぎた`getUserInfo`関数を整理しましょう。 -この関数では、XHRを使ったデータの取得・HTML文字列の組み立て・組み立てたHTMLの表示を行っています。 +この関数では、XHRを使ったデータの取得・HTML文字列の組み立て・組み立てたHTMLの表示をしています。 そこで、HTML文字列を組み立てる`createView`関数とHTMLを表示する`displayView`関数を作り、処理を分割します。 また、後述するエラーハンドリングを行いやすくするため、アプリケーションにエントリポイントを設けます。 @@ -63,7 +63,7 @@ function displayView(view) { ## XHRをPromiseでラップする {#wrap-xhr} 次に、`getUserInfo`関数で行っているXHRの処理を整理します。 -これまではXHRのコールバック関数の中で処理を行っていましたが、これを**Promise**を使った処理に書き換えます。 +これまではXHRのコールバック関数の中で処理していましたが、これを**Promise**を使った処理に書き換えます。 コールバック関数を使うと、ソースコードのネストが深くなったり、例外処理が複雑になったりします。 Promiseを用いることで、可読性を保ちながらエラーハンドリングを簡単に行えます。 diff --git a/source/use-case/ajaxapp/xhr/README.md b/source/use-case/ajaxapp/xhr/README.md index 03938d0451..ad29208541 100644 --- a/source/use-case/ajaxapp/xhr/README.md +++ b/source/use-case/ajaxapp/xhr/README.md @@ -5,8 +5,8 @@ author: laco # HTTP通信 {#http-communication} アプリケーションが実行できるようになったので、次はGitHubのAPIを呼び出す処理を実装していきます。 -当然ですが、GitHubのAPIを呼び出すためにはHTTP通信を行う必要があります。 -ウェブブラウザ上でJavaScriptからHTTP通信を行うには`XMLHttpRequest`という機能を使います。 +当然ですが、GitHubのAPIを呼び出すためにはHTTP通信をする必要があります。 +ウェブブラウザ上で、JavaScriptからHTTP通信するには`XMLHttpRequest`という機能を使います。 ## `XMLHttpRequest` {#xml-http-request} @@ -41,7 +41,7 @@ GitHubのAPIに対してHTTPリクエストを送信しましたが、まだレ 非同期的なXHRの場合、レスポンスはXHRが発火するイベントのコールバック内で受け取れます。 実はXHRにはHTTP通信を同期的に実行するモードも存在しますが、一般的にはXHRを同期的に行うことはありません。 なぜならWebブラウザ上で実行されるJavaScriptはシングルスレッドであり、 -HTTP通信を行っている間はすべての処理がブロックされてしまうからです。 +HTTP通信している間は、すべての処理がブロックされてしまうからです。 そもそも本章のテーマでもある**AJAX**の根幹はAsynchronous（非同期的）であることなので、 ここで登場するXHRはすべて非同期的とします。 diff --git a/source/use-case/nodecli/argument-parse/README.md b/source/use-case/nodecli/argument-parse/README.md index 7685bd7108..20b7d2df92 100644 --- a/source/use-case/nodecli/argument-parse/README.md +++ b/source/use-case/nodecli/argument-parse/README.md @@ -11,7 +11,7 @@ author: laco コマンドライン引数を扱う前に、まずは`process`オブジェクトについて触れておきます。 `process`オブジェクトはNode.js実行環境のグローバル変数のひとつです。 -`process`オブジェクトが提供するのは、現在のNode.jsの実行プロセスについて、情報の取得と操作を行うAPIです。 +`process`オブジェクトが提供するのは、現在のNode.jsの実行プロセスについて、情報の取得と操作をするAPIです。 詳細は[公式ドキュメント](https://nodejs.org/dist/latest-v6.x/docs/api/process.html#process_process)を参照してください。 コマンドライン引数へのアクセスを提供するのは、`process`オブジェクトの`argv`プロパティで、文字列の配列になっています。 diff --git a/source/use-case/nodecli/helloworld/README.md b/source/use-case/nodecli/helloworld/README.md index a4dd72b320..cfd5d71f73 100644 --- a/source/use-case/nodecli/helloworld/README.md +++ b/source/use-case/nodecli/helloworld/README.md @@ -54,7 +54,7 @@ Webブラウザ環境のグローバルオブジェクトは`window`オブジェ - [Buffer][] それぞれのグローバルオブジェクトにあるプロパティなどは、同じ名前でグローバル変数や関数としてアクセスできます。 -たとえば`window.document`プロパティは、グローバル変数の`document`としてアクセスすることもできます。 +たとえば`window.document`プロパティは、グローバル変数の`document`としてもアクセスできます。 また、ECMAScriptで定義されたものではありませんが、ほぼ同等の機能と名前をもつプロパティや関数がブラウザとNode.jsどちらにもある場合もあります。 たとえば次のようなものです。 diff --git a/source/use-case/nodecli/read-file/README.md b/source/use-case/nodecli/read-file/README.md index b8281a55cc..c41a32c95a 100644 --- a/source/use-case/nodecli/read-file/README.md +++ b/source/use-case/nodecli/read-file/README.md @@ -93,7 +93,7 @@ $ node read-file-1b.js sample.md # sample ``` -ちなみに、次の例のように`readFile`関数の第2引数で文字エンコーディング形式を指定することもできます。 +ちなみに、次の例のように`readFile`関数の第2引数で文字エンコーディング形式を指定できます。 このときのコールバック関数の第2引数は、指定した文字エンコーディングでエンコードされた後の文字列が渡されます。 [import read-file-2.js](src/read-file-2.js) diff --git a/source/use-case/nodecli/refactor-and-unittest/README.md b/source/use-case/nodecli/refactor-and-unittest/README.md index 40d347fea3..3cdd7d5b1e 100644 --- a/source/use-case/nodecli/refactor-and-unittest/README.md +++ b/source/use-case/nodecli/refactor-and-unittest/README.md @@ -27,7 +27,7 @@ Node.jsでは、複数のJavaScriptファイル間で変数や関数などをや [import, greet-index.js](src/example/greet-index.js) -`module.exports`オブジェクトに直接代入するのではなく、そのプロパティとして任意の値をエクスポートすることもできます。 +`module.exports`オブジェクトに直接代入するのではなく、そのプロパティとして任意の値をエクスポートできます。 次の例では2つの関数を同じファイルからエクスポートしています。 [import, functions.js](src/example/functions.js) diff --git a/source/use-case/todoapp/entrypoint/README.md b/source/use-case/todoapp/entrypoint/README.md index 180ba5862a..a795937078 100644 --- a/source/use-case/todoapp/entrypoint/README.md +++ b/source/use-case/todoapp/entrypoint/README.md @@ -180,8 +180,8 @@ App initialized このエラーがでているということは、`import`宣言を使える条件を満たしていないということです。 つまり、`import`宣言がトップレベルではない所に書かれている、またはモジュールではない実行コンテキストで実行されているということです。 -`import`宣言がトップレベルではない所に書かれているというのは、関数の中などに`import`宣言を行っています。 -この場合は`import`宣言をトップレベル（ファイルの直下）に移動させてみてください。 +関数の中などに`import`宣言していると、`import`宣言がトップレベルではないためエラーが発生します。 +この場合は`import`宣言をトップレベル（プログラムの直下）に移動させてみてください。 モジュールではない実行コンテキストで実行されているというのは、裏を返せば実行コンテキストがScriptとなっているということです。 JavaScriptには実行コンテキストとしてScriptとModuleがあります。 diff --git a/source/use-case/todoapp/event-model/README.md b/source/use-case/todoapp/event-model/README.md index db21feb9b1..f352bbc20d 100644 --- a/source/use-case/todoapp/event-model/README.md +++ b/source/use-case/todoapp/event-model/README.md @@ -49,7 +49,7 @@ TodoリストにはTodoアイテムを追加できるので`TodoListModel#addIte このようにTodoリストをクラスで表現する際にオブジェクトがどのような処理や状態をもつかを考え実装します。 このようにモデルを考え、先ほどの操作と表示の間にモデルを入れることを考えてみます。 -「フォームを入力し送信」という**操作**を行った場合、`TodoListModel`という**モデル**に対して`TodoItemModel`を追加します。 +「フォームを入力し送信」という**操作**をした場合には、`TodoListModel`という**モデル**に対して`TodoItemModel`を追加します。 そして、`TodoListModel`からアイテムの一覧を取得し、DOMを組み立て**表示**を更新します。 先ほどの表にモデルをいれてみます。 @@ -177,7 +177,7 @@ Node.jsでは`events`と呼ばれるモジュールでAPIは異なりますが [import, "src/model/TodoListModel.example.js"](./event-emitter/src/model/TodoListModel.example.js) これでTodoリストに必要なそれぞれのモデルクラスが作成できました。 -次はこれらのモデルを使い表示の更新を行ってみましょう。 +次はこれらのモデルを使い、表示の更新をしてみましょう。 ## モデルを使って表示を更新する {#model-update-view} diff --git a/source/use-case/todoapp/form-event/README.md b/source/use-case/todoapp/form-event/README.md index 192dc47488..8259e22512 100644 --- a/source/use-case/todoapp/form-event/README.md +++ b/source/use-case/todoapp/form-event/README.md @@ -53,7 +53,7 @@ console.log(inputElement.value); // => "input要素の入力内容" これらを組み合わせて`App.js`に「入力内容をコンソールに表示」する機能を実装してみましょう。 `App`クラスに`mount`というメソッドを定義して、その中に処理を書いていきましょう。 -次のようにフォーム（`#js-form`）をEnterで送信すると、input要素（`#js-form-input`）の内容が開発者ツールのコンソールに表示されるという実装を行います。 +次のコードでは、フォーム（`#js-form`）をEnterで送信すると、input要素（`#js-form-input`）の内容をコンソールへ表示する処理を実装しています。 [import, title:"src/App.js"](./prevent-event/src/App.js)