JavaScriptのパッケージと配列メソッド：便利な機能を活用する

モジュールと相対パスを学んだ後、「パッケージ」と「配列メソッド」を学びました。これらを使うことで、プログラミングが劇的に効率化されます。

パッケージとは

パッケージは、便利なプログラムをまとめたものです。他の開発者が作った便利な機能を、自分のプログラムで利用できます。

readline-sync：コンソールで値を入力

readline-sync は、コンソールで値の入力と受け取りができるパッケージです。

import readlineSync from "readline-sync";

// 文字列の入力
const name = readlineSync.question("名前を入力してください: ");
console.log(`こんにちは、${name}さん`);

構文: readlineSync.question(質問文)

整数入力：questionInt

数値を入力する場合は、questionInt を使います。

import readlineSync from "readline-sync";

const age = readlineSync.questionInt("年齢を入力してください: ");
console.log(`あなたは${age}歳です`);

questionInt を使うと、入力された値が自動的に整数（number型）に変換されます。

配列メソッド：配列を操作する便利な機能

配列には、様々な便利なメソッドが用意されています。

pushメソッド：配列の最後に値を追加

push メソッドは、配列の最後に値を追加するメソッドです。

const fruits = ["りんご", "バナナ"];

fruits.push("オレンジ");
console.log(fruits);  // ["りんご", "バナナ", "オレンジ"]

fruits.push("メロン");
console.log(fruits);  // ["りんご", "バナナ", "オレンジ", "メロン"]

構文: 配列.push(追加する値)

forEachメソッド：すべての要素に繰り返し処理

forEach メソッドは、配列のすべての要素に対して繰り返し同じ処理を行うメソッドです。

const fruits = ["りんご", "バナナ", "オレンジ"];

fruits.forEach((fruit) => {
  console.log(`好きな果物: ${fruit}`);
});
// 好きな果物: りんご
// 好きな果物: バナナ
// 好きな果物: オレンジ

構文: 配列.forEach((要素) => { 処理 })

forEachの中身：アロー関数

forEach の () の中には、アロー関数が入っています。

fruits.forEach((fruit) => {
  console.log(fruit);
});

このアロー関数が、配列の各要素に対して実行されます。

findメソッド：条件に合う最初の要素を取り出す

find メソッドは、条件に合う1つ目の要素を取り出すメソッドです。

const numbers = [5, 12, 8, 130, 44];

const found = numbers.find((num) => {
  return num > 10;
});

console.log(found);  // 12（最初に見つかった10より大きい数）

構文: 配列.find((要素) => { return 条件式 })

条件式が true になる最初の要素が返されます。

filterメソッド：条件に合う要素を全て取り出す

filter メソッドは、条件に合う要素を全て取り出して新しい配列を作るメソッドです。

const numbers = [5, 12, 8, 130, 44];

const filtered = numbers.filter((num) => {
  return num > 10;
});

console.log(filtered);  // [12, 130, 44]（10より大きい数すべて）

構文: 配列.filter((要素) => { return 条件式 })

find は1つだけ、filter は条件に合うものすべてを返します。

findとfilterの違い

const numbers = [5, 12, 8, 130, 44];

// find：最初の1つだけ
const found = numbers.find((num) => num > 10);
console.log(found);  // 12

// filter：条件に合うもの全て
const filtered = numbers.filter((num) => num > 10);
console.log(filtered);  // [12, 130, 44]

mapメソッド：全ての要素に処理を行い新しい配列を作る

map メソッドは、全ての要素に処理を行い、新しい配列を作るメソッドです。

const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map((num) => {
  return num * 2;
});

console.log(doubled);  // [2, 4, 6, 8, 10]
console.log(numbers);  // [1, 2, 3, 4, 5]（元の配列は変わらない）

構文: 配列.map((要素) => { return 処理結果 })

元の配列は変更されず、新しい配列が作られる点がポイントです。

mapの実用例

const prices = [100, 200, 300];

// 全ての価格に消費税を加算
const taxIncluded = prices.map((price) => {
  return price * 1.1;
});

console.log(taxIncluded);  // [110, 220, 330]

配列メソッドの使い分け

メソッド用途戻り値
push要素を追加なし（元の配列を変更）
forEach全要素に処理なし
find条件に合う最初の1つ要素1つ
filter条件に合う全て新しい配列
map全要素を変換新しい配列
const numbers = [1, 2, 3, 4, 5];

// forEach：表示するだけ
numbers.forEach((num) => console.log(num));

// find：条件に合う最初の1つ
const found = numbers.find((num) => num > 3);  // 4

// filter：条件に合う全て
const filtered = numbers.filter((num) => num > 3);  // [4, 5]

// map：全要素を変換
const doubled = numbers.map((num) => num * 2);  // [2, 4, 6, 8, 10]

Pythonとの比較

処理PythonJavaScript
要素追加list.append()array.push()
全要素に処理for item in list:array.forEach()
条件で絞り込み[x for x in list if 条件]array.filter()
全要素を変換[f(x) for x in list]array.map()
# Python
numbers = [1, 2, 3, 4, 5]
doubled = [num * 2 for num in numbers]
print(doubled)  # [2, 4, 6, 8, 10]

// JavaScript
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((num) => num * 2);
console.log(doubled);  // [2, 4, 6, 8, 10]

今日の学びのポイント

  • パッケージ: 便利なプログラムのまとまり
  • readline-sync: コンソールで値を入力・受け取り
  • push: 配列の最後に値を追加
  • forEach: 全要素に繰り返し処理
  • find: 条件に合う最初の1つを取り出す
  • filter: 条件に合う全てを取り出す（新しい配列）
  • map: 全要素に処理を行い新しい配列を作る

配列メソッドを使いこなすことで、for文を使わずに簡潔で読みやすいコードを書けるようになります。次は、これらのメソッドで使われている「コールバック関数」を詳しく学びます。


コメント