MIMEタイプと拡張子【ブラウザ】

はじめに

拡張子（.js, .htmlなど）は「そのファイルが何について記述されているか / 情報があるか」を示します。

VSCodeでは、この拡張子に基づいてシンタックスハイライトやフォーマットを行います。
人間も、おおよそこの拡張子に基づいて内容を判断するでしょう。

しかし、ブラウザでは違うようです。

MIMEタイプ

警告: ブラウザーは URL を処理する方法を決定するために、ファイル拡張子ではなく MIME タイプを使用しますので、ウェブサーバーは正しい MIME タイプをレスポンスの Content-Type ヘッダーで送信することが重要です。

ブラウザではMIMEタイプというものを使用し、ファイルを解釈するようです。

例えば、（バニラの）Node.jsでは以下のような記述をします。

const app = http.createServer((request, response) => {

    response.writeHead(200, { 'Content-Type': 'text/html' });
    
    fs.readFile('./view/index.html', (errors, data) => {
        response.end(data)
    });
});

• ヘッダーに以下の２つを設定
  • HTTPステータスコード200
  • Content-Typeとして、MIMEタイプtext/html
• FileSystemfsを使用し、index.htmlを読み込み
• responseとしてindex.htmlを送信し終了

この時、MIMEタイプtext/htmlは必須です。
（index.htmlの.html拡張子からは判断ができない）

MIMEタイプの構造と種類

タイプ/サブタイプ[;引数=値]

例

.html

text/html

.css

text/css

.js

text/javascript

引数を使う例：文字コードの指定

.txt / 未知のテキスト形式

text/plain;charset=UTF-8

サブタイプに+を含む例

.svg

image/svg+xml

参考