【React】アロー関数

Reactでは、アロー関数と呼ばれる記述方法が使用されます。

アロー関数は、JavaScriptの機能で2015年にES6とともに加わった記述方法です。
いままでよりもシンプルに関数を記述することができるメリットがあります。

通常は関数を次のように書いていました。

function App() {
return (
<div className="App">
<h2>アロー関数</h2>
</div>
);
}


export default App;

アロー関数を使うと先ほどの関数を次のように書く事ができます。

const App = () => {
return (
<div className="App">
<h2>アロー関数</h2>
</div>
);
}


export default App;

例えば三角形の面積を求める関数をアロー関数で書いてみます。
widthとheightという引数を受ける関数にします。

const triangleArea = (width, height) => {
const answer = width * height / 2;
return console.log(answer);
}


triangleArea(4, 4)

コンソールに、8と正解が表示されます。
GoogleChromeでその他のツールからデベロッパーツールを開くと、8を確認できます。

今回は以上です。
お読みいただきありがとうございました。