読者です 読者をやめる 読者になる 読者になる

入門3日目の僕が感じたAngular 2のすごいところ

開発 Angular 2

はじめまして。teratail開発チームでインターンをしている草間(@tkow39)と申します。
来年4月1日よりレバレジーズ株式会社に入社予定となっています。よろしくお願い致します。
今までは主にフロントエンドを担当し,バックエンド,テストなどもサポートする形で開発していました。

少し期間が空いてしまいましたが,10/3(月)に開かれたAngular 2入門者の会でLTしました。

connpass.com

Angular 2熟練者の方からAngular 2の良さや楽しさとアドバイスを色々教えていただき,今後もAngular 2を使って何かを作ってみたいと思いました。

そこで,今回はプロダクトに生かして行く上でこれはすごいと思ったところと,使ってみて良かったところの4点を入門者として紹介していきたいと思います。

更新が即座にされるサーバ環境がすごい

公式のチュートリアルを試してまずびっくりしたのが,ファイルを更新してからブラウザのリロードがいらないことです。私はリアクティブなプログラミングにあまり慣れていません。
Ruby on railsのSprocketsなどを用いた開発でもリロードしないとjsの更新はされないため,絶えずファイルの更新をwatchする環境をほとんど手間なく環境構築できることに驚きました。
WebSocketでオンラインゲームを作っているような方やEditorとサーバを同期する方法を知っている方だとそれほど感動はないかもしれませんが,開発の場でこのようなアプローチを取ったことがなかったので新鮮でした。


Angular-CLIがすごい

github.com

上記のリポジトリで公開されているAngular-CLIは,Ruby on railsやCakePHPなどのフレームワークを使用している方には馴染みがあるのではないでしょうか。 こちらは,プロジェクトのディレクトリ構成のスキャフォールディングやサービスの起動など様々な処理を行えるAngular 2のコードジェネレータを含むCLIツールになります

例えば、

ng new (project名) 

というコマンド一つでAngular 2の標準的なディレクトリ構成を作成できたり

ng lint

プロジェクト中のtsなどのコードのスタイルチェックができたり

ng test

テストができたりします

webpackの構成などを変えたい場合は自分で設定しなければいけないようですが,Karmaや、tsconfig.json,Jasmineの設定ファイルの自動生成,webpack-dev-serverなどを標準に使ったsrc配下のTSファイルのトランスパイル自動化も可能。

f:id:tkow:20161012215030p:plain

以下のコマンドを入力することでビルドの構成を変えられるようになっているようです。

# these are equivalent
ng build --target=production --environment=prod
ng build --prod --env=prod
ng build --prod
# and so are these
ng build --target=development --environment=dev
ng build --dev --e=dev
ng build --dev
ng build

以上のように簡単にAngularアプリケーションを作成するのを試してみるのに便利なツールになりそうです。
rails-cliのように普及していくようなツールとして期待できそうです。

ng github-pages:deploy --message "Optional commit message"

で,作ったAngular 2のプロジェクトをGitHub Pagesにデプロイもできるみたいです。

すごいですね。


TypeScriptとの連携がすごい

まとめで公開しているスライドにも書いたのですが,TypeScriptを使った連携がすごいです。
Microsoft発のAltJSということで,C#に慣れ親しんでいると馴染みやすいですね。
インターフェース継承がimplementsだったり,関数型の型宣言だったりと慣れていない人にとってはるとは思いますが,ES6の文法も違和感なく使えてとても書きやすいです。
どんなファイルやデータ構造でもフォーマットを守ればローダーによってimportできるし,JSの構成がpathによって管理される安心感はPure JSしか書いたことない人にとっては驚きがあるのではないでしょうか。

ES6で大分書き易くなったJavaScriptですが,TypeScriptの分かりやすさと安全性は魅力的です。
TypeScriptを書くにはVisual Studio Codeにプラグインが充実していてオススメです。
TypeScriptが苦手に思われる方はJSで開発することもできます
玄人の方はGoogle謹製の言語であり,AltJSとしても使えるDartを使用することもできますので,Dart使いの方はこちらも試してみるといいと思います。

www.dartlang.org


React Nativeとの連携がすごい

Angular 2とReact Nativeを使ってマルチプラットフォームアプリが開発できます。

react-native-renderer

Angular 2はスマホアプリの開発にも使えます。(2016年4月には公開されているようですが)JavaScriptの時代もここまで来たかという感じですね。
しかもMac環境では簡単に試せます。

公式サイトにもかいてありますが,
React-Nativeアプリの開発環境を整えた後

git clone https://github.com/mlaval/angular2-react-native-seed.git
cd angular2-react-native-seed
npm install -g gulp react-native-cli typings
npm install
gulp init
    gulp start.ios
    (OR)
    gulp start.android

これを順番に実行するだけでスマフォのエミュレータが走り出します。

f:id:tkow:20161012234317p:plain

出来上がったフォルダを覗いてみるとsrc配下のファイルがAngular 2で書かれていてObjective-CとJavaからJavascriptのエントリポイントを指定するコードが生成されているようにみえますね。

f:id:tkow:20161012234654p:plain

f:id:tkow:20161012234700p:plain

f:id:tkow:20161012234704p:plain

このようにsrc配下にAngular 2のプロジェクト構成に沿ったファイルを作成することで,React-Nativeと同様の構成で開発していくことができるようです。

ドキュメントが非常に少ないので,まだまだ実際の開発現場で使うのは難しいかもしれませんが、今なら先駆者として名を売るチャンスかもしれませんよ。


まとめ

初めての方はまずは,公式のチュートリアルに挑戦してみましょう。

angular.io

多少やり応えのあるチュートリアルですが,やり終えた時にはAngular 2で開発してみたくなっているのではと思います。
個人的には新しい技術を勉強する時はこうしたワクワク感を持って勉強するときが一番楽しいと思っています。

10/3(月)に開かれたAngular 2入門者の会で発表で使用したスライドを以下に公開しています。
初心者として使ってみて難しかった点や要点をまとめてみました。

speakerdeck.com

現在Angular 2のプロジェクトを作ってみたい方は,

github.com

github.com

github.com

の構成を真似するのがいいみたいです。

特にAngularClassリポジトリのコミッターには,Angular 2のコミッターも参加していて、質のいい構成やツールについて精査されたものがリポジトリに上がる傾向があるとのことです。
本気でAngular 2を開発に使ってみたい方は,このあたりのコミュニティをチェックしていけばいいのではないでしょうか。

それでは,また次回もよろしくおねがいいたします。

tkow · GitHub