質問: { a: 1, b: 2, } ``` 2オブジェクトxからKeyのデータ値(a, b)を取ってくるよう設定。 ``` Object.keys(x) ``` 3配列(Object.keys(x))から要素を一つずつ取ってくるよう設定。 ``` .forEach ``` 4関数名をyとし、テンプレートリテラル(`${y}: ${x[y]}`)を出力処理するように、アロー関数を用いてテンプレートリテラルを戻り値として設定。 ``` (y => { console.log(`${y}: ${x[y]}`); }); ``` 5「(オブジェクトxのKeyのデータ値): (定数xの配列数)」をテンプレートリテラルを使って出力。 ``` console.log(`${y}: ${x[y]}`); ``` 以上です。 駄文ですが、ご指摘の程、よろしくお願いいたします。
回答: 総評としては、英語を何も知らない初心者が、 英和辞典を使いながら英文を噛み砕いて覚えようとしているみたいな印象です。 それはそれで力がつく重要な事なので続けてください。 ただし、他人に説明するならば通訳さんクラスの抽象化・理解が必要になります。 その視点で質問文をざっくりと解説するとこんな感じの文章が模範解答になるんじゃないかと思います。 > > > ``` > const x = { > a: 1, > b: 2, > } > > Object.keys(x).forEach(y => { > console.log(`${y}: ${x[y]}`); > }); > ``` > > プロパティa, bを所持する定数xを準備しておく。 定数xの各プロパティ名を`プロパティ名: プロパティ値`の対応表的な文字列に変換し、コンソール上に出力する。 ロジックとしては、 `Object.keys`を利用して定数xのプロパティ名の配列を生成する。 そのまま`.forEach`メソッドを実行して各プロパティ名から、 定数xのプロパティ値を参照してテンプレート文字列を駆使して文字列を生成。 そのままconsole.logの引数に入れて実行する。 推敲を重ねていけばもっと綺麗な日本語になるでしょうが、 こんな感じの流れの説明になるはずです。 コードは文章です。 日本語でも英語でも単語そのものを文から切り離した瞬間に意味合いが変わってしまうように、 コードも一箇所で切り出すと意味が通じなくなります。 そういう意味で今回切り出した断片的なコード辺を個別に翻訳するとこういった文章になります。 > > > ``` > const x = { > a: 1, > b: 2, > } > ``` > > 定数xを下記の2つのプロパティを所持するオブジェクトとして定義する * aプロパティ: 値1 * bプロパティ: 値2 > > > ``` > Object.keys(x) > ``` > > xのプロパティ名を抜き出し配列に変換する。 > > > ``` > .forEach > ``` > > 左辺のオブジェクトのforEachプロパティを参照する。 > > > ``` > (y => { > console.log(`${y}: ${x[y]}`); > }); > ``` > > アロー関数を定義する。 アロー関数の中身はy引数と、xオブジェクトのyプロパティにアクセスしテンプレート文字列で文字列に変換したものを画面出力する。 答え合わせ > > 1定数xに対して、「a: 1」と「b: 2」の二つのプロパティをオブジェクトとして代入。 > > > 日本語の問題で「オブジェクトとして代入」は意味不明になってます。 主体となる文章は「定数xにオブジェクトを代入」で、プロパティの説明等は修飾と捉えるべきです。 > > 2オブジェクトxからKeyのデータ値(a, b)を取ってくるよう設定。 > > > 模範解答は少々意地悪でしたね。 ですが「データ値(a, b)を取ってくる」では意味不明です。 Object.keys)は引数のオブジェクトが所持しているプロパティ名だけをピックアップして新しい配列を作るものです。 なのでコードで書けば`["a", "b"]`が戻り値として返ってきます。 これらの情報はaやbのプロパティの実際の値(1や2)が捨てられてしまっています。 なので「プロパティ名の配列に変換する」などという表現を使うべきでしょう。 > > 3配列(Object.keys(x))から要素を一つずつ取ってくるよう設定。 > > > 同じく模範解答が意地悪でしたね。 `Object.keys(x).forEach(fn)`と一息に言った場合と、 個別に区切って説明をすると全く意味合いが変わります。 JavaScriptではプロパティとメソッドは紙一重の存在です。 オブジェクトのプロパティに関数を代入した場合のみメソッドとして取り扱い、その他の値が入っている場合はプロパティと呼びます。 関数やメソッドを実行するにはお尻に丸括弧を付けることで実行が可能です。 Object.keysの実行結果はArrayに決まっているので、 決め打ちでforEachプロパティを見に行けば関数が入っている(メソッドとわかる)に決まっているのですが、 文脈をそこで切るとプロパティかメソッドかの情報がシュレディンガーの猫のように隠されてしまいます。 また.forEachは取ってくるものではありません。 「取ってくる」は戻り値を利用することを強く意識させるので表現としては不適切です。 正しくは「配列の各要素に対して、引数の関数を実行する」という意味があるので、 これを元に表現を追加して文章を作りましょう。 > > 4関数名をyとし、テンプレートリテラル(${y}: ${x[y]})を出力処理するように、アロー関数を用いてテンプレートリテラルを戻り値として設定。 > > > そこで切ってしまうと、「アロー関数の定義」の意味しか残らなくなります。 `.forEach()`で包んで、「アロー関数を定義して各配列の要素で実行」などとした方が良いでしょう。 確かにアロー関数は用いていますが、 「テンプレートリテラルを戻り値として設定」は大嘘です。 中で直接console.log実行しとるやん。 テンプレートリテラルを作成してconsole.logの引数として指定してあげてるだけです。 > > 5「(オブジェクトxのKeyのデータ値): (定数xの配列数)」をテンプレートリテラルを使って出力。 > > > 「オブジェクトxのKeyのデータ値」は駄目、これはxのプロパティ名です。 「定数xの配列数」ってなんやねん、お前1か2かの数値やろ。 また、日本語で説明したいなら目的を書いたほうが良いでしょう。 説明するべき目的は「定数xのプロパティ名、対応する値を画面表示したい」のはずです。 テンプレート文字列という言葉を使いたいだけの小学生みたいな説明文になってしまいます。 一目で分かる文章にしたければ、「文字列を作って画面出力を行う」などと簡素に書いて、 次の行で詳細に説明するなどの工夫が必要です。