chore(i18n,learn): processed translations (#44851)
This commit is contained in:
@ -0,0 +1,57 @@
|
||||
---
|
||||
id: 587d7b85367417b2b2512b3a
|
||||
title: 関数を呼び出すときに間違った順序で渡された引数をキャッチする
|
||||
challengeType: 1
|
||||
forumTopicId: 301184
|
||||
dashedName: catch-arguments-passed-in-the-wrong-order-when-calling-a-function
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
関数の呼び出しについての話の続きです。次に監視すべきバグは、関数の引数が正しくない順序で渡されていないかどうかです。 たとえば、引数として配列と整数を期待している関数など、引数の型がそれぞれ異なる場合に、ラインタイムエラーを起こす可能性があります。 引数が同じ型であると (たとえばすべて整数) コードのロジックは意味をなさなくなります。 こうした問題を回避するために、必要なすべての引数を正しい順序で渡してください。
|
||||
|
||||
# --instructions--
|
||||
|
||||
関数 `raiseToPower` で、底 (base) の指数 (exponent) 乗を計算しようとしていますが、 残念ながら正しく呼び出されていません。`power` の値が期待どおり 8 になるようにコードを修正してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
コードの変数 `power` を修正して、3 の 2 乗ではなく 2 の 3 乗になるようにする必要があります。
|
||||
|
||||
```js
|
||||
assert(power == 8);
|
||||
```
|
||||
|
||||
コードで `raiseToPower` 関数を呼び出すときに、引数を正しい順序で使用する必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/raiseToPower\(\s*?base\s*?,\s*?exp\s*?\);/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
function raiseToPower(b, e) {
|
||||
return Math.pow(b, e);
|
||||
}
|
||||
|
||||
let base = 2;
|
||||
let exp = 3;
|
||||
let power = raiseToPower(exp, base);
|
||||
console.log(power);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
function raiseToPower(b, e) {
|
||||
return Math.pow(b, e);
|
||||
}
|
||||
|
||||
let base = 2;
|
||||
let exp = 3;
|
||||
let power = raiseToPower(base, exp);
|
||||
console.log(power);
|
||||
```
|
@ -0,0 +1,69 @@
|
||||
---
|
||||
id: 587d7b85367417b2b2512b39
|
||||
title: 関数呼び出しの後の足りない開始括弧や終了括弧をキャッチする
|
||||
challengeType: 1
|
||||
forumTopicId: 301185
|
||||
dashedName: catch-missing-open-and-closing-parenthesis-after-a-function-call
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
引数を取らない関数やメソッドでは、それらを呼び出すときに (空の) 開始括弧や終了括弧を含めることを忘れてしまうかもしれません。 関数呼び出しの結果を変数に保存してコードの他の部分で使用することがよくあります。 このエラーを検出するには、変数の値 (またはそれらの型) をコンソールに出力して、関数の戻り値として期待している値ではなく、関数の参照に設定されていないかを確認します。
|
||||
|
||||
次の例の変数は異なる結果になります。
|
||||
|
||||
```js
|
||||
function myFunction() {
|
||||
return "You rock!";
|
||||
}
|
||||
let varOne = myFunction;
|
||||
let varTwo = myFunction();
|
||||
```
|
||||
|
||||
この例では、`varOne` は関数 `myFunction` になり、`varTwo` は文字列 `You rock!` になります。
|
||||
|
||||
# --instructions--
|
||||
|
||||
変数 `result` が、関数 `getNine` の呼び出しにより返される値に設定されるようにコードを修正してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
変数 `result` が、関数 `getNine` が返す値に設定されるようにコードを修正します。
|
||||
|
||||
```js
|
||||
assert(result == 9);
|
||||
```
|
||||
|
||||
`getNine` 関数を呼び出す必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/getNine\(\)/g).length == 2);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
function getNine() {
|
||||
let x = 6;
|
||||
let y = 3;
|
||||
return x + y;
|
||||
}
|
||||
|
||||
let result = getNine;
|
||||
console.log(result);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
function getNine() {
|
||||
let x = 6;
|
||||
let y = 3;
|
||||
return x + y;
|
||||
}
|
||||
|
||||
let result = getNine();
|
||||
console.log(result);
|
||||
```
|
@ -0,0 +1,69 @@
|
||||
---
|
||||
id: 587d7b84367417b2b2512b35
|
||||
title: 変数名や関数名のスペルミスをキャッチする
|
||||
challengeType: 1
|
||||
forumTopicId: 301186
|
||||
dashedName: catch-misspelled-variable-and-function-names
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`console.log()` と `typeof` メソッドの 2 つは、中間値やプログラム出力の型を確認する場合によく使用されます。 よくあるバグとして、 スペルミスがあります。タイピングの速い人が起こしがちな構文レベルの問題の 1 つです。
|
||||
|
||||
変数名や関数名の文字が、入れ替わっていたり、不足していたり、大文字小文字が間違っていたりすると、ブラウザーで存在しないオブジェクトが検索され、結果として参照エラーという形でエラーが表示されます。 JavaScript の変数名や関数名は大文字と小文字が区別されます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`netWorkingCapital` の計算が正しく実行されるように、コード内のスペルミスを 2 か所修正してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
netWorkingCapital の計算で使用されている 2 つの変数のスペルを確認してください。コンソール出力に「Net working capital is: 2」と表示する必要があります。
|
||||
|
||||
```js
|
||||
assert(netWorkingCapital === 2);
|
||||
```
|
||||
|
||||
コードの変数にスペルミスがあってはいけません。
|
||||
|
||||
```js
|
||||
assert(!code.match(/recievables/g));
|
||||
```
|
||||
|
||||
`receivables` 変数をコードで正しく宣言して使用する必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/receivables/g).length == 2);
|
||||
```
|
||||
|
||||
コードの変数にスペルミスがあってはいけません。
|
||||
|
||||
```js
|
||||
assert(!code.match(/payable;/g));
|
||||
```
|
||||
|
||||
`payables` 変数をコードで正しく宣言して使用する必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/payables/g).length == 2);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
let receivables = 10;
|
||||
let payables = 8;
|
||||
let netWorkingCapital = recievables - payable;
|
||||
console.log(`Net working capital is: ${netWorkingCapital}`);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
let receivables = 10;
|
||||
let payables = 8;
|
||||
let netWorkingCapital = receivables - payables;
|
||||
console.log(`Net working capital is: ${netWorkingCapital}`);
|
||||
```
|
@ -0,0 +1,63 @@
|
||||
---
|
||||
id: 587d7b84367417b2b2512b37
|
||||
title: シングルクォートとダブルクォートの混用をキャッチする
|
||||
challengeType: 1
|
||||
forumTopicId: 301188
|
||||
dashedName: catch-mixed-usage-of-single-and-double-quotes
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
JavaScript では、文字列の宣言にシングルクォート (`'`) と ダブルクォート (`"`) のどちらの引用符も使用できます。 どちらを使用するかは通常は個人の好みによりますが、いくつか例外があります。
|
||||
|
||||
文字列に短縮形が含まれている場合や、引用符で囲まれた別のテキストがある場合は、2 つの選択肢があると便利です。 ただし、文字列をあまりに早く終了することがないように注意してください。構文エラーになります。
|
||||
|
||||
引用符を混用している例を次に示します。
|
||||
|
||||
```js
|
||||
const grouchoContraction = "I've had a perfectly wonderful evening, but this wasn't it.";
|
||||
const quoteInString = "Groucho Marx once said 'Quote me as saying I was mis-quoted.'";
|
||||
const uhOhGroucho = 'I've had a perfectly wonderful evening, but this wasn't it.';
|
||||
```
|
||||
|
||||
最初の 2 つは正しい構文ですが、3 つ目は間違っています。
|
||||
|
||||
もちろん、一種類の引用符だけを使用しても構いません。 バックスラッシュ (`\`) エスケープ文字 (日本語では円記号) を使用して、文字列内の引用符をエスケープすることができます。
|
||||
|
||||
```js
|
||||
const allSameQuotes = 'I\'ve had a perfectly wonderful evening, but this wasn\'t it.';
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
`href` 値に対して別の引用符を使用するか、既存の引用符をエスケープするように、文字列を修正してください。 文字列全体はダブルクォートで囲んでください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`href` の値 `#Home` を囲む引用符を変更するか、またはエスケープして、コードを修正します。
|
||||
|
||||
```js
|
||||
assert(code.match(/<a href=\s*?('|\\")#Home\1\s*?>/g));
|
||||
```
|
||||
|
||||
文字列全体をダブルクォートで囲みます。
|
||||
|
||||
```js
|
||||
assert(code.match(/"<p>.*?<\/p>";/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
let innerHtml = "<p>Click here to <a href="#Home">return home</a></p>";
|
||||
console.log(innerHtml);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
let innerHtml = "<p>Click here to <a href=\"#Home\">return home</a></p>";
|
||||
console.log(innerHtml);
|
||||
```
|
@ -0,0 +1,93 @@
|
||||
---
|
||||
id: 587d7b86367417b2b2512b3b
|
||||
title: インデックスの使用時のオフバイワンエラーを理解する
|
||||
challengeType: 1
|
||||
forumTopicId: 301189
|
||||
dashedName: catch-off-by-one-errors-when-using-indexing
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
<dfn>オフバイワンエラー</dfn> (OBOE と呼ばれることもあります) は、文字列または配列の特定のインデックスをターゲットにしようとしているとき (セグメントをスライスするまたはアクセスするため)、あるいはインデックスをループ処理するときに発生します。 JavaScript のインデックスは、1 からではなく、0 から始まります。つまり、最後のインデックスは常にアイテムの長さよりも 1 小さくなります。 最後のインデックスと等しい長さのインデックスにアクセスしようとすると、プログラムから「インデックスが範囲外」という参照エラーがスローされたり、`undefined` が出力されたりする場合があります。
|
||||
|
||||
引数としてインデックスの範囲を受け取る文字列メソッドや配列メソッドを使用する場合は、ドキュメントを確認して、それらがインクルーシブ (対象のインデックスのアイテムも返される一部となる) かどうかを把握しておくと役に立ちます。 オフバイワンエラーの例を次に示します。
|
||||
|
||||
```js
|
||||
let alphabet = "abcdefghijklmnopqrstuvwxyz";
|
||||
let len = alphabet.length;
|
||||
for (let i = 0; i <= len; i++) {
|
||||
console.log(alphabet[i]);
|
||||
}
|
||||
for (let j = 1; j < len; j++) {
|
||||
console.log(alphabet[j]);
|
||||
}
|
||||
for (let k = 0; k < len; k++) {
|
||||
console.log(alphabet[k]);
|
||||
}
|
||||
```
|
||||
|
||||
最初の例ではループが 1 回多く繰り返され、2 つ目の例ではループが 1 回少なく繰り返されます (最初のインデックスである 0 が欠落しています)。 3つ 目は正しい例です。
|
||||
|
||||
# --instructions--
|
||||
|
||||
次の関数で 2 つのインデックスエラーを修正して、1 から 5 までのすべての数字がコンソールに出力されるようにしてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
ループが最初のインデックスから開始するように、ループの初期条件を設定します。
|
||||
|
||||
```js
|
||||
assert(code.match(/i\s*?=\s*?0\s*?;/g).length == 1);
|
||||
```
|
||||
|
||||
インデックスが 0 から始まるように、ループの初期条件を修正します。
|
||||
|
||||
```js
|
||||
assert(!code.match(/i\s?=\s*?1\s*?;/g));
|
||||
```
|
||||
|
||||
ループが最後のインデックスで止まるように、ループの終了条件を設定します。
|
||||
|
||||
```js
|
||||
assert(code.match(/i\s*?<\s*?len\s*?;/g).length == 1);
|
||||
```
|
||||
|
||||
ループが length の 1 つ前で止まるように、ループの終了条件を修正します。
|
||||
|
||||
```js
|
||||
assert(!code.match(/i\s*?<=\s*?len;/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
function countToFive() {
|
||||
let firstFive = "12345";
|
||||
let len = firstFive.length;
|
||||
// Only change code below this line
|
||||
for (let i = 1; i <= len; i++) {
|
||||
// Only change code above this line
|
||||
console.log(firstFive[i]);
|
||||
}
|
||||
}
|
||||
|
||||
countToFive();
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
function countToFive() {
|
||||
let firstFive = "12345";
|
||||
let len = firstFive.length;
|
||||
// Only change code below this line
|
||||
for (let i = 0; i < len; i++) {
|
||||
// Only change code above this line
|
||||
console.log(firstFive[i]);
|
||||
}
|
||||
}
|
||||
|
||||
countToFive();
|
||||
```
|
@ -0,0 +1,49 @@
|
||||
---
|
||||
id: 587d7b84367417b2b2512b36
|
||||
title: '丸括弧、角括弧、中括弧、引用符の閉じ忘れをキャッチする'
|
||||
challengeType: 1
|
||||
forumTopicId: 301190
|
||||
dashedName: catch-unclosed-parentheses-brackets-braces-and-quotes
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
もう一つ注意すべき構文エラーは、すべての開始の丸括弧、角括弧、波括弧、および引用符に、終了のためのペアがあるかということです。 既存のコードを編集していて、アイテムを挿入するときにペアを記述し忘れることがよくあります。 また、コールバック関数をメソッドの引数として追加する場合など、コードブロックをネストする場合にも、注意が必要です。
|
||||
|
||||
こうした間違いを避ける方法の一つとして、開始文字を入力した直後に終了のペアを入力し、カーソルをその中間に戻してからコーディングを続けることができます。 幸い、最新のほとんどのコードエディターは、ペアの部分を自動的に生成してくれます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
コード内の 2 つのペアエラーを修正してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
配列で欠けているペアを修正する必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/myArray\s*?=\s*?\[\s*?1\s*?,\s*?2\s*?,\s*?3\s*?\];/g));
|
||||
```
|
||||
|
||||
`.reduce()` メソッドで欠けている部分を修正する必要があります。 コンソール出力に `Sum of array values is: 6` と表示する必要があります。
|
||||
|
||||
```js
|
||||
assert(arraySum === 6);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
let myArray = [1, 2, 3;
|
||||
let arraySum = myArray.reduce((previous, current => previous + current);
|
||||
console.log(`Sum of array values is: ${arraySum}`);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
let myArray = [1, 2, 3];
|
||||
let arraySum = myArray.reduce((previous, current) => previous + current);
|
||||
console.log(`Sum of array values is: ${arraySum}`);
|
||||
```
|
@ -0,0 +1,81 @@
|
||||
---
|
||||
id: 587d7b85367417b2b2512b38
|
||||
title: 等価演算子の代わりに代入演算子を使用していないかキャッチする
|
||||
challengeType: 1
|
||||
forumTopicId: 301191
|
||||
dashedName: catch-use-of-assignment-operator-instead-of-equality-operator
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
プログラムの分岐、つまり、満たされた特定の条件ごとに異なる処理を実行する部分では、JavaScript の `if`、`else if`、`else` などのステートメントが使用されます。 条件として「結果が値と等しいかどうかをテストする」ことがあります。
|
||||
|
||||
このロジックを言葉にすれば (少なくとも英語では) "if x equals y, then ..." (x が y に等しい場合は、... を実行する) などとなり、代入演算子 `=` を使用すれば文字通りのコードに変換できますが、 そうするとプログラムで予期しない制御フローが生じます。
|
||||
|
||||
以前のチャレンジで説明したように、JavaScript の代入演算子 (`=`) は、変数名に値を割り当てます。 そして、`==` 演算子と `===` 演算子は、等しいかどうかをチェックします (3 連続の `===` は、厳密に等しいかどうか、つまり、値と型が同じかどうかをテストします)。
|
||||
|
||||
以下のコードでは、`x` に 2 が代入され、`true` として評価されます。 JavaScript では、ほとんどすべての値はそれ自体が `true` に評価されます。ただし、「偽」の値とされる `false`、`0`、`""` (空の文字列)、`NaN`、`undefined`、および `null` は例外となります。
|
||||
|
||||
```js
|
||||
let x = 1;
|
||||
let y = 2;
|
||||
if (x = y) {
|
||||
|
||||
} else {
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
この例では、`if`ステートメント内のコードブロックは、`y` が偽でない限り、`y` がどのような値であっても実行されます。 ここで実行されるものと期待されている `else` ブロックは、実際には実行されません。
|
||||
|
||||
# --instructions--
|
||||
|
||||
プログラムで分岐が正しく実行されるように条件を修正し、`result` に適切な値が代入されるようにしてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
代入ではなく、等しいかどうかを確認するように条件を修正する必要があります。
|
||||
|
||||
```js
|
||||
assert(result == 'Not equal!');
|
||||
```
|
||||
|
||||
等しいかどうかをテストするために `==` または `===` を使用する必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/x\s*?===?\s*?y/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
let x = 7;
|
||||
let y = 9;
|
||||
let result = "to come";
|
||||
|
||||
if(x = y) {
|
||||
result = "Equal!";
|
||||
} else {
|
||||
result = "Not equal!";
|
||||
}
|
||||
|
||||
console.log(result);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
let x = 7;
|
||||
let y = 9;
|
||||
let result = "to come";
|
||||
|
||||
if(x === y) {
|
||||
result = "Equal!";
|
||||
} else {
|
||||
result = "Not equal!";
|
||||
}
|
||||
|
||||
console.log(result);
|
||||
```
|
@ -0,0 +1,63 @@
|
||||
---
|
||||
id: 587d7b86367417b2b2512b3d
|
||||
title: 有効な終了条件を使用して無限ループを防ぐ
|
||||
challengeType: 1
|
||||
forumTopicId: 301192
|
||||
dashedName: prevent-infinite-loops-with-a-valid-terminal-condition
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
最後のトピックは、煩わしい無限ループです。 ループは、コードブロックを特定の回数だけ、または条件が満たされるまで実行するには最適なツールですが、ループを終わらせるためには終了条件が必要です。 無限ループはブラウザーをフリーズまたはクラッシュさせ、通常のプログラムの実行を妨げる問題を引き起こす可能性があります。
|
||||
|
||||
このセクションの導入部に無限ループの例がありましたが、`loopy()` 内の `while` ループを抜け出すための終了条件は記述していませんでした。 次の関数を呼び出さないでください!
|
||||
|
||||
```js
|
||||
function loopy() {
|
||||
while(true) {
|
||||
console.log("Hello, world!");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
プログラミングでは、終了条件、つまり、プログラムでいつループを抜け出すかを最終的に決める必要があります。 たとえば、カウンター変数を終了条件から間違った方向にインクリメントまたはデクリメントしてしまったり、 あるいはインクリメントまたはデクリメントするのではなく、ループコード内のカウンター変数やインデックス変数を誤ってリセットしてしまったりすると、エラーになります。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`myFunc()` 関数には無限ループが含まれています。これは、終了条件である `i != 4` が `false` に評価される (したがって無限ループを脱する) ことが決してないからです。`i` はパスごとに 2 増えますが、`i` は奇数から始まっているため、4 はスキップされます。 `i` が 4 以下の場合にのみループが実行されるように、終了条件の比較演算子を修正してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`for` ループの終了条件 (真ん中の部分) の比較演算子を変更する必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/i\s*?<=\s*?4;/g).length == 1);
|
||||
```
|
||||
|
||||
ループの終了条件にある比較演算子を修正する必要があります。
|
||||
|
||||
```js
|
||||
assert(!code.match(/i\s*?!=\s*?4;/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
function myFunc() {
|
||||
for (let i = 1; i != 4; i += 2) {
|
||||
console.log("Still going!");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
function myFunc() {
|
||||
for (let i = 1; i <= 4; i += 2) {
|
||||
console.log("Still going!");
|
||||
}
|
||||
}
|
||||
```
|
@ -0,0 +1,65 @@
|
||||
---
|
||||
id: 587d7b83367417b2b2512b37
|
||||
title: freeCodeCamp とブラウザーのコンソールの違いを理解する
|
||||
challengeType: 1
|
||||
forumTopicId: 301193
|
||||
dashedName: understanding-the-differences-between-the-freecodecamp-and-browser-console
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
お気づきかもしれませんが、freeCodeCamp の一部のチャレンジには独自のコンソールが含まれています。 このコンソールは、ブラウザーのコンソールとは少し異なる動作をします。
|
||||
|
||||
`console` ではメッセージを出力するために多くのメソッドを使用します。 たとえば、`log`,、`warn`、 `clear` などがあります。 freeCodeCamp のコンソールは `log` メッセージのみを出力し、ブラウザーのコンソールはすべてのメッセージを出力します。 コードを変更すると、自動的に実行され、ログが表示されます。 freeCodeCamp のコンソールはコードが実行されるたびにクリアされます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
まず、ブラウザーのコンソールを開いてログを表示してください。 それには、一番上にある freeCodeCamp のナビゲーションバーを右クリックし、たいていのブラウザーでは `inspect` をクリックします。 次に、開いたウィンドウで `console` タブを探します。
|
||||
|
||||
その次に、`console.log` を使用して `output` 変数を出力してください。 ログを表示するため、2 つのコンソールを表示してください。 最後に、ログの後に `console.clear` を使用してブラウザーのコンソールをクリアしてください。 2 つのコンソールの違いを確認してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`console.log` を使用して `output` 変数を出力します。
|
||||
|
||||
```js
|
||||
assert(__helpers.removeWhiteSpace(code).match(/console\.log\(output\)/));
|
||||
```
|
||||
|
||||
`console.clear()` を使用してブラウザーのコンソールをクリアします。
|
||||
|
||||
```js
|
||||
assert(
|
||||
__helpers
|
||||
.removeWhiteSpace(code)
|
||||
.match(/console.clear\(\)/)
|
||||
);
|
||||
```
|
||||
|
||||
ログを表示した後、コンソールをクリアします。
|
||||
|
||||
```js
|
||||
assert(
|
||||
__helpers
|
||||
.removeWhiteSpace(code)
|
||||
.match(/console\.log\(output\)[\s\S]*console.clear\(\)/)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
let output = "Get this to show once in the freeCodeCamp console and not at all in the browser console";
|
||||
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
let output = "Get this to show once in the freeCodeCamp console and not at all in the browser console";
|
||||
|
||||
console.log(output);
|
||||
console.clear();
|
||||
```
|
@ -0,0 +1,97 @@
|
||||
---
|
||||
id: 587d7b86367417b2b2512b3c
|
||||
title: ループ内の変数を再初期化する際の注意点
|
||||
challengeType: 1
|
||||
forumTopicId: 301194
|
||||
dashedName: use-caution-when-reinitializing-variables-inside-a-loop
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
ループの中では、必要に応じて情報を保存したり、カウンターを増やしたり、変数を再設定したりする場合があります。 問題となるのは、変数を再初期化する必要があるのにしない場合、または逆に再初期化してはならないのにしてしまう場合です。 特に、終了条件に使用している変数を誤ってリセットしてしまった場合は危険であり、無限ループを引き起こします。
|
||||
|
||||
`console.log()` を使用してループの各サイクルで変数値を出力することで、変数をリセットすることに関して、または変数のリセットができないことに関して、バグを引き起こしそうな動作を明らかにすることができます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
次の関数では、`m` 行 `n` 列のゼロの成分からなる二次元配列を作成する必要があります。 しかし、外側のループで `row` 変数が再初期化されていない (空の配列に戻らない) ため、残念ながら期待される出力が生成されません。 `[[0, 0], [0, 0], [0,0]]` のような正しい 3x2 の配列を返すようにコードを修正してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`matrix` 変数を、3 行 2 列のゼロからなる配列に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(JSON.stringify(matrix) == '[[0,0],[0,0],[0,0]]');
|
||||
```
|
||||
|
||||
`matrix` 変数を 3 行にする必要があります。
|
||||
|
||||
```js
|
||||
assert(matrix.length == 3);
|
||||
```
|
||||
|
||||
`matrix` 変数の各行を 2 列にする必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
matrix[0].length == 2 && matrix[1].length === 2 && matrix[2].length === 2
|
||||
);
|
||||
```
|
||||
|
||||
`zeroArray(4,3)` は、4 行 3 列のゼロからなる配列を返す必要があります。
|
||||
|
||||
```js
|
||||
assert(JSON.stringify(zeroArray(4,3)) == '[[0,0,0],[0,0,0],[0,0,0],[0,0,0]]');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
function zeroArray(m, n) {
|
||||
// Creates a 2-D array with m rows and n columns of zeroes
|
||||
let newArray = [];
|
||||
let row = [];
|
||||
for (let i = 0; i < m; i++) {
|
||||
// Adds the m-th row into newArray
|
||||
|
||||
for (let j = 0; j < n; j++) {
|
||||
// Pushes n zeroes into the current row to create the columns
|
||||
row.push(0);
|
||||
}
|
||||
// Pushes the current row, which now has n zeroes in it, to the array
|
||||
newArray.push(row);
|
||||
}
|
||||
return newArray;
|
||||
}
|
||||
|
||||
let matrix = zeroArray(3, 2);
|
||||
console.log(matrix);
|
||||
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
function zeroArray(m, n) {
|
||||
// Creates a 2-D array with m rows and n columns of zeroes
|
||||
let newArray = [];
|
||||
for (let i = 0; i < m; i++) {
|
||||
let row = [];
|
||||
// Adds the m-th row into newArray
|
||||
|
||||
for (let j = 0; j < n; j++) {
|
||||
// Pushes n zeroes into the current row to create the columns
|
||||
row.push(0);
|
||||
}
|
||||
// Pushes the current row, which now has n zeroes in it, to the array
|
||||
newArray.push(row);
|
||||
}
|
||||
return newArray;
|
||||
}
|
||||
|
||||
let matrix = zeroArray(3, 2);
|
||||
console.log(matrix);
|
||||
|
||||
```
|
@ -0,0 +1,54 @@
|
||||
---
|
||||
id: 587d7b83367417b2b2512b33
|
||||
title: JavaScript コンソールを使用して変数の値を確認する
|
||||
challengeType: 1
|
||||
forumTopicId: 18372
|
||||
dashedName: use-the-javascript-console-to-check-the-value-of-a-variable
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Chrome と Firefox はどちらも、JavaScript をデバッグするための優れた JavaScript コンソール (DevTools とも呼ばれます) を備えています。
|
||||
|
||||
Chrome には「デベロッパー ツール」というメニューがあり、Firefox には「ウェブコンソール」というメニューがあります。 別のブラウザーやスマートフォンを使用している場合は、デスクトップ版の Firefox または Chrome に切り替えることをぜひお勧めします。
|
||||
|
||||
コンソールに丸括弧で囲まれた部分の出力を "print (印字)" する `console.log()` メソッドは、おそらく最も有用なデバッグツールとなります。 このメソッドをコード内の重要な場所に記述すると、変数の中間値を表示することができます。 実際の表示内容を調べる前に、出力されるべきものが何かを確認しておくことをお勧めします。 計算の状態を確認するためのチェックポイントをコード全体にわたって設定しておくと、問題のある場所を絞り込むのに役立ちます。
|
||||
|
||||
以下は、文字列 `Hello world!` をコンソールに出力する例です。
|
||||
|
||||
```js
|
||||
console.log('Hello world!');
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
`console.log()` メソッドを使用して、コード内の指示された場所で変数 `a` の値を出力してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
変数 `a` の値を確認するために `console.log()` を使用する必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/console\.log\(a\)/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
let a = 5;
|
||||
let b = 1;
|
||||
a++;
|
||||
// Only change code below this line
|
||||
|
||||
|
||||
let sumAB = a + b;
|
||||
console.log(sumAB);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
var a = 5; console.log(a);
|
||||
```
|
@ -0,0 +1,66 @@
|
||||
---
|
||||
id: 587d7b84367417b2b2512b34
|
||||
title: typeof を使用して変数の型を確認する
|
||||
challengeType: 1
|
||||
forumTopicId: 18374
|
||||
dashedName: use-typeof-to-check-the-type-of-a-variable
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`typeof` を使用すると変数のデータ構造、つまり型を確認できます。 これは複数のデータ型を扱う際のデバッグに役立ちます。 2 つの数字の和を求めようとしていて、一方が文字列の場合、結果は予測不能となります。 型に関するエラーは、計算や関数呼び出しの中に潜んでいる可能性があります。 JavaScript Object Notation (JSON) オブジェクト形式の外部データにアクセスして操作する場合は特に注意が必要です。
|
||||
|
||||
`typeof` を使用した例をいくつか示します。
|
||||
|
||||
```js
|
||||
console.log(typeof "");
|
||||
console.log(typeof 0);
|
||||
console.log(typeof []);
|
||||
console.log(typeof {});
|
||||
```
|
||||
|
||||
コンソールには、文字列 `string`、`number`、`object`、`object` が順番に表示されます。
|
||||
|
||||
JavaScript は 6 つのプリミティブな (イミュータブル) データ型として、`Boolean`、`Null`、`Undefined`、`Number`、`String`、および `Symbol` (ES6 で新登場) を認識します。また、ミュータブルアイテムのための型の 1 つである `Object` も認識します。 JavaScript では、配列は厳密にはオブジェクトの一種であることに注意してください。
|
||||
|
||||
# --instructions--
|
||||
|
||||
コード内の `seven` と `three` の 2 つの変数について、それぞれの `typeof` を確認する、2 つの `console.log()` ステートメントを追加してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
2 つの `console.log()` ステートメントで `typeof` を使用して変数の型を確認する必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/console\.log\(typeof[\( ].*\)?\)/g).length == 2);
|
||||
```
|
||||
|
||||
`typeof` を使用して変数 `seven` の型を確認する必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/typeof[\( ]seven\)?/g));
|
||||
```
|
||||
|
||||
`typeof` を使用して変数 `three` の型を確認する必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/typeof[\( ]three\)?/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```js
|
||||
let seven = 7;
|
||||
let three = "3";
|
||||
console.log(seven + three);
|
||||
// Only change code below this line
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
let seven = 7;let three = "3";console.log(typeof seven);
|
||||
console.log(typeof three);
|
||||
```
|
Reference in New Issue
Block a user