0

<nuxt-link> とto属性を使った処理で意味が理解できないコードがあったので質問させてください。

下記がnuxt-linkの箇所になります。
to属性をバインドして、to(引数1, 引数2)を渡しています。

<nuxt-link :to="to(id, id2)">
  <!-- リンクの中身 -->
</nuxt-link>
to() {
  return (id1: string, id2: string) => ({
    name: "slug1-slugId1-slug2-slugId2",
    params: {
      slugId1,
      slugId2
    }
  });
},

to(引数1, 引数2)の関数の定義のところの記述がよくわかりません。

下記は私の理解した内容を書きます。

  • まず、to()の返り値としては引数を2つ持っている関数を返す
  • アロー関数で書かれている
  • toの引数1,2は共にstringの型を持っている
  • 名前付きルートを用いてURLがslug1/1234/slug2/123のようになる

理解できてないところはアロー関数の書き方のところです。
私のアロー関数の理解ですと

(引数1, 引数2) => {
  //何かの処理
}

のように書くと思っていたのですが、

ここでは

(引数1, 引数2) => ({
  name: "slug1-slugId1-slug2-slugId2",
  params: {
    slugId1,
    slugId2
  }
})

のように書かれており、アローのすぐ後ろにある()の存在が理解できません。。

これはなぜこのように書くのでしょうか?

1 件の回答 1

1

アロー関数でreturnを省略する場合の短縮構文です。もし、()がない場合、文の列として構文解析されます。

以下のmyFunc1myFunc2は同じ返り値を提供します。

const myFunc1 = (slugId1: string, slugId2: string) => ({
  name: "slug1-slugId1-slug2-slugId2",
  params: {
    slugId1,
    slugId2,
  },
});

const myFunc2 = (slugId1: string, slugId2: string) => {
  return {
    name: "slug1-slugId1-slug2-slugId2",
    params: {
      slugId1,
      slugId2,
    },
  };
};

参考

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。