Vue・Reactをやるなら知っておきたい
JavaScriptの書き方

こんにちわ、ななきです。

VueやReactの学びはじめの頃はどう書いていいかわからなかったり、どのメソッドを使うと効率がいいのかわからなかったりしたことが多くありました。

多分今学び始めてる人の中にも同様の方がいると思うのでいくつか自分が便利だと思うものをまとめたいと思います。

三項演算子

trueかfalseかで返す値を変えれる短いif文ですね

使い方は下記の様にします

 

propsにわたす値がないときにプレスホルダーを返したり、条件によってReactのコンポーネントを出し分けたりとよく使います。

スプレッド演算子

配列またはObjectをその場で展開する書き方です。

説明が難しいのでコードを読んで自分でconsoleに出力してもらうといいかもしれません

 

これだけ見るとわからないかもですけどObjectの様に別な値と結合して新しいObjectを作成したり、イミュータブルに代入するなどが出来ます。

データを扱うことが多くなると頻繁に使うので覚えて置くといいと思います。

テンプレートリテラル

文字列内で関数や変数を使用することが出来ます。

今までは文字列を結合するときは+で連結してたと思いますが、テンプレートリテラルを使うとその必要がなくなります。

 

見やすくなりましたね、どんどん使っていきましょう

map

既存の配列をもとに新たに配列を作る関数です

 

この様に戻り値から新しい配列を作成します。

配列の作成以外にReactではコンポーネント内でループさせるときになども使いますね。

typeof演算子

対象の値の型を文字列で返してくれます

対象の中身ではなく型を判断したい場合が稀によくあるのでそのときに使いますね

ちなみに配列かどうかのチェックについてはisArrayを使います

 

まとめ

頻繁に使う便利な書き方書いてきましたが、普段の作業で置き換えられるものなどありましたでしょうか?

すこしでも知るきっかけになれたなら幸いです。

Archives

MasatoChiba
Frontend Developer