5
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

AngularAdvent Calendar 2016

Day 10

ESNextで書くAngular^2.0.0

Last updated at Posted at 2016-12-11

前職でAngular^2.0.0をTypeScriptで書いていましたが、現職ではReactをESNextで書いています。
Angularはsemverを採用していることもあり、個人でアップデートを追っているのですが、今回は現職がESNextを使用していることもあって、AngularをESNextで書く方法や、少し気をつけた方が良い点を挙げていきます。(基本的には本家ドキュメントのts-to-jsを読めばやり方はわかります)

参考にしたリポジトリ

前提

webpackとbabelを使用します。templateとstylesはファイルを分けます。

babelの注意点

babel-preset-latestを使えば、基本的にdecorator以外はTypeScriptと同じ書き味で書けます(decoratorはlatestには入っていません)。
さて、このdecoratorが厄介者です。ecmafutureにおいてdecoratorの存在はまだ流動的で、仕様も定まっておらず、つまり確定的なtranspile方法がない現状ですので、もし使用したいのなら、相応の覚悟を持って使用する必要があります。
使いたい方は、babel-plugin-transform-decorators-legacyを使うか、babel-preset-angular2を使うと楽です。とくにbabel-preset-angular2はtransform-decorators-legacyをさらに拡張してあり、よりTypeScriptに近い書き味で書けますが、お仕事で使うのならコードリーディングはしておいた方が良いかもしれません。

stylesの注意点

to-string-loaderを使うとわりと何も考えずに実装できます。逆にraw-loaderだと動かないです(わたしは諦めました)。

templateとstylesの指定を楽にする

webpackとbabelを使っているので、基本的にはESmodulesの形式でimportしたものを指定しますが、angular2-template-loaderを使うと、templateUrlとstyleUrlsの形で指定できます。

ESNextで書く利点

webpackな時点でお察しではありますが、TypeScriptで書くよりはコンパイルが早いです。
ぶっちゃけこれが唯一の利点ですが、lacoさんがlight-ts-loaderを作ってしまったので、もはやただの興味本位でしか無くなってしまった気配があります...。

余談

AngularでFluxをデザインパターンのみ適用できるかなというものを考えるために作っているリポジトリで試してみました(肝心のFlux云々がまだ影も形もありません)。
https://github.com/asukaleido/angular-flux-example
現在のTypeScriptはやろうと思えば型ガン無視で書けるので、頑張った割には使えない内容になってしまった感が否めませんが、逆に言えばほぼTypeScriptの書き味で書けるくらいESNextとTypeScriptは近いものになっているのだなーとしみじみ感じた次第です。

5
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?