【Angularデバック】ビルドオプション「–source-map」指定時の動作確認

どうもこんにちはコウヘイです。
本シリーズは、Angularについて完全初心者の私がAngularをある程度使えるようになるまで頑張るをテーマに日々の作業ログを記録する内容になります。
以下のような疑問を持ちました。
・Angularのビルドとデプロイの方法を知りたいビルドオプションである–source-mapを指定した際に何が変わるのかを知りたい
・Angularのビルドとデプロイの方法を知りたい
今回はこういった疑問に答えます。
著者情報
この記事を書いている僕ですが、Javaをメインにバックサイド開発を7年ほど経験しています。
最近フロントサイドにAngular、バックサイドにSpringBootを使用したSPA(シングルページアプリケーション)を作成する案件で働き始めたので、Angular学習を開始しました。
こんな僕が解説していきます。
ビルドオプション「–source-map」指定時の動作確認
公式ドキュメントを見るとビルドオプション「–source-map」の説明は以下のように書かれています。
Output source maps for scripts and styles
(翻訳:スクリプトとスタイルの出力ソースマップ)
ぶっちゃけ、よくわからないですよね(笑)
私自身も同じことをおもいました(笑)
わかりやすく言い換えると以下になります。
本番ビルド時に–source-mapオプションを指定すると、デバックができるようになる。
ということで、具体的に以下のパターンでデバック時の動作を確認したいと思います。
その①:開発時のデバック
その②:開発環境デプロイ時のデバック
その③:本番環境デプロイ時のデバック
その④:本番環境デプロイ時のデバック(–source-mapオプションあり)
順に説明していきます。
その①:開発時のデバック
まずはじめに、開発時に以下のコマンドでアプリを起動したときのデバックの確認をします。
ng serve
以下デバック時の画面になります。

開発時はデバックができるようになってます。(webpack://にソースが表示される)
その②:開発環境デプロイ時のデバック
次は以下のコマンドでビルドしたソース群を開発環境にデプロイしたときのデバックの確認をします。
ng build
以下デバック時の画面になります。

開発環境デプロイ時はデバックができるようになってます。(webpack://にソースが表示される)
その③:本番環境デプロイ時のデバック
次は以下のコマンドでビルドしたソース群を本番環境にデプロイしたときのデバックの確認をします。
ng build –-prod
以下デバック時の画面になります。

本番環境デプロイ時はデバックができないようになってます。(webpack://が表示されない)
その④:本番環境デプロイ時のデバック(–source-mapオプションあり)
次は以下のコマンドでビルドしたソース群を本番環境にデプロイしたときのデバックの確認をします。
1つ前で確認した内容と違うのは、sourceMapを指定している点です。
ng build –-prod –source-map
以下デバック時の画面になります。

本番環境デプロイ時(–source-mapオプションあり)はデバックができるようになってます。(webpack://にソースが表示される)
重要なのはビルド時に–source-mapオプションを指定しない場合はデバックできませんでしたが、–source-mapオプションを指定するとデバックできることです。
余談
以下のツイートをしました。
Angularのビルド時のsouceMapオプションって実際の現場で使われているのか疑問。
— こうへい@3日毎にブログ更新中 (@kohe1chan) February 5, 2021
ぱっと思いついたのは、本番環境でデバックしてもいいような仕様の場合にsouceMapオプションを指定するみたいな感じかな?
まあ、そういうことができることだけ覚えておきます😅
ツイートにもあるように、–source-mapオプションを使う場面は本番でもデバックできるようにしたい場合ですが、実際の現場の本番環境でデバックできる状態にするのか疑問に思いました。
理由はソース量が増えるので、パフォーマンスが悪くなると予想されるから。
ひとまずは、こういうこともできるぐらいにトドめておこうと思います。
まとめ
最後にアプリの起動の仕方でデバックできるかを以下にまとめたいと思います。
コマンド | デバックできるか |
---|---|
ng serve | ○ |
ng build | ○ |
ng build –-prod | ☓ |
ng build –-prod –source-map | ○ |
というわけで今回は以上です。
Angularについて、少しでも詳しくなれたなら幸いです。
私自身も発展途上なので一緒に学んでいきましょう!
おすすめ記事:無料あり:Angular学習におすすめの本【AngularJSとの違いに注意】
