JavaScriptのアロー関数。VueやReactで使う前に理解しておく

初心者さん

アロー関数ってVueやReactでも使われるけど、いろんな書き方があってわかりにくい。

今回は、アロー関数がわかりにくいという人に向けて書いています。

アロー関数は、書き方のルールを理解すると簡単です。省略できる部分を理解するのがコツです。

▼この記事で理解できる点は以下になります。

アロー関数や無名関数、普通の関数で混乱するという方は、この記事を読んで一度整理してみてください。

JavaScriptで使われる関数【無名関数／即時関数／アロー関数】

JavaScriptでは、関数のいろんな関数の書き方があるため混乱する。

VueやReactに入る前に、JavaScriptでの使い方を理解しておくことをおすすめします。

一般的なJavaScriptの関数

一般的なJavaScriptの関数は以下のような感じで書かれることが多いですね。

functionから始まるので、関数とわかりやすい。関数名もパット見ですぐにわかります。

function sample1(a, b) {
	console.log(a + b);
  // 3
}
sample1(1, 2);

無名関数

無名関数は、以下のように書きます。

const sample2 = function(a, b) {
	console.log(a + b);
  // 3
}
sample2(1, 2);

無名関数の注意点

先に関数が定義されていないとエラーになります。

sample2(1, 2);

const sample2 = function(a, b) {
	console.log(a + b);
  // 3
}

即時関数

さらに即時関数というものがあり、その名の通り即時実行される関数です。

関数を(...)で囲んで使います。

(function (a, b) {
  console.log(a + b);
})(1, 2);

アロー関数

そして最後にアロー関数です。無名関数と少し似ていますが、functionが削除されています。さらに=>が使われています。

const sample3 = (a, b) => {
	console.log(a + b);
  // 3
}

sample3(1, 2);

次はいろんなアロー関数の書き方を整理していきます。

アロー関数の書き方

アロー関数がややこしく感じる理由は、省略できる部分が多いという点。順番に省略できる部分を紹介していきます。

普通のアロー関数

何も省略せずに書くと以下の通り。

const sample3 = (a, b) => {
  return a + b
}
sample3(1, 2);
// 3

引数が一つの場合は(...)を省略できる【アロー関数】

引数が一つの場合は、引数の(...)を省略できます。(...)がないと、引数かどうかわかりにくくなりますね。

const sample4 = a => {
  return `こんにちは${a}さん`;
}
sample4('たかはし');
// こんにちはたかはしさん

returnを省略できる【アロー関数】

{...}を(...)にし、戻り値を囲むとreturnを省略できる。

const sample5 = (a, b) => (
  a + b
)
sample5(1, 3);
// 4

こんな書き方する人は見たことないけど、戻り値の(...)を書かなくても動きます。

const sample5 = (a, b) => 
  a + b

sample5(1, 3);
// 4

一行で書ける【アロー関数】

const sample6 = (a, b) => a + b
sample6(1, 3);
// 4

引数がない場合は(...)が必要【アロー関数】

引数がない場合は、(...)を省略できません。

const sample7 = () => 'こんにちは'

sample7();
// 4

Vue/Reactで使うアロー関数

VueやReactでもアロー関数は使われますね。どんな感じかついでにサンプルコードで紹介します。

Vue/Nuxt.jsでのアロー関数

computedで引数を取ると、アロー関数を返すのでキャッシュがきかないという点を前回の記事で書いた通りですが、使うことはできます。

アロー関数はVuex(store)でよく使いますね。

<template>
  <div>
    <p>{{ sample8(1, 5) }}</p>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
    }
  },
  computed: {
    sample8() {
      return (a, b) => a + b
    } 
  }
}
</script>

関連記事

Vue/Nuxt.jsのcomputedで引数を取れる？意味ないかも

Reactでのアロー関数

Reactでもアロー関数は出てきますね。Propsで引数を受け取り、○○して返すみたいなコンポーネントを作ることがあります。

const TitleComponent = () => {
  return <h2>一覧画面</h2>
}

まとめ

今回は、Vue/Nuxt.jsやReactでも頻繁に使われるアロー関数についての記事でした。

まずはJavaScriptを学習してからVueやReactに入るのがおすすめです。