muito da hora!

Astroって大文字小文字を区別してる？

Astroって大文字小文字を区別してる？

はい、基本的には区別します。ただ、どこで区別されるかは場面によって違います。

  1. コンポーネント名（Astro自体のルール）
    タグの先頭が大文字ならコンポーネント、小文字ならただのHTML要素として扱われます。

astro

---
import Header from "../components/Header.astro";
import header from "../components/Header.astro";
---
<Header />  <!-- コンポーネントとして描画される -->
<header />  <!-- HTMLの<header>タグになる（importは使われない） -->

コンポーネントは大文字始まりで import する、と覚えておけば大丈夫です。

  1. import のパス（OSの問題）
    いちばんハマりやすいのがここです。
  • Windows と macOS は、標準では大文字小文字を区別しません。./header.astro と書いても Header.astro が読み込まれてしまいます。
  • Linux は区別します。

そのため「手元の Windows では動くのに、Linux 上のビルド（GitHub Actions や Cloudflare のビルドなど）では Could not resolve で失敗する」ということが起きます。今のようにローカルでビルドしてデプロイしているあいだは表に出ませんが、ビルド環境を移したときに急に壊れる原因になります。import はファイル名と大文字小文字まで一致させておくのが安全です。

  1. ページのファイル名と URL
    src/pages/About.astro は /About になります。本番の URL は大文字小文字を区別するので、/about でアクセスすると 404 になる可能性があります。src/pages の中のファイル名は**すべて小文字（単語の区切りはハイフン）**にしておくのが定石です。
  1. スクリプト部分（JavaScript/TypeScript）
    変数名、props、関数名などは JS のルールそのままなので、当然区別されます。
Astro

コメント