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

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

concatの問題

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

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

// app/services/chats.service.ts

var chats = [
        undefined, // ←意図的にundefinedにしてしまう
        {
            id: 1,
            name: 'Max Lynx',
            lastText: 'Hey, it\'s me',
            face: 'img/max.png'
        }, {
            id: 2,
            name: 'Adam Bradleyson',
            lastText: 'I should buy a boat',
            face: 'img/adam.jpg'
        }, {
            id: 3,
            name: 'Perry Governor',
            lastText: 'Look at my mukluks!',
            face: 'img/perry.png'
        }, {
            id: 4,
            name: 'Mike Harrington',
            lastText: 'This is wicked good ice cream.',
            face: 'img/mike.png'
        }
    ];

// app/services/chats.service.ts

var chats = [

undefined, // ←意図的にundefinedにしてしまう

{

id: 1,

lastText: 'Hey, it\'s me',

face: 'img/max.png'

}, {

id: 2,

lastText: 'I should buy a boat',

face: 'img/adam.jpg'

}, {

id: 3,

lastText: 'Look at my mukluks!',

face: 'img/perry.png'

}, {

id: 4,

lastText: 'This is wicked good ice cream.',

face: 'img/mike.png'

}

];

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

// ビルド
npm run watch

// 別タブで実行
ionic serve

// ビルド

npm run watch

// 別タブで実行

ionic serve

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

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

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

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

よし、これを直そう！

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

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

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

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

inline-sourcemapオプション

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

// webpack/webpack.dev.js
var webpack = require('webpack');

module.exports = {
    entry: {
        app: './src/app/app.module.ts'
    },
    output: {
        filename: '[name].js',
        path: './www/js'
    },

    resolve: {
        extensions: ['', '.ts']
    },

    devtool: 'inline-source-map', // &lt;- 追加

    plugins: [],

    module: {
        loaders: [
            {
                test: /\.ts$/,
                exclude: /node_modules/,
                loaders: ['awesome-typescript-loader']
            }
        ]
    }
};

// webpack/webpack.dev.js

var webpack = require('webpack');

module.exports = {

entry: {

app: './src/app/app.module.ts'

output: {

filename: '[name].js',

path: './www/js'

resolve: {

extensions: ['', '.ts']

devtool: 'inline-source-map', // <- 追加

plugins: [],

module: {

loaders: [

{

test: /\.ts$/,

loaders: ['awesome-typescript-loader']

}

]

}

};

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

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

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

source-mapオプション

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

Hash: f39e984fa9d85c207061
Version: webpack 1.12.14
Time: 2278ms
     Asset     Size  Chunks             Chunk Names
    app.js  8.43 kB       0  [emitted]  app
app.js.map    12 kB       0  [emitted]  app
    + 10 hidden modules

Hash: f39e984fa9d85c207061

Version: webpack 1.12.14

Time: 2278ms

Asset Size Chunks Chunk Names

app.js 8.43 kB 0 [emitted] app

app.js.map 12 kB 0 [emitted] app

+ 10 hidden modules

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

デバッグ

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

まとめ

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

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

投稿者: Ken

twitter Github Ken のすべての投稿を表示

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

concatの問題

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

inline-sourcemapオプション

source-mapオプション

デバッグ

まとめ

投稿者: Ken

コメントを残すコメントをキャンセル

concatの問題

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

inline-sourcemapオプション

source-mapオプション

デバッグ

まとめ

投稿者: Ken

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル