「コードを書き換えたのに、なぜか動きが変わらない…」
キャッシュ?といろいろ疑いましたが、原因はあまりにも初歩的な「dist/ フォルダ」の無知によるでした。この悔しさを二度と忘れないようまとめます。
1. 私がハマった「反映されない」の正体
今回のプロジェクト(TypeScript)では、以下のような構造になっていました。
src/ : 私が一生懸命修正していたファイルたち
dist/ : 実際にシステムが読み込んで動いていたファイルたち
私がどれだけ src/ のコードを書き換えても、システムが見ているのは dist/(ビルド済みのJS) だったのです。
わかった気になって、こんな初歩的なことで30分もかけたことが恥ずかしい、、、
2. そもそも「dist/」って何?
調べると以下のように出てきました。
dist = distribution(配布) の略。
一言でいえば、「コンピュータが実行するためだけの専用コード」置き場
なるほど、なぜそのまま動かさないの?
TypeScriptはそのままじゃ動かない: Node.jsが読める JavaScript に変換(トランスパイル)が必要
「トランスパイル」という言葉は聞いたことがありましたが、ここでようやく点と点がつながった感覚になりました。
不明点はとことんクリアにしていく覚悟が足りていませんでした。
3.今回のトラブルの全容
1.修正完了、画面を確認するも解決しておらず。
2.サーバーは dist/ の古いJavaScript を実行し続けている。
3.30分、無意味に src/ をいじくり回す。
4.dist/ の中から修正前のコードを発見。
4.得られた教訓とまとめ
「修正したら、必ず npm run build」
ウォッチモードというのも聞いたことあって以前とりあえず使っていたことありましたが、ようやくこいつの素晴らしさに気づけました。
日々学習ですね。まだまだ伸びしろだらけということで精進していきます!