【ES6(ES2015)】React／Vueを学習する前に必要な知識

初心者さん

ReactやVue.jsを学習する前に必要な知識って何かな？

このような疑問をお持ちの方に向けて書いています。

ES6(ES2015)で追加された機能、初心者には何これ？感じる部分について紹介です。

この記事では、以下の点について理解できます。

VueやReactでもよく使う点なので、しっかり理解しておきましょう。

もともとはバックエンドのエンジニアで、ここ5年ほどはフロントエンドの開発もしているので記事の信頼度は高めです。

ES6(ES2015)とか何？

JavaScriptの仕様なんかを決めている団体みたいなもので、ES6がES2015とか呼ばれているけど、だいたい同じものと考えていいです。

個人的に団体とか派閥とかややこしいですが、この改訂で追加された機能があるので、それを紹介していきます。

let, constによる宣言

以前は「var」が利用されていましたが、「let」「const」が追加されました。それぞれに違いがあります。

varの場合は...

var v = 'vue'
var v = 'react'

console.log(v) // react

再宣言も再代入も可能。

letの場合は...

let v = 'vue'
let v = 'react' // error

let w = 'vue'
w = 'react'
console.log(w)

再宣言でエラーになります。再代入は可能です。

constの場合は...

const v = 'vue'
const v = 'react' // error

const w = 'vue'
w = 'react' // error

再宣言でエラーになります。再代入もエラーになります。

無名関数とアロー関数

JavaScriptの関数の定義でも違いがあります。

関数...

function foo(a) {
 console.log(a);
}

無名関数...

var foo = function(a, b) {
 return a + b;
}

関数名がない関数を無名関数と呼ばれます。fooが関数名になる。

アロー関数...

const foo = (a, b) => {
  return a + b;
};

「=>」を使う関数をアロー関数といいます。

const foo = (a, b) => a + b;

１行で書ける。return文、{}の省略ができます。

テンプレートリテラル

``（バッククオート）で文字列を囲み、`${変数}`で変数展開する。

const foo = 'vue'
console.log(foo + 'の学習をはじめる') // vueの学習をはじめる

const bar = 'react'
console.log(`${bar}の学習をはじめる`) // reactの学習をはじめる

テンプレートリテラルを使用すると同じように書ける。

スプレッド構文

...fooの記述みたことあるでしょうか。

const foo = ['a', 'b']
console.log(foo) // ['a', 'b']

const bar = [...foo, 'c', 'd']
console.log(bar) // ['a', 'b', 'c', 'd']

const baz = ['e', 'f'] 
console.log(['e', 'f'] )

const qux = [ ...bar, ...baz]
console.log(qux) // ['a', 'b', 'c', 'd', 'e', 'f']

const quux = bar.concat(baz)
console.log(quux) // ['a', 'b', 'c', 'd', 'e', 'f']

スプレッド構文を使うとconcat()と同じことができます。

まとめ

今回は、ReactやVueでもよく使うJavaScriptのES6(ES2015)について紹介しました。

一度読むと理解できると思います。まずはJavaScriptを理解してからReactやVue,Anglarあたりに挑戦してみてください。

フロントエンドは、JavaScriptだけでなくHTML,CSSも必要ですが、現場ではバックエンドのエンジニアがフロントエンドも実装する場合が多いです。

本格的にプログラミングの学習をしたいのであれば、個人的にはバックエンドの学習がおすすめです。

学習に躓いたら、挫折する前にメンターやプログラミングスクールなどを利用してみましょう。難しいのは最初だけです。慣れるまでが大変なのでぜひ諦めずに学習していきましょう。

今回は以上になります。