公開日:2021.11.29

モダンフロント学習街道~JavaScript編~

テクログjavascript

こんにちは!今回からモダンフロント学習に着手していこうと思います!

教材はUdemyの下記講座です!

モダンJavaScriptの基礎から始める挫折しないためのReact入門https://www.udemy.com/course/modern_javascipt_react_beginner/

ちなみに弊社では福利厚生としてUdemy Businessを使用することができます!

どんどん活用していきたいところです!

はじめに

JavaScriptとは


公式ドキュメント

const、let等の変数宣言

var宣言の変数(ES2015以降非推奨)

var val1 = "var変数";

// var変数は上書き可能
val1 = "var変数を上書き";

// var変数は再宣言可能
var val1 = "var変数を再宣言";

let宣言の変数

let val2 = "let変数";
// letは上書きが可能
val2 = "let変数を上書き";

// letは再宣言不可能(NG)
let val2 = "let変数を再宣言";

const宣言の変数

const val3 = "const変数";
// const変数は上書き不可(NG)
val3 = "const変数を上書き";
// const変数は再宣言不可(NG)
const val3 = "const変数を再宣言";

// constで定義したオブジェクトはプロパティ変更が可能
const val4 = {
  name: "じゃけえ",
  age: 28,
};
val4.name = "jak";
val4.address = "Hiroshima";


// constで定義した配列はプロパティ変更が可能
const val5 = ["dog", "cat"];
val5[0] = "bird";
val5.push("monkey");

まとめ

基本的にconst宣言でOK。再代入が必要な場合のみletを使う。

テンプレート文字列 “

const name = "じゃけえ";

const age = 28;
//「私の名前はじゃけぇです。年齢は28歳です。」

// 従来の方法
const message1 = "私の名前は" + name + "です。年齢は" + age + "です。";


const message2 = `私の名前は${name}です。年齢は${age}です。`;

まとめ

変数の展開を伴う文字列は、結合を使用せずテンプレート文字列を使用することで簡潔に書くことができる。

アロー関数 =>

// 従来の関数
function func1(str) {
  return str;
}
const func1 = function (str) {
  return str;
};


// アロー関数
const func2 = (str) => {
  return str;
};
// 中の処理が単一式の場合、ブラケット({})とreturnを省略できる
const func3 = (num1, num2) => num1 + num2; 

まとめ

ES2015なら関数定義するときはアロー関数で良い。
ブラケットで囲う場合は、returnの記述が必須なので注意する。

分割代入 {}

const myProfile = {
  name: "じゃけぇ",
  age: 28
};

// オブジェクトのプロパティを都度参照する形
const message1 = `名前は${myProfile.name}です。年齢は${myProfile.age}です。`;

// 分割代入の形(オブジェクト版) myProfileオブジェクトから指定のプロパティを抜き出して変数に格納
const { name, age } = myProfile;
const message2 = `名前は${name}です。年齢は${age}です。`;

const myProfile = ["じゃけぇ", 28];
// 配列の要素を都度参照する形
const message3 = `名前は${myProfile[0]}です。年齢は${myProfile[1]}です。`;
// 分割代入の形(配列版)myProfile配列から指定の要素を抜き出して変数に格納
const [name, age] = myProfile;
const message4 = `名前は${name}です。年齢は${age}です。`;

まとめ

オブジェクトはオブジェクトで受け取り、配列は配列で受け取る。
オブジェクトの場合はプロパティ指定で受け取る。
配列の場合は順番に受け取る。

デフォルト値 =

const sayHello = (name = "ゲスト") => console.log(`こんにちは!${name}さん!`);

sayHello("じゃけぇ"); // 結果:こんにちは!じゃけぇさん!

sayHello(); // 結果:こんにちは!ゲストさん!

まとめ

関数呼び出し時に、引数が与えられなかった場合のデフォルト値を定義することができる。

スプレッド構文 …

// 配列の展開
const arr1 = [1, 2];

const sumFunc = (num1, num2) => console.log(num1 + num2);
sumFunc(arr1[0], arr1[1]); // 結果:3 
sumFunc(...arr1); // 結果:3

// まとめる
const arr2 = [1, 2, 3, 4, 5];
const [num1, num2, ...arr3] = arr2; // 結果: num1=1 num2=2 arr3=[3,4,5]

// 配列のコピー,結合
const arr4 = [10, 20];
const arr5 = [30, 40];

// 参照はコピーせず値のみコピーするパターン
const arr6 = [...arr4];
arr6[0] = 100; // arr4の要素は変動なし

// 2つ以上配列の結合 結果:[10,20,30,40]
const arr7 = [...arr4, ...arr5]; 

// 参照もコピーしてしまうパターン
const arr8 = arr4;
arr8[0] = 100; // arr4[0]の値も書き換わってしまう

まとめ

オブジェクトも処理できる。
参照までコピーすることはバグの温床となるので、配列とオブジェクトのコピーはスプレッド構文を用いて、値のみのコピーとする。
スプレッド構文は順番に処理すると覚える。

mapやfilterを使った配列の処理

const nameArr = ["田中", "山田", "じゃけぇ"];

// for文で配列を処理する
for (let index = 0; index < nameArr.length; index++) {
  console.log(`${index + 1}番目は${nameArr[index]}です。`);
}

// mapを使って配列を処理する
const nameArr2 = nameArr.map((name) => {
  return name;
});
console.log(nameArr2); // 結果:["田中", "山田", "じゃけぇ"]

// 第一引数に値、第二引数にインデックスが渡される。
nameArr.map((name, index) => console.log(`${index + 1}番目は${name}です。`));

const newNameArr = nameArr.map((name) => {
  if (name === "じゃけぇ") {
    return name;
  } else {
    return `${name}さん`;
  }
});
console.log(newNameArr); // 結果:[ '田中さん', '山田さん', 'じゃけぇ' ]

// filterを使って配列を処理する
const numArr = [1, 2, 3, 4, 5];
// 奇数の値だけ取り出す
const newNumArr = numArr.filter((num) => {
// 条件式を書いて一致するものだけ返却
  return num % 2 === 1;
});
console.log(newNumArr); // 結果:[1,3,5]

まとめ

ES2015なら基本的に配列の繰り返しにfor文は使わなくて良い。
mapは「配列をループして処理する」/「returnされた結果に基づいて新しい配列を生成する」という2つの使い方がある。
filterはある条件に一致したものだけ返却して、新しい配列を生成する関数である。

三項演算子 ? :

// ある条件 ? 条件がtrueの時 : 条件がfalseの時
const val1 = 1 < 0 ? "trueです" : "falseです";
console.log(val1); // 結果:falseです

// 数値が来た場合は3桁区切りの数値、数値以外が来た場合はエラーメッセージを設定する
const num = 1300;
const formatedNum =
  typeof num === "number" ? num.toLocaleString() : "数値を入力してください";
console.log(formatedNum); // 結果:1,300

// 関数のreturn部分に三項演算子を使用する例
const checkSum = (num1, num2) => {
  return num1 + num2 > 100 ? "100を超えています!" : "許容範囲内です";
};
console.log(checkSum(50, 40)); // 結果:許容範囲内です

まとめ

if文を簡潔に書ける。
可読性を多少犠牲にすることは認識しておく。

論理演算子 && ||

// 論理演算子の一般的な使い方
const flag1 = true;
const flag2 = true;

if (flag1 || flag2) {
  console.log("1か2はtrueになります"); // 出力されない
}

if (flag1 && flag2) {
  console.log("1も2もtrueになります"); // 出力される
}


// 論理演算子の本質を理解する
// || は左側がfalseなら右側を返す
const num = null;
const fee = num || "金額未設定です";
console.log(fee); // 結果:金額未設定です

// && は左側がtrueなら右側を返す
const num2 = 100;
const fee2 = num2 && "何か設定されました";
console.log(fee2); // 結果:何か設定されました

まとめ

論理演算子の本質は「|| は左側がfalseなら右側を返す」「&& は左側がtrueなら右側を返す」である。

おわりに

JavaScriptはES2015になってガラッと変わりましたね!

次回はReactについて学習していきたいと思います!

それでは!

この記事を書いた人

棒人間

入社年2019年

出身地東京都

業務内容開発

特技または趣味スケボー

棒人間の記事一覧へ

テクログに関する記事一覧