Inertia.jsを使用したドキュメント

### Inertia.jsを使ったAPIの利用方法

Inertia.jsを使用することで、Reactコンポーネントから簡単にAPIを呼び出すことができます。以下に、いくつかの具体例を示します。

#### 例: ユーザー情報の取得

```javascript
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { InertiaLink } from '@inertiajs/inertia-react';

const UserDetail = ({ id }) => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    axios.get(`/api/user/${id}`)
      .then(response => {
        setUser(response.data);
      })
      .catch(error => {
        console.error("There was an error fetching the user data!", error);
      });
  }, [id]);

  if (!user) return <div>Loading...</div>;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>Email: {user.email}</p>
      <InertiaLink href="/">Back to Home</InertiaLink>
    </div>
  );
};

export default UserDetail;

例: プロフィールの更新

import React, { useState } from 'react';
import axios from 'axios';
import { Inertia } from '@inertiajs/inertia';

const UpdateProfile = ({ id }) => {
  const [profile, setProfile] = useState({
    name: '',
    bio: ''
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setProfile(prevState => ({
      ...prevState,
      [name]: value
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    axios.put(`/api/profile/${id}`, profile)
      .then(response => {
        alert('Profile updated successfully');
        Inertia.visit(`/profile/${id}`);
      })
      .catch(error => {
        console.error("There was an error updating the profile!", error);
      });
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Name</label>
        <input
          type="text"
          name="name"
          value={profile.name}
          onChange={handleChange}
        />
      </div>
      <div>
        <label>Bio</label>
        <input
          type="text"
          name="bio"
          value={profile.bio}
          onChange={handleChange}
        />
      </div>
      <button type="submit">Update Profile</button>
    </form>
  );
};

export default UpdateProfile;

---

Inertia.jsを使った画面遷移

Inertia.jsを使用すると、ページ遷移をJavaScriptで簡単に管理できます。以下に、Inertia.jsを使った画面遷移の例を示します。

例: ホームページからユーザーページへの遷移

import React from 'react';
import { InertiaLink } from '@inertiajs/inertia-react';

const Home = () => {
  return (
    <div>
      <h1>Home Page</h1>
      <InertiaLink href="/user/1">Go to User 1's Page</InertiaLink>
    </div>
  );
};

export default Home;

例: ユーザーページからプロフィールページへの遷移

import React from 'react';
import { InertiaLink } from '@inertiajs/inertia-react';

const UserPage = ({ user }) => {
  return (
    <div>
      <h1>{user.name}'s Page</h1>
      <InertiaLink href={`/profile/${user.id}`}>Go to Profile</InertiaLink>
    </div>
  );
};

export default UserPage;

---

例外処理とエラーハンドリング

API呼び出し時のエラーを適切に処理することは重要です。以下の例は、エラーハンドリングの実装例です。

例: ユーザー情報取得時のエラーハンドリング

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const UserDetail = ({ id }) => {
  const [user, setUser] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    axios.get(`/api/user/${id}`)
      .then(response => {
        setUser(response.data);
      })
      .catch(error => {
        setError("There was an error fetching the user data!");
        console.error(error);
      });
  }, [id]);

  if (error) return <div>{error}</div>;
  if (!user) return <div>Loading...</div>;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>Email: {user.email}</p>
    </div>
  );
};

export default UserDetail;

例: プロフィール更新時のエラーハンドリング

import React, { useState } from 'react';
import axios from 'axios';
import { Inertia } from '@inertiajs/inertia';

const UpdateProfile = ({ id }) => {
  const [profile, setProfile] = useState({
    name: '',
    bio: ''
  });
  const [error, setError] = useState(null);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setProfile(prevState => ({
      ...prevState,
      [name]: value
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    axios.put(`/api/profile/${id}`, profile)
      .then(response => {
        alert('Profile updated successfully');
        Inertia.visit(`/profile/${id}`);
      })
      .catch(error => {
        setError("There was an error updating the profile!");
        console.error(error);
      });
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Name</label>
        <input
          type="text"
          name="name"
          value={profile.name}
          onChange={handleChange}
        />
      </div>
      <div>
        <label>Bio</label>
        <input
          type="text"
          name="bio"
          value={profile.bio}
          onChange={handleChange}
        />
      </div>
      <button type="submit">Update Profile</button>
      {error && <div>{error}</div>}
    </form>
  );
};

export default UpdateProfile;

Inertia.jsのページコンポーネント例

Inertia.jsでは、各ページはサーバーサイドからレンダリングされ、ページごとにReactコンポーネントが対応します。以下は、Inertia.jsを使用したページコンポーネントの例です。

例: ホームページコンポーネント

// resources/js/Pages/Home.jsx
import React from 'react';
import { InertiaLink } from '@inertiajs/inertia-react';

const Home = () => {
  return (
    <div>
      <h1>Home Page</h1>
      <InertiaLink href="/user/1">Go to User 1's Page</InertiaLink>
    </div>
  );
};

export default Home;

例: ユーザーページコンポーネント

// resources/js/Pages/User/Show.jsx
import React from 'react';
import { InertiaLink } from '@inertiajs/inertia-react';

const UserShow = ({ user }) => {
  return (
    <div>
      <h1>{user.name}'s Page</h1>
      <InertiaLink href={`/profile/${user.id}`}>Go to Profile</InertiaLink>
    </div>
  );
};

export default UserShow;

例: プロフィールページコンポーネント

// resources/js/Pages/Profile/Show.jsx
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { InertiaLink } from '@inertiajs/inertia-react';

const ProfileShow = ({ id }) => {
  const [profile, setProfile] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    axios.get(`/api/profile/${id}`)
      .then(response => {
        setProfile(response.data);
      })
      .catch(error => {
        setError("There was an error fetching the profile data!");
        console.error(error);
      });
  }, [id]);

  if (error) return <div>{error}</div>;
  if (!profile) return <div>Loading...</div>;

  return (
    <div>
      <h1>{profile.name}'s Profile</h1>
      <p>{profile.bio}</p>
      <InertiaLink href="/">Back to Home</InertiaLink>
    </div>
  );
};

export default ProfileShow;

Inertia.jsとLaravelのルート設定例

Laravelのルート設定

// routes/web.php
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;

Route::get('/', function () {
    return Inertia::render('Home');
});

Route::get('/user/{id}', function ($id) {
    // ユーザーデータを取得するロジック
    $user = \App\Models\User::findOrFail($id);
    return Inertia::render('User/Show', ['user' => $user]);
});

Route::get('/profile/{id}', function ($id) {
    // プロフィールデータを取得するロジック
    $profile = \App\Models\Profile::findOrFail($id);
    return Inertia::render('Profile/Show', ['id' => $id]);
});

Inertia.jsの共有データ設定

Inertia.jsでアプリケーション全体で共有するデータを設定することができます。例えば、認証情報を共有する場合：

// app/Http/Middleware/HandleInertiaRequests.php
namespace App\Http\Middleware;

use Inertia\Middleware;

class HandleInertiaRequests extends Middleware
{
    // アプリケーション全体で共有するデータを定義
    public function share(Request $request)
    {
        return array_merge(parent::share($request), [
            'auth' => [
                'user' => $request->user(),
            ],
        ]);
    }
}

これにより、Inertia.jsを使用したすべてのページでauthデータにアクセスできます。

---

これで、Inertia.jsを使用したAPIの利用方法、画面遷移、例外処理とエラーハンドリングでした。