Reactを開発するために知っておくべきES2015(ES6)超入門

前提

ES2015の全機能ではありません。
Reactを学ぶために知っておくべきWeb開発の知識とES2015の一部機能をできるだけわかりやすくまとめました。
(個人的見解も多くあるのでご留意ください)

Web開発知識

利用するWeb開発ツールのまとめ

パッケージマネージャー

• パッケージをインストールする際に開発者がそれぞれのPCに自由にインストールしてしまうとバージョンがバラバラになるのを防ぐ

Aさん、Bさんが自由に開発環境を構築すると、Aさんは使えるつもりでも本番環境やBさんは使えない機能がでてくるのを防ぐ

• package.jsonなどを利用することで同じ環境を容易に再現することができる

モジューラバンドラー

• 開発はファイルを分けて効率的に作業し、本番用にビルドするときに1つのファイルにまとめてくれる
• ファイルが減ることによって、読み込み回数が減ってパフォーマンスアップしてくれる
• 現在はwebpackが主流(ただし開発が終了するそうなので他のバンドルツールの利用も検討が必要)

トランスパイラ

• JavaScriptの記法をブラウザで実行できる形に変換してくれるもの
• 最新機能が追加されてもChromeでは動くが、Firefoxでは動かないみたいなやつをいい感じに補完してくれる
• Babelが主流

SPA(Single Page Application)

• 従来のMPAとは異なり、サーバーから取得するhtmlファイルは一つでそこに対してDOMを書き換えて画面遷移を実現する
• 毎回の画面更新がなくなりパフォーマンスの向上が見込める
• React, Vue, AngularJSが主流

ES2015(ES6)

Reactで頻出するES2015の機能まとめ

変数宣言

// [let]再宣言不可、値の上書き可能
let hoge = "hoge";

// OK
hoge = "hoge2";

// NG
let hoge = "hoge2";

// [const]再宣言不可、値の上書き不可
// ただしオブジェクト型は書き換えることが可能なので注意
const fuga = "fuga";

// NG
fuga = "fuga2";

個人的にはletはあまり使う必要がないと考えている
特別な理由がない限りはconst使う

テンプレート文字列

const test1 = "hoge";
const test2 = "fuga";
const test3 = `ホゲ：${test1}、フガ：${test2}`

文字列操作をわかりやすく実施
関数や計算式を入れることも可能

アロー関数

const func = value => {
  return value;
};

functionを使わずに関数の宣言ができる
React + TypeScriptだと好む人が多い書き方なのでスムーズに理解できたほうがいい
ソースがスッキリするから好き

分割代入

const hogeObject = {
  item1: "hogehoge",
  item2: "fugafuga"
};

const { item1, item2 } = hogeObject;

配列でも同じように [] を使用することが可能
スキルが低い人だと理解すらしてもらえない可能性があるが、ソースがスッキリするので積極的に使いたい

デフォルト値

const test = (hoge = "ホゲ") => console.log(`テスト${hoge}`);

他の言語やってればよくある書き方なので、割と理解しやすいと思う
利用価値はかなり高いので覚えておきたい

スプレッド構文

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

配列内部の値を順番に展開してくれる
業務アプリ作ってると配列多様は致し方なしなので、結構重宝する
配列で「=」を利用すると参照渡しになるため、値渡しを利用するため重宝する

オブジェクトの省略記法

const my = "私";
const you = "あなた";

const member = {
  my,
  you,
};

こんな感じでオブジェクトも作れるんだぐらいの認識でよいと思う

まとめ

私の意見込みなので、それを参考にするか否かは個人の判断にお任せします。
「これさえ知っておけば明日からReactマスター！」というわけではありませんが、
知っていると知らないじゃソースの理解度が大きく変わってきます。
本記事にまとめた内容だけでも覚えるようにすればかなりスムーズにReactに参画できるのではないでしょうか。