すでにメンバーの場合は

無料会員登録

GitHubアカウントで登録 Pikawakaが許可なくTwitterやFacebookに投稿することはありません。

登録がまだの方はこちらから

Pikawakaにログイン

GitHubアカウントでログイン Pikawakaが許可なくTwitterやFacebookに投稿することはありません。

JavaScript

【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)」と同時にボタンを押してみましょう。
するとパソコンのコンソールという画面が開けてそこで、上に書いたアロー関数をすぐに実践できます!

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

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

アロー関数

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

初めてのJavaScript 第3版
初めてのJavaScript 第3版

ECMAScript 2015(ES2015)の入門書!

この記事のまとめ

  • アロー関数とは、矢印(=>)を使って、今まで書いていたfunction関数よりも短い記述で同様の関数を定義できるJavascriptの最新のメソッド定義方法のこと
  • アロー関数という言葉が出てきたら最新のJavaScriptのメソッドの定義法で短くメソッドを記述できるものなのだなと思い出そう

8

わかった!