フォームも作った。

GETとPOSTの違いも、なんとなく分かってきた。

では、入力されたデータを別のPHPファイルへ送ってみましょう。

<form method="post" action="send.php">
    <input type="text" name="name">
    <button type="submit">送信</button>
</form>

受け取り側の send.php も用意しました。

<?php

$name = $_POST['name'] ?? '';

if ($name !== '') {
    echo 'こんにちは、'
        . htmlspecialchars($name, ENT_QUOTES, 'UTF-8')
        . 'さん';
}

これまでの授業でやってきたことも入っています。

さあ送信！

ところが――

404 Not Found

send.php が見つからない。

あるはずなのに。

なぜ？

---

まず疑うのはPHPではない

こんなとき、つい send.php のPHPコードを調べたくなります。

でも今回は、そもそもPHPが実行されるところまで到達していない可能性があります。

ブラウザが、

send.phpって、どこにあるの？

という状態になっているからです。

ここで確認したいのが、ファイルの置き場所です。

たとえば現在の構成がこうだったとします。

example.com/
├─ form/
│  └─ index.php
│
└─ send.php

フォームが書かれているのは、

form/index.php

です。

一方、送りたいファイルは、

send.php

にあります。

ここでフォームには、

action="send.php"

と書きました。

これが今回のポイントです。

---

send.php は「今いる場所から探して」という意味

ブラウザは、

action="send.php"

を見ても、サイト全体から send.php を検索してくれるわけではありません。

現在表示しているページが、

https://example.com/form/index.php

なら、

action="send.php"

は基本的に、

https://example.com/form/send.php

を意味します。

でも実際の send.php は、

https://example.com/send.php

にあります。

つまりブラウザは、

/form/send.php

を探している。

実際には、

/send.php

にある。

場所が違う。

だから、

404 Not Found

になったわけです。

---

今日の合格ライン

ここで全部覚える必要はありません。

まずはこれだけです。

ファイル名が合っていても、場所が違えば見つからない。

そして、

action="send.php"

のような書き方は、

今いる場所を基準にして探す

と覚えておけば十分です。

これが相対パスです。

---

ひとつ上へ戻る ../

では今回の構成で send.php へ行くにはどうすればいいでしょう。

example.com/
├─ form/
│  └─ index.php  ← 今ここ
│
└─ send.php      ← ここへ行きたい

form フォルダから一度外へ出る必要があります。

そこで使えるのが、

../

です。

フォームを、

<form method="post" action="../send.php">

とすると、

今いる form からひとつ上へ戻って、そこにある send.php を探して

という意味になります。

イメージすると、

form/index.php
     ↓
    ../
     ↓
send.php

です。

../ を見て難しく考える必要はありません。

「ひとつ上へ戻る」

くらいでOKです。

---

/send.php と書く方法もある

もうひとつあります。

<form method="post" action="/send.php">

先頭に / が付きました。

これは、

このWebサイトの一番上を基準にして、send.phpへ行って

という指定です。

今回なら、

https://example.com/send.php

を指します。

そのため、

/form/index.php

からでも、

/contact/index.php

からでも、

/blog/test/index.php

からでも、

/send.php

ならサイトのルートにある send.php を指せます。

---

じゃあ「絶対パス」って？

さらに、URLを全部書くこともできます。

<form method="post" action="https://example.com/send.php">

これなら行き先が完全に指定されています。

少なくとも、

「今どのページにいるか」

によって行き先が変わることはありません。

ここで初心者のうちは、大まかに、

send.php
../send.php

は現在位置との関係で指定している。

https://example.com/send.php

は行き先を最初から全部指定している。

と理解しておけば十分です。

---

/send.php は少しだけ注意

ここは検索していると用語がややこしくなりやすいところです。

/send.php

はサイトのルートを基準にしているので、「絶対パス」と説明されることもあります。

一方で、

https://example.com/send.php

のような完全なURLと区別して、

ルート相対パス

などと呼ばれることもあります。

今は名前を完璧に暗記する必要はありません。

大切なのは、

何を基準にして、その場所を探しているのか

です。

---

実はこれ、フォームだけの話ではない

ここが今日かなり重要です。

同じ問題はWeb制作をしていると何度も出てきます。

たとえば画像。

<img src="images/logo.png" alt="ロゴ">

CSS。

<link rel="stylesheet" href="css/style.css">

JavaScript。

<script src="js/app.js"></script>

リンク。

<a href="contact/index.html">お問い合わせ</a>

全部、

「そのファイルはどこにあるの？」

という話です。

だから、

画像が出ない！
CSSが効かない！
JavaScriptが動かない！
リンクしたら404になった！
フォームを送信したら404になった！

これらは一見まったく違うトラブルに見えても、

パスが間違っているだけ

ということがあります。

---

「画像が出ない」も同じように考えられる

たとえば、

example.com/
├─ images/
│  └─ okojo.png
│
└─ lesson/
   └─ index.html

現在、

lesson/index.html

にいるとします。

ここで、

<img src="images/okojo.png">

とすると、ブラウザは、

lesson/images/okojo.png

を探します。

でも本物は、

images/okojo.png

です。

なら、

<img src="../images/okojo.png">

あるいは、

<img src="/images/okojo.png">

など、実際の構成に合わせて指定する必要があります。

---

AIに聞くときも「場所」を渡そう

AIに、

send.phpが見つかりません。

だけ伝えても、原因候補がたくさんあります。

そこで、こう聞いてみます。

HTMLフォームを送信すると404になります。
現在のページは /form/index.php です。
送信先のPHPは /send.php にあります。
フォームには action="send.php" と書いています。
ファイルの位置関係を含めて、初心者向けに原因を説明してください。

これならAIも、

action="send.php" では /form/send.php を探している可能性があります。

と判断しやすくなります。

コードだけでなく、ファイルの置き場所もAIに渡す。

これもWebトラブルではかなり使えるコツです。

---

AIに「直して」だけで終わらせない

AIが、

<form action="../send.php">

と直してくれた。

動いた！

もちろん、それでも構いません。

ただ、そこで一つだけ聞いてみましょう。

「なぜ ../ を付けると動くようになったの？」

これだけです。

すると、

../ はひとつ上のディレクトリを表します。

という知識が一つ増えます。

次に画像が表示されなくなったとき、

<img src="../images/photo.jpg">

を見ても、

「あ、上の階層に戻って探してるのか」

と読めるようになります。

これがオコジョキャンパスで目指しているところです。

全部自分で書けなくても、何をしているか分かる。

---

今日覚えて帰ること

今回覚えてほしいのは、この4つだけです。

1. ファイル名が正しくても、場所が違えば404になる
2. send.php は、現在いる場所を基準に探す
3. ../ は、ひとつ上へ戻る
4. /send.php は、サイトのルートを基準に探す

そして一番大切なのは、

「そのファイルは、どこを基準に探している？」

と考えられることです。

これが分かれば、フォームだけでなく、画像・CSS・JavaScript・リンクでも使えます。

---

今日のワンポイント答え合わせ

今回、

<form method="post" action="send.php">

で404になった原因は、

send.php の中身ではありませんでした。

ブラウザが、

/form/send.php

を探していたのに、

実際のファイルは、

/send.php

にあったからです。

つまり、

「動かないコード」ではなく、「たどり着けない場所」だった。

Web制作では、この違いに気付けるだけでも調査がかなり速くなります。

---

次回

パスを直した。

今度こそ send.php が開いた！

……ところが、

404、403、500……数字が違う。これって何が違うの？

次回は、

第7話「404？403？500？HTTPステータスコードって何？」

です。