【JavaScript入門】アロー関数はなぜ使う？【thisの挙動についても解説】

「JavaScriptのアロー関数って書き方が奇妙でよくわからない。使うメリットもいまいち分からないしなんで皆使ってるの？」

本記事は上記のような疑問にお答えする記事となっています。

JavaScriptでアロー関数を使うメリット・理由

早速ですが結論です。

上記のツイートの通り、アロー関数を使う理由としては以下の2点です。

今回の記事では上記の内容について掘り下げていきたいと思います。

記事の信頼性

この記事は現在現役のフロントエンドエンジニアのしのが執筆しております。

アロー関数の書き方

基本的な形

const 変数名　=(引数)=>{
  //処理名
}
変数名（）;

通常の関数は色々な書き方がありますが、以下のように書きますよね。

const hello =function(){
  //処理名
}

どこが変わっているかというと、

const 変数名　=(引数)=>{

この部分ですね。functionがなくなって、右隣に「=>」このような形の記述があります。この形からアロー関数と呼ばれています。

書き方が少し奇妙な感じがして、最初の頃はしっくり来ないですよね。

なので現状は深くは考えずに「そういう書き方なんだ」くらいで最初は思っておいてもらえたらと思います。

更にアロー関数は場合によっては以下のように短く書くことが出来ます。

引数が０の場合

引数が0の場合は()の中に何も記載しないため以下のように記載できます。

()=> {
//処理
return 戻り値;
}

引数が1つの場合

さらき引数が1つの場合は()すらも無くなります。

なんだか更に奇妙な書き方にも感じますよね。でもこれでエラーが出ることはありません。

引数名　=> {
//処理
return 戻り値;
}

引数が１つで処理が１行で終わる場合

極限に書く事が無い場合は以下のように書く事が出来ます。

(引数)=>処理

一番短い書き方だとここまで短くすることが出来ます。

中々記事を読んでいてもしっくり来ないかもしれないので、ご自身で手を動かしてコードを書いてみる事で徐々に慣れていく事が出来ますよ。

上記の疑問について改めて深掘りしていきたいと思います。

関数を短く書けるため

アロー関数を使う理由の一つ目は「関数を短く書けるため」です。

通常、関数を書く場合は以下のように書きます。次は実際に処理や引数も入れて書いてみましょう。

const hello = function(name){
  console.log('Hello,' + name);
};

hello('shino');

//結果
Hello,shino

よく見る関数の形だと思います。これをアロー関数に書き直すと以下のようになります。

const hello = name =>console.log('Hello,'+name);

hello('shino');

アロー関数にするとこのように一行で書けてしまいます。「{}」も一行で書く場合は必要ありません。※二行で書く場合は必要です。

上記のように引数を入れる()さえも消せてしまうという点も驚きだと思います。

const hello = (name,name2) => {
  console.log('Hello,'+name);
  console.log('Hello,'+name2);
}
hello('shino','Taro');

ただ、上記のように関数の中の処理が２列になる場合は必ず{}が必要になるのでその点はご注意ください。

このように、記述を簡略化して関数をかける点がアロー関数の一つ目の利点です。

thisを束縛しないため

二つ目の特徴が「thisを束縛しない」ということです。

ただ、「thisを束縛しない」と言われても言葉の意味がよくわからないですよね。

と以前の私も思ってました。なのでこういう風に言い換えます。

参照するthisを固定できる。

もしくは

最初に定義した関数名を参照する。

と言い換える事が出来ます。まだあんまりしっくり来ないですね。

具体的にどういう事か見てみましょう。

let obj ={
  name:'shino',
  age:31,
  hobby:'trip',
  print:function(){
        console.log(this.name);①
        let obj2 ={
          do:function(){
            console.log(this.hobby);②
        }
    }
    obj2.do();
  }
}
obj.print();

この場合①と②のそれぞれのthisが何を参照するかというと、結果は以下となります。

shino
undefined

一つ目のthisは「shino」という値を出力しましたが、二つ目のthisは「undefined＝定義されていません」と出力されてしまいました。

なぜundefinedになるか

それでは、なぜundefinedとなるかについて詳しくご説明します。その前にthisの特性について理解しておく必要がありますので少しご説明します。

そもそもthisは「呼び出される場所で参照する対象が変わる変数」です。

ややこしいですよね。

ややこしいのでこう覚えてください。

実際にコードで見てみましょう。

let obj ={
  name:'shino',
  age:31,
  hobby:'trip',
  print:function(){
        console.log(this.name);
  }
}
obj.print();

上記の場合thisは何を指すかお分かりでしょうか。

コードを遡って一番最初に見つけるオブジェクトは、

let obj= {

上記のobjですね。

つまり、上記のコードでは、this=objとなっているため、

  print:function(){
        console.log(this.name);

このthisはつまり

  print:function(){
        console.log(obj.name);

となり、結果は

shino

となるわけですね。objのnameプロパティはshinoだからです。

では先ほどの例をもう一度見てみましょう。

let obj ={
  name:'shino',
  age:31,
  hobby:'trip',
  print:function(){
        console.log(this.name);
        let obj2 ={
          do:function(){
            console.log(this.hobby);
        }
    }
    obj2.do();
  }
}
obj.print();

この場合、二つ目のthisが最初に見つけるオブジェクトは何でしょうか。

そうですね、obj2というオブジェクトです。

2つめのthisがコードを遡って最初に見つける関数名はobj2だからです。

この場合、obj2には、「hobby」というメソッドはありませんよね。

そのため

という事がブラウザの中で起こっています。

ではアロー関数にするとどうなるのでしょうか。

アロー関数に変えてみる

let obj ={
  name:'shino',
  age:31,
  hobby:'trip',
  print:function(){
        console.log(this.name);
        let obj2 ={
          do:()=>{
            console.log(this.hobby);
        }
    }
    obj2.do();
  }
}
obj.print();

このように記述すると結果は以下のようになります。

shino
trip

ちゃんとobjのオブジェクト名を取得する事が出来、

  let obj2 ={
          do:function(){
            console.log(this.hobby);

この部分が

     let obj2 ={
          do:()=>{
            console.log(obj.hobby);

となったため、値を取得する事が出来ました。

このようにアロー関数を使う事で、呼び出す関数を一番最初の関数に固定する事ができます。

まとめ

本日はJavaScriptのアロー関数をなぜ使うのか、というポイントについて見てきました。

アロー関数を使う理由は以下でしたね。

使い慣れないうちは書き方に馴染めなかったりしますが、繰り返し色んな場面で書くことでアロー関数のメリットは感じられるようになると思います。

それではまた次の記事でお会いしましょう。