404が出ちゃう!?プラグイン内でmapファイルを使う場合の注意点

プラグインの動作を確認すると、mapファイルが「404 File Not Found」となっているプラグインをいくつか見かけます。そう言った問題は、なぜ起こるのでしょうか?

そもそも、mapファイルって?

拡張子が.mapとなっているファイルはソースマップファイルと呼ばれるものです。
ビルド、またはコンパイルされて難読化しているソースコードを、元のソースコードファイルから参照できる目的で設定されたマッピング用のファイルとなります。

javascriptやcssと言ったファイルは、ReactやSass(SCSS)と言うような拡張メタ言語からビルドまたはコンパイルされたものを使用していることがあります。その場合、ソースコードが圧縮されていたり、コードが読みにくい形になっていたりする為に、そのままの状態ではテストやデバッグをするのが大変です。そこで、元のソースコードの問題の箇所を特定させ、開発をスムーズに継続させることを目的としたソースマップファイルと言ったファイルを使い、元のファイルをマッピング参照する手法が取られるようになりました。

ルミェール

圧縮されたファイルって、よく見かけるものだと…min.jsとかmin.cssとか言うファイルかな?
minと言う部分の由来は、minimum(最小限)と言う単語から来てるんだ。
改行とかスペースとか余分な記述を減らした最小限の記述になってるよ!

ルミェール(アイコン01)

ここ最近のWeb制作では、Sass(SCSS)を使う事も増えており、またWordPress(ワードプレス)ではブロック開発のためにReactと言った拡張メタ言語を使ったjavascript開発を行うために、mapファイルの使用需要は、年々増加していく一方です。

404 File Not Foundになる理由

しかし、多くのプラグインのjsでは、そんなmapファイルが404 File Not Foundに。

mapファイルを使う際の記述が問題

mapファイルを使用する場合、マッピングを行うビルドされたjsファイルやコンパイルされたcssファイルの最終行に

//# sourceMappingURL=/***.map

と言った記述を書く必要があります。

しかし、この記述が問題です。

このsourceMappingURLは/から始めてはいけません。

/からの記述で始めてしまうと、それをロードした場合、rootのURLからのmapファイルを読み込む形になりますので、同プラグインのスクリプトディレクトリに配置されているmapファイルとして正しく読まれる事が出来ません。結果として、404 File Not Foundと言ったエラーになってしまいます。
mapファイルを使う場合、./から始まるように相対パスに変更するか、mapファイルを使用しない形で記述を削除するなどで、エラーを修正・対策することができます。

テネーブル

mapファイルは、開発中の不具合などのマッピングを行う為のファイルですので、Webサイトのデザインなどには影響しません。
しかし、404 File Not FoundですのでSEOなどの評価にはマイナス要素として響く場合もあります。出来れば対策したいところです。

テネーブル(アイコン01)