Reactの基本書式について

目的

Reactを学習していくにあたり、よく用いられるJavaScriptの記法を押さえておくことで内容の理解をスムーズに行えるようにする。

const、letでの変数宣言

従来のJavaScriptでの変数宣言はvarを用いていました。

var foo = "bar";

特徴として上書き可能、再宣言可能であるということです。

var foo = "bar";
console.log(foo);   //  bar

// 上書き
foo = "barを上書き";
console.log(foo);  // barを上書き

// 再宣言
var foo = "barを再宣言"
console.log(foo);   // barを再宣言

上記の例はエラーを出すことなく実行されます。 しかし、上書き可能、再宣言可能というのはプロジェクトの規模が大きくなると意図せず起こしてしまうことがあるのでES2015では新たな変数宣言の方法として constとletが追加されました。

letでの変数宣言

let foo = "bar";
console.log(foo);   // bar

書き方はvarと同じです。上書き可能、再宣言は不可能であるという特徴があります。

constでの変数宣言

const foo = "bar";
console.log(foo);  // bar

これも書き方はvarと同じです。上書き、再宣言ともに不可能という特徴があります。

上記でconstは上書き不可能と述べましたが変数の種類によっては値を変更していくことが可能です。
変更可能な変数 オブジェクト型
・オブジェクト
・配列
・関数
など

変更不可能な変数 プリミティブ型
・真偽値（boolean）:true/false
・数値(number) :1,19
・文字列(string) :"あいうえお"
・null :値なし
など

//オブジェクトを定義
const foo = {
    name: "織田",
    age: 50,
};
console.log(foo); // {name: "織田", age: 50}

foo.name = "豊臣";
console.log(foo); // {name: "豊臣", age: 50}   
プロパティ値が変更できている

foo.address = "日本";
console.log(foo); //{name: "豊臣", age: 50, address: "日本"} 
プロパティが追加できている

React開発で使用するのはconstがほとんど。Stateで管理せず処理の中で値を上書きしていくような変数のみletを使うとのことです。

テンプレート文字列

文字列の中で変数を展開するための記法です。
従来は以下のように+を用いていました。

const name = "織田";

const animal = "犬";

//文字列の中で変数を用いる。
const message = "私の名前は"+ name +"です。好きな動物は"+ animal +"です。";

console.log(message); // 私の名前は織田です。好きな動物は犬です。

これをテンプレート記法を用いると以下となります。

const message = `私の名前は${name}です。好きな動物は${animal}です。`;

// 結果は従来のものと同じになります。

注意点としてテンプレート文字列を使用する場合は「`（バッククォート）」で文字列を囲みます。

アロー関数

//従来の関数記法(functionを用いる)
function foo(value) {
  return  value;
}

console.log(foo("barです"));  // barです

これをアロー関数で表記すると以下のようになります。

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

console.log(foo("barです")); //barです

アロー関数の書き方にはいくつか省略記法があります。
省略記法1

// 引数が1つのときは()を省略できる
const foo = value => {
  return value;
};

console.log(foo("barです")); // barです

//引数が2つ以上の時は()をつけないといけません。

省略記法2

//処理を単一行で返却する場合は波カッコ{}とreturnを省略できる
const foo = (num1, num2) => num1 - num2;

console.log(foo(23,10));  // 13

また、返却値が複数行に及ぶ場合には()で囲むことで単一行のようにまとめて返却することができます。これで先程のreturnを省略できます。

const foo = (val1, val2) => (
  {
   name: val1,
   address: val2,
  }
)

console.log(foo("織田", "日本")); // {name: "織田", address: "日本"}

これらは今後Reactの中で良く出てきます。基本形だけでなく省略形も覚えておくことで関数を表していることをすぐに理解できるようにします。

分割代入{} []

通常、オブジェクトから値を抽出する際は以下のように行います。

const book = {
  title: "Reactの教科書",
  price: 1800,
};

const introduction = `この本のタイトルは${book.title}です。価格は${book.price}円です。`;
console.log(introduction); //この本のタイトルはReactの教科書です。価格は1800円です。

このように基本は変数名.プロパティと書いて値を抽出します。しかし変数名が長いと毎回このように書くのは大変です。その時に分割代入を用いて出力する方法があります。

const book = {
  title: "Reactの教科書",
  price: 1800,
};

//オブジェクトの分割代入
const { title, price } = book;

const introduction = `この本のタイトルは${title}です。価格は${price}円です。`;
console.log(introduction); //この本のタイトルはReactの教科書です。価格は1800円です。

このように{}を変数宣言部に使用することでオブジェクト内から一致するプロパティを抽出することができます。
また

const { price } = book;

のように一部を取り出すのでも大丈夫です。

配列の分割代入の場合は以下のように行います。

const book = ["Reactの教科書", 1800];

//配列の分割代入
const [title, price] = book;
const introduction = `この本のタイトルは${title}です。価格は${price}円です。`;
console.log(introduction); //この本のタイトルはReactの教科書です。価格は1800円です。

デフォルト値　=

デフォルト値の設定は、関数の引数やオブジェクトの分割代入時に使用して、値が存在しない場合の初期値を設定することが可能になります。
まずは関数の引数についてです。

//デフォルト値を使わない場合(実行時に引数を渡さなかった場合
const book = (title) => console.log(`この本のタイトルは${title}です。`);

book(); //この本のタイトルはundefinedです。

このように引数を指定しなかった場合undefinedが挿入されます。
ではデフォルト値を設定するとどうなるでしょうか。

const book = (title = "匿名") => console.log(`この本のタイトルは${title}です。`);

book(); //この本のタイトルは匿名です。
book("Reactの教科書"); //この本のタイトルはReactの教科書です。

引数の後ろに=で値を記述することでデフォルト値を使用できます。引数を指定しない場合はデフォルト値が入り、引数を指定した場合はその値が入っているのがわかると思います。
次に分割代入時のデフォルト値設定する場合です

const myProfile = {
  age : 19,
}
const { name: "ゲスト" } = myProfile;
const message = `ようこそ、${name}さん。`;
console.log(message); //ようこそ、ゲストさん。

このように変数名の後ろに=で値を設定しておくとプロパティが存在しない場合に設定する値を指定できます。

スプレット構文 ...

スプレット構文は「...」という形でドットを3つ配列の前におくことで使用できます。これで配列内部の要素を順番に展開します。
例

const arr1 = [1, 2];
console.log(arr1); // [1,2]
console.log(...arr1); // 1  2

またスプレット構文には要素をまとめるという使い方もできます。
例

const arr1 = [2,4,6,8,10];

//分割代入時に残りを「まとめる」
const [num1, num2, ...arr2] = arr1

console.log(num1); // 2
console.log(num2); // 4
console.log(arr2); // [6,8,10]

これらを生かして要素のコピー、結合を行うこともできます。
例

const arr1 = [1, 2];

//スプレット構文でコピー
const arr2 = [... arr1];

console.log(arr1); // [1, 2]
console.log(arr2); // [1, 2]

このように簡単にコピーすることができました。
結合についても以下のようにできます。

const arr1 = [1,2];
const arr2 = [3,4];

//スプレット構文で結合
const arr3 =[...arr1, ...arr2];

console.log(arr3); //[1,2,3,4]

map, filter

この2つは配列の処理で使います。
まずはmap関数から見ていきます。map関数は配列を順番に処理してその結果を配列として受け取るものです。

//配列を定義
const foo = ["織田", "豊臣", "徳川"];

//引数(name)に配列の値が設定される。returnで返却する。
const bar = foo.map((name) => {
  return name;
});

console.log(bar); // ["織田", "豊臣", "徳川"]

このように配列.map()とすることでnameのところに配列の値が順に入っていきます。上記の例だとreturn name;なので、順番に入れた配列の値がそのまま返却されます。

次はfilter関数についてです。
filter関数はmap関数とほとんど使い方が同じですが、returnの後に条件式を記述して一致するもののみが返却される関数となる点が異なります。
例（配列から偶数のみを取り出す）

const numArr = [1,2,3,4,5];

const newNumArr = foo.filter((num)=>{
  return num % 2 === 0;
});

console.log(newNumArr); // [2,4]

このように「配列の中から特定の条件に一致するもののみを取り出して処理したい」場合にはfilter関数を使うようにします。

三項演算子　:

三項演算子はif ~ else ~文と同じ意味合いですが簡潔に書けるので使い分けて用います。
基本書式は

ある条件?  条件がtrueの時の処理  :  条件がfalseの時の処理

というように「?」と「:」を使って処理を分岐させます。
例

const checkSumOver500 = (num1, num2) => {
  return num1 + num2 > 500  ?  "500を超えています"   :   "500以下です";
  }

console.log(checkSumOver500(300, 400));  // 500を超えています
console.log(checkSumOver500(100, 200));  //  500以下です

このように簡単に分岐処理を書くことができます。

今後Reactの学習を進めるにあたりこれらの書式は欠かすことのできない知識なのでまとめました。

参考図書： www.sbcr.jp