404 Not Foundエラーの原因と解決方法を初心者向けに徹底解説

ウェブサイトを閲覧していると、突然「404 Not Found」というエラーページが表示されることがあります。このエラーはプログラミングやウェブ開発において最も一般的なエラーの一つです。本記事では、404エラーの原因から解決方法まで、初心者でも理解できるように詳しく解説します。

404 Not Foundエラーとは
原因の詳細説明
解決手順
コード例
よくある間違い
デバッグのコツ
予防方法
まとめ

404 Not Foundエラーとは

404 Not Foundエラーは、HTTPステータスコードの一つで、クライアント（ユーザーのブラウザ）がサーバーに要求したリソース（ファイルやページ）が見つからないことを示します。例えば、存在しないURLにアクセスしたときに表示されるエラーです。

原因の詳細説明

1. URLのタイプミスやスペルの間違い

最も一般的な原因は、URLの入力間違いです。大文字と小文字の区別、スラッシュの有無、ハイフンとアンダースコアの違いなど、わずかな違いでもエラーが発生します。

例：

正しいURL：/user/profile
間違ったURL：/User/Profile（大文字）
間違ったURL：/user/profle（スペルミス）

2. ファイルやディレクトリの削除や移動

サーバー上のファイルやフォルダが削除されたり、別の場所に移動されたりすると、元のURLではアクセスできなくなり、404エラーが発生します。

3. ルーティングの設定ミス

フレームワークを使用している場合、ルーティング設定に誤りがあると404エラーが発生します。

4. サーバーの設定に関する問題

.htaccessファイルやWebサーバーの設定ミスも原因となります。

5. ドメインの問題

ドメイン名の変更やDNS設定のエラーがあると、サーバーに到達できず404エラーが表示されることがあります。

解決手順

ステップ1：URLの確認

まず最初に、アクセスしようとしているURLが正しいか確認してください。

ブラウザのアドレスバーでURLを確認する
大文字と小文字、スラッシュなどが正しいか確認する
スペルミスがないか確認する

ステップ2：ブラウザキャッシュをクリア

ブラウザがキャッシュを保持していることが原因の場合があります。

Ctrl+Shift+Delete（Windows）またはCmd+Shift+Delete（Mac）でキャッシュをクリア
ブラウザを再起動する
シークレットウィンドウでアクセスしてみる

ステップ3：ファイルの存在確認

サーバー上にファイルが存在するか確認してください。

FTPクライアントやファイルマネージャーでサーバーにアクセス
指定されたパスにファイルが存在するか確認
ファイルのアクセス権限（パーミッション）を確認

ステップ4：ルーティング設定の確認

フレームワークを使用している場合は、ルーティング設定を確認してください。

ステップ5：サーバーログの確認

サーバーのエラーログを確認すると、より詳細な情報が得られます。

コード例

Node.js（Express）でのルーティング例

const express = require('express');
const app = express();

// 正しいルーティング設定
app.get('/user/profile', (req, res) => {
  res.send('ユーザープロフィールページ');
});

app.get('/api/posts', (req, res) => {
  res.json({ posts: [] });
});

// 404エラーハンドリング
app.use((req, res) => {
  res.status(404).send('ページが見つかりません');
});

app.listen(3000, () => {
  console.log('サーバーが起動しました');
});

Python（Flask）でのルーティング例

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/user/profile')
def user_profile():
    return 'ユーザープロフィールページ'

@app.route('/api/posts')
def get_posts():
    return {'posts': []}

# 404エラーハンドリング
@app.errorhandler(404)
def not_found(error):
    return 'ページが見つかりません', 404

if __name__ == '__main__':
    app.run(debug=True)

PHP での404エラー処理例

<?php
// リクエストされたURLを取得
$requested_path = $_SERVER['REQUEST_URI'];

// ルーティング
if ($requested_path === '/user/profile') {
    echo 'ユーザープロフィールページ';
} elseif ($requested_path === '/api/posts') {
    header('Content-Type: application/json');
    echo json_encode(['posts' => []]);
} else {
    // 404エラー
    header('HTTP/1.1 404 Not Found');
    echo 'ページが見つかりません';
}
?>

.htaccessでのリダイレクト例

RewriteEngine On

# 存在しないファイル・ディレクトリへのアクセスをindex.phpにリダイレクト
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php [QSA,L]

# 404エラーページの指定
ErrorDocument 404 /error/404.html

HTMLでの404エラーページ例

<!DOCTYPE html>
<html lang=\"ja\">
<head>
    <meta charset=\"UTF-8\">
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
    <title>404 - ページが見つかりません</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 50px;
            background-color: #f5f5f5;
        }
        h1 {
            color: #d32f2f;
            font-size: 72px;
        }
        p {
            font-size: 18px;
            color: #666;
        }
        a {
            display: inline-block;
            margin-top: 20px;
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            text-decoration: none;
            border-radius: 5px;
        }
        a:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <h1>404</h1>
    <p>申し訳ございません。お探しのページは見つかりませんでした。</p>
    <p>URLが正しいか確認してください。</p>
    <a href=\"/\">ホームページに戻る</a>
</body>
</html>

よくある間違い

間違い1：相対パスの誤解

HTMLファイルで相対パスを使用する場合、パスの指定を間違えると404エラーが発生します。

<!-- 間違い -->
<a href=\"page.html\">ページへ</a>

<!-- 正しい -->
<a href=\"/pages/page.html\">ページへ</a>

間違い2：ファイル拡張子の忘れ

サーバー設定によっては、ファイル拡張子が必要な場合があります。

// 間違い
app.get('/user', (req, res) => {
  res.sendFile('user.html');
});

// 正しい
app.get('/user', (req, res) => {
  res.sendFile(__dirname + '/views/user.html');
});

間違い3：ルートパスの設定忘れ

ルートパス（/）が設定されていないと、メインページにアクセスできません。

// 必ず設定すべき
app.get('/', (req, res) => {
  res.send('ホームページ');
});

間違い4：大文字小文字の混在

Linuxサーバーでは大文字と小文字を区別します。Windowsでは区別されないため、開発環境と本番環境で異なる結果になる可能性があります。

// Linux環境では区別される
app.get('/users', (req, res) => { });  // /users でアクセス可能
// /Users でアクセスすると404エラーになる

間mistakes5：動的ルーティングの誤設定

// 間違い - パラメータが正しく受け取れない
app.get('/post/:id', (req, res) => {
  res.send('投稿ID: ' + req.param.id);  // typo: param → params
});

// 正しい
app.get('/post/:id', (req, res) => {
  res.send('投稿ID: ' + req.params.id);
});

デバッグのコツ

1. ブラウザの開発者ツールを活用

ブラウザのF12キーで開発者ツールを開き、「Network」タブでリクエストとレスポンスを確認できます。

2. サーバーログの確認

サーバーログには詳細な情報が記録されています。どのリソースが見つからないのかを確認しましょう。

3. コンソール出力を活用

プログラミング言語のコンソール出力機能を使用して、変数の値やURLのパスをデバッグします。

4. テストコードの作成

ユニットテストを作成することで、ルーティングが正しく機能しているか確認できます。

予防方法

1. テスト環境での事前確認

本番環境に展開する前に、テスト環境で全てのリンクが正常に機能するか確認してください。

2. URLの一元管理

全てのURLを定数として定義し、一元管理することで、タイプミスを防げます。

// URLを定数として定義
const ROUTES = {
  HOME: '/',
  USER_PROFILE: '/user/profile',
  API_POSTS: '/api/posts'
};

// これらを使用してアクセス
window.location.href = ROUTES.USER_PROFILE;