()

nextjsのアロー関数とmapメソッドの整理

#JavaScript

アロー関数とは?


function hoge(arg) {
   console.log(arg);
}

const hoge = (arg) => {
   console.log(arg);
}

どちらも引数argを受け取って出力する


上は従来のfunction()で、下はアロー関数です。アロー関数ではアロー(=>)を使っているのが特徴ですね。どちらも引数argを受け取って、そのまま出力しています。上を見ると、別にfunction()でもアロー関数でも良いじゃん!と思うかもしれませんが、実はthisの取り扱いで違いがあります。
一言でいえば、関数内におけるthisが固定されるか、されないかの違いです。

function()のthisとアロー関数のthis

//functionのthis
this.text = 'aaa';

function hoge() { 
  console.log(this.text);
}

const obj = {
  text : 'bbb',
  func : hoge,
};

const obj_2 = {
  text : 'ccc',
  func : hoge,
};

obj.func(); // => 'bbb'
obj_2.func(); // => 'ccc'


//アロー関数のthis
this.text = 'aaa';

const hoge = () => { 
  console.log(this.text);
}

const obj = {
  text : 'bbb',
  func : hoge,
};

const obj_2 = {
  text : 'ccc',
  func : hoge,
};

obj.func(); // => 'aaa'
obj_2.func(); // => 'aaa'


戻り値による書き方の違い

Nextjsではオブジェクト型の戻り値を扱うことが多い。

//戻り値がプリミティブ型
const plus1 = n => {
  return n + 1
}

//戻り値がオブジェクト型
const plus1 = n =>
  ({
    answer: n + 1
  })


map関数とは?

下記のような使い方がマジで多い。不慣れなうちはパターンで覚えてしまった方が良い。
map関数は配列の各要素に関して個別に操作を行うことができる関数、操作が行われた要素は新しい配列の要素となります。

const price = [100,500,1000]
const tax_price = price.map( (value,index) => value*1.1*index )

console.log(tax_price);
//[ 0, 550, 2200 ]



APIから取得したJSONデータを扱う際にマップとアロー関数の組み合わせ便利。

data = {
  "squadName": "Super hero squad",
  "homeTown": "Metro City",
  "formed": 2016,
  "secretBase": "Super tower",
  "active": true,
  "members": [
    {
      "name": "Molecule Man",
      "age": 29,
      "secretIdentity": "Dan Jukes",
      "powers": [
        "Radiation resistance",
        "Turning tiny",
        "Radiation blast"
      ]
    },
    {
      "name": "Madame Uppercut",
      "age": 39,
      "secretIdentity": "Jane Wilson",
      "powers": [
        "Million tonne punch",
        "Damage resistance",
        "Superhuman reflexes"
      ]
    },
    {
      "name": "Eternal Flame",
      "age": 1000000,
      "secretIdentity": "Unknown",
      "powers": [
        "Immortality",
        "Heat Immunity",
        "Inferno",
        "Teleportation",
        "Interdimensional travel"
      ]
    }
  ]
}

const namelist = data.members.map(content => content.name));
console.log(namelist)

//["Molecule Man", "Madame Uppercut", "Eternal Flame"]


配列で取り出せるため取り扱いが容易である

まとめ

本記事を書きながら既にリファクタリングした方がいいことに気づく。
コピペ構築による”まずはやってみる”精神が最重要であるとは知りつつ、カスタマイズのたびに同じようなことしている方のサイトを探すことは限界がある。

著者

Pythonデータ分析
React中心の個人開発者初級者