これは何？
非エンジニア向けにGoogleAppsScript(GAS)レクチャーを行なっています。プログラムが全くの初めての人を対象にしています。このレクチャーを卒業し、基本的なことが理解できるようになった人が「その次に知っておいたほうがいいこと」の一つに 配列の扱い があるなと思いました。これを説明してみよう、、、
と思ったのですが、実務でよく使いそうな、filter, map, find について説明するには アロー関数 を説明しないと話が繋がらないので、この記事では アロー関数が存在しない世界線のJavaScriptを書いていた私が、アロー関数をどうやって理解したのか を記述します。
対象者
- GoogleAppsScriptおよびJavaScriptでの基本構文は知っているレベル
- 具体的には ケーススタディでしっかり身につく! Google Apps Script超入門 を修了しているレベル
関数を変数/定数に代入できるのは知ってる？
const num = 1;
のように、numという定数に1を代入できることは知っていると思いますが、
const func = function greet(){
console.log('おはよう！');
}
のように、funcという定数に greetという関数 を代入できます。
下記を実行してみましょう。
function arrowFunc1(){
const func = function greet(){
console.log('おはよう！');
}
func();
}
おはよう！
引数、戻り値のある関数ではどうなる？
続いて、引数を受け取り、戻り値のある関数を作ってみます。
下記のx100関数は1つの引数を受け取り、それを100倍した値を返します。
function arrowFunc2() {
const func = function x100(num) {
return num * 100 ;
}
console.log(func(3));
}
300
returnした結果が func定数に代入されるわけですね。
ここまでで「定数に関数を代入し、その定数(=つまり関数)に引数を渡して実行する」ことができました。
無名関数
ここで上記の arrowFunc2() を見てみます。
const func = function x100(num) {
のように、関数に x100 という名前をつけています。しかしx100という名前で関数を呼び出していません。 名前をつけたのにその名前を使う機会がない んです。
だったら名前、いらなくね？ということで、
function arrowFunc3() {
const func = function (num) {
return num * 100 ;
}
console.log(func(3)); // 300
}
↓ここに注目。関数の名前がありません。
const func = function (num) {
なぜ関数に名前をつけるかというと、その名前を使ってその関数を呼び出す(実行する)ことがあるからです。今回の例だと関数は一度しか実行されず、他から利用されることがないので名前をつける必要がありません。
アロー関数の登場
ここからが本題です。アロー関数を使って書いてみます。
function arrowFunc4() {
const func = (num) => {
return num * 100 ;
}
console.log(func(3)); // 300
}
arrowFunc3との違いは
-
functionを消す - 引数の後ろに
=>を書く
です。 => が矢印に見えるので アロー関数 と呼ばれます。たぶん。
記述量が減っていますね。(パッと見て認識できるかどうかは慣れの問題ですね...)
アロー関数の省略形
省略ポイント1: 引数が1つの場合は( )を省略できる
下記のコードでは func = (num) ではなく func = num になっています。
function arrowFunc5() {
const func = num => {
return num * 100 ;
}
console.log(func(3)); // 300
}
省略ポイント2: 関数の中身が1行の場合は { } と return を省略できる
ここが最終形です！
function arrowFunc6() {
const func = num => num * 100;
console.log(func(3)); // 300
}
もうね、パッとみて理解できるようになるには慣れるしかないです。
引数が複数の場合は？
引数が複数の場合は、引数部分の( )は省略できないため、下記のようになります。
function arrowFunc7() {
const func = (a, b) => a + b;
console.log(func(1,2)); // 3
}
最後に
ここまで書いておいてアレですが、私は関数を作るときに
const add = (a, b) => a + b;
のような書き方はしていないです。
function add(a, b){
return a + b;
}
って書きます。
こうしたほうが「functionだよ！」ってわかりやすいと思うんですよね...
みなさんはどうですか？私がトレンドに乗れてないだけかな...