【JavaScript】 アロー関数とは？

アロー関数とは、矢印(=>)を使って、今まで書いていたfunction関数よりも短い記述で同様の関数を定義できるJavascriptの最新のメソッド定義方法です。

1
2
3
4
5
beforeFunction = function helloworld() {
  console.log('helloworld')
}

beforeFunction()

1
2
3
4
5
let afterFunction = () => {
   console.log('after_hello_world') 
}

afterFunction()

アロー関数の定義方法

リンクをコピーしました

今まではJavaScriptで関数を定義するときは以下のようにして定義していたと思います。

1
2
3
4
5
beforeFunction = function helloworld() {
  console.log('helloworld')
}

beforeFunction()

ただアロー関数を使うと以下のように短く定義することも可能です。

1
2
3
4
5
let afterFunction = () => {
   console.log('after_hello_world') 
}

afterFunction()

さらに引数が一つだけの場合は

1
2
let afterFunction = hello => console.log(hello);
let afterFunction = y => console.log(y);

関数の中身が一文の場合は{}も省略することができます。

functionという古い書き方は無駄に文字数を取ってしまうので、最新のversionのアロー関数では、短い書き方で出来ます。

functionに慣れていた方は、アロー関数に移行していきましょう。

今パソコンでこのサイトを見ている方は 「Ctrl + Shift + I(Windows)」、「Command + Option + I(Mac)」と同時にボタンを押してみましょう。
するとパソコンのコンソールという画面が開けてそこで、上に書いたアロー関数をすぐに実践できます！

よく分からないという人は下に動画も載せているんで、この動画と一緒に打っていきましょう。

実際に打って動作をみると、読んでるだけじゃ分からくても分かるようになることが多いので、ぜひ実践してみてください！

▼ 手元に置いておきたい１冊！JavaScriptについて基本的な文法から高度な使い方まで広範な内容をカバーして丁寧に解説しています。

初めてのJavaScript 第3版

ECMAScript 2015(ES2015)の入門書！

楽天市場

Amazon

役に立ったらSHARE♪

• twitter
• facebook
• はてブ