AngularでよくみるTypeScriptの構文 〜アロー関数式 その1〜
どうも！大阪オフィスの西村祐二です。
AngularはTypeScriptを標準対応しており、新し目のJavaScriptの仕様でコードがかかれることがよくあります。
その中でも、JavaScriptのES6で導入された
アロー関数式で記載されているコードをよく見かけます。
はじめてコードをみたとき何を意味しているのか理解が難しかったので、
今回簡単にまとめてみます。
環境
- Typescript: 2.6.2
- Angular CLI: 1.6.3
- Node: 9.3.0
- OS: darwin x64
- Angular: 5.1.2
Angularのサンプルプログラムで出てくるアロー関数式
チュートリアルでも当然のように、アロー関数式を使ったコードがでてきます。
▼コンポーネントのgetHeroesメソッド内にアロー関数式を使った記述があります。
https://angular.io/tutorial/toh-pt4#subscribe-in-heroescomponent
getHeroes(): void {
this.heroService.getHeroes()
.subscribe(heroes => this.heroes = heroes);
}
▼saveメソッド内にアロー関数式を使った記述があります。
() => this.goBack()は初見だとどういう意味を指しているか理解するのが難しいです。
https://angular.io/tutorial/toh-pt6#update-heroes
save(): void {
this.heroService.updateHero(this.hero)
.subscribe(() => this.goBack());
}
とりあえず結論
とりあえず、どういう意味か結論を知りたい方は下記を確認すれば良いかと思います。
詳しい説明はその後記載しています。
▼アロー関数式のところは
はじめのheroesは引数としてheroesをとるという意味で、
アロー記号=>後は
引数として得たheroesをthis.heroesに代入してreturnする
という意味になります。
つまり、this.heroService.getHeroes()の返り値をsubscribeで関数の引数heroesとし、その値をthis.heroesに代入してreturnするという流れになります。
getHeroes(): void {
this.heroService.getHeroes()
.subscribe(heroes => this.heroes = heroes);
}
↓下記プログラムと同等の意味となります。
getHeroes(): void {
this.heroService.getHeroes()
.subscribe(function(heroes) {
return this.heroes = heroes;
};
);
}
▼アロー関数式のところは
はじめの()は引数はとらないという意味で、
アロー記号=>後は
その後this.goBack()を実行しreturnする
という意味になります。
つまり、this.heroService.updateHero(this.hero)を実行し、
subscribeでその後にthis.goBack()を実行してreturnするという流れになります。
save(): void {
this.heroService.updateHero(this.hero)
.subscribe(() => this.goBack());
}
↓下記プログラムと同等の意味となります。
save(): void {
this.heroService.updateHero(this.hero)
.subscribe(function() {
return this.goBack();
};
);
}
※補足として、Rxjsのsubscribeは下記のような構文となっています。
.subscribe(function(n) {
処理
});
アロー関数式について
無名関数（匿名関数）のときに使用可能な記法になります。
特徴を下記に記載していきます。
functionを=>で置き換えできる
let add = function(a: number, b: number): number {
return a + b;
}
↓ functionをアロー記号に置き換えできる
let add = (a: number, b: number): number => {
return a + b
}
直ちに値を返すなら{}とreturnが省略可能
let add = (a: number, b: number): number => {
return a + b
}
↓ 一行で表現できる
let add = (a: number, b: number): number => a + b;
引数が１つのとき()省略可能
let add = function (a) {
return a + a;
} ;
↓引数が１つのとき()省略可能
let add = a => a + a;
※型をつけるときは()が必要
引数がないとき()省略不可
上記で、()を省略可能と説明しましたが、引数をとらないときは()が必要となります。
let add = function() {
return 1 + 1;
}
↓引数がないとき()が必要となります。
let add = () => 1 + 1;
動作確認
公式サイトのplaygraundでTypescriptがどのように変換されるかや、コンパイルエラーになるかなどの確認を行うことができます。
ご自身でいろいろためしてみてください。
さいごに
いかがだったでしょうか。
Angularでよく利用されるアロー関数式についてまとめてみました。
AngularはTypeScriptを標準サポートしているため、TypeScriptの知識があること前提にチュートリアルなど説明されています。
今後、他のTypeScriptの構文についても解説していきたいと思います。
アロー関数式はコードを短くできる他に「thisを束縛しない」という特徴もあります。それについてはまた次回まとめてみたいと思います。
誰かの参考になれば幸いです。
