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

2016年03月25日
TypeScript_Logo

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

KENです。前回のionic + TypeScript で今風な開発フローを実現【module, concat編】では複数の .ts ファイルを一つの app.js ファイルに concat するやり方について触れました!ファイルが一つになって良いこともあれば、当然悪いこともあります!その中でも典型的なのが、エラーが出たときなどに、「元のソースがどこなのかわからない!」という問題です。 concatしたはいいけど、デバッグめっちゃやりづらいじゃん! っていう元も子もない話です。ここで登場するのが sourcemap です!

concatの問題

まず、実際にどのような問題なのか見てみましょう。

↓以下のような不正なデータを作ったとしましょう。

この状態でアプリを起動します。

Chat を見ると、一覧で不正データが混ざっているのがわかると思います。ここで Chrome のデベロッパーツールを開きましょう!(macなら option + command + i)

01_Chats

この状態で不正なデータをクリックすると、エラーが出たと思います!

02_Chats

エラーを覗いてみるとスタックトレースが見えると思います。問題となるファイルの行数の部分をクリックしてみましょう!

03_Chats

なるほど、undefined のデータに対して id プロパティを読もうとしてエラーになったのがわかりますね。

よし、これを直そう!

と思ったときに問題に気づきます(もう気づいてるかもしれませんが)。 app.js:189 となってるように、 app.jsの189行目 なんて言われてもさっぱりわからないんです! ts ファイルの情報を教えてくれないと、探すのに一苦労なのです。

こういう時に役に立つのが sourcemap です!

sourcemapでconcat前のファイルの情報を手に入れよう

sourcemap とは何かというと、 concatminify をした場合に、元ファイルの情報を格納しておくメタ情報っぽいやつです。sourcemap の作成方法には大きく2つあって、最終成果物(今回の場合 app.js)に埋め込む inline-sourcemap 方式か、別ファイルに保存しておく通常の sourcemap か、です。

inline-sourcemapオプション

webpack を使っていれば簡単です! webpack.dev.js を少し編集しましょう。

この devtool: 'inline-source-map' の1行を増やすことで、 webpack がいい感じに sourcemap を生成してくれます!

さて、それではこの状態で再度同じエラーを発生させてみましょう。すると↓のように表示されるはずです!

04_Chats

ちゃんと chats.service.ts:38 と、 chats.service.ts ファイルの 38行目で問題が起きていることがわかります!今回はとってもシンプルなサンプルアプリを使っているだけなのであまり恩恵を受けている感じがしないかもしれませんが、これが大規模なプロジェクトになってくると無くてはならない存在になります。 sourcemap のことはしっかり覚えておきましょう!

source-mapオプション

↑の webpack.dev.jsdevtool: 'inline-source-map' の部分を今度は devtool: 'source-map' に変えてみましょう!

すると今度は webpack の出力に app.js.map が増えているのがわかると思います。その名の通り、 inline-source-map はファイル内に埋め込みますが、 source-map は別ファイルとして専用の source-map ファイルを生成するのです!
この方法でも .ts ファイルに対する情報を取得できていることが確認できると思います。

デバッグ

さらに sourcemap のうれしい点は、デベロッパーツールからブレークポイントを貼って、ちゃんと .ts ファイルのブレークしたい場所でデバッガを止めることができる点です!

05_Chats

まとめ

内容としてはシンプルでしたけど、重要なTipsです。これでデバッグもばっちりですね!次回はいよいよ TypeScript の真の力、「型情報」について触れていきましょう!この超強力なフィーチャーを、VSCodeなどのエディタを使って解説していこうかと思います!

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

コメントを残す

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