JavaScript

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

2021年7月22日

しの

はじめまして、しのです。 WEBデザインやプログラミング、SEO、ブログ術に関する記事を主に書いています。 ブログの月間PVは約40000PV、月間収益は5桁です。 SEOで検索上位1位を約50件獲得(2024年6月時点)。

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

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

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

早速ですが結論です。

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

・関数を短く書けるため

・thisを束縛しないため


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

記事の信頼性

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

アロー関数の書き方

では次にアロー関数の書き方について書いていきます。「そんなの知ってるよ!」という方は読み飛ばして下さいね

基本的な形

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

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

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

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

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

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

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

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

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

引数が0の場合

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

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

引数が1つの場合

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

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

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

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

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

(引数)=>処理

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

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

書き方はなんとなく分かったけどなんでアロー関数を使うの?

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

関数を短く書けるため

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

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

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');

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

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

thisを束縛しないため

二つ目の特徴が「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は「呼び出される場所で参照する対象が変わる変数」です。

・・・どういうこと?

ややこしいですよね。

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

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」というメソッドはありませんよね。

そのため

"obj2っていうオブジェクトではhobbyっていうメソッドは定義されてないよ。だからundefinedでプログラマーさんに向けて表示するね


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

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

アロー関数に変えてみる

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のアロー関数をなぜ使うのか、というポイントについて見てきました。

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

・関数を短く書けるため

・thisを束縛しないため


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

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

  • この記事を書いた人
  • 最新記事

しの

はじめまして、しのです。 WEBデザインやプログラミング、SEO、ブログ術に関する記事を主に書いています。 ブログの月間PVは約40000PV、月間収益は5桁です。 SEOで検索上位1位を約50件獲得(2024年6月時点)。

-JavaScript
-