Java Scriptの基本その7　arrayの基本

2024年7月18日 22:08

イントロダクション

JavaScriptの配列操作について解説します。配列の基本操作として、要素の追加、削除、検索を紹介しました。また、関数を使って定年までの年数を計算し、その結果を配列に含める方法も説明しました。さらに、条件付き処理と関数を組み合わせることで、特定の数値が配列に含まれているかどうかを確認し、含まれていない場合は配列に追加する方法も学びました。これらの技術を使うことで、より効率的なJavaScriptのコーディングが可能になります。

1. 配列の基本操作

まずは、配列の基本操作について解説します。このコードでは、友達リストや数値リストを作成し、さまざまな方法で操作しています。

"use strict";
const friendList = ["John", "Kenny", "Roger", "Mike"];
const numList = [1, 2, 3, 4, 5];
const newfriendList = new Array("John", "Kenny", "Roger", "Mike");

console.log(friendList);
console.log(numList);
console.log(newfriendList);

console.log(friendList[0]);
console.log(friendList[2]);
console.log(friendList.length);
console.log(friendList[friendList.length - 1]);

//友達を入れ替える
friendList[2] = "Tony";
console.log(friendList);

解説

"use strict"; は厳密モードを有効にし、より厳しいエラーチェックを行います。
const friendList は友達の名前を含む配列です。const numList は数値のリスト、const newfriendList は new Array を使って友達リストを作成しています。
console.log(friendList); などの console.log は配列やその要素をコンソールに表示するために使います。
friendList[0] は配列の最初の要素を示し、friendList[2] は3番目の要素を示します。
friendList.length は配列の長さを示し、friendList[friendList.length - 1] は配列の最後の要素を示します。
friendList[2] = "Tony"; では、配列の3番目の要素を"Roger"から"Tony"に変更しています。

2. 配列と関数の組み合わせ

次に、配列にさまざまなデータを格納し、関数を使って計算結果を配列に含める方法を紹介します。

//Arrayには様々なデータを入れる事ができる。
const currentYear = 2024;
const birthYear = 1970;
const retirementAge = 65;

const calcRetirement = function (inputCurrentYear, inputBirthYear) {
  const retirementYear = inputBirthYear + retirementAge - inputCurrentYear;
  return `あと${retirementYear}年働きます`;
};

const myData = [
  "田中太郎",
  `${currentYear - birthYear}歳`,
  1234567,
  friendList,
  calcRetirement(currentYear, birthYear),
];

console.log(myData);

解説

const currentYear は現在の年を示します。const birthYear は生年、const retirementAge は定年年齢です。
const calcRetirement は定年までの年数を計算する関数です。この関数は引数として現在の年と生年を取り、計算結果を返します。
const myData は名前、年齢、識別番号、友達リスト、定年までの年数など、さまざまなデータを含む配列を作成しています。
console.log(myData); で、配列の内容を表示します。

3. 配列の制御

次に、配列の要素を追加、削除、検索する方法を紹介します。

// Arrayの制御
const pokemonCollection = ["ピカチュウ", "カイリュー", "ヤドラン", "ピジョン"];
console.log(pokemonCollection);
//加える
pokemonCollection.push("コダック");
console.log(pokemonCollection);
pokemonCollection.unshift("コラッタ");
console.log(pokemonCollection);
//外す
pokemonCollection.pop();
console.log(pokemonCollection);
pokemonCollection.shift();
console.log(pokemonCollection);
//検索する
console.log(pokemonCollection.indexOf("ピカチュウ"));
console.log(pokemonCollection.indexOf("ライチュウ"));
console.log(pokemonCollection.includes("ピカチュウ"));
console.log(pokemonCollection.includes("ライチュウ"));

解説

const pokemonCollection はポケモンの名前を含む配列です。
pokemonCollection.push("コダック"); で配列の末尾に要素を追加します。unshift を使うと配列の先頭に要素を追加できます。
pop は配列の末尾の要素を削除し、shift は先頭の要素を削除します。
indexOf は特定の要素のインデックスを返し、存在しない場合は -1 を返します。
includes は特定の要素が配列に含まれているかどうかを確認します。

4. 条件付き処理と関数の組み合わせ

最後に、条件付き処理と関数の組み合わせについて説明します。

//if文と機能との組み合わせ
const numberArray = [1, 2, 3, 4, 5, 6, 7];
const chosenNumber = 7;
function announceLuckyNumber(inputNumber) {
  const luckyNumber =
    String(inputNumber) + String(inputNumber) + String(inputNumber);
  return console.log(
    `あなたのラッキーナンバーは${luckyNumber}。今日は良いことがありそう`
  );
}

numberArray.includes(chosenNumber)
  ? announceLuckyNumber(chosenNumber)
  : numberArray.push(chosenNumber);

console.log(numberArray);

解説

const numberArray は数値の配列です。const chosenNumber は選ばれた数値です。
function announceLuckyNumber(inputNumber) は引数として渡された数値を3回繰り返してラッキーナンバーとして表示する関数です。
numberArray.includes(chosenNumber) で、chosenNumber が numberArray に含まれているかを確認します。
含まれている場合は announceLuckyNumber を呼び出し、含まれていない場合は numberArray.push(chosenNumber) で配列に追加します。
console.log(numberArray); で最終的な配列の内容を表示します。

まとめ

以上が、配列の基本操作、配列と関数の組み合わせ、配列の制御、そして条件付き処理と関数の組み合わせについての解説です。このようにして、JavaScriptの配列を効果的に操作する方法を学ぶことができます。

Githubでも公開してるよ！

先ほどのコードはGithubで公開しているよ。
ここ見てね！