ファイルの関係性を調べたい

Question

前提・実現したいこと

該当のページに関係しているファイルを調べたいです。
具体的には、こちらサイトの自動計算フォームに、どの日のいくらの価格で計算してるのかを表示したいと考えています。
そのため、まずはJSファイルの確認を行いたいと考えているのですが、JSファイルが多く、どの部分からコードを追っていけば良いか分からないです。

試したこと

以前の質問で、webpack > src > main.js内に該当ページ関する処理が記述されていたことが分かったのですが、デベロッパーツールからHTMLコードを確認してみましたが、「main.js」を読み込んでいる箇所が見当らない状況です。

補足情報（FW/ツールのバージョンなど）

使用ブラウザ「GoogleChrome」
OS 「Mac OS」

「main.js」を読み込んでいる場所についてや、どのようにファイルの構造を確認していけば良いかなど、教えて頂けましたら幸いです。

Answer 1

（語弊のある）結論

main.jsはサイト上には存在しません。

ではなぜsourceに存在するのか

ブラウザ側で「ソースマップ」という別ファイルを見ています。

app.jsの一番最後にこんな記述が見つかるかと思います。
//# sourceMappingURL=app.js.map
このサイトのjavascriptソースはWebpackというフレームワークでリソースの圧縮、最適化がなされています。
javascriptは元のスクリプトに対し圧縮（文字数を減らす等して容量を減らし軽くする）されていて、そのままでは人間にとって非常に読みにくいソースです。
それではデバッグに支障が出るので、別口で元のソースを用意しています。それがソースマップのファイルです。

ソースマップでは、圧縮されたapp.jsの元になったファイルがmain.jsであるという情報と、main.jsのソースがそのまま記載されています。
ブラウザは開発者ツールでソースを閲覧する際、自動的にこのソースマップを取得、解析し、ツールのウィンドウに表示する機能を持っています（オプションでOFFにもできます）
sourceタブではmain.jsのツリー元が「webpack://」になっているかと思います。これも元ソースのツリー構成がソースマップに記載されていて、開発者ツールではそれをそのまま復元して表示しています。

実際に実行されているスクリプトはapp.jsのほうですが、よりデバッグがしやすいようソースマップ側(main.js)で対応する箇所にブレークポイントを設定したりインスペクトできるようになっています。

結論

main.jsはWebpackで処理されたコンポーネントの元ファイルで、ソースマップにより仮想的に再現されています。実際に動いているスクリプトはapp.jsのほうです。

余談

気づくと思いますがソースマップは開発用（デバッグ用）の仕組みです。本当は本番環境に配置するものではありません・・・

Comments

[k-g-11]

ご回答ありがとうございます。
ご回答読ませて頂いたのですが、まさか、「main.js」が仮想的に再現されたファイルであり、存在しないファイルだという事実に驚きました。
とんちんかんな質問になってしまっていましたら申し訳ないのですが、そうなりますと、例えば「どの日のいくらの価格で計算してるのかをフォームに表示する」という部分を、実装したいと思った場合は元コードの「app.js」から特定を行っていかなければならないということでしょうか...?
実は、ただ今元コードのapp.jsを見てみたのですが、とても長く、Vue.jsの経験が浅い自分にはかなり、気合を入れなければならないと認識いたしました...
main.jsはとても分かりやすく構成されて、こちらから色々と編集など出来たら良いのですがね...
道のりは長いかもしれませんが、まずは、webpackというフレームワークを調べる所から入りたいと思います...

[hope_mucci]

どのような目的で参考サイトをリバースエンジニアリングしているかはわかりかねますが、見えるコードから頑張って解析していくしか方法はないでしょう。
（圧縮や難読化は、そのようなことを容易にされたくないから実施している目的もありますし）
どうしてもこのサイトの解析をせねばならないのであれば、くじけずがんばれ、としか言いようがないです。

[k-g-11]

> どのような目的で参考サイトをリバースエンジニアリングしているかはわかりかねますが
こちらですが、自分は、該当サイトの運営を行っている会社の者でございます。会社より、「どの日のいくらの価格で計算してるのかを自動計算フォームに表示する」といった内容のことを実装するように仕事を承ったといった形でした。
>ソースマップでは、圧縮されたapp.jsの元になったファイルがmain.jsであるという情報と、main.jsのソースがそのまま記載されています。
こちら、度々の質問で恐縮なのですが、実は、圧縮された「app.js」の元コード(リポジトリ管理サービスにアップロードされているコード)を確認したのですが、該当サイトにてデベロッパーツールで確認できた「app.js」と同じ内容であることが分かりました。
自分が勘違いしてしまっているのかもしれないのですが、app.jsが圧縮されるというのは、ブラウザの機能により行われている訳ではないということでしょうか？
また、main.jsは公開ディレクトリには置かれていないため、ソースマッピングにより、デベロッパーツールにて、再現されているものの、実際にサーバー上には「main.js」は存在するということになりますでしょうか？

[hope_mucci]

> app.jsが圧縮されるというのは、ブラウザの機能により行われている訳ではないということでしょうか？
圧縮はブラウザの機能ではありません。Webpackの機能です。
ブラウザはapp.jsの末尾に書かれていたソースマップファイル(app.js.map : app.jsと同じディレクトリにある)から元のソースの構成を再現しているだけです。(webpack://の中身が元ソースの構成であるはず)
また、他のjsファイルにもソースマップがあります。中の人なら直に確認できるはずです。

>実際にサーバー上には「main.js」は存在するということになりますでしょうか
回答の冒頭に書いたように、main.jsは公開サーバ上には存在しません。開発時のプロジェクト一式の中に入っているはずです。必要ならしかるべき手段で入手していただければと思います。

[k-g-11]

ご返信ありがとうございます。
詳細に説明頂きましたおかげで、段々と掴めてきました。
「main.js」は開発時のプロジェクト一式に入っているという訳だったのですね。
現状、サーバーへはアクセス権限がなく確認できなかったのですが、こちらの実情をお話し、確認させて貰おうと思います。