🐈
Reactでよく使うJavaScriptの記法を3つ紹介します〜
はじめに - 誰向けの記事か
JavaScriptライブラリであるReactでは、当然のことながらJavaScriptの記法が用いられます。
本記事は、「Reactの勉強を始めたが今までjQueryに頼りっぱなしだったからReactの知識以前にJavaScriptの記法がわからん」とか「そもそもJavaScriptにあまり触れたことがないけど流行ってるしReact勉強したい」みたいな人向けの記事です。
なお、執筆者である私自身がReact勉強中の身であり今までJavaScriptにあまり触れたことがなかったので、
- 初学者視点で書かれているということ
- 間違いが含まれているかもしれないこと
の二点についてはご容赦願いたい。
本記事で紹介するJavaScript記法について
本記事では、React勉強中に「よく使うな〜これ。Reactやるなら習得必須だな」と思った、以下の記法3つに絞って紹介します。
- アロー関数
- コールバック関数
- 分割代入
例示としてReactのコードを出すことがありますので、Reactの勉強をする際に参考にしていただけると幸いです。
アロー関数
function Example(//引数){
return(
//処理
);
};
を簡潔に書ける記法です。
例としては
const Example = (//引数) => {
return(
//処理
);
};
です。
さらに、この記法は場合によっては省略することもできます。
処置が1行のとき
const Example = (//引数) => //処理;
引数が1つのとき
const Example = //引数 => //処理;
引数がないとき
const Example = () => //処理;
コールバック関数
引数に関数を与えることです。
const Print = callback => {
const output = callback(3);
console.log(output);
}
const fn = num => num * 5;
Print(fn)
このように記述すると
-
Printに引数fnが与えられる。 -
output = fn(3)と処理される。 -
fnに引数3が与えられて処理される3 * 5 // 15 -
output = 15となる。 -
console.log(15)となり、コンソール上に15が出力される。
とまあ、正直今もよくわからんまま書いているんですが(コールバック関数難しくない？)、React使っていると自然と使うことがあるので、まあなんとなく慣れるかなと思います。
分割代入
文字通り、配列の値を分割して代入する記法です。
const [a,b] = [10, 20]
console.log(a); // 10
console.log(b); // 20
といった感じです。
実際にReactのコードだと
const [val, setVal] = useState( //初期値 );
みたいな使い方をします。
終わりに
本当は三項演算子とかスプレット演算子とか、よく使うものが他にもあるのですが、この手の記事は調べればゴキブリの如く湧いてくるので、勉強中に引っ掛かったら調べるぐらいの方がいいのではないかなと思います。
アロー関数だけは絶対に理解して使ってくださいね〜
参考文献
Discussion