HOME/Articles/

Javascriptで使用されるアロー関数について

Article Outline

基本形

this.setState((prevState) =>({

  isToggleOn: !prevState.isToggleOn

}));

引数名はなんでもいい(ここではprevState)

引数が一個の場合だとカッコを省略できる

this.setState(prevState =>({

  isToggleOn: !prevState.isToggleOn

}));

一個だからできる荒技。1個以上の時はカッコをつけないとだめ。

引数をもたない場合

this.setState(() =>({

  isToggleOn: !prevState.isToggleOn

}));

()を使って表します。

Vue.jsでのアロー関数

基本形

render: function(hikisuu){
 return(hikisuu)(App);
},

アロー関数にすると

render: hikisuu => hikisuu(App),

通常のjavascriptと一緒で、functionは省略できます。 関数、引数が一個の場合は関数の{ }や引数の( )は必要ありません。 アロー関数はその場で実行する関数なので、関数で実行している内容が そのまま戻り値となります。 なので、returnも不要となります。