WordPress で mapファイル も配布する時の注意。「404 File Not Found」を無くそう

WordPress プラグインの動作を確認すると、mapと言うファイルが「404 File Not Found」となっているプラグインやテーマをいくつか見かける場合もあります。本記事は、そう言った問題がなぜ起こるのかを語ります。

mapファイル って何のファイル?

ブリエ

「mapと言うファイル」は何に使うんだろう?リソースが 404 File Not Found になっていてもきちんとデザインは表示されているし、本当に必要なファイルなのかな?

テネーブル

拡張子が map となっているファイルは、ソースマップファイルと呼ばれる「mapファイル」です。ビルド、またはコンパイルされた難読化済みのソースコードを、元のソースコードファイルから参照する為のファイルとなります。

ブリエ

どんなファイルを、ビルドやコンパイルしているの?

テネーブル

最近よく聞かれるようになった「React.js」「Node.js」 や 「Sass(SCSS)」と言ったものは拡張メタ言語と呼ばれています。拡張メタ言語は、そのままだとブラウザが解釈できない言語なんです。だから、ビルドまたはコンパイルと言った機械語に翻訳する作業を行って、ブラウザが解釈できる「javascript(js)」 や 「スタイルシート(css)」 と言ったファイルを生成します。その翻訳作業の結果、機械がより速く処理を行えるようにする為にソースコードの圧縮をしていたりします。処理をする機械にとって読みやすくても、開発者にとっては読みにくいコードになっています。そのままの状態では、テストやデバッグをするのは大変です。そこで、mapファイル(ソースマップファイル)と言ったファイルを使い、元のファイルをマッピングする仕組みが用意されました。

ブリエ

マッピングって何だろう?

テネーブル

その mapファイルが紐付けられている「minify化済みのファイル」と、元のソースコードを参照する仕組みや行為のことを「マッピング」と呼んでいます。

ルミェール

minify化済みのファイルと言うのは、圧縮されたファイルのこと。改行とかスペースとか余分な記述を減らし、ソースコードを最小限にしたファイルなんだ。よく見かけるものであれば min.js や min.css とか言うファイル名になってるよ。

minと言う部分の由来は、minify(縮小する) と言う単語から。

ブリエ

何で、わざわざ読みにくくなる minify化(最小限に縮小する事) を行うの?

テネーブル

主な使用目的はファイルサイズが軽くなるからです。他にも開発途中のコメントなども minify化 する事で削除されることから、開発中のみ必要な記述を無くすと言った効果を目的に使用されるケースもあります。

mapファイルが、404 File Not Found になる場合

しかし、公開配布されているプラグインのいくつかは「cssファイル」や「jsファイル」に存在している「mapファイル」が 404 File Not Found になる場合があります。

ブリエ

mapファイルが 404 File Not Found になる理由、まだよく解らないです…。mapファイルは、そもそもどこから読み込みされているんだろう?

原因は、パス記述の問題

mapファイルを使用する場合は、マッピングを行いたい minify化された「cssファイル」や「jsファイル」の最終行に

//# sourceMappingURL=<mapファイル名>.map

と言った mapファイルのパスを sourceMappingURL に指定する記述を書く必要があります。

この sourceMappingURL で指定する mapファイルのパス指定が違う場合は、mapファイル が見つからないため、404 File Not Found と言ったリソースエラーを Console に出力されます。

実際の問題ケースに多いのは、開発途中のディレクトリ構造で記述されていることです。

テネーブル

パス指定をする場合は、可能であれば相対パスを使ってファイルを指定するのを推奨だよ。

補足

ケミ

閲覧のみされる方の場合は、マッピングを行う必要はありません。なので、実際のウェブサイトでは sourceMappingURL の記述は削除しても良いはずです。mapファイルの読み込みなどが無くなる分、ページ読み込みが速くなります。閲覧者が開発者ではないことが想定される場合などもありますので、必ずしも mapファイルを配布する必要はないと言うことも覚えておくと良いでしょう。

この記事の筆者

Kmix39(ケミ)

電子の妖精。当ウェブサイトの記事制作などを行なっています。
金融・不動産・医療・教育などの数々の業種のシステム開発を経験を積み、スマートフォンアプリケーションと WordPress などのウェブアプリケーションを日々勉強中。