【デイトラ学習記録】DAY10 制御構文（if文とfor文）– フロントエンド開発編

今回はJavaScriptの制御構文（if文とfor文）について学習しました。

基本的な内容は学習済みなので、複雑な処理のみ掻い摘んでキャッチアップしました。

制御構文（if文とfor文） Webアプリ開発コースフロントエンド開発編

フロントエンド領域の開発を学んでキャリアの幅を広げよう

繰り返し処理 + 条件分岐

配列のkeyを使った繰り返し処理

JavaScript

const person = {
  name: "山田太郎",
  age: 20,
  hobby: "読書",
};

for (let key in person) {
  console.log(key + "：" + person[key]);
}

// name：山田太郎
// age：20
// hobby：読書

繰り返し処理 + 特定の文字列が含む場合の処理

JavaScript

const fruits = ["りんご", "バナナ", "ぶどう", "みかん", "りんごケーキ"];

for (let fruit of fruits) {
  if (fruit.includes("りんご")) {
    console.log(fruit);
  }
}

// りんご
// りんごケーキ

if (fruit.includes("りんご")) で、文字列にりんごが含まれるかを条件分岐しています。

Web制作では、あまりこういった処理はしませんね。

いかにもプログラミングっぽさを感じます💡

オブジェジェクトの配列をfor文でループ

JavaScript

const people = [
  {
    name: "太郎",
    age: 25,
  },
  {
    name: "花子",
    age: 40,
  },
  {
    name: "二郎",
    age: 20,
  },
];

for (let person of people) {
  console.log(person.name + "さんは" + person.age + "歳です");
}

// 太郎さんは25歳です
// 花子さんは40歳です
// 二郎さんは20歳です

特定の条件下で表示

25歳以上の方のみに絞って表示する。

JavaScript

const people = [
  {
    name: "太郎",
    age: 25,
  },
  {
    name: "花子",
    age: 40,
  },
  {
    name: "二郎",
    age: 20,
  },
];

for (let person of people) {
  if (person.age >= 25) {
    console.log(person.name + "さんは" + person.age + "歳です");
  }
}

2次元配列とネストした二重の配列ループ

JavaScript

const zoo = [
  [
    { species: "ライオン", habitat: "サバンナ", food: "肉" },
    { species: "ゾウ", habitat: "ジャングル", food: "草" },
  ],
  [
    { species: "キリン", habitat: "草原", food: "葉っぱ" },
    { species: "トラ", habitat: "ジャングル", food: "肉" },
  ],
];

for (let i = 0; i < zoo.length; i++) {
  console.log(`${i + 1}番目の動物園 =================`);
  for (let j = 0; j < zoo[i].length; j++) {
    console.log(`種類: ${zoo[i][j].species}、`);
    console.log(`生息地: ${zoo[i][j].habitat}`);
    console.log(`食べ物: ${zoo[i][j].food}`);
    console.log("----------------------------");
  }
}

// 1番目の動物園 =================
// ----------------------------
// 種類: ライオン、
// 生息地: サバンナ
// 食べ物: 肉
// ----------------------------
// 種類: ゾウ、
// 生息地: ジャングル
// 食べ物: 草
// 2番目の動物園 =================
// ----------------------------
// 種類: キリン、
// 生息地: 草原
// 食べ物: 葉っぱ
// ----------------------------
// 種類: トラ、
// 生息地: ジャングル
// 食べ物: 肉

感想

子供のような感想ですが、頭の体操をしながらパズルゲームみたいで楽しかったです。

Web制作だとある程度お決まりの処理を使う程度で済みますが、本日学習した内容は、よりプログラミングをしている感じがしました。
なるほどー！こうやって様々なデータを扱うのか💡といった新しい発見があり、JS力が向上した気がします。