Reactの勉強を進めていく中で、さまざまな関数の書き方や使い方がでてきました。それらを一通り理解していないとコードが読めないと感じたのでJavaScriptの関数の書き方についてまとめたいと思います。
私自身プログラミング初心者ですので、同じ初心者の方に参考になれば幸いです。
基本的な書き方
function 関数 (引数){
実行する処理
}関数は「function」「 関数の名前」「引数」の３つの要素でできています。
「function」 は、関数を作るときのキーワードです。
そして、その後に「関数の名前」を用意します。
「引数」は、関数が必要とする値を渡すためのものです。引数はいくつでも用意できます。2つ以上の引数を用意したい場合は、それぞれをカンマ記号でつなげて書きます。また特に値を渡す必要がなければ引数は用意しなくてもかまいません。ただし、その場合も（）だけつけておきます。
function intoroduction(name){
return "こんにちは" + name + "です"
}
const a = introduction("太郎")
console.log(a) //出力結果「こんにちは太郎です」変数に関数を入れる書き方
const 変数 = function (引数) {
実行する処理
}関数は、値として変数に入れて利用することもできます。
const introduction = function(name){
return "こんにちは" + name + "です"
}
console.log(introduction) //出力結果「こんにちは太郎です」アロー関数
関数の中には、関数名を持たず、その場で利用するだけのものもある。それがアロー関数と呼ばれるものになります。
アロー関数は以下のように書きます。
(引数) =>{
実行する処理
}
//引数が１つしかない場合、()を省略可能
引数 =>{
実行する処理
}
//中身が1行の場合、returnを省略可能
(引数) =>{
実行する処理
}アロー関数は、関数を引数に関数を使うような場合にもちいられます。
特にReactでは、「関数の引数に関数を用意する」といったことがよくあります。こうした場合に、アロー関数は多用されます。
関数を引数にするということは
function hello(greet , name){
return ( greet(name) + 'です')
}
const a = hello((name) => {return 'こんにちは' + name ;},'太郎') //第一引数にアロー関数、第二引数に文字列。
console.log(a) //出力結果「こんにちは太郎です」
//returnを別に書かなくてもいい。
const b = hello((name) => 'こんばんわ' + name ,'太郎') // 第一引数にアロー関数、第二引数に文字列。
console.log(b) //出力結果「こんばんわ太郎です」補足：合成イベント
reactの学習を進めていると以下のようなアロー関数をよく見かけます。
この引数(e)または(event)となっているものがよくわからなかったのですこしまとめます。
const doChange = (e) => {
//実行処理
}
<input type="text" onChange={doChange} />イベントが発生すると合成イベントというreact特有のイベントハンドラをラップした引数が入ります。
react特有の処理であるから難しく感じますが、裏側で処理されるものとして考えればいいのではと思っています。違えばご指摘お願いします。
コメント