No.
2024-04-30
  • Jan
  • Feb
  • Mar
  • Apr
  • May
  • Jun
  • Jul
  • Aug
  • Sep
  • Oct
  • Nov
  • Dec
  • Sun
  • Mon
  • Tue
  • Wed
  • Thu
  • Fri
  • Sat
  • 27
  • 28
  • 29
  • 30
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

モダンJSの記法

1. const,letなどの変数宣言

  • 従来：varで宣言
    • 変数の上書き、再宣言ができてしまう
    • 適切な管理が難しくなるので、極力使わないこと
  • let
    • 変数の上書きは可能
    • 値が変更される可能性がある変数はletで宣言する
  • const
    • 変数の上書き、再宣言ができない(プリミティブ型のみ)
    • objectやarrayの中身(プロパティ)は上書き・追加することが可能
    • objectやarrayの宣言は基本constで行う

Reactでは

  • ほとんどconstで定義
    • varは論外
    • 動的に値が変わるものはstateで管理するため、letはほぼ使わない
// var宣言
var val1 = "var宣言";
val1 = "varは上書き可能";
let val1 = "varは再宣言もできる";


// let宣言
let val2 = "let宣言";
val2 = "letは上書き可能";
let val2 = "letは再宣言不可"; // エラー


// const宣言
const val3 = "let宣言";
val3 = "constは上書き不可"; // エラー
const val3 = "letは再宣言不可"; // エラー


// const宣言(object)
const val4 = {
    name: "hoge",
    age: 21
};
val4.name = "プロパティは上書き可能";
val4.title = "プロパティは追加可能";


// const宣言(array)
const val5 = ["dog", "cat"];
val5[0] = "プロパティは上書き可能";
val5.push("プロパティは追加可能");

2. テンプレート文字列

  • 文字列の中にJSの変数を埋め込むことができる
    • `(バッククオート)で囲む
    • 変数は$(変数名)で利用できる
const name = "Yuta";
const age = 23;

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

// テンプレート文字列
const message2 = `私の名前は$(name)です。年齢は$(age)です。`;

3. アロー関数

  • 新しい関数の定義方法
    • ()の中は引数を表す

アロー関数独自のルール

  • 引数が1つなら()省略可能
    • フォーマッタは()付きで修正してくる
  • 関数内の処理が1行で終わる場合は{return}を省略可能

Reactでは

  • オブジェクトのreturnを、({})で囲って省略記法で行う場合が頻繁にある
// 従来の方法
function func1(str){
    return str;
}
const func2 = function (str){
    return str;
}

// アロー関数
const func3 = (str) =>{
    return str;
}
const func4 = (str) => str;
const addNum = (num1, num2) => num1 + num2;

// オブジェクトの返却
const returnObj = (a, b) =>({
    name: a,
    age: b
});

4. 分割代入

  • objectやarrayに対して利用
    • arrayは前から順番に代入される
// object
const profile = {
    name: "hoge",
    age: 21
};

// テンプレート文字列
const message1 = `名前が$(profile.name)です。年齢は$(profile.age)です。`
// 分割代入
const {name, age} = profile;
const message2 = `私の名前は$(name)です。年齢は$(age)です。`;


// array
const profileArr = ["hoge", 21]

// 分割代入
const [name, age] = profileArr;
const message3 = `私の名前は$(name)です。年齢は$(age)です。`;

5. デフォルト値

  • 関数の引数、分割代入で用いる
// 関数の定義
const sayHello = (name) => console.log(`こんにちは$(name)さん`);
sayHello("Yuta"); // こんにちはYutaさん
sayHello(); // こんにちはundefinedさん

// デフォルト値を設定
const sayHello = (name = "ゲスト") => console.log(`こんにちは$(name)さん`);
sayHello("Yuta"); // こんにちはYutaさん
sayHello(); // こんにちはゲストさん

// オブジェクト
const profile ={
    age: 21
}
const {age, name} = profile;
console.log(age); // 21
console.log(name); // undefined

// デフォルト値
const {age, name = "ゲスト"} = profile;
console.log(age); // 21
console.log(name); // ゲスト

6. オブジェクトの省略記法

  • Reactでは頻繁に出る
  • オブジェクトのプロパティ名と変数名を同じにする場合、プロパティ名を省略可能
const name = "yuta";
const age = 21

// オブジェクトの定義
const profile = {
    name: name,
    age: age
};

// 省略記法
const profile = { name , age }

7.スプレッド構文

配列やオブジェクトに対して利用

  • 配列の展開
    • 関数の引数で展開することが多い
  • まとめる
  • 配列のコピー・結合

    • 一番使われる

// 配列の展開
const arr1 = [1,2];
console.log(arr1);  // (2) [1,2]
console.log(...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];
// num1とnum2のみ個別の変数として取り出し、残りをarr3という配列としてまとめて取り出す
const [num1,num2, ...arr3] = arr2;


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

// 普通に代入すると参照渡しになる
const arr6 = [...arr4];
const arr7 = [...arr4, ..arr5]; //[10,20,30,40]

8. mapやfilterを利用した配列処理

  • map
    • 配列に対して利用
    • mapの引数に関数を定義することで、繰り返し処理をforなしで実装できる
    • インデックスを使いたい場合は、関数の第二引数を使うことでできる
    • 値の追加・処理などを行う場合はmapを使う
  • filter
    • 条件を満たす値のみを取り出す
    • 特定の値を取り出したい場合はfilterを使う
// map
const nameArr = ["田中","山田","泉"];

// 従来の方法
for (let i=0; i<nameArr.length; i++){
    console.log(nameArr[i])
}

// mapを使った方法
nameArr.map((name) => console.log(name))
// インデックスを使いたい場合
nameArr.map((name, index) => console.log(`$(index)番目は$(name)です。`))

nameArr.map((name) => {
    if name === "泉"{
        console.log("ご主人様、おかえりなさいませ");
    }
    else{
        console.log(`初めまして、$(name)さん`)
    }
})

// filter
const numArr = [1,2,3,4,5];
// 奇数のみを取り出す
const oddNum = numArr.filter((num)=>{
    return num %2 === 1;
});

9. 三項演算子

  • 使いすぎると読みづらくなるので注意
  • 条件 ? 値1 : 値2という構文
    • 条件がtrueなら値1が、falseなら値2が返却される
const val1 = 1 > 2 ? "1は2より大きいです" : "1は2より小さいです"
console.log(val1) // 1は2より小さいです

10. 演算子の本当の意味

JavaScriptのTruthy,Falsyの仕組みが関係している

  •  
    • 一般には「または」のイメージ
    • 左側の値がtruthyの場合は、その時点で左側を返却する
  • &&
    • 一般には「かつ」のイメージ
    • 左側の値がfalsyの場合は、その時点で左側を返却する

Reactでは

  • &&を特によく使う
  • (例)特定の条件の時に画面表示をするなど
// ||
const num = 100;
const fee = num || "金額が入力されていません"
console.log(fee) // 100


// &&
const num2 = 1000;
const checker = num2 && "金額は入力されています"
console.log(checker) // 金額は入力されています