JavaScript超入門：中学生でもわかるアロー関数の使い方

programming
DMM WEBCAMP

こんにちは、フローです。

JavaScriptはやっぱり難しいと思う人が多いので、

今回から「中学生でもわかる」シリーズとして書いていきたいと思います。

一緒に勉強していきましょう！

JavaScriptの「アロー関数」について解説していきます。

そもそも関数（function）とは？

プログラミングの世界では、

何か特定の「仕事」をするための手順を

「関数」（function）と呼びます。

例えば、

「こんにちは、太郎さん」

と挨拶する仕事をする関数を作るとします。

function greet(name) {
    return "Hello, " + name;
}

console.log(greet("太郎"));  // "Hello, 太郎"

上記のコードでは、

greetという名前の関数を作りました。

name（括弧の中に書かれている部分）は「引数」（argument）と呼ばれ、

関数が仕事をするために必要な情報を指します。

この場合、誰に挨拶するのかという情報をnameで受け取っています。

returnというのは、

「結果を返す」という意味で、

この関数の結果として”Hello, “という文字と、

nameの中身をくっつけたものを出しています。

console.log(greet("太郎"));という行は、

「greet関数に”太郎”という名前を渡して、結果をコンソールに表示する」

という仕事をしています。

結果は、”Hello, 太郎”と表示されます。

アロー関数の使い方

それでは、次に「アロー関数」について見ていきましょう。

アロー関数とは、

上記で見た通常の関数をもっとシンプルに書くための方法です。

let greet = (name) => {
    return "Hello, " + name;
}

console.log(greet("太郎"));  // "Hello, 太郎"

上記のコードは、

先ほどのコードと同じ「挨拶する」という仕事をする関数ですが、

functionという単語がなくなり、

代わりに=>という新しい記号が出てきました。

これがアロー関数の特徴的な表記法です。

このlet greet = (name) => {...}という部分は、

「greetという名前の関数を作るよ！」

という意味です。

nameは引数ですね。

そして=>の右側には、関数がやるべき仕事（つまり、”Hello, “と名前をくっつけて返す）が書かれています。

アロー関数のパターン

さて、アロー関数はもっと短く書くこともできます。それを見ていきましょう。

引数が一つだけの場合、括弧を省略することができます。

let greet = name => {
    return "Hello, " + name;
}

console.log(greet("太郎"));  // "Hello, 太郎"

関数の本体が一行で、その結果を返すだけの場合、中括弧とreturnキーワードを省略できます。

let greet = name => "Hello, " + name;

console.log(greet("太郎"));  // "Hello, 太郎"

引数がない場合でも、アロー関数を使用することが可能です。この場合は、空の括弧を書きます。

let greet = () => "Hello, 太郎";

console.log(greet());  // "Hello, 太郎"

アロー関数を上手く使うと、コードを短く、シンプルに書けます。

アロー関数の注意点

ただし、アロー関数には注意点もあります。

thisの挙動

これは少し難しい話ですが、

アロー関数内部のthisは、他の関数とは異なる働きをします。

なので、thisを使う場合は、アロー関数を使うか通常の関数を使うか、

注意深く選ぶ必要があります。

argumentsオブジェクト

アロー関数内ではargumentsというものを利用することができません。

これは、関数が複数の引数を受け取る場合に使うものですが、

アロー関数では使えないので注意してください。

メソッドとしての使用

アロー関数はオブジェクトのメソッド（オブジェクトが持つ関数）として使うことが推奨されていません。

これは、thisの働きが関係しています。

まとめ

以上、JavaScriptのアロー関数についての解説を行いました。

アロー関数はコードをシンプルにし、見やすくします。

しかし、その特性を理解し、適切に使用することが大切です。

これからJavaScriptを学んでいく皆さんの一助となれば幸いです。

レッツチャレンジ！