2020年4月追記。
アロー関数をどんどん使う講座を作成したので、
初心者の方はぜひご確認くださいませ。
数あるプログラム言語の中でも
ドラスティックに変わった言語といえば、『JavaScript(ジャバスクリプト)』。
2015年を機にガラッと機能が増えました。
関連記事
その中でもよく使う『アロー関数』についてまとめてみることにします。
アロー関数の前に そもそも関数とは
『JavaScript』に限らず、
- スクラッチでも、
- PHPでも、
- Pythonでも、
- C++でも、
多くのプログラム言語で『関数(かんすう)』という機能を使う事ができます。
- 関数(かんすう)・・英語でfunction(ファンクション)
『関数』をざっくりいうと、
計算だったり文字の編集だったり、
何かしらの処理をひとまとめにしておける機能の事です。
関連記事
『関数』には大きく分けて3つの情報があります。
- インプット・・引数(ひきすう)
- ゴニョゴニョ・・実際の処理
- アウトプット・・戻り値(もどりち)(処理結果)
以前の『JavaScript』では、
『関数』といえばこんな書き方をしていました。
function 関数名(インプット){
ゴニョゴニョ;
return アウトプット;
}
個人的にはこの書き方で別にいいじゃないと思ったりもするんですが、
(PHPもこんな書き方だし)
この書き方をガラッと変えて、読みやすくしたのが、
『アロー関数』になります。
アロー関数とは functionとの違いを比べてみる
アロー(英語でArrow)は『矢印』という意味で、
こんな記号を使います。
=>
これまでの『function』での書き方と、
アロー関数を比べると、こんな違いがあります。
// function
function test(x) {
return x + 1;
}
// arrow function 引数なし (かっこがいる)
const test = () => 1; // 出力の式が一行の場合はreturnは不要
// arrow function 引数1つ (かっこいらない)
const test = x => x + 1;
// arrow function 引数2つ以上 (かっこいる)
const test = (x, y) => x + y + 1;
違いは以下。
- 先頭で変数を定義する(const(定数)かlet(変数))
- () => {} の形で書く
- 引数が1つなら()も不要 (引数0なら()は必要)
- 出力が1行なら{}も不要
- 出力が1行ならreturnも不要
あまりの変貌っぷりに最初は、
と思っていたのですが、
意識して何度も書いているうちに、
- function書かなくていいのは楽かも
- ()とか{}とかreturn とかはしょっていいのは楽かも
と思えるようになってきたので、
ちょっとずつ使いながら慣れていくといいのかなと思います。
アロー関数の使い方 関数の引数に関数式を渡すのが楽ちんになる
プログラムでは、
まとまったデータを扱える『配列』や『連想配列』をしょっちゅう使うのですが、
『配列』の参考記事
『配列』に何か処理をかけたい場合に、
とてもすっきり書くことができるようになります。
// オブジェクトの配列
const data = [
{ id: 101, name: 'iPhone' },
{ id: 102, name: 'Android' },
{ id: 103, name: 'Other' },
];
// IDだけ出力する (functionの場合) mapは配列を取得する関数
const ids = data.map(function(row) {
return row.id;
});
console.log(ids); // => [101, 102, 103]
アロー関数を使うといろいろはしょれるのでこんな書き方ができます。
const ids = data.map(row => row.id); // 引数 => 返り値 という書き方になる console.log(ids); // => [101, 102, 103]
参考記事
アロー関数でさくさくコールバック。
アロー関数とは thisは宣言したタイミングで確定される
『function』を使った関数と、
『アロー関数』を使った関数の大きな違いとして、
いろんなページでも紹介されているのが、『this』の挙動の違い。
『this』は、
関数の中にある要素を指定できる仕組みなのですが、
ざっくりいうと、
- function関数・・thisは関数を呼び出す時に決定
- アロー関数・・thisは宣言した段階で確定されるという違いがあるようです。
結論を言いますと、アロー関数式で宣言された関数は、宣言された時点で、thisを確定（＝束縛）させてしまうのです。
参照： 【JavaScript】アロー関数式を学ぶついでにthisも復習する話
param = 'global param';
let printParam = () => {
console.log(this.param);
}
let object = {
param: 'object param',
func: printParam
}
let object2 = {
param: 'object2 param',
func: printParam
}
// どっちも global param と表示される
object.func();
object2.func();
アロー関数の注意 IEでは未対応
なにぶん新しい書き方だからか、
インターネットエクスプローラなど一部のブラウザで非対応だったりします。
『Babel(バベル)』などを使う事で
旧来の『JavaScript』に変換ができるので、
実際の現場で使うときはもれなく『Babel』などもセットになるかなと思います。
関連記事
アロー関数とは わかりやすくまとめてみて
2015年前後であまりにドラスティックに変貌を遂げた『JavaScript』。
中でも『アロー関数』は、
あまりにはしょりすぎて元の形なんだったっけ現象が発生しがちなので、
しっかり抑えて使いこなしてイマドキの開発ができるようになりたいもんです。
『JavaScript関連』ではこんな記事も読まれています。
1. 【Vue.js】初心者向けの動画をリリースしました【Udemy】2. 【JavaScript】初心者向けの動画をリリースしました【Udemy】
3. プログラム入門おすすめの言語はJavaScriptで決まり〜分かりやすさ第一で説明してみる〜
4. 【P5.js】遊ぶようにプログラムできるクリエイティブコーディング〜はじめのいっぽ〜(1)
5. 3Dプログラムの基本を【Three.js】でまとめてみた【初心者向け】
6. 【JavaScript】の環境構築の仕方 webpackとbabel【昭和と令和なJavaScript】
7. 【アロー関数】とは わかりやすくまとめてみた【JavaScript】
8. 【Vue.js】かっこいいフォトギャラリーを発見したのでソースを読んでみた。カテゴリーで選べてなめらかに動くんです
9. 【厳選8冊】ホームページを作れるようになるためのおすすめ本【初心者向け】
アオキのツイッターアカウント。
この記事へのコメントはありません。