モダンJavaScript のお勉強

こんにちは！
オアシステクノロジーズの山本です。

バックエンド側で仕事がメインだったため、画面とかUIとかめっぽう弱いことを痛感しています。。。
触ったのはjQueryとかの時代で、いい加減、Vue.jsとかReactとかモダンなWebフレームワーク
を勉強しないといけないなと思っています。

ということで、Reactを勉強してみようと思いたったのですが、Reactを勉強する前に
JavaScriptのコードが読めない！？ということに気づきました。

なんだこの文法は？と原始人が未来に飛ばされてきたような気持ちになりました。

ということで、モダンなJavaScriptの文法について簡単にまとめていきたいと思います。

目次

1. 変数宣言
2. アロー関数

1. 変数宣言

JavaScriptでは、変数宣言にvar,let,constがある。
varは、古い書き方で、let,constが新しい書き方。
Reactでは、Stateも使うので、使い分けの方針も自分なりに整理しておきたい。

var　hogehoge

上書き可能、再宣言可能

    var hogehoge = "hoge";
    var hogehoge = "fuga";　//OK

let hogege

上書き可能、再宣言不可

    let hogehoge = "hoge";
    let hogehoge = "fuga";　//NG
    hogehoge = "fuga";　//OK

const hogege

上書き、再宣言不可

    const hogehoge = "hoge";
    const hogehoge = "fuga";　//NG
    hogehoge = "fuga";　//NG    

State

Reactでは、表示データや、状態管理をStateで管理する。（Stateについても再度整理したい）

使い分けの方針

Reactでは、基本的にconstを使って変数宣言を行う。
動的に変わるものはStateに入れる。
Stateに入れず、動的に変わるものはletを使う。(ループ変数とか)

1. アロー関数

読めないというより、見なれない書き方で、
消化不良をおこしていたので、整理しておきます。

従来の関数定義

function hoge() {
    console.log("hoge");
}

hoge();

とか

const func = function(fuga) {
    console.log(fuga);
}
func("fuga");

変数に関数を設定したりとか。「function」と書かれているのが関数

アロー関数

const hoge = () => {
    console.log("hoge");
}

hoge();

const func = (fuga) => {
    console.log(fuga);
}

func("fuga");

functionという宣言ながなくなって、()で引数、=>で関数の処理を記述する。

使い分けの方針

Reactでは、基本的にアロー関数を使う。
ただし、関数の中でthisを使う場合は、従来の関数定義を使う。
※アロー関数では、thisが定義されないため。（thisについても再度整理したい）

まとめ

とりあえず、変数宣言とアロー関数の基本的なところをまとめてみました。
分かってしまえばなんてことないのですが、意識せず読み込めるようになるために、
基本は大事だなと痛感しています。。。
引き続き、分割代入だったり、スプレッド構文だったり、記事にまとめながら勉強していきたいと思います！