2022年2月26日 React実践の教科書 モダンJavaScriptの機能に触れる

const letでの変数宣言

varでの変数宣言での問題点

従来は変数宣言にvarを使用していましたが問題点がありました。

• 上書きが可能であること。
• 再宣言が可能であること。

var ry1 = "ry1"
console.log(ry1); => ry1

// 上書きします。
ry1 = "ry1を上書き"
console.log(ry1); => ry1を上書き

// 再宣言します。
var ry1 = "ry1を再宣言"
console.log(ry1); => ry１を再宣言

エラーなく実行できます。

上書き可能

上書きしたい場合もあるが、無条件に上書きされてしまうという不便さがあります。

再宣言可能

全く同じ変数名で複数箇所に定義できてしまうため、プログラムの実行順序を読み解いて変数の中身の値を考慮する必要が出てくるので再宣言はできない方が良いです。

ES2015からこの問題を解決するためにlet const が誕生しました。

letでの変数宣言

• 再宣言が不可能である。
• 上書きはできる。

let ry1 = "ry1"
console.log(ry1); => ry1

// 上書きします。
ry1 = "ry1を上書き"
console.log(ry1); => ry1を上書き

// 再宣言します。
let ry1 = "ry1を再宣言"
console.log(ry1); => エラー

上書きをしていく変数の場合はletを使用していきましょう。

constでの変数宣言

• 再宣言が不可能である。
• 上書きも不可能である。

厳密な変数宣言です。プリミティブ型に対してはです。

constで変数宣言をしてもオブジェクトの中身は書き換える事ができます。

const obj = {
  name: "ryuji",
  age: 36
};
console.log(obj); => { name: 'ryuji', age: 36 }

// nameを書き換えます。
obj.name = "naoki";
console.log(obj); => { name: 'naoki', age: 36 }

objをconstで定義していますがプロパティの値は書き換えが行えています。

イメージとしては

• constで宣言したものが入れ物だとしたら中身は変えられます。
• 入れ物自体は変えられません。

今回はオブジェクトを例に出していますが配列も同様に中身の値を書き換えられます。

Reactで使用する変数宣言

• constを使用します。
• Stateで管理せず処理の中で値を上書きしていく場合のみletを使用します。

Reactを理解するためにJavaScriptをここでは学習しているため、Stateについては触れられていません。この基礎知識を今は覚えるようにしましょう。

テンプレートリテラル

バッククォーテーションで囲い${}を使用する事で以下のように使えます。

const name = "ryuji"
const age = 36

const message = `私の名前は${name}で年齢は${age}です。`
console.log(message); => 私の名前はryujiで年齢は36です。

文字列内でJavaScriptの文字列を使用するときはテンプレートリテラルを使用していくと良いでしょう。

ArrowFunction

function宣言

function ry(value) {
    return value;
}

console.log(ry("ryuji")); => ryuji

• 関数宣言をして引数を受け取った値をreturnする関数です。
• 関数名()で関数を実行できます。
• 引数に文字列”ryuji”を渡して実行しています。

また関数はファーストクラス(値として扱える)なので変数に代入することもできます。

functionキーワードを使用した関数式

const ry1 = function(value) {
    return value;
}

console.log(ry1("ryuji")); => ryuji

• 関数を変数に代入しています。
• 変数に名前があるため関数名は省略でき、無名関数を代入しています。
• 関数実行時は変数名()で関数実行できています。

結果は同じですがfunctionキーワードを使用して関数を定義していました。

ArrowFunction

const ry1 = (value) => {
    return value;
}

console.log(ry1("ryuji")); => ryuji

// 引数が一つならば引数の括弧は省略可能
const ry1 = value => {
    return value;
}

console.log(ry1("ryuji")); => ryuji

// 引数が二つ以上ならば括弧がないとエラーになります。

• (引数) ⇒ の書き方で関数式が書けます。
• 引数が一つならば括弧を省略できます。
• 引数が二つ以上ならば括弧が必要です。

処理を単一行で返す場合は{}とreturnを省略できます

const ry1 = value => value;

console.log(ry1("ryuji")); => ryuji

• ブロックを無くすことで文から式になりreturn文が不必要になります。
• 波括弧をつけると文になるのでreturnがないとエラーになります。

()をつける事で複数行を単一行として扱う

const ry1 = (value1, value2) => (
    {
      name: value1,
      age: value2
    }
   )

console.log(ry1("ryuji", 36)); => { name: 'ryuji', age: 36 }

複数行ですが()で囲うことで式として扱いreturn文を省略できています。

この書き方はReactでよく使用する記法なのでよく覚えておきましょう。

最後に

一度読んだ箇所の復習としてまとめていっています。

読んでくださった方、ありがとうございます。