ionic + TypeScript で今風な開発フローを実現【module, concat編】

2016年03月19日
投稿者:Ken
カテゴリ:Angular.js, Ionic, JavaScript, TypeScript タグ:, , , , ,
TypeScript_Logo

この記事は ionic + TypeScriptで今風な開発フローを実現 の第4回にあたります!他の記事は↓です。

いざ、ES2015(旧ES6)の世界へ

コンパイルエラーがなくなったところで、本格的に TypeScript を書いていきましょう!ここでよく勘違いされる点ですが、 TypeScriptの文法が難しい とか聞きます。これはたいてい ES2015の文法が難しい っていうのが正しい言い方です。

ES2015???

ES2015って??? 初めて聞いた人もいるかもしれませんが、JavaScriptの正式名称はECMAScript です。これのバージョンで、執筆時点での世間的に一番ブラウザで実装されているのが ES5 です。最新版が ES2015(元々はES6と呼ばれていた) となります。この ES2015 になってJavaScriptの文法は 結構な割合 で変わります。その文法の違いについて一つ一つ見て行ったらきりがないので、 ES2015 で検索して色々な良記事を読んで下さい。
何が言いたかったかと言うと、 TypeScriptES2015 を先取りして書くことができるんです!というかほとんどの場合 ES2015 で書くことになると思います(個人的にコードの量減るし、読みやすいしで圧倒的に ES2015 のほうが好きです)。最終的に transpile 時に ES5 とかに落とし込んでくれるんです。 TypeScript のサンプルコードとかも ES2015 で書かれているので、この文法=TypeScript と勘違いする人が多くて、「TypeScriptは文法が難しい」と言う人がちらほらいます。確かに結構文法は変わるんですけど、この先この文法が主流になることは確定しているので、学んでおいて損は無いです!
それでは、前回までのコードを ES2015 に移行しましょう!

モジュール

Controllerの分割

ES2015 から個々に分散したJSファイルを import で読み込むことができます。まずは controllersを分割しましょう!

DashCtrl, ChatsCtrl, ChatDetailCtrl, AccountCtrlの4つのコントローラがあるので、それぞれを個々のファイルに分割しましょう!また、分割したファイルは controllers フォルダに入れることにします!

それでは、元々の controllers.tscontrollers フォルダに入れて、名前もわかりやすいように controllers.module.ts に変えちゃいましょう!別のファイルから読み込むときの import <インポートするもの> from '<ファイルパス>' がポイントです。

どうでしょう?結構すっきりしたと思いませんか!?

Servicesの分割

同様に services も変換しちゃいましょう!

appの分割

最後に app.ts も整理しましょう!

webpackデグレ確認

フォルダ構成がいい感じになってきました〜。

さてさて、ちゃんとアプリケーションが動作するかチェックしましょう!ちょっとパスが変わったので、 webpack の設定も修正します。

ビルドして

起動!

ちゃんと起動確認ができたはずです!

concat

小さなモジュールに分けたのは良いんですが、これらを一つのファイルにたいてい concat するのが今の主流です(厳密にはちょっと小分けしますが)。

それでは、一番てっとり早い方法として app.module.tscontrollers.module.tsservices.module.tsimport して app.module.ts の依存関係にしちゃいましょう!こうすることで webpack がいい感じにこれらのファイルを一つのファイルに合体してくれます。

最後に、 webpack/webpack.dev.js のエントリポイントを一つにします。

起動確認!

またまたこれで今風な開発スタイルに近づきました。わくわくするのは私だけでしょうか?笑
次回はさらに ES2015 使ったり、 concat したファイルをデバッグするにはどうしたらいいかなど、見ていきましょう!

  • [x] コンパイルエラーが出ている
  • [x] コンパイル後のファイルが複数ある
  • [ ] ブラウザでデバッグしづらい
  • [ ] 型をまるで使っていない

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です