Hello! Uchii.code
バナー画像

【Javascript】未経験からフロントエンドエンジニアになる方法 #5

2023-09-01に公開

バナー画像

まえがき

JavaScriptは、Web開発において不可欠なプログラミング言語で、その中でも配列は非常に重要です。JavaScript配列は、複数の値を一つの変数に格納できるデータ構造です。この記事では、JavaScript配列の基本的な概念と使い方について詳しく説明します。JavaScriptで配列を作成するには、以下のように変数を定義し、それに配列を格納します。

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

このように、配列は角括弧 [ ] で囲み要素はカンマで区切ります。配列の要素にはさまざまなデータ型を含めることができます。
配列の要素にアクセスするには、要素のインデックスを指定します。インデックスは0から始まります。

const firstFruit = fruits[0]; // 最初の要素にアクセス

配列内の要素を一つずつ処理するために、ループ処理が利用されます。for ループや forEach メソッドなどがあります。

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

JavaScriptの配列は、複数の値を効率的に管理するための重要なツールです。記事本文では、さらに高度な配列操作や実用的な例を掘り下げて説明します。

1.配列のループと反復処理

1-1.forループを使用した配列の処理

JavaScriptにおいて、配列を効果的に処理する方法の一つは、forループを使用することです。forループは、配列内の各要素を繰り返し処理する際に非常に便利です。以下は、forループを使用して配列の要素を処理する基本的な方法です。

for (let i = 0; i < array.length; i++) {
  // 配列の要素に対する処理
  console.log(array[i]);
}

このコードでは、配列の要素を順番に取得し、処理を行います。ループの条件文で配列の長さを利用しているため、配列の要素数に合わせて繰り返し処理が行われます。forループを使うことで、要素の順番や条件に基づいた処理が可能になります

1-2.forEachメソッドの活用

JavaScriptでは、forEachメソッドを使用して配列を効果的に処理できます。このメソッドは、配列の各要素に対して指定した関数を実行します。以下は、forEachメソッドを使用した例です。

array.forEach(function(element) {
  // 配列の要素に対する処理
  console.log(element);
});

forEachメソッドはforループと比べてコードが簡潔で、読みやすくなります。また、コールバック関https://uchii-code.com/blog/loadmap6/数を使用するため、処理のカスタマイズが容易です。コールバック関数に関しては以下の記事でも詳しく説明されております。

1-3.mapメソッドとfilterメソッドで新しい配列を生成

mapメソッドは、元の配列の各要素に対して指定した関数を適用し、新しい配列を生成します。これは、元の配列を変更せずに変換したい場合に便利です。以下は、mapメソッドの使用例です。

array = ["りんご", "バナナ", "メロン"]

const newArray = array.map(function(element) {
  // arrayの要素1つ1つがelementとして扱われるよという意味
  return element + "ジュース"
});

console.log(newArray); //["りんごジュース", "バナナジュース", "メロンジュース"]

filterメソッドは、指定した条件に合致する要素だけを抽出して新しい配列を生成します。これは、データの絞り込みや条件に基づいた要素の選択に役立ちます。以下は、filterメソッドを使用した例です。

const filteredArray = array.filter(function(element) {
  // 条件に合致する場合、trueを返す
  return element > 5; // 例: 5より大きい要素を抽出
});

僕的にはfor文よりもmap関数を使うことのほうが多い印象です。その理由としては、map メソッドを使用することで、新しい配列を生成するプロセスが自動化され、コードがより簡潔で誤りが少なくなります。また、関数型プログラミング(Reactでは必須の考え方)のアプローチに従うことで、コードの品質と保守性が向上し、プログラミングの生産性が向上するためです。

  • 配列のループにより、複数のデータ群から順番に1つ1つのデータを取り出せる
    (データベースより大量のデータをとってきて、1つ1つ順番に表示させたい時に便利)
  • 配列のループにはforforeachmap・filterがある
  • mapメソッドがおすすめ

2.JavaScriptにおけるif文の使い方

2-1. if文の基本

JavaScriptにおけるif文は、プログラム内で条件分岐を行うための基本的な制御構造です。if文は以下の基本構文を持っています。ifの後には条件式が入り、条件が真 (true) の場合に中括弧 {} 内のコードブロックが実行されます。

例えば、次のコードは変数 name の値によって異なるメッセージを表示します。

const name = uchii;

if (name === uchii) {
  console.log("uchiiです");
} else {
  console.log("uchiiではありません");
}

このように、if文を使うことで、特定の条件が満たされるかどうかに応じて異なるアクションを実行できます

2-2. 条件の演算子

if文の条件式には、比較演算子や等価演算子を使用して条件を設定できます。以下は一般的に使用される演算子です。

  • ==:等しいかどうかを比較
  • ===:等しいかどうかを比較(型も含めて厳密に比較)
  • !=:等しくないかどうかを比較
  • !==:等しくないかどうかを比較(型も含めて厳密に比較)
  • <:より小さいかどうかを比較
  • >:より大きいかどうかを比較
  • <=:以下かどうかを比較
  • >=:以上かどうかを比較

2-3. 複数の条件

if文だけでなく、else ifを使用して複数の条件を扱うことができます。これにより、異なる条件に対して異なるアクションを実行できます。例えば、次のコードでは成績に応じて評価を表示します。

let grade = "B";

if (grade === "A") {
  console.log("優秀です");
} else if (grade === "B") {
  console.log("良いです");
} else if (grade === "C") {
  console.log("普通です");
} else {
  console.log("評価がありません");
}

2-4. 論理演算子

複雑な条件を扱う際に、論理演算子 (&&, ||, !) を使用できます。これらの演算子を使うことで、条件を組み合わせたり、条件の否定を表現したりできます。

例えば、次のコードでは年齢と成績の条件を組み合わせてメッセージを表示します。

const name = uchii;
let grade = "A";

if (name === uchii && grade === "A") {
  console.log("成人であり、優秀です");
} else {
  console.log("条件に合致しません");
}

この論理演算子もよく使用するので、必ずマスターしましょう。ちなみにreactでは以下のような使い方をします。

const [login, setLogin] = useState(true);

// loginがtrueの時だけ以下のdivタグの中身が出力されます。
<div>
  {login && "ログイン中です"}
</div>
  • && は、左辺と右辺の両方の条件が真 (true) の場合に真を返します。それ以外の場合は偽 (false) を返します。
  • || は、左辺または右辺のどちらか一方、または両方が真の場合に真を返します。両方の条件が偽の場合のみ偽を返します。
  • ! は、指定した条件を反転させます。真の条件を指定すると偽を、偽の条件を指定すると真を返します。(〜ではない時という条件を指定する際によく使います

まとめ

今回の#5ではjavascriptの配列とif文について部分について触れました。javascriptの学習方法としては、Progateもしくはドットインストール→Youtube(しまぶーのIT大学)→Udemy講座【JavaScript&CSS】ガチで学びたい人のためのWEB開発実践入門(フロントエンド編)の順番が個人的にはおすすめです。

プログラミング言語の人気オンラインコース

G e t i n T o u c h