はじめまして。teratail開発チームでインターンをしている草間(@tkow39)と申します。
来年4月1日よりレバレジーズ株式会社に入社予定となっています。よろしくお願い致します。
今までは主にフロントエンドを担当し,バックエンド,テストなどもサポートする形で開発していました。
少し期間が空いてしまいましたが,10/3(月)に開かれたAngular 2入門者の会でLTしました。
Angular 2熟練者の方からAngular 2の良さや楽しさとアドバイスを色々教えていただき,今後もAngular 2を使って何かを作ってみたいと思いました。
そこで,今回はプロダクトに生かして行く上でこれはすごいと思ったところと,使ってみて良かったところの4点を入門者として紹介していきたいと思います。
更新が即座にされるサーバ環境がすごい
公式のチュートリアルを試してまずびっくりしたのが,ファイルを更新してからブラウザのリロードがいらないことです。私はリアクティブなプログラミングにあまり慣れていません。
Ruby on railsのSprocketsなどを用いた開発でもリロードしないとjsの更新はされないため,絶えずファイルの更新をwatchする環境をほとんど手間なく環境構築できることに驚きました。
WebSocketでオンラインゲームを作っているような方やEditorとサーバを同期する方法を知っている方だとそれほど感動はないかもしれませんが,開発の場でこのようなアプローチを取ったことがなかったので新鮮でした。
Angular-CLIがすごい
上記のリポジトリで公開されている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ファイルのトランスパイル自動化も可能。
以下のコマンドを入力することでビルドの構成を変えられるようになっているようです。
# 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使いの方はこちらも試してみるといいと思います。
React Nativeとの連携がすごい
Angular 2とReact Nativeを使ってマルチプラットフォームアプリが開発できます。
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
これを順番に実行するだけでスマフォのエミュレータが走り出します。
出来上がったフォルダを覗いてみるとsrc配下のファイルがAngular 2で書かれていてObjective-CとJavaからJavascriptのエントリポイントを指定するコードが生成されているようにみえますね。
このようにsrc配下にAngular 2のプロジェクト構成に沿ったファイルを作成することで,React-Nativeと同様の構成で開発していくことができるようです。
ドキュメントが非常に少ないので,まだまだ実際の開発現場で使うのは難しいかもしれませんが、今なら先駆者として名を売るチャンスかもしれませんよ。
まとめ
初めての方はまずは,公式のチュートリアルに挑戦してみましょう。
多少やり応えのあるチュートリアルですが,やり終えた時にはAngular 2で開発してみたくなっているのではと思います。
個人的には新しい技術を勉強する時はこうしたワクワク感を持って勉強するときが一番楽しいと思っています。
10/3(月)に開かれたAngular 2入門者の会で発表で使用したスライドを以下に公開しています。
初心者として使ってみて難しかった点や要点をまとめてみました。
現在Angular 2のプロジェクトを作ってみたい方は,
の構成を真似するのがいいみたいです。
特にAngularClassリポジトリのコミッターには,Angular 2のコミッターも参加していて、質のいい構成やツールについて精査されたものがリポジトリに上がる傾向があるとのことです。
本気でAngular 2を開発に使ってみたい方は,このあたりのコミュニティをチェックしていけばいいのではないでしょうか。
それでは,また次回もよろしくおねがいいたします。