【JavaScript】JS基礎

はじめに

Reactで開発するにあたり、JavaScriptの頻出機能にフォーカスを当てて記事に落とします。
モダンJavaScriptの基礎を理解しているのとしていないのではReactなどの習得のスピードが全然変わると思います！

変数宣言

まず従来のJavaScriptでは変数の宣言にvarを用いていました。
ただ、モダンJavaScriptにおいては使用されることはほとんどなくなりました。理由としては上書き可能であることや再宣言可能であるためです。
varでの変数宣言のみでは意図しないときに変数を上書きしてしまったり、再宣言してしまったりという問題点があるためES2015からconstとletという新たな変数宣言の方法が追加されました。

let

letで再宣言をすることは不可能です。ただし、letは変数を上書きすることは可能です。

// 変数定義
let var = "変数です";
console.log(var); // 変数です

// 変数の上書き
var = "変数1です";
console.log(var); // 変数1です

// 再宣言
let var = "変数2です";
console.log(var); // エラー

上書きは問題なくできますが、再宣言をするとエラーが出て再宣言はできないようになっています。
上書きしていくような変数の場合は、letを使用すると良いでしょう。

const

constは再宣言も上書きも不可能という変数宣言になります。

// 変数定義
const var = "変数です";
console.log(var); // 変数です

// 上書き
var = "変数1です";
console.log(var); // エラー

// 再宣言
const var = "変数2です";
console.log(var); // エラー

上記で確認したように、constでの変数宣言の場合、変数の上書きも再宣言も不可能なのですが、constで定義した変数であっても値を変更していくことができるものもあるので注意が必要です。下記で例を紹介します。

constで定義した変数の値を変更できる例

JavaScriptには、型という概念が存在します。文字列や数値などはプリミティブ型と呼ばれています。このデータはconstで定義した場合、上書き不可能です。しかし、配列やオブジェクト型と呼ばれるものに関してはconstで定義している場合であっても値を変更することができます。

// オブジェクト定義
const obj = {
    name: "三浦",
    age: 24
};
console.log(obj); // {name: "三浦", age: 24}

// プロパティ変更
obj.name = "工藤";
console.log(obj); // {name: "工藤", age: 24}

// プロパティ追加
obj.from = "青森";
console.log(obj); // {name: "三浦", age: 24, from: "青森"}

上記のようにconstで定義していてもオブジェクトのプロパティは変更できるということを覚えておきましょう。
基本的には、オブジェクトの定義にはconstを使用しましょう。

// 配列定義
const arr = ["三浦", "工藤"];
console.log(arr); // ["三浦", "工藤"] 

// 値変更
arr[0] = "佐藤";
console.log(arr); // ["佐藤", "工藤"]

// 値追加
arr.push("木村");
console.log(arr); // ["佐藤", "工藤", "木村"]

配列もconstで定義していても値は自由に変更できます。配列も基本的にはconstを使いましょう。

上記で確認したように、オブジェクトや配列はconstで宣言していても値を変更することができるのでReact開発においてもconstがほとんどになります。

テンプレート文字列

テンプレート文字列は、文字列の中で変数を展開する記法です。以前の書き方では、＋を用いて結合していましたが、読みづらく書くのも面倒という問題点がありました。ES2015からはテンプレート文字列を用いて簡潔に記述することができるようになりました。

// 変数
const age = 24;
const from = "青森";

// テンプレート文字列を使ってみる
const string = `私は${age}歳です。出身は${from}県です。`;
console.log(string); // 私は24歳です。出身は青森県です。

注意点として、シングルクォートではなく、　 `(バッククォート)で文字列を囲みます。バッククォートで囲んだ場合、${}で囲んだ中はJavaScriptを書くことができます。文字列の中でJavaScriptを扱うときはテンプレート文字列を使用しましょう。使用することは少ないと思いますが、、、

アロー関数

アロー関数はES2015から追加された新しい関数の記法です。従来の関数では、functionという記述の後に処理内容を記述していました。ですが、アロー関数ではfunctionを使用せず関数を定義します。

// アロー関数定義
const fnc = (name) => {
    return name;
};
console.log(fnc("三浦")); // 三浦

アロー関数には省略記法がいくつかあります。
・引数が一つの場合は（）を省略できる
・処理を一行で返却する場合は{}とreturnを省略できる

// 引数が一つの場合（）省略
const fnc = name => {
    return name;
};

// 処理を一行で返却する場合{}とreturn省略
const fnc = (num,num1) => num + num1;

実際のプロジェクトでは、コード整形ツールなどを使ってルールを統一することが多いですが、省略記法もあるということを覚えておきましょう。
React開発で使う機会が多い記述方法が、（）で囲むことで一行のようにまとめて返却する方法です。

// ()で囲んでまとめて返却
cont fnc = (num, str) => (
    {
      age: num,
      name: str
    }
);
console.log(fnc(24, "三浦")); // {age: 24, name: "三浦"}

分割代入

分割代入は、配列やオブジェクトから値を抽出するための記述方法です。まずは、分割代入を使用しない場合の処理を書いていきます。

// 分割代入を使用しない
const profile = {
    name: "三浦",
    age: 24
};
const string = `私は${profile.name}です。年齢は${profile.age}歳です。`;
console.log(string); // 私は三浦です。年齢は24歳です。

上記のように分割代入を使用しない場合、毎回profile.~と書かなければいけません。オブジェクトのプロパティが少ない場合はこれでも問題ありませんが、数が多かったりオブジェクトの名前が長いと書くのが面倒です。
そこで分割代入を使用してみます。

// 分割代入を使用する
const profile = {
    name: "三浦",
    age: 24
};

// オブジェクト分割代入
const {name, age} = profile;
const string = `私は${name}です。年齢は${age}歳です。`;
console.log(string); // 私は三浦です。年齢は24歳です。

{}を使うことでオブジェクトから一致するプロパティを取り出すことができます。プロパティの名称が合っていれば一部だけ取り出したり、順番が違っても大丈夫です。ちなみに存在しないプロパティは指定できません。
また、取り出したプロパティに別名をつける場合は、:（コロン）を使用することでその変数名で扱うことができます。

// 別名をつけて分割代入
const {name: name1, age: age1} = profile;

配列に対しても分割代入を使うことができます。

// 分割代入を使用しない
const profile = ["三浦", 24];
const string = `私の名前は${profile[0]}です。年齢は${profile[1]}歳です。`;
console.log(string); // 私の名前は三浦です。年齢は24歳です。

// 分割代入を使用
const profile = ["三浦", 24];
const [name, age] = profile;
const string = `私の名前は${name}です。年齢は${age}歳です。`;
console.log(string); // 私の名前は三浦です。年齢は24歳です。

配列の分割代入の場合、順番の入れ替えはできず、任意で設定した変数名を使用することになります。オブジェクトや配列の値を使用するときは、分割代入を用いて簡潔に記述しましょう。
分割代入において、オブジェクトと配列ではルールが少し違うのでその点は注意です。

デフォルト値の設定

デフォルト値は、分割代入時や関数の引数に使用します。デフォルト値を設定することで、値が存在しない場合の初期値を設定することができるようになります。

// 関数デフォルト値設定
const fnc = (num = 1) => {
    return num;
};

// オブジェクトデフォルト値設定
const profile = {
    name: "三浦"
};
const {age = 24} = profile;

関数の場合、引数の後ろに=でデフォルト値を設定できます。オブジェクトの場合は、分割代入時に変数名の後ろに=で設定することができます。
当たり前ですが、デフォルト値は初期値なので、値が存在する場合はそちらが優先されます。

スプレッド構文

スプレッド構文は、...ドットを三つ繋げて使用します。配列に対して使用すると、要素を順番に展開してくれます。

// 配列のスプレッド構文
const arr = [10, 20];
console.log(...arr); // 10, 20

オブジェクトの省略記法

オブジェクトには省略記法があります。設定する変数名とプロパティ名が同じ場合は省略することができるというものです。

// オブジェクト省略記法
const name = "三浦";
const age = 24;

const obj = {
    name,
    age,
};
console.log(obj); // {name: "三浦", age: 24}

三項演算子

条件　? 条件がtrueの時の処理 : 条件がfalseの時の処理という感じで?と:を使って処理を分岐させることができます。

const num = 1 > 0 ? "true" : "false";
console.log(num); // true