# Routing

ファイルベースルーティングの仕様と使い方。

## 基本概念

ファイルの配置がそのままURLパスになる。ルーター設定は不要。

```
lib/app/page.ex              → /
lib/app/about/page.ex        → /about
lib/app/users/page.ex        → /users
lib/app/users/[id]/page.ex   → /users/:id
```

## 静的ルーティング

### 基本的な対応

| ファイルパス | URL |
|-------------|-----|
| `app/page.ex` | `/` |
| `app/about/page.ex` | `/about` |
| `app/docs/guide/page.ex` | `/docs/guide` |

### インデックスページ

ディレクトリ配下の `page.ex` が該当パスを担当する。

```
app/users/page.ex    → /users（ユーザー一覧）
app/users/[id]/page.ex → /users/123（ユーザー詳細）
```

## 動的ルーティング

### ブラケット記法

`[パラメータ名]` でURLパラメータを受け取る。

```
app/users/[id]/page.ex    → /users/123, /users/abc など
app/posts/[slug]/page.ex  → /posts/hello-world など
```

### paramsへのアクセス

`mount/2` の第1引数で受け取る。パスパラメータとクエリパラメータが両方含まれる：

```elixir
defmodule MyApp.Users.Id do
  use Dialup.Page

  # /users/123?tab=posts にアクセス
  def mount(params, assigns) do
    id  = params["id"]    # "123"（パスパラメータ）
    tab = params["tab"]   # "posts"（クエリパラメータ）
    user = Users.get!(id)
    {:ok, %{user: user, tab: tab || "profile"}}
  end
end
```

テンプレートからは `@params` でもアクセスできる：

```html
<p>現在のタブ: {@params["tab"]}</p>
```

### クエリパラメータ

クエリ文字列（`?key=value`）は自動的に `params` に含まれる。複数パラメータにも対応：

```
/search?q=elixir&page=2&sort=date
→ params = %{"q" => "elixir", "page" => "2", "sort" => "date"}
```

パスパラメータとクエリパラメータで同名のキーがある場合、パスパラメータが優先される。

### パターンマッチ

異なるパラメータ値で分岐できる：

```elixir
# /users/new → 新規作成画面
def mount(%{"id" => "new"}, assigns) do
  {:ok, assigns |> overwrite(%{mode: :new, user: nil})}
end

# /users/:id → 編集画面
def mount(%{"id" => id}, assigns) do
  user = Users.get!(id)
  {:ok, assigns |> overwrite(%{mode: :edit, user: user})}
end
```

## レイアウトの継承

### レイアウトファイルの配置

```
app/layout.ex              # 全ページの共通レイアウト
app/users/layout.ex        # /users 以下のレイアウト
app/users/[id]/layout.ex   # /users/:id 以下のレイアウト（あれば）
```

### レイアウトの適用ルール

URL `/users/123/profile` の場合：

1. `app/layout.ex`（最上位）
2. `app/users/layout.ex`（中間）
3. `app/users/[id]/page.ex` または `app/users/profile/page.ex`（該当ページ）

レイアウトは上から順にネストされる。

## ルーティングの優先順位

1. **静的ルートを先に探索**（完全一致）
2. **動的ルートにフォールバック**（パターンマッチ）
3. **マッチしない場合は404**

```
app/users/new/page.ex      → 静的: /users/new
app/users/[id]/page.ex     → 動的: /users/:id

/users/new      → 静的ルートが優先
te/users/123     → 動的ルートがマッチ
```

## コロケーション CSS

`page.ex` / `layout.ex` と同じディレクトリに同名の `.css` ファイルを置くと、コンパイル時に自動検出・スコーピングされる。

```
app/
├── layout.ex
├── layout.css      ← 全ページ共通スタイル
├── page.ex
├── page.css        ← / のみに適用
└── docs/
    ├── layout.css  ← /docs 配下全ページに適用
    └── page.css    ← /docs トップのみに適用
```

### スコーピングの仕組み

モジュール名の MD5 先頭 7 文字から `d-xxxxxxx` というスコープクラスを生成し、CSS をネイティブ CSS nesting でラップする：

```css
/* page.css に書いたもの → コンパイル後 */
.d-a1b2c3 {
  h1 { color: blue; }
  .card { padding: 1rem; }
}
```

レンダリング時にそのページの HTML が `<div class="d-a1b2c3">...</div>` でラップされる。CSS は `<style data-dialup-css>` としてその直前に注入される。

### layout.css のカスケード

layout.css のスコープ div は全子ページの HTML を包むため、layout.css に書いたスタイルは配下の全ページに自然にカスケードする：

```html
<div class="d-layout">           <!-- app/layout.css のスコープ -->
  <header>...</header>
  <div class="d-docs-layout">    <!-- docs/layout.css のスコープ -->
    <div class="d-docs-page">    <!-- docs/page.css のスコープ -->
      <h1>Docs</h1>
    </div>
  </div>
</div>
```

### 注意事項

- CSS が存在しないページでは `<style>` タグも wrapper div も出力されない（オーバーヘッドゼロ）
- `.css` 変更時は `@external_resource` 経由で対応する `.ex` が自動再コンパイルされ、ホットリロードが動作する
- CSS nesting はモダンブラウザ 96%+ でサポート（Chrome 120+, Firefox 117+, Safari 17.2+）

## レイアウトのオプトアウト

特定のページでレイアウト継承を無効にし、全画面表示にしたい場合は `@layout false` を指定する。

```elixir
defmodule Dialup.App.Login.Page do
  use Dialup.Page

  @layout false

  def render(assigns) do
    ~H"""
    <div class="fullscreen-login">
      <h1>ログイン</h1>
      <form ws-submit="login">
        <input name="email" placeholder="Email" />
        <input name="password" type="password" />
        <button type="submit">ログイン</button>
      </form>
    </div>
    """
  end
end
```

`@layout false` を指定すると、親ディレクトリの `layout.ex` は適用されず、ページの HTML が直接 Shell に挿入される。コロケーション CSS（`page.css`）は `@layout false` でも適用される。

## エラーページ

### カスタムエラーページ

`app/` ディレクトリに `error.ex` を置くと、404 や 500 エラー時にユーザー定義のエラーページが表示される。`layout.ex` と同様にディレクトリ階層で継承される。

```
app/
├── layout.ex           # 全ページ共通レイアウト
├── error.ex            # 全ページ共通エラーページ
├── page.ex
└── admin/
    ├── layout.ex       # /admin 配下の共通レイアウト
    ├── error.ex        # /admin 配下のエラーページ（より具体的）
    └── page.ex
```

### error.ex の書き方

`use Dialup.Error` を使い、`render/2` でステータスコードごとに表示を分岐する。

```elixir
defmodule Dialup.App.Error do
  use Dialup.Error

  def render(404, assigns) do
    ~H"""
    <div class="error-page">
      <h1>404</h1>
      <p>ページが見つかりませんでした</p>
      <a ws-href="/">ホームへ戻る</a>
    </div>
    """
  end

  def render(500, assigns) do
    ~H"""
    <div class="error-page">
      <h1>500</h1>
      <p>サーバーエラーが発生しました</p>
    </div>
    """
  end

  def render(_status, assigns) do
    ~H"""
    <div class="error-page">
      <h1>{@status}</h1>
      <p>エラーが発生しました</p>
    </div>
    """
  end
end
```

### エラーページの継承

リクエストパスに最も近い `error.ex` が選択される。

- `/admin/users/123` で 404 → `app/admin/error.ex` があればそれ、なければ `app/error.ex`
- `error.ex` が一つも存在しなければフレームワークのデフォルト表示が使われる

### レイアウトとの関係

エラーページは通常のページと同様に layout に囲われて出力される。全画面のエラーページにしたい場合は `@layout false` を指定する。

```elixir
defmodule Dialup.App.Error do
  use Dialup.Error

  @layout false  # layout なしの全画面エラーページ

  def render(404, assigns) do
    ~H"""
    <div class="fullscreen-error">
      <h1>404 Not Found</h1>
    </div>
    """
  end
end
```

### assigns に渡される情報

```elixir
%{
  status: 404,            # HTTP ステータスコード
  message: "Not Found"    # ステータスメッセージ
}
```

500 エラーの場合、開発環境（`Mix.env() == :dev`）ではさらに `exception` と `stacktrace` が含まれる。

### コロケーション CSS

`error.css` を `error.ex` と同じディレクトリに配置すると、ページや layout と同様に自動スコーピングが適用される。

## 制限事項

- 正規表現やカスタムパターンマッチは不可
- `[id]` はURL全体のセグメントにマッチ（`/` を含まない）
- オプショナルパラメータは不可（`/users` と `/users/:id` は別ファイルが必要）