モダンJavaScript のお勉強
こんにちは!
オアシステクノロジーズの山本です。
バックエンド側で仕事がメインだったため、画面とかUIとかめっぽう弱いことを痛感しています。。。
触ったのはjQueryとかの時代で、いい加減、Vue.jsとかReactとかモダンなWebフレームワーク
を勉強しないといけないなと思っています。
ということで、Reactを勉強してみようと思いたったのですが、Reactを勉強する前に
JavaScriptのコードが読めない!?ということに気づきました。
なんだこの文法は?と原始人が未来に飛ばされてきたような気持ちになりました。
ということで、モダンなJavaScriptの文法について簡単にまとめていきたいと思います。
目次
- 変数宣言
- アロー関数
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についても再度整理したい)
まとめ
とりあえず、変数宣言とアロー関数の基本的なところをまとめてみました。
分かってしまえばなんてことないのですが、意識せず読み込めるようになるために、
基本は大事だなと痛感しています。。。
引き続き、分割代入だったり、スプレッド構文だったり、記事にまとめながら勉強していきたいと思います!
Discussion