` 領域がクリックされた時にはボックスがまた隠れるようにし、ビデオそのものがクリックされたらビデオが再生されるようにしたいというわけです。
@@ -528,7 +551,7 @@ video.onclick = function() {
よって我々の今の問題は、先のコードブロック、第二のハンドラー関数をこのように変更して解決できます:
```js
-video.onclick = function(e) {
+video.onclick = function (e) {
e.stopPropagation();
video.play();
};
diff --git a/files/ja/learn/javascript/building_blocks/functions/index.md b/files/ja/learn/javascript/building_blocks/functions/index.md
index 01502dc137c882..a8682d1a0b665b 100644
--- a/files/ja/learn/javascript/building_blocks/functions/index.md
+++ b/files/ja/learn/javascript/building_blocks/functions/index.md
@@ -22,8 +22,8 @@ JavaScript の中で、関数はあらゆるところに見つかるでしょう
このコースではブラウザーに組込まれた関数をたくさん使ってきました。毎回テキスト文字列を操作したときには、こんな風に:
```js
-let myText = 'I am a string';
-let newString = myText.replace('string', 'sausage');
+let myText = "I am a string";
+let newString = myText.replace("string", "sausage");
console.log(newString);
// the replace() string function takes a string,
// replaces one substring with another, and returns
@@ -33,8 +33,8 @@ console.log(newString);
あるいは毎回配列を操作したときには:
```js
-let myArray = ['I', 'love', 'chocolate', 'frogs'];
-let madeAString = myArray.join(' ');
+let myArray = ["I", "love", "chocolate", "frogs"];
+let madeAString = myArray.join(" ");
console.log(madeAString);
// the join() function takes an array, joins
// all the array items together into a single
@@ -68,10 +68,10 @@ JavaScript 言語にはたくさんの組込み関数があるので、いろい
```js
function draw() {
- ctx.clearRect(0,0,WIDTH,HEIGHT);
+ ctx.clearRect(0, 0, WIDTH, HEIGHT);
for (let i = 0; i < 100; i++) {
ctx.beginPath();
- ctx.fillStyle = 'rgba(255,0,0,0.5)';
+ ctx.fillStyle = "rgba(255,0,0,0.5)";
ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
ctx.fill();
}
@@ -88,7 +88,7 @@ draw();
```js
function random(number) {
- return Math.floor(Math.random()*number);
+ return Math.floor(Math.random() * number);
}
```
@@ -100,7 +100,7 @@ function random(number) {
```js
function myFunction() {
- alert('hello');
+ alert("hello");
}
myFunction();
@@ -113,7 +113,7 @@ myFunction();
```js
function myFunction() {
- alert('hello');
+ alert("hello");
}
```
@@ -128,11 +128,11 @@ function() {
これは**匿名関数**と呼ばれます — 名前がないんです! それだけでは何もしません。匿名関数はよくイベントハンドラで使われていて、例えば以下では関連づけられたボタンがクリックされるたび、関数の中のコードが走ります:
```js
-const myButton = document.querySelector('button');
+const myButton = document.querySelector("button");
-myButton.onclick = function() {
- alert('hello');
-}
+myButton.onclick = function () {
+ alert("hello");
+};
```
上の例では、ページの中に選択してクリックするための{{htmlelement("button")}}要素が存在しなければならないでしょう。あなたはこのような例をここまでのコースで見てきましたし、ここから先の記事でもっと学習し、使い方を見ていく事になります。
@@ -140,9 +140,9 @@ myButton.onclick = function() {
匿名関数を変数の値として代入する事もできます:
```js
-const myGreeting = function() {
- alert('hello');
-}
+const myGreeting = function () {
+ alert("hello");
+};
```
この関数は次のように起動できます:
@@ -168,18 +168,18 @@ anotherGreeting();
```js
function myGreeting() {
- alert('hello');
+ alert("hello");
}
```
匿名関数は主にイベント発火 — ボタンがクリックされたとか — のレスポンスとして、一連のコードを走らせるだけのような場合に、イベントハンドラとして使われます。くりかえしですが、こんな具合です:
```js
-myButton.onclick = function() {
- alert('hello');
+myButton.onclick = function () {
+ alert("hello");
// I can put as much code
// inside here as I want
-}
+};
```
## 関数の引数
@@ -197,8 +197,8 @@ let myNumber = Math.random();
ですがブラウザー組込みの文字列関数 [replace()](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace) は二つの引数が必要です — 主文字列から探すべき部分文字列と、部分文字列を置換する文字列です:
```js
-let myText = 'I am a string';
-let newString = myText.replace('string', 'sausage');
+let myText = "I am a string";
+let newString = myText.replace("string", "sausage");
```
> **メモ:** 複数の引数を指定するときは、カンマで区切って書きます
@@ -206,8 +206,8 @@ let newString = myText.replace('string', 'sausage');
引数には省略可能 — 書かなくても良い — なものもある事に触れておくべきでしょう。省略された場合、関数はだいたいデフォルトに規定された動作を行ないます。例えば、配列の [join()](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/join) 関数のパラメータは省略可能です:
```js
-let myArray = ['I', 'love', 'chocolate', 'frogs'];
-let madeAString = myArray.join(' ');
+let myArray = ["I", "love", "chocolate", "frogs"];
+let madeAString = myArray.join(" ");
// returns 'I love chocolate frogs'
let madeAString = myArray.join();
// returns 'I,love,chocolate,frogs'
@@ -236,17 +236,17 @@ JavaScript がこう作られているのにはいくつも理由があります
```js
// first.js
-let name = 'Chris';
+let name = "Chris";
function greeting() {
- alert('Hello ' + name + ': welcome to our company.');
+ alert("Hello " + name + ": welcome to our company.");
}
```
```js
// second.js
-let name = 'Zaptec';
+let name = "Zaptec";
function greeting() {
- alert('Our company is called ' + name + '.');
+ alert("Our company is called " + name + ".");
}
```
@@ -270,89 +270,89 @@ function greeting() {
2. ブラウザーとテキストエディターでサンプルを開きます
3. ブラウザーの開発者ツールで JavaScript コンソールを開きます。JavaScript コンソールで、次のコマンドを入力します。
- ```js
- output(x);
- ```
+ ```js
+ output(x);
+ ```
- 変数 x の出力値が画面に表示されるはずです。
+ 変数 x の出力値が画面に表示されるはずです。
4. コンソールに次のように入力してみてください
- ```js
- output(y);
- output(z);
- ```
+ ```js
+ output(y);
+ output(z);
+ ```
- どちらも、"[ReferenceError: y is not defined](/ja/docs/Web/JavaScript/Reference/Errors/Not_defined)"の一行のエラーが返されるはずです。なぜでしょうか？ 関数スコープのため、つまり `y` と `z` は `a()` と `b()` 関数の中でロックされているので、global スコープから呼び出されたときには `output()` はそれらにアクセスできません。
+ どちらも、"[ReferenceError: y is not defined](/ja/docs/Web/JavaScript/Reference/Errors/Not_defined)"の一行のエラーが返されるはずです。なぜでしょうか？ 関数スコープのため、つまり `y` と `z` は `a()` と `b()` 関数の中でロックされているので、global スコープから呼び出されたときには `output()` はそれらにアクセスできません。
5. しかし、別の関数の中から呼び出されたときはどうでしょうか？ `a()` と `b()` を次のように編集してみてください：
- ```js
- function a() {
- let y = 2;
- output(y);
- }
+ ```js
+ function a() {
+ let y = 2;
+ output(y);
+ }
- function b() {
- let z = 3;
- output(z);
- }
- ```
+ function b() {
+ let z = 3;
+ output(z);
+ }
+ ```
- コードを保存してブラウザーに再ロードしてから、JavaScript コンソールから `a()` と `b()` 関数を呼び出してみてください。
+ コードを保存してブラウザーに再ロードしてから、JavaScript コンソールから `a()` と `b()` 関数を呼び出してみてください。
- ```js
- a();
- b();
- ```
+ ```js
+ a();
+ b();
+ ```
- ページに `y` と `z` の値の出力が表示されます。`output()` 関数が他の関数の中、つまり表示される変数が定義されているのと同じスコープでそれぞれ呼び出されているので、これはうまくいきます。`output()` 自体はグローバルスコープで定義されているので、どこからでも利用できます。
+ ページに `y` と `z` の値の出力が表示されます。`output()` 関数が他の関数の中、つまり表示される変数が定義されているのと同じスコープでそれぞれ呼び出されているので、これはうまくいきます。`output()` 自体はグローバルスコープで定義されているので、どこからでも利用できます。
6. 今度は次のようにコードを更新してみてください：
- ```js
- function a() {
- let y = 2;
- output(x);
- }
+ ```js
+ function a() {
+ let y = 2;
+ output(x);
+ }
- function b() {
- let z = 3;
- output(x);
- }
- ```
+ function b() {
+ let z = 3;
+ output(x);
+ }
+ ```
- 保存してもう一度読み込み、JavaScript コンソールでもう一度試してみてください：
+ 保存してもう一度読み込み、JavaScript コンソールでもう一度試してみてください：
- ```js
- a();
- b();
- ```
+ ```js
+ a();
+ b();
+ ```
- `a()` と `b()` の両方の呼び出しは `x` の値、つまり 1 が出力されます。これは `x` がグローバル変数であり、すべてのコード内どこでも利用可能であるため、`output()` の呼び出しが `x` と同じスコープではなくてもうまく動きます。
+ `a()` と `b()` の両方の呼び出しは `x` の値、つまり 1 が出力されます。これは `x` がグローバル変数であり、すべてのコード内どこでも利用可能であるため、`output()` の呼び出しが `x` と同じスコープではなくてもうまく動きます。
7. 最後に、次のようにコードを更新してみてください：
- ```js
- function a() {
- let y = 2;
- output(z);
- }
+ ```js
+ function a() {
+ let y = 2;
+ output(z);
+ }
- function b() {
- let z = 3;
- output(y);
- }
- ```
+ function b() {
+ let z = 3;
+ output(y);
+ }
+ ```
- 保存してもう一度読み込み、JavaScript コンソールでもう一度試してみてください：
+ 保存してもう一度読み込み、JavaScript コンソールでもう一度試してみてください：
- ```js
- a();
- b();
- ```
+ ```js
+ a();
+ b();
+ ```
- 今度は `a()` と `b()` の両方の呼び出しで、迷惑な "[ReferenceError: _variable name_ is not defined](/ja/docs/Web/JavaScript/Reference/Errors/Not_defined)" エラーが返されます — これは `output()` 呼び出しと、出力しようとしている変数が同じ関数のスコープにない、つまりこれらの関数呼び出しからは変数が参照できない状態だからです。
+ 今度は `a()` と `b()` の両方の呼び出しで、迷惑な "[ReferenceError: _variable name_ is not defined](/ja/docs/Web/JavaScript/Reference/Errors/Not_defined)" エラーが返されます — これは `output()` 呼び出しと、出力しようとしている変数が同じ関数のスコープにない、つまりこれらの関数呼び出しからは変数が参照できない状態だからです。
> **メモ:** 同じスコープルールはループ (`for() { ... }` など) と条件ブロック (`if() { ... }`など) には適用されません。それらは非常によく似ていますが、同じものではありません。混乱しないように注意してください。
diff --git a/files/ja/learn/javascript/building_blocks/image_gallery/index.md b/files/ja/learn/javascript/building_blocks/image_gallery/index.md
index e8668461392636..79a792f7652ec3 100644
--- a/files/ja/learn/javascript/building_blocks/image_gallery/index.md
+++ b/files/ja/learn/javascript/building_blocks/image_gallery/index.md
@@ -25,14 +25,12 @@ HTML、CSS と画像および数行の JavaScript のコードが提供されて
Image gallery example
-
+
-
-
-
+
```
例ではこのように見えます:
@@ -82,7 +80,7 @@ JavaScript に必要なもの:
次のコードは上記の 2 と 3 で示された変更を行う基本的なものです。
```js
-btn.setAttribute('class', xxx);
+btn.setAttribute("class", xxx);
btn.textContent = xxx;
overlay.style.backgroundColor = xxx;
```
diff --git a/files/ja/learn/javascript/building_blocks/looping_code/index.md b/files/ja/learn/javascript/building_blocks/looping_code/index.md
index a9921dd269ae56..a22326d533622f 100644
--- a/files/ja/learn/javascript/building_blocks/looping_code/index.md
+++ b/files/ja/learn/javascript/building_blocks/looping_code/index.md
@@ -66,30 +66,36 @@ button {
こちらはこの例を実装している JavaScript コードです。
```js
-const btn = document.querySelector('button');
-const canvas = document.querySelector('canvas');
-const ctx = canvas.getContext('2d');
+const btn = document.querySelector("button");
+const canvas = document.querySelector("canvas");
+const ctx = canvas.getContext("2d");
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener("DOMContentLoaded", () => {
canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;
-})
+});
function random(number) {
- return Math.floor(Math.random()*number);
+ return Math.floor(Math.random() * number);
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < 100; i++) {
ctx.beginPath();
- ctx.fillStyle = 'rgba(255,0,0,0.5)';
- ctx.arc(random(canvas.width), random(canvas.height), random(50), 0, 2 * Math.PI);
+ ctx.fillStyle = "rgba(255,0,0,0.5)";
+ ctx.arc(
+ random(canvas.width),
+ random(canvas.height),
+ random(50),
+ 0,
+ 2 * Math.PI,
+ );
ctx.fill();
}
}
-btn.addEventListener('click',draw);
+btn.addEventListener("click", draw);
```
### ループありとループなし
@@ -99,8 +105,14 @@ btn.addEventListener('click',draw);
```js
for (let i = 0; i < 100; i++) {
ctx.beginPath();
- ctx.fillStyle = 'rgba(255,0,0,0.5)';
- ctx.arc(random(canvas.width), random(canvas.height), random(50), 0, 2 * Math.PI);
+ ctx.fillStyle = "rgba(255,0,0,0.5)";
+ ctx.arc(
+ random(canvas.width),
+ random(canvas.height),
+ random(50),
+ 0,
+ 2 * Math.PI,
+ );
ctx.fill();
}
```
@@ -115,8 +127,14 @@ for (let i = 0; i < 100; i++) {
```js
ctx.beginPath();
-ctx.fillStyle = 'rgba(255,0,0,0.5)';
-ctx.arc(random(canvas.width), random(canvas.height), random(50), 0, 2 * Math.PI);
+ctx.fillStyle = "rgba(255,0,0,0.5)";
+ctx.arc(
+ random(canvas.width),
+ random(canvas.height),
+ random(50),
+ 0,
+ 2 * Math.PI,
+);
ctx.fill();
```
@@ -134,7 +152,7 @@ ctx.fill();
コレクションをループ処理する基本的なツールは {{jsxref("statements/for...of","for...of")}} ループです。
```js
-const cats = ['Leopard', 'Serval', 'Jaguar', 'Tiger', 'Caracal', 'Lion'];
+const cats = ["Leopard", "Serval", "Jaguar", "Tiger", "Caracal", "Lion"];
for (const cat of cats) {
console.log(cat);
@@ -158,7 +176,7 @@ function toUpper(string) {
return string.toUpperCase();
}
-const cats = ['Leopard', 'Serval', 'Jaguar', 'Tiger', 'Caracal', 'Lion'];
+const cats = ["Leopard", "Serval", "Jaguar", "Tiger", "Caracal", "Lion"];
const upperCats = cats.map(toUpper);
@@ -176,10 +194,10 @@ console.log(upperCats);
```js
function lCat(cat) {
- return cat.startsWith('L');
+ return cat.startsWith("L");
}
-const cats = ['Leopard', 'Serval', 'Jaguar', 'Tiger', 'Caracal', 'Lion'];
+const cats = ["Leopard", "Serval", "Jaguar", "Tiger", "Caracal", "Lion"];
const filtered = cats.filter(lCat);
@@ -198,9 +216,9 @@ console.log(filtered);
関数式を使用すると、上の例をもっとコンパクトに書き直すことができます。
```js
-const cats = ['Leopard', 'Serval', 'Jaguar', 'Tiger', 'Caracal', 'Lion'];
+const cats = ["Leopard", "Serval", "Jaguar", "Tiger", "Caracal", "Lion"];
-const filtered = cats.filter((cat) => cat.startsWith('L'));
+const filtered = cats.filter((cat) => cat.startsWith("L"));
console.log(filtered);
// [ "Leopard", "Lion" ]
```
@@ -225,7 +243,7 @@ for (初期化処理; 条件; 最後の式) {
1. **初期化処理**: これはたいていの場合、繰り返し回数分増やしていく変数の初期化処理となります。
この変数を**カウンター変数**と呼ぶことがあります。
2. **条件**: これは、ループがいつ繰り返しをやめるかを定義します。
- これはふつう、比較演算子を伴って、終了条件に達したかどうかを確認します。
+ これはふつう、比較演算子を伴って、終了条件に達したかどうかを確認します。
3. **最後の式**: これはループの 1 回が終了する度に評価される（または実行される）コードです。
通常、カウンター変数を増加させ（場合によっては減少させ）、条件が `true` ではなくなるポイントに近づけていきます。
@@ -242,21 +260,21 @@ for (初期化処理; 条件; 最後の式) {
```
```js
-const results = document.querySelector('#results');
+const results = document.querySelector("#results");
function calculate() {
for (let i = 1; i < 10; i++) {
const newResult = `${i} x ${i} = ${i * i}`;
results.textContent += `${newResult}\n`;
}
- results.textContent += '\n完了!';
+ results.textContent += "\n完了!";
}
-const calculateBtn = document.querySelector('#calculate');
-const clearBtn = document.querySelector('#clear');
+const calculateBtn = document.querySelector("#calculate");
+const clearBtn = document.querySelector("#clear");
-calculateBtn.addEventListener('click', calculate);
-clearBtn.addEventListener('click', () => results.textContent = '');
+calculateBtn.addEventListener("click", calculate);
+clearBtn.addEventListener("click", () => (results.textContent = ""));
```
これは次のような出力結果となります。
@@ -285,7 +303,7 @@ clearBtn.addEventListener('click', () => results.textContent = '');
上の `for...of` の例をもう一度見てみましょう。
```js
-const cats = ['Leopard', 'Serval', 'Jaguar', 'Tiger', 'Caracal', 'Lion'];
+const cats = ["Leopard", "Serval", "Jaguar", "Tiger", "Caracal", "Lion"];
for (const cat of cats) {
console.log(cat);
@@ -295,7 +313,7 @@ for (const cat of cats) {
このコードは次のように書き換えることができます。
```js
-const cats = ['Leopard', 'Serval', 'Jaguar', 'Tiger', 'Caracal', 'Lion'];
+const cats = ["Leopard", "Serval", "Jaguar", "Tiger", "Caracal", "Lion"];
for (let i = 0; i < cats.length; i++) {
console.log(cats[i]);
@@ -317,12 +335,12 @@ JavaScript の初期のバージョンでは、`for...of` は存在しなかっ
例えば、以下のコードでは、猫の一覧をメッセージとして出力したい。
```js
-const cats = ['Pete', 'Biggles', 'Jasmine'];
+const cats = ["Pete", "Biggles", "Jasmine"];
-let myFavoriteCats = 'My cats are called ';
+let myFavoriteCats = "My cats are called ";
for (const cat of cats) {
- myFavoriteCats += `${cat}, `
+ myFavoriteCats += `${cat}, `;
}
console.log(myFavoriteCats); // "My cats are called Pete, Biggles, Jasmine, "
@@ -343,19 +361,20 @@ My cats are called Pete, Biggles, and Jasmine.
しかし、これを行うには、ループがいつ最後の反復処理に入ったかを知る必要があります。そのためには、`for` ループを使い、`i` の値を調べればよいのです。
```js
-const cats = ['Pete', 'Biggles', 'Jasmine'];
+const cats = ["Pete", "Biggles", "Jasmine"];
-let myFavoriteCats = 'My cats are called ';
+let myFavoriteCats = "My cats are called ";
for (let i = 0; i < cats.length; i++) {
- if (i === cats.length - 1) { // 配列の最後にいる場合
- myFavoriteCats += `and ${cats[i]}.`
+ if (i === cats.length - 1) {
+ // 配列の最後にいる場合
+ myFavoriteCats += `and ${cats[i]}.`;
} else {
- myFavoriteCats += `${cats[i]}, `
+ myFavoriteCats += `${cats[i]}, `;
}
}
-console.log(myFavoriteCats); // "My cats are called Pete, Biggles, and Jasmine."
+console.log(myFavoriteCats); // "My cats are called Pete, Biggles, and Jasmine."
```
## break でループを終了
@@ -370,7 +389,7 @@ console.log(myFavoriteCats); // "My cats are called Pete, Biggles, and Jasmi
```html
-
+
@@ -379,26 +398,32 @@ console.log(myFavoriteCats); // "My cats are called Pete, Biggles, and Jasmi
現在の JavaScript では、
```js
-const contacts = ['クリス:2232322', 'サラ:3453456', 'ビル:7654322', 'メアリー:9998769', 'ダイアン:9384975'];
-const para = document.querySelector('p');
-const input = document.querySelector('input');
-const btn = document.querySelector('button');
-
-btn.addEventListener('click', () => {
+const contacts = [
+ "クリス:2232322",
+ "サラ:3453456",
+ "ビル:7654322",
+ "メアリー:9998769",
+ "ダイアン:9384975",
+];
+const para = document.querySelector("p");
+const input = document.querySelector("input");
+const btn = document.querySelector("button");
+
+btn.addEventListener("click", () => {
const searchName = input.value.toLowerCase();
- input.value = '';
+ input.value = "";
input.focus();
- para.textContent = '';
+ para.textContent = "";
for (const contact of contacts) {
- const splitContact = contact.split(':');
+ const splitContact = contact.split(":");
if (splitContact[0].toLowerCase() === searchName) {
para.textContent = `${splitContact[0]}の電話番号は${splitContact[1]}です。`;
break;
}
}
- if (para.textContent === '') {
- para.textContent = '連絡先が見つかりません。';
- }
+ if (para.textContent === "") {
+ para.textContent = "連絡先が見つかりません。";
+ }
});
```
@@ -409,8 +434,8 @@ btn.addEventListener('click', () => {
3. テキスト入力欄に入力された値を `searchName` という変数に格納してから、次の検索に備え、入力欄をクリアし、フォーカスを設定しています。検索に大文字小文字を区別しないよう、文字列に [`toLowerCase()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase) を実行しているのに注意してください。
4. ここからが本題の `for...of` ループです。
- 1. ループの中では、まず現在の連絡先をコロン文字で分割し、結果の 2 つの値を `splitContact` という配列に格納します。
- 2. それから、条件文を用いて、`splitContact[0]` （連絡先の名前）が入力された `searchName` にまた [`toLowerCase()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase) を使って小文字化したものと等しいかを判定します。
+ 1. ループの中では、まず現在の連絡先をコロン文字で分割し、結果の 2 つの値を `splitContact` という配列に格納します。
+ 2. それから、条件文を用いて、`splitContact[0]` （連絡先の名前）が入力された `searchName` にまた [`toLowerCase()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase) を使って小文字化したものと等しいかを判定します。
もし等しければ、文字列を段落に入れてその連絡先の電話番号を示し、`break` を使用してループを終了しています。
5. ループの後、連絡先が設定されたかどうかをチェックし、設定されていない場合は段落テキストを「連絡先が見つかりません。」に設定しています。
@@ -435,14 +460,14 @@ HTML は基本的に前回の例と同じで、単純なテキスト入力と、
JavaScript もほとんど同じですが、ループ自体が若干異なります。
```js
-const para = document.querySelector('p');
-const input = document.querySelector('input');
-const btn = document.querySelector('button');
+const para = document.querySelector("p");
+const input = document.querySelector("input");
+const btn = document.querySelector("button");
-btn.addEventListener('click', () => {
- para.textContent = '出力: ';
+btn.addEventListener("click", () => {
+ para.textContent = "出力: ";
const num = input.value;
- input.value = '';
+ input.value = "";
input.focus();
for (let i = 1; i <= num; i++) {
let sqRoot = Math.sqrt(i);
@@ -490,9 +515,9 @@ while (条件) {
猫のリストの例をもう一度見てみましょう。ただし、while ループを使うように書き直してみましょう。
```js
-const cats = ['Pete', 'Biggles', 'Jasmine'];
+const cats = ["Pete", "Biggles", "Jasmine"];
-let myFavoriteCats = 'My cats are called ';
+let myFavoriteCats = "My cats are called ";
let i = 0;
@@ -506,7 +531,7 @@ while (i < cats.length) {
i++;
}
-console.log(myFavoriteCats); // "My cats are called Pete, Biggles, and Jasmine."
+console.log(myFavoriteCats); // "My cats are called Pete, Biggles, and Jasmine."
```
> **メモ:** これは期待どおりに動作します。[GitHub でライブ実行](https://mdn.github.io/learning-area/javascript/building-blocks/loops/while.html)してみてください（[完全なソースコード](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/loops/while.html)を見ることもできます）。
@@ -529,9 +554,9 @@ do {
`do...while` ループを使用するように、猫のリストの例をもう一度書き直してみましょう。
```js
-const cats = ['Pete', 'Biggles', 'Jasmine'];
+const cats = ["Pete", "Biggles", "Jasmine"];
-let myFavoriteCats = 'My cats are called ';
+let myFavoriteCats = "My cats are called ";
let i = 0;
@@ -545,7 +570,7 @@ do {
i++;
} while (i < cats.length);
-console.log(myFavoriteCats); // "My cats are called Pete, Biggles, and Jasmine."
+console.log(myFavoriteCats); // "My cats are called Pete, Biggles, and Jasmine."
```
> **メモ:** こちらも、これは期待どおりに動作します。[GitHub でライブ実行](https://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html)してみてください（[完全なソースコード](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/loops/do-while.html)を見ることもできます）。
@@ -584,7 +609,8 @@ console.log(myFavoriteCats); // "My cats are called Pete, Biggles, and Jasmi
編集可能なコード
- Esc を押すと、コード領域からフォーカスを外すことができます（Tab はタブ文字を挿入します）。
+ Esc を押すと、コード領域からフォーカスを外すことができます（Tab
+ はタブ文字を挿入します）。
-
-
+
+
```
```js hidden
-const textarea = document.getElementById('code');
-const reset = document.getElementById('reset');
-const solution = document.getElementById('solution');
+const textarea = document.getElementById("code");
+const reset = document.getElementById("reset");
+const solution = document.getElementById("solution");
let code = textarea.value;
let userEntry = textarea.value;
@@ -270,41 +269,41 @@ function updateCode() {
eval(textarea.value);
}
-reset.addEventListener('click', function() {
+reset.addEventListener("click", function () {
textarea.value = code;
userEntry = textarea.value;
solutionEntry = jsSolution;
- solution.value = 'Show solution';
+ solution.value = "Show solution";
updateCode();
});
-solution.addEventListener('click', function() {
- if(solution.value === '答えを見る') {
+solution.addEventListener("click", function () {
+ if (solution.value === "答えを見る") {
textarea.value = solutionEntry;
- solution.value = '答えを隠す';
+ solution.value = "答えを隠す";
} else {
textarea.value = userEntry;
- solution.value = '答えを見る';
+ solution.value = "答えを見る";
}
updateCode();
});
-const jsSolution = 'const list = document.querySelector(\'.output ul\');\nconst totalBox = document.querySelector(\'.output p\');\nlet total = 0;\nlist.innerHTML = \'\';\ntotalBox.textContent = \'\';\n\nlet products = [\'パンツ:6.99\',\n \'靴下:5.99\',\n \'T シャツ:14.99\',\n \'ズボン:31.99\',\n \'靴:23.99\'];\n\nfor(let i = 0; i < products.length; i++) {\n let subArray = products[i].split(\':\');\n let name = subArray[0];\n let price = Number(subArray[1]);\n total += price;\n itemText = name + \' — $\' + price;\n\n let listItem = document.createElement(\'li\');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n}\n\ntotalBox.textContent = \'合計: $\' + total.toFixed(2);';
+const jsSolution =
+ "const list = document.querySelector('.output ul');\nconst totalBox = document.querySelector('.output p');\nlet total = 0;\nlist.innerHTML = '';\ntotalBox.textContent = '';\n\nlet products = ['パンツ:6.99',\n '靴下:5.99',\n 'T シャツ:14.99',\n 'ズボン:31.99',\n '靴:23.99'];\n\nfor(let i = 0; i < products.length; i++) {\n let subArray = products[i].split(':');\n let name = subArray[0];\n let price = Number(subArray[1]);\n total += price;\n itemText = name + ' — $' + price;\n\n let listItem = document.createElement('li');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n}\n\ntotalBox.textContent = '合計: $' + total.toFixed(2);";
let solutionEntry = jsSolution;
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
+textarea.addEventListener("input", updateCode);
+window.addEventListener("load", updateCode);
// タブキーでテキストエリアから抜けてしまうのを防ぎ、
// 代わりにカーソル位置にタブ文字を挿入する
-textarea.onkeydown = function(e){
+textarea.onkeydown = function (e) {
if (e.keyCode === 9) {
e.preventDefault();
- insertAtCaret('\t');
+ insertAtCaret("\t");
}
-
if (e.keyCode === 27) {
textarea.blur();
}
@@ -313,8 +312,11 @@ textarea.onkeydown = function(e){
function insertAtCaret(text) {
const scrollPos = textarea.scrollTop;
const caretPos = textarea.selectionStart;
- const front = (textarea.value).substring(0, caretPos);
- const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+ const front = textarea.value.substring(0, caretPos);
+ const back = textarea.value.substring(
+ textarea.selectionEnd,
+ textarea.value.length,
+ );
textarea.value = front + text + back;
caretPos = caretPos + text.length;
@@ -326,10 +328,10 @@ function insertAtCaret(text) {
// ユーザーがテキストエリアのコードを書き換える度に userCode を毎回更新する
-textarea.onkeyup = function(){
+textarea.onkeyup = function () {
// ユーザーのコードが表示されているときのみ状態を保存し、
// 答えのコードでユーザーコードが上書きされないようにする
- if(solution.value === '答えを見る') {
+ if (solution.value === "答えを見る") {
userEntry = textarea.value;
} else {
solutionEntry = textarea.value;
@@ -379,19 +381,17 @@ body {
```html hidden
出力結果
コードエディター
-
コードエディターから抜けるには Esc キーを押して下さい(タブキーではタブ文字を挿入します)。
-
+
+ コードエディターから抜けるには Esc
+ キーを押して下さい(タブキーではタブ文字を挿入します)。
+
-
-
+
+
```
@@ -461,9 +461,9 @@ body {
```
```js hidden
-const textarea = document.getElementById('code');
-const reset = document.getElementById('reset');
-const solution = document.getElementById('solution');
+const textarea = document.getElementById("code");
+const reset = document.getElementById("reset");
+const solution = document.getElementById("solution");
let code = textarea.value;
let userEntry = textarea.value;
@@ -471,38 +471,39 @@ function updateCode() {
eval(textarea.value);
}
-reset.addEventListener('click', function() {
+reset.addEventListener("click", function () {
textarea.value = code;
userEntry = textarea.value;
solutionEntry = jsSolution;
- solution.value = 'Show solution';
+ solution.value = "Show solution";
updateCode();
});
-solution.addEventListener('click', function() {
- if(solution.value === '答えを見る') {
+solution.addEventListener("click", function () {
+ if (solution.value === "答えを見る") {
textarea.value = solutionEntry;
- solution.value = '答えを隠す';
+ solution.value = "答えを隠す";
} else {
textarea.value = userEntry;
- solution.value = '答えを見る';
+ solution.value = "答えを見る";
}
updateCode();
});
-const jsSolution = 'const list = document.querySelector(\'.output ul\');\nconst searchInput = document.querySelector(\'.output input\');\nconst searchBtn = document.querySelector(\'.output button\');\n\nlist.innerHTML = \'\';\n\nlet myHistory= [];\n\nsearchBtn.onclick = function() {\n if(searchInput.value !== \'\') {\n myHistory.unshift(searchInput.value);\n\n list.innerHTML = \'\';\n\n for(let i = 0; i < myHistory.length; i++) {\n itemText = myHistory[i];\n const listItem = document.createElement(\'li\');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n }\n\n if(myHistory.length >= 5) {\n myHistory.pop();\n }\n\n searchInput.value = \'\';\n searchInput.focus();\n }\n}';
+const jsSolution =
+ "const list = document.querySelector('.output ul');\nconst searchInput = document.querySelector('.output input');\nconst searchBtn = document.querySelector('.output button');\n\nlist.innerHTML = '';\n\nlet myHistory= [];\n\nsearchBtn.onclick = function() {\n if(searchInput.value !== '') {\n myHistory.unshift(searchInput.value);\n\n list.innerHTML = '';\n\n for(let i = 0; i < myHistory.length; i++) {\n itemText = myHistory[i];\n const listItem = document.createElement('li');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n }\n\n if(myHistory.length >= 5) {\n myHistory.pop();\n }\n\n searchInput.value = '';\n searchInput.focus();\n }\n}";
let solutionEntry = jsSolution;
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
+textarea.addEventListener("input", updateCode);
+window.addEventListener("load", updateCode);
// タブキーでテキストエリアから抜けてしまうのを防ぎ、
// 代わりにカーソル位置にタブ文字を挿入する
-textarea.onkeydown = function(e){
+textarea.onkeydown = function (e) {
if (e.keyCode === 9) {
e.preventDefault();
- insertAtCaret('\t');
+ insertAtCaret("\t");
}
if (e.keyCode === 27) {
@@ -513,8 +514,11 @@ textarea.onkeydown = function(e){
function insertAtCaret(text) {
const scrollPos = textarea.scrollTop;
const caretPos = textarea.selectionStart;
- const front = (textarea.value).substring(0, caretPos);
- const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+ const front = textarea.value.substring(0, caretPos);
+ const back = textarea.value.substring(
+ textarea.selectionEnd,
+ textarea.value.length,
+ );
textarea.value = front + text + back;
caretPos = caretPos + text.length;
textarea.selectionStart = caretPos;
@@ -525,10 +529,10 @@ function insertAtCaret(text) {
// ユーザーがテキストエリアのコードを書き換える度に userCode を毎回更新する
-textarea.onkeyup = function(){
+textarea.onkeyup = function () {
// ユーザーのコードが表示されているときのみ状態を保存し、
// 答えのコードでユーザーコードが上書きされないようにする
- if(solution.value === '答えを見る') {
+ if (solution.value === "答えを見る") {
userEntry = textarea.value;
} else {
solutionEntry = textarea.value;
diff --git a/files/ja/learn/javascript/first_steps/math/index.md b/files/ja/learn/javascript/first_steps/math/index.md
index d06dfeea3a9964..ba8ac8625437a2 100644
--- a/files/ja/learn/javascript/first_steps/math/index.md
+++ b/files/ja/learn/javascript/first_steps/math/index.md
@@ -43,22 +43,22 @@ slug: Learn/JavaScript/First_steps/Math
1. まず、変数を 2 つ宣言して、それぞれ整数と浮動小数点数で初期化してみましょう。そして、変数の名前を入力して、期待通りに値が入っていることを確認してみましょう。
- ```js
- var myInt = 5;
- var myFloat = 6.667;
- myInt;
- myFloat;
- ```
+ ```js
+ var myInt = 5;
+ var myFloat = 6.667;
+ myInt;
+ myFloat;
+ ```
2. 数値にはクォーテーションマークが不要です。次に進む前にもう少し変数の宣言と初期化をしてみてください。
3. さて、それでは上で入力した 2 つの変数が同じデータ型であるか確認してみましょう。JavaScript では、{{jsxref("Operators/typeof", "typeof")}} という演算子を使用することで、データ型を確認することができます。次の 2 行を入力してみましょう。
- ```js
- typeof myInt;
- typeof myFloat;
- ```
+ ```js
+ typeof myInt;
+ typeof myFloat;
+ ```
- どちらの変数についても `"number"` という文字が戻ってきましたね。もし、別々の数値型が存在しているとすれば、別々に処理しなければならないので、そう考えるととても簡単に思えますよね！
+ どちらの変数についても `"number"` という文字が戻ってきましたね。もし、別々の数値型が存在しているとすれば、別々に処理しなければならないので、そう考えるととても簡単に思えますよね！
### 便利な Number メソッド
@@ -80,7 +80,7 @@ twoDecimalPlaces;
例えば、これらの命令をコンソールに入力してみてください。
```js
-let myNumber = '74';
+let myNumber = "74";
myNumber + 3;
```
@@ -117,29 +117,29 @@ Number(myNumber) + 3;
1. まずは次のような簡単な例を自分で試してみてください。
- ```js
- 10 + 7
- 9 * 8
- 60 % 3
- ```
+ ```js
+ 10 + 7;
+ 9 * 8;
+ 60 % 3;
+ ```
2. そして、変数を宣言して初期化し、数を変数に格納します。それから変数を使って計算してみましょう。変数は計算するにあたり、保持している値がそこにあるかのように使えます。例えば次の通り。
- ```js
- let num1 = 10;
- let num2 = 50;
- 9 * num1;
- num1 ** 3;
- num2 / num1;
- ```
+ ```js
+ let num1 = 10;
+ let num2 = 50;
+ 9 * num1;
+ num1 ** 3;
+ num2 / num1;
+ ```
3. それではさらに難しい計算式を入力してみましょう。
- ```js
- 5 + 10 * 3;
- num2 % 9 * num1;
- num2 + num1 / 8 + 2;
- ```
+ ```js
+ 5 + 10 * 3;
+ (num2 % 9) * num1;
+ num2 + num1 / 8 + 2;
+ ```
最後の例の中に予想した結果と違う答えがありませんでしたか。次の章でなぜそうなったかを説明してみましょう。
@@ -286,18 +286,18 @@ x *= y; // x は 12 になる
```
```js
-const btn = document.querySelector('button');
-const txt = document.querySelector('p');
+const btn = document.querySelector("button");
+const txt = document.querySelector("p");
-btn.addEventListener('click', updateBtn);
+btn.addEventListener("click", updateBtn);
function updateBtn() {
- if (btn.textContent === '起動する') {
- btn.textContent = '停止する';
- txt.textContent = 'マシンが起動しました！';
+ if (btn.textContent === "起動する") {
+ btn.textContent = "停止する";
+ txt.textContent = "マシンが起動しました！";
} else {
- btn.textContent = '起動する';
- txt.textContent = 'マシンは停止中です。';
+ btn.textContent = "起動する";
+ txt.textContent = "マシンは停止中です。";
}
}
```
diff --git a/files/ja/learn/javascript/first_steps/silly_story_generator/index.md b/files/ja/learn/javascript/first_steps/silly_story_generator/index.md
index a80aece8abc507..68b7577b7b263d 100644
--- a/files/ja/learn/javascript/first_steps/silly_story_generator/index.md
+++ b/files/ja/learn/javascript/first_steps/silly_story_generator/index.md
@@ -49,18 +49,18 @@ HTML および CSS と少しのテキストと JavaScript 関数があります
1. 先ほどのテキストファイル内の "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" という見出しの直後にあるコードをコピーして `main.js` の先頭に貼り付けます。これで "Enter custom name" テキストフィールド (`customName`) 、"Generate random story" ボタン (`randomize`) 、HTML の body の下のほうにある {{htmlelement("p")}} 要素 (`story`) への参照を保持することができます。さらに `randomValueFromArray()` という、引数として配列を取りその配列からランダムに 1 つの項目を戻り値として返す関数が使えるようになります。
2. 次にテキストファイルの 2 番目のセクションを見てみましょう。"2. RAW TEXT STRINGS" という見出しのところです。このプログラムの入力となる文字列が書かれています。`main.js` の内部で使用できるように、これらの文字列を変数に保持してください。
- 1. 先頭の長い長い文字列を `storyText` という変数に格納します。
- 2. 3 つセットになっている最初の文字列の組を `insertX` という配列に格納します。
- 3. 2 組目の文字列を `insertY` という配列に格納します。
- 4. 3 組目の文字列を `insertZ` という配列に格納します。
+ 1. 先頭の長い長い文字列を `storyText` という変数に格納します。
+ 2. 3 つセットになっている最初の文字列の組を `insertX` という配列に格納します。
+ 3. 2 組目の文字列を `insertY` という配列に格納します。
+ 4. 3 組目の文字列を `insertZ` という配列に格納します。
イベントハンドラーと未完成の関数の配置:
1. テキストファイルに戻ります。
2. "3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" という見出しの直後にあるコードをコピーして `main.js` ファイルの最後に貼り付けます。これで、
- - `randomize` 変数へのクリックイベントリスナーが追加され、その変数に紐づくボタンが押された場合に `result()` 関数が実行されるようになります。
- - 部分的に実装されている `result()` 関数の定義が追加されます。この課題の中で、この関数の残りを実装し、正しく動作するようにします。
+ - `randomize` 変数へのクリックイベントリスナーが追加され、その変数に紐づくボタンが押された場合に `result()` 関数が実行されるようになります。
+ - 部分的に実装されている `result()` 関数の定義が追加されます。この課題の中で、この関数の残りを実装し、正しく動作するようにします。
`result()` 関数の作成
@@ -70,10 +70,10 @@ HTML および CSS と少しのテキストと JavaScript 関数があります
4. 最初の `if` ブロックで、`newStory` の文字列内で見つかる 'Bob' という文字列を `name` 変数の値で置換するため、別の文字列置換のメソッド呼び出し追加します。このブロック内では、「もし ( if ) `customName` テキストフィールドに何かが入力されていれば、Bob をその文字列で置き換える」ということを言っています。
5. 次の `if` ブロックの中では、`uk` のラジオボタンが選択されているかどうかを調べています。もし選択されているのなら、重さと温度の単位をポンド・華氏から、ストーン・摂氏に変換したいと思います。そのために必要なことは...
- 1. ポンドからストーンへ変換する公式、および、華氏から摂氏へ変換する公式を調べます。
- 2. `weight` 変数が宣言されている行内の、300 を ポンドからストーンに変換した値で置き換えます。そして `' stone'` (ストーン) を `Math.round()` の結果に対して、その後ろに結合します。
- 3. `temperature` 変数が宣言されている行内の、94 を華氏から摂氏に変換した値で置き換えます。こちらには `' centigrade'` (摂氏～度) という文字を `Math.round()` の結果に対して、後ろに結合します。
- 4. 上記 2 つの変数の宣言の直後に、さらにもう 2 つ文字列を置換するコードを書いて、'94 farenheit' を `temperature` 変数の内容に、'300 pounds' を `weight` 変数の内容にそれぞれ置換します。
+ 1. ポンドからストーンへ変換する公式、および、華氏から摂氏へ変換する公式を調べます。
+ 2. `weight` 変数が宣言されている行内の、300 を ポンドからストーンに変換した値で置き換えます。そして `' stone'` (ストーン) を `Math.round()` の結果に対して、その後ろに結合します。
+ 3. `temperature` 変数が宣言されている行内の、94 を華氏から摂氏に変換した値で置き換えます。こちらには `' centigrade'` (摂氏～度) という文字を `Math.round()` の結果に対して、後ろに結合します。
+ 4. 上記 2 つの変数の宣言の直後に、さらにもう 2 つ文字列を置換するコードを書いて、'94 farenheit' を `temperature` 変数の内容に、'300 pounds' を `weight` 変数の内容にそれぞれ置換します。
6. 最後に、関数の下から 2 行目にある、`story` 変数の `textContent` プロパティ(段落を参照している) を、`newStory` 変数の内容で置き換えます。
@@ -83,7 +83,7 @@ HTML および CSS と少しのテキストと JavaScript 関数があります
- もし、JavaScript が HTML に適切に適用されているかどうかを知りたければ、JavaScript ファイルから一時的に全てのコードを削除して、確実に何かが起きるようなコードを追加して、JavaScript ファイルを保存して HTML ファイルを更新してみましょう。次の例は {{htmlelement("html")}} 要素の背景色を赤くするコードです。JavaScript が適切に HTML に適用されていれば、ブラウザーのウィンドウが真っ赤になることでしょう。
```js
- document.querySelector('html').style.backgroundColor = 'red';
+ document.querySelector("html").style.backgroundColor = "red";
```
- [Math.round()](/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/round) は JavaScript の組み込みメソッドで、計算結果を整数値に四捨五入します。
diff --git a/files/ja/learn/javascript/first_steps/strings/index.md b/files/ja/learn/javascript/first_steps/strings/index.md
index fc96fa677763eb..c0ebf081b422d6 100644
--- a/files/ja/learn/javascript/first_steps/strings/index.md
+++ b/files/ja/learn/javascript/first_steps/strings/index.md
@@ -39,11 +39,11 @@ l10n:
1. 初めに、次の行を入力してみましょう。
```js
- const string = '革命はテレビでは放送されない。';
+ const string = "革命はテレビでは放送されない。";
console.log(string);
```
- 数値のところでやったのと同じように、変数を宣言して、値を入れて初期化しています。そして値を返しています。ただ違うのは、文字列が引用符で囲まれて書かれていることです。
+ 数値のところでやったのと同じように、変数を宣言して、値を入れて初期化しています。そして値を返しています。ただ違うのは、文字列が引用符で囲まれて書かれていることです。
2. もし引用符で囲わななかったり、どちらか一方を書き忘れたりすると、エラーになります。
@@ -68,7 +68,7 @@ l10n:
1. JavaScript では、文字列を囲む引用符として、単一引用符と二重引用符を使用することができます。以下のどちらの例も正しく動きます。
- ```js
+ ```js-nolint
const sgl = '単一引用符';
const dbl = "二重引用符";
console.log(sgl);
@@ -102,7 +102,7 @@ l10n:
先ほどのコード行を直すには、問題となっている引用符をエスケープする必要があります。文字のエスケープとは、その文字が、コードではなく、文字列の一部であるとブラウザーに認識させる書き方です。JavaScript ではバックスラッシュ ( \ \[環境によっては円マーク (￥)]) を文字の前におくことでエスケープすることができます。
-```js
+```js-nolint example-good
const bigmouth = 'I\'ve got no right to take my place…';
console.log(bigmouth);
```
diff --git a/files/ja/learn/javascript/first_steps/test_your_skills_colon__arrays/index.md b/files/ja/learn/javascript/first_steps/test_your_skills_colon__arrays/index.md
index c0693a8708026e..c44923c597fe1f 100644
--- a/files/ja/learn/javascript/first_steps/test_your_skills_colon__arrays/index.md
+++ b/files/ja/learn/javascript/first_steps/test_your_skills_colon__arrays/index.md
@@ -1,5 +1,5 @@
---
-title: 'スキルテスト: 配列'
+title: "スキルテスト: 配列"
slug: Learn/JavaScript/First_steps/Test_your_skills:_Arrays
l10n:
sourceCommit: 4f6ba2f5a1615fe155292cac416c7ab6b9d711ec
@@ -86,7 +86,7 @@ l10n:
1. 作品を、[CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), または [Glitch](https://glitch.com/). のような共有可能なオンラインエディターに置いてください。いちから自身でコードを記述することもできますし、上記のセクションでリンク付けされている準備済みファイルを利用するのもよいでしょう。
2. [MDN Discourse forum Learning category](https://discourse.mozilla.org/c/mdn/learn/250) で評価を希望したり、助けを求める投稿をしてください。（英語）投稿には以下のことを書きましょう。
- - "Assessment wanted for Variables 1 skill test"のような説明的なタイトル
- - これまで試したことの詳細、そして私たちに何をしてほしいか。例えば、行き詰まって助けが必要だとか、評価をしてほしいなど。
- - 評価してほしかったり、助けが必要な作品へのリンク。共有可能なオンラインエディター（上記ステップ 1 で述べたもの）を使って。これは分かりやすくするためのよい手法です。 — コードが見えない状態で、コーディングの問題を抱えている人を助けることはとても難しいことです。
- - 実際のタスクまたは評価ページのリンク。そうすれば、どの質問に助けが必要かがわかります。
+ - "Assessment wanted for Variables 1 skill test"のような説明的なタイトル
+ - これまで試したことの詳細、そして私たちに何をしてほしいか。例えば、行き詰まって助けが必要だとか、評価をしてほしいなど。
+ - 評価してほしかったり、助けが必要な作品へのリンク。共有可能なオンラインエディター（上記ステップ 1 で述べたもの）を使って。これは分かりやすくするためのよい手法です。 — コードが見えない状態で、コーディングの問題を抱えている人を助けることはとても難しいことです。
+ - 実際のタスクまたは評価ページのリンク。そうすれば、どの質問に助けが必要かがわかります。
diff --git a/files/ja/learn/javascript/first_steps/test_your_skills_colon__math/index.md b/files/ja/learn/javascript/first_steps/test_your_skills_colon__math/index.md
index f860e9b158ff44..e1021000f6ed3a 100644
--- a/files/ja/learn/javascript/first_steps/test_your_skills_colon__math/index.md
+++ b/files/ja/learn/javascript/first_steps/test_your_skills_colon__math/index.md
@@ -1,5 +1,5 @@
---
-title: 'あなたのスキルをテストしよう: 数学'
+title: "あなたのスキルをテストしよう: 数学"
slug: Learn/JavaScript/First_steps/Test_your_skills:_Math
---
@@ -63,7 +63,7 @@ slug: Learn/JavaScript/First_steps/Test_your_skills:_Math
1. あなたの制作物を、[CodePen](https://codepen.io/)、[jsFiddle](https://jsfiddle.net/)、または [Glitch](https://glitch.com/) のような共有可能なオンラインエディターに置いてください。いちから自身でコードを記述することもできますし、上記のセクションでリンク付けされている準備済みファイルを利用するのもよいでしょう。
2. [MDN Discourse forum Learning category](https://discourse.mozilla.org/c/mdn/learn) で、評価を希望したり、助けを求めるポストを投稿してください。ポストには以下を含みましょう:
- - "Assessment wanted for Math 1 skill test" のような説明的なタイトル
- - あなたがこれまで試したことの詳細、そしてあなたが私たちに何をしてほしいか。例えば、行き詰まって助けが必要だとか、評価をしてほしいなど。
- - 評価してほしかったり、助けが必要な作成物へのリンク。共有可能なオンラインエディター（上記ステップ 1 で述べたもの）を使って。これは分かりやすくするためのよい実践方法でしょう — コードが見れない状態で、コーディング問題を抱えている人を助けることはとても難しいですよね。
- - 実際のタスクまたは評価ページのリンク。そうすれば、あなたがどの質問に助けが必要かがわかります。
+ - "Assessment wanted for Math 1 skill test" のような説明的なタイトル
+ - あなたがこれまで試したことの詳細、そしてあなたが私たちに何をしてほしいか。例えば、行き詰まって助けが必要だとか、評価をしてほしいなど。
+ - 評価してほしかったり、助けが必要な作成物へのリンク。共有可能なオンラインエディター（上記ステップ 1 で述べたもの）を使って。これは分かりやすくするためのよい実践方法でしょう — コードが見れない状態で、コーディング問題を抱えている人を助けることはとても難しいですよね。
+ - 実際のタスクまたは評価ページのリンク。そうすれば、あなたがどの質問に助けが必要かがわかります。
diff --git a/files/ja/learn/javascript/first_steps/useful_string_methods/index.md b/files/ja/learn/javascript/first_steps/useful_string_methods/index.md
index c31b93f586d478..e6f97ec6b6ad3e 100644
--- a/files/ja/learn/javascript/first_steps/useful_string_methods/index.md
+++ b/files/ja/learn/javascript/first_steps/useful_string_methods/index.md
@@ -16,7 +16,7 @@ slug: Learn/JavaScript/First_steps/Useful_string_methods
JavaScript ではほとんどのものはオブジェクトです。たとえば、次のように文字列を作った時も、
```js
-let string = 'This is my string';
+let string = "This is my string";
```
この変数は文字列オブジェクトのインスタンスになり、大量のプロパティとメソッドが使用可能となります。{{jsxref("String")}} オブジェクトのページに行って、横にある一覧を眺めてみてください！
@@ -30,7 +30,7 @@ let string = 'This is my string';
ただ {{jsxref("String.prototype.length", "length")}} プロパティを使用すればよいので、とても簡単です。次の行を入力してみましょう。
```js
-let browserType = 'mozilla';
+let browserType = "mozilla";
browserType.length;
```
@@ -49,7 +49,7 @@ browserType[0];
文字列の一番最後の文字を取得したいときは、先ほどの `length` プロパティと組み合わせて以下のようにします。
```js
-browserType[browserType.length-1];
+browserType[browserType.length - 1];
```
"mozilla" の長さは 7 ですが、0 から始まるので、最後の文字の位置は 6 になります。よって `length-1` とする必要があるのです。
@@ -62,49 +62,49 @@ browserType[browserType.length-1];
1. 以下を試してみましょう。
- ```js
- browserType.indexOf('zilla');
- ```
+ ```js
+ browserType.indexOf("zilla");
+ ```
- このコードは 2 を返します。なぜならば、"mozilla"という文字列中で、部分文字列"zilla"の開始位置が 2 (0、1、2 — つまり 3 文字目)であるからです。このようなコードは文字列を絞り込むときなどに使います。例えば、ウェブサイトのアドレスの一覧があったとき、その中から"mozilla"を含むものだけを表示したい場合などです。
+ このコードは 2 を返します。なぜならば、"mozilla"という文字列中で、部分文字列"zilla"の開始位置が 2 (0、1、2 — つまり 3 文字目)であるからです。このようなコードは文字列を絞り込むときなどに使います。例えば、ウェブサイトのアドレスの一覧があったとき、その中から"mozilla"を含むものだけを表示したい場合などです。
2. 部分文字列が含まれてることを確認するもう一つの方法があり、こちらのほうが効果的な場合があります。
- ```js
- browserType.indexOf('vanilla');
- ```
+ ```js
+ browserType.indexOf("vanilla");
+ ```
- 上記のコードは `-1` を返します。これは部分文字列 (この場合は 'vanilla') がメインの文字列の中に見つからなかった場合に返されます。
+ 上記のコードは `-1` を返します。これは部分文字列 (この場合は 'vanilla') がメインの文字列の中に見つからなかった場合に返されます。
- これを使って、部分文字列 'mozilla' を**含まない** (あるいは否定演算子 `!==` を使うなら**含む**) 文字列のすべてのインスタンスを見つけることができます。
+ これを使って、部分文字列 'mozilla' を**含まない** (あるいは否定演算子 `!==` を使うなら**含む**) 文字列のすべてのインスタンスを見つけることができます。
- ```js
- if(browserType.indexOf('mozilla') === -1) {
- // もし部分文字列 'mozilla' が含まれていない場合は、
- // 文字列で何かをします。
- }
+ ```js
+ if (browserType.indexOf("mozilla") === -1) {
+ // もし部分文字列 'mozilla' が含まれていない場合は、
+ // 文字列で何かをします。
+ }
- if(browserType.indexOf('mozilla') !== -1) {
- // もし部分文字列 'mozilla' が含まれている場合は、
- // 文字列で何かをします。
- }
- ```
+ if (browserType.indexOf("mozilla") !== -1) {
+ // もし部分文字列 'mozilla' が含まれている場合は、
+ // 文字列で何かをします。
+ }
+ ```
3. 部分文字列がその文字列のどこから始まるかが分かっており、どこで終わっているかがわかれば、その部分文字列を {{jsxref("String.prototype.slice()", "slice()")}} メソッドを使用することで抽出することができます。
- ```js
- browserType.slice(0,3);
- ```
+ ```js
+ browserType.slice(0, 3);
+ ```
- このコードは "moz" という文字列を返します。最初の引数は抽出を始める最初の位置で、2 番目の引数が抽出する最後の文字の直後の位置です。つまり、この場合先頭から 4 番目の手前までの文字列が切り出されたということです。言い換えると、この場合は 2 番目の引数と同じ 3 文字が切り出されました。
+ このコードは "moz" という文字列を返します。最初の引数は抽出を始める最初の位置で、2 番目の引数が抽出する最後の文字の直後の位置です。つまり、この場合先頭から 4 番目の手前までの文字列が切り出されたということです。言い換えると、この場合は 2 番目の引数と同じ 3 文字が切り出されました。
4. また、ある文字以降の文字列の残りの文字をすべて抽出したいとわかっている場合は、2 番目のパラメータを含める必要はありません！その代わり、文字列内の残りの文字を抽出したい文字の位置を含める必要があるだけです。次のようにしてみてください。
- ```js
- browserType.slice(2);
- ```
+ ```js
+ browserType.slice(2);
+ ```
- この例は "zilla" という文字列を返します。なぜなら、2 の位置にある文字は z であり、2 番目の引数を指定していないため、3 文字目から最後までが部分文字列として戻ったのです。
+ この例は "zilla" という文字列を返します。なぜなら、2 の位置にある文字は z であり、2 番目の引数を指定していないため、3 文字目から最後までが部分文字列として戻ったのです。
> **メモ:** `slice()` の 2 番目の引数はオプション (任意指定) です。もし指定しなければ、元々の文字列の最後まで切り出しを行います。他にもオプションがありますので、さらに詳しく知りたければ{{jsxref("String.prototype.slice()", "slice()")}}のページで調べてみましょう。
@@ -115,7 +115,7 @@ String には{{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}}と{{j
それでは次の行を入力し、何が起きるか見てみましょう。
```js
-let radData = 'My NaMe Is MuD';
+let radData = "My NaMe Is MuD";
radData.toLowerCase();
radData.toUpperCase();
```
@@ -127,7 +127,7 @@ radData.toUpperCase();
検索する文字列と、置き換える文字列の 2 つを引数に取ります。次の例を実行してみてください。
```js
-browserType.replace('moz','van');
+browserType.replace("moz", "van");
```
これはコンソールで"vanilla"を返しますが、`browserType` の値は、"mozilla"のままです。プログラムで変数 `browserType` の値を実際に更新するには、演算の結果を変数に設定し直す必要があります。つまりそれ変数に設定されている部分文字列を自動的には更新してくれないのです。従って実際に変数の内容を更新するためには `browserType = browserType.replace('moz','van');` のように書きます。
@@ -150,15 +150,14 @@ browserType.replace('moz','van');
出力結果
コードエディタ
-
コードエディタから抜けるには Esc キーを押して下さい(タブキーではタブ文字を挿入します)。
+
+ コードエディタから抜けるには Esc
+ キーを押して下さい(タブキーではタブ文字を挿入します)。
+
-
-
+
+
```
@@ -209,9 +208,9 @@ body {
```
```js hidden
-const textarea = document.getElementById('code');
-const reset = document.getElementById('reset');
-const solution = document.getElementById('solution');
+const textarea = document.getElementById("code");
+const reset = document.getElementById("reset");
+const solution = document.getElementById("solution");
let code = textarea.value;
let userEntry = textarea.value;
@@ -219,55 +218,56 @@ function updateCode() {
eval(textarea.value);
}
-reset.addEventListener('click', function() {
+reset.addEventListener("click", function () {
textarea.value = code;
userEntry = textarea.value;
solutionEntry = jsSolution;
- solution.value = '答えを見る';
+ solution.value = "答えを見る";
updateCode();
});
-solution.addEventListener('click', function() {
- if(solution.value === '答えを見る') {
+solution.addEventListener("click", function () {
+ if (solution.value === "答えを見る") {
textarea.value = solutionEntry;
- solution.value = '答えを隠す';
+ solution.value = "答えを隠す";
} else {
textarea.value = userEntry;
- solution.value = '答えを見る';
+ solution.value = "答えを見る";
}
updateCode();
});
-const jsSolution = 'const list = document.querySelector(\'.output ul\');' +
-'\nlist.innerHTML = \'\';' +
-'\nlet greetings = [\'Happy Birthday!\',' +
-'\n \'Merry Christmas my love\',' +
-'\n \'A happy Christmas to all the family\',' +
-'\n \'You\\\'re all I want for Christmas\',' +
-'\n \'Get well soon\'];' +
-'\n' +
-'\nfor (let i = 0; i < greetings.length; i++) {' +
-'\n let input = greetings[i];' +
-'\n if (greetings[i].indexOf(\'Christmas\') !== -1) {' +
-'\n let result = input;' +
-'\n let listItem = document.createElement(\'li\');' +
-'\n listItem.textContent = result;' +
-'\n list.appendChild(listItem);' +
-'\n }' +
-'\n}';
+const jsSolution =
+ "const list = document.querySelector('.output ul');" +
+ "\nlist.innerHTML = '';" +
+ "\nlet greetings = ['Happy Birthday!'," +
+ "\n 'Merry Christmas my love'," +
+ "\n 'A happy Christmas to all the family'," +
+ "\n 'You\\'re all I want for Christmas'," +
+ "\n 'Get well soon'];" +
+ "\n" +
+ "\nfor (let i = 0; i < greetings.length; i++) {" +
+ "\n let input = greetings[i];" +
+ "\n if (greetings[i].indexOf('Christmas') !== -1) {" +
+ "\n let result = input;" +
+ "\n let listItem = document.createElement('li');" +
+ "\n listItem.textContent = result;" +
+ "\n list.appendChild(listItem);" +
+ "\n }" +
+ "\n}";
let solutionEntry = jsSolution;
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
+textarea.addEventListener("input", updateCode);
+window.addEventListener("load", updateCode);
// タブキーでテキストエリアから抜けてしまうのを防ぎ、
// 代わりにカーソル位置にタブ文字を挿入する
-textarea.onkeydown = function(e){
+textarea.onkeydown = function (e) {
if (e.keyCode === 9) {
e.preventDefault();
- insertAtCaret('\t');
+ insertAtCaret("\t");
}
if (e.keyCode === 27) {
@@ -278,8 +278,11 @@ textarea.onkeydown = function(e){
function insertAtCaret(text) {
const scrollPos = textarea.scrollTop;
const caretPos = textarea.selectionStart;
- const front = (textarea.value).substring(0, caretPos);
- const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+ const front = textarea.value.substring(0, caretPos);
+ const back = textarea.value.substring(
+ textarea.selectionEnd,
+ textarea.value.length,
+ );
textarea.value = front + text + back;
caretPos = caretPos + text.length;
@@ -291,10 +294,10 @@ function insertAtCaret(text) {
// ユーザーがテキストエリアのコードを書き換える度に userCode を毎回更新する
-textarea.onkeyup = function(){
+textarea.onkeyup = function () {
// ユーザーのコードが表示されているときのみ状態を保存し、
// 答えのコードでユーザーコードが上書きされないようにする
- if(solution.value === '答えを見る') {
+ if (solution.value === "答えを見る") {
userEntry = textarea.value;
} else {
solutionEntry = textarea.value;
@@ -321,15 +324,14 @@ textarea.onkeyup = function(){
出力結果
コードエディタ
-
コードエディタから抜けるには Esc キーを押して下さい(タブキーではタブ文字を挿入します)。
+
+ コードエディタから抜けるには Esc
+ キーを押して下さい(タブキーではタブ文字を挿入します)。
+
-
-
+
+
```
@@ -375,9 +377,9 @@ body {
```
```js hidden
-const textarea = document.getElementById('code');
-const reset = document.getElementById('reset');
-const solution = document.getElementById('solution');
+const textarea = document.getElementById("code");
+const reset = document.getElementById("reset");
+const solution = document.getElementById("solution");
let code = textarea.value;
let userEntry = textarea.value;
@@ -385,53 +387,54 @@ function updateCode() {
eval(textarea.value);
}
-reset.addEventListener('click', function() {
+reset.addEventListener("click", function () {
textarea.value = code;
userEntry = textarea.value;
solutionEntry = jsSolution;
- solution.value = '答えを見る';
+ solution.value = "答えを見る";
updateCode();
});
-solution.addEventListener('click', function() {
- if(solution.value === '答えを見る') {
+solution.addEventListener("click", function () {
+ if (solution.value === "答えを見る") {
textarea.value = solutionEntry;
- solution.value = '答えを隠す';
+ solution.value = "答えを隠す";
} else {
textarea.value = userEntry;
- solution.value = '答えを見る';
+ solution.value = "答えを見る";
}
updateCode();
});
-const jsSolution = 'const list = document.querySelector(\'.output ul\');' +
-'\nlist.innerHTML = \'\';' +
-'\nlet cities = [\'lonDon\', \'ManCHESTer\', \'BiRmiNGHAM\', \'liVERpoOL\'];' +
-'\n' +
-'\nfor (let i = 0; i < cities.length; i++) {' +
-'\n let input = cities[i];' +
-'\n let lower = input.toLowerCase();' +
-'\n let firstLetter = lower.slice(0,1);' +
-'\n let capitalized = lower.replace(firstLetter,firstLetter.toUpperCase());' +
-'\n let result = capitalized;' +
-'\n let listItem = document.createElement(\'li\');' +
-'\n listItem.textContent = result;' +
-'\n list.appendChild(listItem);' +
-'\n' +
-'\n}';
+const jsSolution =
+ "const list = document.querySelector('.output ul');" +
+ "\nlist.innerHTML = '';" +
+ "\nlet cities = ['lonDon', 'ManCHESTer', 'BiRmiNGHAM', 'liVERpoOL'];" +
+ "\n" +
+ "\nfor (let i = 0; i < cities.length; i++) {" +
+ "\n let input = cities[i];" +
+ "\n let lower = input.toLowerCase();" +
+ "\n let firstLetter = lower.slice(0,1);" +
+ "\n let capitalized = lower.replace(firstLetter,firstLetter.toUpperCase());" +
+ "\n let result = capitalized;" +
+ "\n let listItem = document.createElement('li');" +
+ "\n listItem.textContent = result;" +
+ "\n list.appendChild(listItem);" +
+ "\n" +
+ "\n}";
let solutionEntry = jsSolution;
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
+textarea.addEventListener("input", updateCode);
+window.addEventListener("load", updateCode);
// タブキーでテキストエリアから抜けてしまうのを防ぎ、
// 代わりにカーソル位置にタブ文字を挿入する
-textarea.onkeydown = function(e){
+textarea.onkeydown = function (e) {
if (e.keyCode === 9) {
e.preventDefault();
- insertAtCaret('\t');
+ insertAtCaret("\t");
}
if (e.keyCode === 27) {
@@ -442,8 +445,11 @@ textarea.onkeydown = function(e){
function insertAtCaret(text) {
const scrollPos = textarea.scrollTop;
const caretPos = textarea.selectionStart;
- const front = (textarea.value).substring(0, caretPos);
- const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+ const front = textarea.value.substring(0, caretPos);
+ const back = textarea.value.substring(
+ textarea.selectionEnd,
+ textarea.value.length,
+ );
textarea.value = front + text + back;
caretPos = caretPos + text.length;
@@ -455,10 +461,10 @@ function insertAtCaret(text) {
// ユーザーがテキストエリアのコードを書き換える度に userCode を毎回更新する
-textarea.onkeyup = function(){
+textarea.onkeyup = function () {
// ユーザーのコードが表示されているときのみ状態を保存し、
// 答えのコードでユーザーコードが上書きされないようにする
- if(solution.value === '答えを見る') {
+ if (solution.value === "答えを見る") {
userEntry = textarea.value;
} else {
solutionEntry = textarea.value;
@@ -496,15 +502,14 @@ MAN: Manchester Piccadilly
出力結果
コードエディタ
-
コードエディタから抜けるには Esc キーを押して下さい(タブキーではタブ文字を挿入します)。
+
+ コードエディタから抜けるには Esc
+ キーを押して下さい(タブキーではタブ文字を挿入します)。
+
-
-
+
+
```
@@ -555,9 +560,9 @@ body {
```
```js hidden
-const textarea = document.getElementById('code');
-const reset = document.getElementById('reset');
-const solution = document.getElementById('solution');
+const textarea = document.getElementById("code");
+const reset = document.getElementById("reset");
+const solution = document.getElementById("solution");
let code = textarea.value;
let userEntry = textarea.value;
@@ -565,56 +570,57 @@ function updateCode() {
eval(textarea.value);
}
-reset.addEventListener('click', function() {
+reset.addEventListener("click", function () {
textarea.value = code;
userEntry = textarea.value;
solutionEntry = jsSolution;
- solution.value = '答えを見る';
+ solution.value = "答えを見る";
updateCode();
});
-solution.addEventListener('click', function() {
- if(solution.value === '答えを見る') {
+solution.addEventListener("click", function () {
+ if (solution.value === "答えを見る") {
textarea.value = solutionEntry;
- solution.value = '答えを隠す';
+ solution.value = "答えを隠す";
} else {
textarea.value = userEntry;
- solution.value = '答えを見る';
+ solution.value = "答えを見る";
}
updateCode();
});
-const jsSolution = 'const list = document.querySelector(\'.output ul\');' +
-'\nlist.innerHTML = \'\';' +
-'\nlet stations = [\'MAN675847583748sjt567654;Manchester Piccadilly\',' +
-'\n \'GNF576746573fhdg4737dh4;Greenfield\',' +
-'\n \'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street\',' +
-'\n \'SYB4f65hf75f736463;Stalybridge\',' +
-'\n \'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield\'];' +
-'\n' +
-'\nfor (let i = 0; i < stations.length; i++) {' +
-'\n let input = stations[i];' +
-'\n let code = input.slice(0,3);' +
-'\n let semiC = input.indexOf(\';\');' +
-'\n let name = input.slice(semiC + 1);' +
-'\n let result = code + \': \' + name;' +
-'\n let listItem = document.createElement(\'li\');' +
-'\n listItem.textContent = result;' +
-'\n list.appendChild(listItem);' +
-'\n}';
+const jsSolution =
+ "const list = document.querySelector('.output ul');" +
+ "\nlist.innerHTML = '';" +
+ "\nlet stations = ['MAN675847583748sjt567654;Manchester Piccadilly'," +
+ "\n 'GNF576746573fhdg4737dh4;Greenfield'," +
+ "\n 'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street'," +
+ "\n 'SYB4f65hf75f736463;Stalybridge'," +
+ "\n 'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield'];" +
+ "\n" +
+ "\nfor (let i = 0; i < stations.length; i++) {" +
+ "\n let input = stations[i];" +
+ "\n let code = input.slice(0,3);" +
+ "\n let semiC = input.indexOf(';');" +
+ "\n let name = input.slice(semiC + 1);" +
+ "\n let result = code + ': ' + name;" +
+ "\n let listItem = document.createElement('li');" +
+ "\n listItem.textContent = result;" +
+ "\n list.appendChild(listItem);" +
+ "\n}";
let solutionEntry = jsSolution;
-textarea.addEventListener('input', updateCode);
-window.addEventListener('load', updateCode);
+textarea.addEventListener("input", updateCode);
+window.addEventListener("load", updateCode);
// タブキーでテキストエリアから抜けてしまうのを防ぎ、
// 代わりにカーソル位置にタブ文字を挿入する
-textarea.onkeydown = function(e){
+textarea.onkeydown = function (e) {
if (e.keyCode === 9) {
e.preventDefault();
- insertAtCaret('\t');
+ insertAtCaret("\t");
}
if (e.keyCode === 27) {
@@ -625,8 +631,11 @@ textarea.onkeydown = function(e){
function insertAtCaret(text) {
const scrollPos = textarea.scrollTop;
const caretPos = textarea.selectionStart;
- const front = (textarea.value).substring(0, caretPos);
- const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
+ const front = textarea.value.substring(0, caretPos);
+ const back = textarea.value.substring(
+ textarea.selectionEnd,
+ textarea.value.length,
+ );
textarea.value = front + text + back;
caretPos = caretPos + text.length;
@@ -638,10 +647,10 @@ function insertAtCaret(text) {
// ユーザーがテキストエリアのコードを書き換える度に userCode を毎回更新する
-textarea.onkeyup = function(){
+textarea.onkeyup = function () {
// ユーザーのコードが表示されているときのみ状態を保存し、
// 答えのコードでユーザーコードが上書きされないようにする
- if(solution.value === '答えを見る') {
+ if (solution.value === "答えを見る") {
userEntry = textarea.value;
} else {
solutionEntry = textarea.value;
diff --git a/files/ja/learn/javascript/first_steps/variables/index.md b/files/ja/learn/javascript/first_steps/variables/index.md
index faab8c94f97a70..971c2ed81bc39d 100644
--- a/files/ja/learn/javascript/first_steps/variables/index.md
+++ b/files/ja/learn/javascript/first_steps/variables/index.md
@@ -43,14 +43,14 @@ l10n:
```
```js
-const buttonA = document.querySelector('#button_A');
-const headingA = document.querySelector('#heading_A');
+const buttonA = document.querySelector("#button_A");
+const headingA = document.querySelector("#heading_A");
buttonA.onclick = () => {
- const name = prompt('あなたの名前は何ですか？');
+ const name = prompt("あなたの名前は何ですか？");
alert(`こんにちは、${name}さん、はじめまして！`);
headingA.textContent = `${name}さん、ようこそ`;
-}
+};
```
{{ EmbedLiveSample('Variable_example', '100%', 120) }}
@@ -67,13 +67,15 @@ buttonA.onclick = () => {
```
```js example-bad
-const buttonB = document.querySelector('#button_B');
-const headingB = document.querySelector('#heading_B');
+const buttonB = document.querySelector("#button_B");
+const headingB = document.querySelector("#heading_B");
buttonB.onclick = () => {
- alert(`こんにちは、${prompt('あなたの名前は何ですか？')}さん、はじめまして！`);
- headingB.textContent = `${prompt('あなたの名前は何ですか？')}さん、ようこそ`;
-}
+ alert(
+ `こんにちは、${prompt("あなたの名前は何ですか？")}さん、はじめまして！`,
+ );
+ headingB.textContent = `${prompt("あなたの名前は何ですか？")}さん、ようこそ`;
+};
```
{{ EmbedLiveSample('Without_a_variable', '100%', 120) }}
@@ -121,7 +123,7 @@ scoobyDoo;
変数を宣言したら、値を入れて初期化できます。初期化するには、変数名に続けて等号記号 (`=`) を入力し、変数に入れたい値を渡します。例えば次のように。
```js
-myName = 'Chris';
+myName = "Chris";
myAge = 37;
```
@@ -135,7 +137,7 @@ myAge;
変数の宣言と初期化を一度にすることもできます。
```js
-let myDog = 'Rover';
+let myDog = "Rover";
```
2 つの操作を別個の行で行うより早いので、おそらくほとんどの場合、この方法で書くでしょう。
@@ -156,7 +158,7 @@ JavaScript が最初に作成されたときには、これが変数を宣言す
はじめに、変数を宣言して初期化する複数行の JavaScript プログラムを作成した場合、変数を初期化した後で実際に変数を `var` で宣言することができます。例えば次のようになります。
```js
-myName = 'Chris';
+myName = "Chris";
function logName() {
console.log(myName);
@@ -176,22 +178,22 @@ var myName;
第二に、`var` を使用するとき、好きなだけ同じ変数を何度でも宣言することができます、しかし `let` ではできません。次の例は動作します。
```js
-var myName = 'Chris';
-var myName = 'Bob';
+var myName = "Chris";
+var myName = "Bob";
```
しかし、次のようにすると 2 行目でエラーが発生します。
```js example-bad
-let myName = 'Chris';
-let myName = 'Bob';
+let myName = "Chris";
+let myName = "Bob";
```
代わりにこれをしなければならないでしょう。
```js
-let myName = 'Chris';
-myName = 'Bob';
+let myName = "Chris";
+myName = "Bob";
```
繰り返しますが、これは言語の賢明な決定です。変数を再宣言する必要はありません。それは物事をより混乱させるだけです。
@@ -215,7 +217,7 @@ myName = 'Bob';
変数を初期化して値が入ったら、もう一度値を入れなおすことで、変数の値を変更することができます。次の行を入力してみてください。
```js
-myName = 'Bob';
+myName = "Bob";
myAge = 40;
```
@@ -280,7 +282,7 @@ let myAge = 17;
文字列とは文字が連なったもののことです。変数に文字列値を設定する場合、単一引用符 (`'`) または二重引用符 (`"`) で文字を囲みます。囲み忘れると、JavaScript はその文字を変数名として解釈しようとしてしまいます。
```js
-let dolphinGoodbye = 'So long and thanks for all the fish';
+let dolphinGoodbye = "So long and thanks for all the fish";
```
### 論理値
@@ -304,7 +306,7 @@ let test = 6 < 3;
配列とは角括弧 (`[]`) にカンマで区切った複数の値を格納できるオブジェクトです。コンソールに以下のように入力してみましょう。
```js
-let myNameArray = ['Chris', 'Bob', 'Jim'];
+let myNameArray = ["Chris", "Bob", "Jim"];
let myNumberArray = [10, 15, 40];
```
@@ -326,13 +328,13 @@ myNumberArray[2]; // 40 と表示されます
次の行をコンソールに入力してみましょう。
```js
-let dog = { name : 'ポチ', breed : 'ダルメシアン' };
+let dog = { name: "ポチ", breed: "ダルメシアン" };
```
オブジェクトに格納された情報を取得するには、以下のような書き方をします。
```js
-dog.name
+dog.name;
```
とりあえずオブジェクトについて、今はここまでです。オブジェクトについてはもっと先のモジュールで紹介します。
@@ -344,13 +346,13 @@ JavaScript は他の言語と異なり、「動的型付け言語」という、
たとえば、もし変数を宣言して、引用符で囲んだ値を渡すとします。すると、ブラウザーはこれを文字列として扱うでしょう。
```js
-let myString = 'Hello';
+let myString = "Hello";
```
それが数字を含んでいたとしても、文字列になってしまうので、気を付けてください。
```js
-let myNumber = '500'; // oops, this is still a string
+let myNumber = "500"; // oops, this is still a string
typeof myNumber;
myNumber = 500; // much better — now this is a number
typeof myNumber;
@@ -394,15 +396,15 @@ count = 2;
JavaScript で定数は、常に同じ値に名前を付けなければなりませんが、名前を付けた値の内容は変更することができることに注意してください。これは、数値や論理値のような単純な型では有益な違いではありませんが、オブジェクトを考えてみてください。
```js
-const bird = { species : 'Kestrel'};
-console.log(bird.species); // "Kestrel"
+const bird = { species: "Kestrel" };
+console.log(bird.species); // "Kestrel"
```
オブジェクトの内容が変わっても、定数は同じオブジェクトを指しているので、`const` を使って宣言したオブジェクトのプロパティを更新したり、追加したり、削除したりすることができます。
```js
-bird.species = 'Striated Caracara';
-console.log(bird.species); // "Striated Caracara"
+bird.species = "Striated Caracara";
+console.log(bird.species); // "Striated Caracara"
```
## いつ const を使い、いつ let を使うか
diff --git a/files/ja/learn/javascript/first_steps/what_is_javascript/index.md b/files/ja/learn/javascript/first_steps/what_is_javascript/index.md
index 36407e82c40527..60f4f4de36abfb 100644
--- a/files/ja/learn/javascript/first_steps/what_is_javascript/index.md
+++ b/files/ja/learn/javascript/first_steps/what_is_javascript/index.md
@@ -47,14 +47,14 @@ JavaScript はウェブページにて複雑な機能をできるようにする
```css
p {
- font-family: 'helvetica neue', helvetica, sans-serif;
+ font-family: "helvetica neue", helvetica, sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
- border: 2px solid rgba(0,0,200,0.6);
- background: rgba(0,0,200,0.3);
- color: rgba(0,0,200,0.6);
- box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
+ border: 2px solid rgba(0, 0, 200, 0.6);
+ background: rgba(0, 0, 200, 0.3);
+ color: rgba(0, 0, 200, 0.6);
+ box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4);
border-radius: 10px;
padding: 3px 10px;
display: inline-block;
@@ -67,12 +67,12 @@ p {
最後に、JavaScript を加えて動的なふるまいを実装します:
```js
-const para = document.querySelector('p');
+const para = document.querySelector("p");
-para.addEventListener('click', updateName);
+para.addEventListener("click", updateName);
function updateName() {
- const name = prompt('名前を入力して下さい');
+ const name = prompt("名前を入力して下さい");
para.textContent = `Player 1: ${name}`;
}
```
@@ -147,12 +147,12 @@ JavaScript のごく一般的な用途は、(先ほど例示した) Document Obj
例えば、最初の例で見た JavaScript のブロックに戻りましょう。
```js
-const para = document.querySelector('p');
+const para = document.querySelector("p");
-para.addEventListener('click', updateName);
+para.addEventListener("click", updateName);
function updateName() {
- const name = prompt('名前を入力して下さい');
+ const name = prompt("名前を入力して下さい");
para.textContent = `Player 1: ${name}`;
}
```
@@ -203,26 +203,24 @@ JavaScript は CSS と同じような方法で、HTML ページに適用する
```html
```
4. それでは {{htmlelement("script")}} 要素内に JavaScript を書いて、もうちょっと面白いことをしてみましょう。「// JavaScript をここに書きます」と書いてあるすぐ下に、以下のコードを追加してください。
```js
- document.addEventListener('DOMContentLoaded', () => {
+ document.addEventListener("DOMContentLoaded", () => {
function createParagraph() {
- const para = document.createElement('p');
- para.textContent = 'ボタンが押されました!';
+ const para = document.createElement("p");
+ para.textContent = "ボタンが押されました!";
document.body.appendChild(para);
}
- const buttons = document.querySelectorAll('button');
+ const buttons = document.querySelectorAll("button");
for (const button of buttons) {
- button.addEventListener('click', createParagraph);
+ button.addEventListener("click", createParagraph);
}
});
```
@@ -251,15 +249,15 @@ JavaScript は CSS と同じような方法で、HTML ページに適用する
```js
function createParagraph() {
- const para = document.createElement('p');
- para.textContent = 'ボタンが押されました!';
+ const para = document.createElement("p");
+ para.textContent = "ボタンが押されました!";
document.body.appendChild(para);
}
- const buttons = document.querySelectorAll('button');
+ const buttons = document.querySelectorAll("button");
for (const button of buttons) {
- button.addEventListener('click', createParagraph);
+ button.addEventListener("click", createParagraph);
}
```
@@ -277,8 +275,8 @@ JavaScript は CSS と同じような方法で、HTML ページに適用する
```js example-bad
function createParagraph() {
- const para = document.createElement('p');
- para.textContent = 'ボタンが押されました！';
+ const para = document.createElement("p");
+ para.textContent = "ボタンが押されました！";
document.body.appendChild(para);
}
```
@@ -303,10 +301,10 @@ HTML に JavaScript を含めるのではなく、純粋な JavaScript の構成
このためのコードを以下に示します。
```js
-const buttons = document.querySelectorAll('button');
+const buttons = document.querySelectorAll("button");
for (const button of buttons) {
- button.addEventListener('click', createParagraph);
+ button.addEventListener("click", createParagraph);
}
```
@@ -329,7 +327,7 @@ JavaScript を使用してページ上の要素（またはより正確には、
内部の例では、コードの周りにこの構造を見ることができます。
```js
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener("DOMContentLoaded", () => {
// …
});
```
@@ -432,8 +430,8 @@ HTML や CSS と同様に、 JavaScript でもコード内にブラウザーが
// 関数: HTML の body タグ内の一番下に新しい段落を追加します。
function createParagraph() {
- let para = document.createElement('p');
- para.textContent = 'ボタンが押されました！';
+ let para = document.createElement("p");
+ para.textContent = "ボタンが押されました！";
document.body.appendChild(para);
}
@@ -444,10 +442,10 @@ function createParagraph() {
どのボタンが押されても、 createParagraph() 関数が実行されるようにする。
*/
-const buttons = document.querySelectorAll('button');
+const buttons = document.querySelectorAll("button");
for (const button of buttons) {
- button.addEventListener('click', createParagraph);
+ button.addEventListener("click", createParagraph);
}
```
diff --git a/files/ja/learn/javascript/first_steps/what_went_wrong/index.md b/files/ja/learn/javascript/first_steps/what_went_wrong/index.md
index 1d8aa41aee5899..fbe580f8676e9d 100644
--- a/files/ja/learn/javascript/first_steps/what_went_wrong/index.md
+++ b/files/ja/learn/javascript/first_steps/what_went_wrong/index.md
@@ -38,17 +38,17 @@ slug: Learn/JavaScript/First_steps/What_went_wrong
1. `number-game-errors.html` ファイルを開いているタブを選択して、JavaScript コンソールを開いてください。以下のメッセージが表示されていますね。
2. これは分かりやすいエラーです。ブラウザーからもいくつか情報が出ています (上のスクリーンショットは FireFox のものですが、他のブラウザーでも同様の情報が表示されるでしょう)。左から順に説明します。
- - 赤色の 「x」 ボタンはエラーがあることを示しています。
- - 「TypeError: guessSubmit.addeventListener is not a function」というエラーメッセージが、何が問題かを示しています。
- - 「Learn More」 のリンクがエラー内容についてもっと詳細に説明する MDN のページを指しています。
- - JavaScript のファイルの名前が出ています。このリンクをクリックすると、開発者ツールのデバッガータブで問題のあるファイルが開きます。ハイライトされているエラーの箇所が見えるでしょう。
- - エラーがある行の行番号と、最初の文字が始まる番号が出ています。上の例では 86 行目の 3 文字目です。
+ - 赤色の 「x」 ボタンはエラーがあることを示しています。
+ - 「TypeError: guessSubmit.addeventListener is not a function」というエラーメッセージが、何が問題かを示しています。
+ - 「Learn More」 のリンクがエラー内容についてもっと詳細に説明する MDN のページを指しています。
+ - JavaScript のファイルの名前が出ています。このリンクをクリックすると、開発者ツールのデバッガータブで問題のあるファイルが開きます。ハイライトされているエラーの箇所が見えるでしょう。
+ - エラーがある行の行番号と、最初の文字が始まる番号が出ています。上の例では 86 行目の 3 文字目です。
3. テキストエディターで 86 行目を見てみましょう。
- ```js
- guessSubmit.addeventListener('click', checkGuess);
- ```
+ ```js
+ guessSubmit.addeventListener("click", checkGuess);
+ ```
4. エラーでは、"guessSubmit.addeventListener is not a function" とあり、これは JavaScript インタープリターに呼び出している関数が認識されないという意味です。しばしば、このエラーメッセージは、スペルミスをしたということです。もし正しい綴りがわからなければ、MDN のサイトで使用している機能を調べてみてください。きっと見つかります。いつもはお好みの検索エンジンで「mdn _機能の名前_」と検索してみるのがよいでしょう。今回は代わりに [`addEventListener()`](/ja/docs/Web/API/EventTarget/addEventListener) のリンクを張っておきます。
5. ページによると、関数の名前を間違えたみたいですね！JavaScript は大文字・小文字を区別しますので、ちょっとでも違うとエラーの原因になることを覚えておきましょう。それでは `addeventListener` を `addEventListener` に修正してエラーを直しましょう。
@@ -61,36 +61,36 @@ slug: Learn/JavaScript/First_steps/What_went_wrong
2. 予想を入力して、予想を入力ボタンを押してみると、...別のエラーが起きています！
3. 今回のエラーを見ると、 78 行目で"TypeError: lowOrHi is null"が起きています。
- > **メモ:** [`Null`](/ja/docs/Glossary/Null) は「何もない」ことや「値がない」ことを表す特別な値です。つまり `lowOrHi` が宣言されて初期化されているけれど、意味のある値ではない — つまり型も値もないということです。
+ > **メモ:** [`Null`](/ja/docs/Glossary/Null) は「何もない」ことや「値がない」ことを表す特別な値です。つまり `lowOrHi` が宣言されて初期化されているけれど、意味のある値ではない — つまり型も値もないということです。
- > **メモ:** このエラーは関数内部 (`checkGuess() { ... }` ブロックの中) で発生したため、ページを読み込んだだけでは出てきませんでした。後に続く[関数の記事](/ja/docs/Learn/JavaScript/Building_blocks/Functions)を読み進めていけば分かりますが、内側の関数のスコープは外側の関数のスコープとは異なります。今回のケースでは、 86 行目の `checkGuess()` 関数が実行されるまで実行されず、エラーも発生していませんでした。
+ > **メモ:** このエラーは関数内部 (`checkGuess() { ... }` ブロックの中) で発生したため、ページを読み込んだだけでは出てきませんでした。後に続く[関数の記事](/ja/docs/Learn/JavaScript/Building_blocks/Functions)を読み進めていけば分かりますが、内側の関数のスコープは外側の関数のスコープとは異なります。今回のケースでは、 86 行目の `checkGuess()` 関数が実行されるまで実行されず、エラーも発生していませんでした。
4. 78 行目を見てください。以下のコードが書かれています。
- ```js
- lowOrHi.textContent = '今の予想は大きすぎです!';
- ```
+ ```js
+ lowOrHi.textContent = "今の予想は大きすぎです!";
+ ```
5. この行は `lowOrHi` 定数の `textContent` プロパティに文字列を設定しようとしていますが、`lowOrHi` 定数に適切な値が設定されていないため上手く動きません。`lowOrHi` が使用されている箇所をコードのほかの部分から探してみましょう。最初に見つかるのは 48 行目でしょう。
- ```js
- const lowOrHi = document.querySelector('lowOrHi');
- ```
+ ```js
+ const lowOrHi = document.querySelector("lowOrHi");
+ ```
6. ここでは、HTML の要素を参照する変数を作ろうとしています。この行の後ろで、値が `null` になっているか確認するため以下のコードを直後の 49 行目に追加します。
- ```js
- console.log(lowOrHi);
- ```
+ ```js
+ console.log(lowOrHi);
+ ```
- > **メモ:** [`console.log()`](/ja/docs/Web/API/Console/log) は値をコンソールに出力する、デバッグするときにとても便利な関数です。これで 48 行目で `lowOrHi` にセットしたはずの値がコンソールに出力されるでしょう。
+ > **メモ:** [`console.log()`](/ja/docs/Web/API/Console/log) は値をコンソールに出力する、デバッグするときにとても便利な関数です。これで 48 行目で `lowOrHi` にセットしたはずの値がコンソールに出力されるでしょう。
7. ファイルを保存して再度ブラウザーで読み込みます。そして `console.log()` の結果をコンソールで見てみましょう。 わかりましたね。`lowOrHi` の値は `null` でした。これで問題が 48 行目にあることがわかりました。
8. それでは何が問題となり得るか考えてみましょう。 48 行目では要素への参照を CSS セレクターを使用して取得する [`document.querySelector()`](/ja/docs/Web/API/Document/querySelector) メソッドが使用されています。ファイルの少し上のほうにある、問題となる{{htmlelement("p")}} 要素を見てみましょう。
- ```js
-
- ```
+ ```js
+
+ ```
9. ここではクラスセレクターが必要です。クラスセレクターはドット (`.`) で始まりますが、 48 行目で `querySelector()` メソッドに渡された文字列にはドットがありません。これが問題でしょう！ 48 行目の `lowOrHi` を `.lowOrHi` に変更してみてください。
10. ファイルを保存して再度読み込むと、`console.log()` の文は求めていた `
` 要素を表示しています。何とか次のエラーを潰すことができました！`console.log()` の行は削除してもいいですし、後で使うために残しておいても大丈夫です。
@@ -111,21 +111,21 @@ slug: Learn/JavaScript/First_steps/What_went_wrong
1. `randomNumber` 変数にランダムな数値が最初にセットされる場所を検索してみましょう。ゲームの開始で推測するランダムな数字を保存しようとしているのは 44 行目のあたりです。
- ```js
- let randomNumber = Math.floor(Math.random()) + 1;
- ```
+ ```js
+ let randomNumber = Math.floor(Math.random()) + 1;
+ ```
2. そして、それぞれのゲームの合間に次のランダムな数字を設定しているのは 113 行目のあたりです。
- ```js
- randomNumber = Math.floor(Math.random()) + 1;
- ```
+ ```js
+ randomNumber = Math.floor(Math.random()) + 1;
+ ```
3. これらの行が問題となるかを確認するため、`console.log()` にもう一度登場してもらいましょう。先ほどのそれぞれの行の直下に以下のコードを追加します。
- ```js
- console.log(randomNumber);
- ```
+ ```js
+ console.log(randomNumber);
+ ```
4. 保存して再度読み込んで、何度かプレイしてみましょう。コンソールに出力される `randomNumber` の値が常に 1 であることに気づきます。
@@ -134,25 +134,25 @@ slug: Learn/JavaScript/First_steps/What_went_wrong
これを直すには、この行が何をしているのか考えなければなりません。まず [`Math.random()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/random) を呼んでいます。これは 0 から 1 までのランダムな実数値を生成します。例えば 0.5675493843 などです。
```js
-Math.random()
+Math.random();
```
次に `Math.random()` の実行結果を [`Math.floor()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/floor) に渡して、一番近い整数に切り捨てています。そしてその結果に 1 を加えます。
```js
-Math.floor(Math.random()) + 1
+Math.floor(Math.random()) + 1;
```
0 から 1 のランダムな実数を切り捨てると、結果は常に 0 となり、それに 1 を加えることで常に 1 となります。ランダムな数を切り捨てる前に 100 を乗算しなければなりません。次のコードは 0 から 99 を返すでしょう。
```js
-Math.floor(Math.random()*100);
+Math.floor(Math.random() * 100);
```
さらに 1 を加えることで、1 から 100 のランダムな数字を返してくれるようになります。
```js
-Math.floor(Math.random()*100) + 1;
+Math.floor(Math.random() * 100) + 1;
```
先ほどの 2 行をそれぞれ修正してください。保存して再度読み込むと、思い通りに動くようになっているでしょう！
diff --git a/files/ja/learn/javascript/howto/index.md b/files/ja/learn/javascript/howto/index.md
index ac6bd189ab9d02..115512b7b5a150 100644
--- a/files/ja/learn/javascript/howto/index.md
+++ b/files/ja/learn/javascript/howto/index.md
@@ -42,8 +42,8 @@ JavaScript のコードが正しく動作しないので修正したい、とい
```js
function myFunction() {
- alert('This is my function.');
-};
+ alert("This is my function.");
+}
```
上記のコードで定義した関数は、例えば以下のように呼び出さないかぎり何もしません。
@@ -78,9 +78,9 @@ var myNumber = 0;
```js
var myObject = {
- name : 'Chris',
- age : 38
-}
+ name: "Chris",
+ age: 38,
+};
```
## 基本的な定義
diff --git a/files/ja/learn/javascript/objects/basics/index.md b/files/ja/learn/javascript/objects/basics/index.md
index ea4977f1d6e82b..5c3b63ebae099e 100644
--- a/files/ja/learn/javascript/objects/basics/index.md
+++ b/files/ja/learn/javascript/objects/basics/index.md
@@ -170,8 +170,8 @@ name.last;
次のように[ドット記法](#ドット記法)を使用する代わりに、
```js
-person.age
-person.name.first
+person.age;
+person.name.first;
```
角括弧を使用して次のようにすることができます。
diff --git a/files/ja/learn/javascript/objects/classes_in_javascript/index.md b/files/ja/learn/javascript/objects/classes_in_javascript/index.md
index 01f1e265b9995a..609db66cac03ef 100644
--- a/files/ja/learn/javascript/objects/classes_in_javascript/index.md
+++ b/files/ja/learn/javascript/objects/classes_in_javascript/index.md
@@ -40,7 +40,6 @@ l10n:
```js
class Person {
-
name;
constructor(name) {
@@ -50,7 +49,6 @@ class Person {
introduceSelf() {
console.log(`Hi! I'm ${this.name}`);
}
-
}
```
@@ -74,7 +72,7 @@ class Person {
上記のクラス宣言コードを指定された場合、次のように新しい `Person` インスタンスを作成して使用することができます。
```js
-const giles = new Person('Giles');
+const giles = new Person("Giles");
giles.introduceSelf(); // Hi! I'm Giles
```
@@ -87,11 +85,9 @@ giles.introduceSelf(); // Hi! I'm Giles
```js
class Animal {
-
sleep() {
- console.log('zzzzzzz');
+ console.log("zzzzzzz");
}
-
}
const spot = new Animal();
@@ -105,7 +101,6 @@ spot.sleep(); // 'zzzzzzz'
```js
class Professor extends Person {
-
teaches;
constructor(name, teaches) {
@@ -114,14 +109,15 @@ class Professor extends Person {
}
introduceSelf() {
- console.log(`My name is ${this.name}, and I will be your ${this.teaches} professor.`);
+ console.log(
+ `My name is ${this.name}, and I will be your ${this.teaches} professor.`,
+ );
}
grade(paper) {
const grade = Math.floor(Math.random() * (5 - 1) + 1);
console.log(grade);
}
-
}
```
@@ -138,10 +134,10 @@ class Professor extends Person {
この宣言により、これで教授を作成し、使用することができるようになりました。
```js
-const walsh = new Professor('Walsh', 'Psychology');
-walsh.introduceSelf(); // 'My name is Walsh, and I will be your Psychology professor'
+const walsh = new Professor("Walsh", "Psychology");
+walsh.introduceSelf(); // 'My name is Walsh, and I will be your Psychology professor'
-walsh.grade('my paper'); // some random grade
+walsh.grade("my paper"); // some random grade
```
## カプセル化
@@ -152,7 +148,6 @@ walsh.grade('my paper'); // some random grade
```js
class Student extends Person {
-
#year;
constructor(name, year) {
@@ -160,7 +155,6 @@ class Student extends Person {
this.#year = year;
}
-
introduceSelf() {
console.log(`Hi! I'm ${this.name}, and I'm in year ${this.#year}.`);
}
@@ -168,14 +162,13 @@ class Student extends Person {
canStudyArchery() {
return this.#year > 1;
}
-
}
```
このクラス宣言では、`#year` は [プライベートデータプロパティ](/ja/docs/Web/JavaScript/Reference/Classes/Private_class_fields)です。`Student` オブジェクトを作成し、内部で `#year` を使用することができますが、オブジェクトの外のコードが `#year` にアクセスしようとすると、ブラウザはエラーを報告します。
```js
-const summers = new Student('Summers', 2);
+const summers = new Student("Summers", 2);
summers.introduceSelf(); // Hi! I'm Summers, and I'm in year 2.
summers.canStudyArchery(); // true
@@ -196,7 +189,7 @@ class Example {
}
#somePrivateMethod() {
- console.log('You called me?');
+ console.log("You called me?");
}
}
diff --git a/files/ja/learn/javascript/objects/json/index.md b/files/ja/learn/javascript/objects/json/index.md
index a279c401b39d11..bda55eabf301d4 100644
--- a/files/ja/learn/javascript/objects/json/index.md
+++ b/files/ja/learn/javascript/objects/json/index.md
@@ -82,14 +82,14 @@ JSON 文字列はそれ自身をファイルとして格納することもでき
この文字列を JavaScript プログラムへ読み込むと（例えば、変数 `superHeroes` へ代入すると）と、 [JavaScript オブジェクトの基本](/ja/docs/Learn/JavaScript/Objects/Basics)の記事で見たのと同様に、ドットや角括弧を使ってデータへアクセスすることができます。例えば次のようになります。
```js
-superHeroes.homeTown
-superHeroes['active']
+superHeroes.homeTown;
+superHeroes["active"];
```
さらに深い階層のデータへアクセスする場合は、単純にプロパティ名や配列のインデックスを連結します。例えば、メンバーリスト中 2 番目のヒーローの 3 番目の能力を参照する場合は、以下のようにします。
```js
-superHeroes['members'][1]['powers'][2]
+superHeroes["members"][1]["powers"][2];
```
1. まず、変数名 `superHeroes` を指定します。
@@ -144,17 +144,11 @@ superHeroes['members'][1]['powers'][2]
まず、 [heroes.html](https://github.com/mdn/learning-area/blob/main/javascript/oojs/json/heroes.html) と [style.css](https://github.com/mdn/learning-area/blob/main/javascript/oojs/json/style.css) のコピーをローカルに作成してください。後者は例題ページをスタイリングするための CSS であり、前者は簡単な HTML です。加えて、{{HTMLElement("script")}} 要素で、この演習で書くJavaScriptコードを格納します。
```html
-
+
-
-
-
+
```
JSON データは GitHub の で利用できます。
@@ -169,8 +163,8 @@ JSON データは GitHub の