

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

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

[code]

    <nuxt-link :to="to(id, id2)">
      <!-- リンクの中身 -->
    </nuxt-link>
    
[/code]

[code]

    to() {
      return (id1: string, id2: string) => ({
        name: "slug1-slugId1-slug2-slugId2",
        params: {
          slugId1,
          slugId2
        }
      });
    },
    
[/code]

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

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

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

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

[code]

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

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

ここでは

[code]

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

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

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


CC BY-SA 4.0
2020-11-12T14:51:55.343
71901
2020-11-13T01:58:03.910
9542
question
javascript typescript nuxt.js
Nuxt.js（Vue.js）＋typescript で記述されたコードに理解できない部分がある


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

以下の`myFunc1`と`myFunc2`は同じ返り値を提供します。

[code]

    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,
        },
      };
    };
    
[/code]

## 参考

  * [オブジェクトリテラルを返す - MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Returning_object_literals)


CC BY-SA 4.0
2020-11-13T01:58:03.910
71909
2020-11-13T01:58:03.910
7997
71901
answer