📊

JavaScript30 DAY4:Array Cardio Day 1実装を通して気になる技術をまとめる

2023/10/27に公開

JavaScript

tech

1.記事の目的

前回の続きです。

（前回の記事）

Javascript30というサイトのFUNDAMENTALSタグがついているものを確認しながら、気になる技術をまとめたいと思います。今回はDAY4:Array Cardio Day 1です。
https://javascript30.com/

タイトルの通りArray（配列）の回でした。主にメソッド紹介という感じで、前回と違って何かモノを実装したという感じではないです。

2.HTML&JS

コードです。今回はCSSなしです。
動画ではもっとエクササイズが紹介されていて、GitHubにもコードがあるのですが、今回は基礎の基礎的な部分だけ整理しました。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Array Cardio Day1</title>
</head>
<body>
  <p><em>Psst: have a look at the JavaScript Console</em></p>
  <script src="script.js"></script>
</body>
</html>

script.js


const inventors = [
  { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
  { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
  { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
  { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
  { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
  { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },
  { first: 'Max', last: 'Planck', year: 1858, passed: 1947 },
  { first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 },
  { first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 },
  { first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 },
  { first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 },
  { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
];

const people = [
  'Bernhard, Sandra', 'Bethea, Erin', 'Becker, Carl', 'Bentsen, Lloyd', 'Beckett, Samuel', 'Blake, William', 'Berger, Ric', 'Beddoes, Mick', 'Beethoven, Ludwig',
  'Belloc, Hilaire', 'Begin, Menachem', 'Bellow, Saul', 'Benchley, Robert', 'Blair, Robert', 'Benenson, Peter', 'Benjamin, Walter', 'Berlin, Irving',
  'Benn, Tony', 'Benson, Leana', 'Bent, Silas', 'Berle, Milton', 'Berry, Halle', 'Biko, Steve', 'Beck, Glenn', 'Bergman, Ingmar', 'Black, Elk', 'Berio, Luciano',
  'Berne, Eric', 'Berra, Yogi', 'Berry, Wendell', 'Bevan, Aneurin', 'Ben-Gurion, David', 'Bevel, Ken', 'Biden, Joseph', 'Bennington, Chester', 'Bierce, Ambrose',
  'Billings, Josh', 'Birrell, Augustine', 'Blair, Tony', 'Beecher, Henry', 'Biondo, Frank'
];

// 1. リストから「1500年代に生まれた発明家」のフィルタリングをする
const fifteen = inventors.filter(inventor => (inventor.year >= 1500 && inventor.year < 1600));

console.table(fifteen);

// 2.発明家の名字と名前を結合した配列を作成する
const fullNames = inventors.map(inventor => `${inventor.first} ${inventor.last}`);
console.log(fullNames);

// 3. 発明家の誕生日を古い順から新しい順にソートする
const ordered = inventors.sort(function(a, b) {
 if(a.year > b.year) {
     return 1;
   } else {
     return -1;
   }
  });

//　ワンライナーVer.
//const ordered = inventors.sort((a, b) => a.year > b.year ? 1 : -1);

console.table(ordered);

// 4. 全ての発明家は合わせて何年間生きていたか全て足す
const totalYears = inventors.reduce((total, inventor) => {
  return total + (inventor.passed - inventor.year);
}, 0);

console.log(totalYears);

3.気になったポイント

1.アロー関数

そもそもアロー関数についてきちんと確認したいなと思いました。

アロー関数式は、従来の関数式の簡潔な代替構文ですが、意味的な違いや意図的な使用上の制限もあります。

ただの関数ではなく、関数式の代替なのですね。
従来の無名関数からの置き換えの流れもMDNに記載してありました。

// 従来の無名関数
(function (a) {
return a + 100;
});
// 1. "function" という語を削除し、引数と本体の開始中括弧の間に矢印を配置する
(a) => {
return a + 100;
};
// 2. 本体の中括弧を削除と "return" という語を削除 — return は既に含まれています。
(a) => a + 100;
// 3. 引数の括弧を削除
a => a + 100;

中括弧が削除できるのは関数が直接式を返す場合だけ（処理がreturn文しかない時のみ）です。
引数の括弧が削除できるのは引数が一つの時だけ（引数なし、または2つ以上の時は括弧がいる）です。

2.Array.prototype.filter()

filterメソッドです。
条件式に対してtrue判定になる要素のみの配列を返してくれます。

配列の中から、提供された関数で実装されたテストに合格した要素のみを抽出したシャローコピーを作成します。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

const fifteen = inventors.filter(inventor => (inventor.year >= 1500 && inventor.year < 1600));

上記実装したコードのうち、inventor.year >= 1500 && inventor.year < 1600を囲む括弧は、条件式をわかりやすくするためのもので、なくても動きます。でもないと読みにくいです。（動画でもuncomfortableと言っていた）

3.console.table()

私は使ったことがありませんでした。存在だけは知っていましたが。
配列かオブジェクトを表形式でコンソールに表示してくれます。

例えば、

const numbers = ["one","two","three"];

これをconsole.log(numbers)すると、

単にこのように表示されるだけですが、console.table(numbers)すると、

こうなります。テーブルにインデックスと要素が入って、視認性が高まりますね。

5.Array.prototype.sort()

配列の要素をソートするメソッドです。
引数に比べる要素を２つ与えると、それを比べてくれます。

こんな形式が標準みたいです。

function compareFn(a, b) {
if (ある順序の基準において a は b より小さい) {
return -1;
} else if (その順序の基準において a は b より大きい) {
return 1;
}
// a は b と等しい
return 0;
}

返値については引数の項目にも記載がありますが、「aがbより小さい場合は負の値、aがbより大きい場合は正の値、等しい場合は0とします。」というのがもう決まっています。

そして、その返値によって配列の要素をソートしてくれます。
**-　aとbを比べて正の数が返ってきたら、aをbの後に並べる
**-　aとbを比べて負の数が返ってきたら、aをbの前に並べる
**-　aとbを比べて0が返ってきたら、そのままの順番を維持する

引数
compareFn 省略可
ソート順を定義する関数です。返値は、 2つの要素の相対順序を示す符号を持つ数値である必要があります。 a が b より小さい場合は負の値、a が b より大きい場合は正の値、等しい場合は 0 とします。 NaN は 0 として扱われます。この関数は次の引数で呼び出されます。
a
比較する第一要素。 undefined になることはありません。
b
比較する第二要素。 undefined になることはありません。

6.条件（三項）演算子

if文をワンラインで書く方法として、条件（三項）演算子が紹介されていました。

私は初めて知った時に三項演算子として覚えたのですが、世間的にはどっちで呼ばれているんだろう。

a.year > b.year ? 1 : -1

これは下記のif文の書き換えで条件式 ? 条件式がtrueの処理　: 条件式がfalseの処理となっています。

 if(a.year > b.year) {
     return 1;
   } else {
     return -1;
   }
  }

今回のように複雑な処理がない場合は三項演算子が便利だと思いますが、処理が複雑なときはわかりにくくなる気がします。

7.Array.prototype.reduce()

配列の要素の左から右にメソッド内の関数を適用していって、最終的に単一の値を返すメソッドです。個人的には一番わかりにくい気がしています。
初心者向けの講座で、要素を全て足し合わせることができるよと紹介されているイメージです。

ユーザーが提供した「縮小」コールバック関数を呼び出します。その際、直前の要素における計算結果の返値を渡します。配列のすべての要素に対して縮小関数を実行した結果が単一の値が最終結果になります。

array.reduce((累積値, 新たな要素) => {
  return 累積値 + 新たな要素
}, 初期値);

このような形をよく見かけるかなと思っています。
最初は累積値がないので、初期値に与えられたものを累積値として計算します。

4.最後に

何とか2つ目の記事が書けて嬉しいです。
自分の知識の整理のためにも続けていきたいです。

明らかな技術的間違いなどに気づかれた方はぜひご指摘いただけるとありがたいです。