はじめに
Laravelからkintone REST APIへアクセスし、kintoneアプリに登録されているレコードを取得する方法を紹介します。
今回は、LaravelのHTTPクライアントを使用してkintoneからレコードを取得し、取得結果をReactの画面に表示します。
Reactからkintone REST APIへ直接アクセスすると、ブラウザのCORS制限によってリクエストが失敗することがあります。
そのため、次の流れでデータを取得します。
React => Laravel => kintone REST API
Laravelを経由することで、CORSの問題を回避できるだけでなく、kintoneのAPIトークンをブラウザ側へ公開せずに済みます。
前提
本記事では、次の環境を前提とします。
- Laravelがインストールされている
- Laravel内で、ReactとInertia.jsを使用している
- kintoneアプリを作成済みである
- kintoneアプリのAPIトークンを取得済みである
- APIトークンに「レコード閲覧」権限が設定されている
kintoneのAPIトークンは、対象アプリの設定画面から発行します。
APIトークンを発行した後は、必ずアプリの設定を更新してください。設定を保存しただけでアプリを更新していない場合、APIトークンが利用できないことがあります。
Laravelからkintoneへアクセスする流れ
Laravelからkintoneのレコードを取得するため、次のファイルを設定します。
app/Http/Controllers/KintoneController.php
config/services.php
.env
routes/web.php
Reactコンポーネント今回は、kintone REST APIの「1件のレコードを取得するAPI」を使用します。
リクエスト先は次のURLです。
https://サブドメイン.cybozu.com/k/v1/record.jsonLaravelのControllerを作成する
最初に、Laravelからkintone REST APIへアクセスするControllerを作成します。
次のコマンドを実行してください。
php artisan make:controller KintoneControllerLaravel Sailを使用している場合は、次のコマンドを実行します。
./vendor/bin/sail artisan make:controller KintoneController作成されたapp/Http/Controllers/KintoneController.phpを、次のように編集します。
<?php
namespace App\Http\Controllers;
use Illuminate\Http\JsonResponse;
use Illuminate\Support\Facades\Http;
class KintoneController extends Controller
{
public function show(int $id): JsonResponse
{
$response = Http::withHeaders([
'X-Cybozu-API-Token' => config('services.kintone.api_token'),
])->get(
config('services.kintone.base_url') . '/k/v1/record.json',
[
'app' => config('services.kintone.app_id'),
'id' => $id,
]
);
if ($response->failed()) {
return response()->json([
'message' => 'kintoneからのデータ取得に失敗しました。',
'error' => $response->json(),
], $response->status());
}
return response()->json($response->json());
}
}このControllerでは、LaravelのHttpファサードを使用してkintone REST APIへGETリクエストを送信しています。
APIトークンは、HTTPリクエストヘッダーのX-Cybozu-API-Tokenに設定します。
Http::withHeaders([ 'X-Cybozu-API-Token' => config('services.kintone.api_token'), ])取得対象のkintoneアプリIDとレコードIDは、クエリパラメータとして送信します。
[ 'app' => config('services.kintone.app_id'), 'id' => $id, ]Laravelの環境ファイルの更新
Laravelの.envファイルを設定する
kintoneの接続情報は、Laravelの.envファイルに設定します。
KINTONE_BASE_URL=https://your_sub_domain.cybozu.com
KINTONE_APP_ID=14
KINTONE_API_TOKEN=YOUR_TOKEN| 環境変数 | 設定内容 |
| KINTONE_BASE_URL | kintone環境のURL |
| KINTONE_APP_ID | データを取得するアプリID |
| KINTONE_API_TOKEN | kintoneで発行したAPIトークン |
config/services.phpを設定する
次に、config/services.phpへkintoneの設定を追加します。
return [
// 既存設定
'kintone' => [
'base_url' => env('KINTONE_BASE_URL'),
'app_id' => env('KINTONE_APP_ID'),
'api_token' => env('KINTONE_API_TOKEN'),
],
];Controllerからは、次のように設定値を取得できます。
config('services.kintone.base_url');
config('services.kintone.app_id');
config('services.kintone.api_token');Controller内で直接env()を使用するのではなく、config/services.phpを経由する形にしておくと、Laravelの設定キャッシュにも対応しやすくなります。
Laravelの設定キャッシュを削除する
php artisan config:clearSail環境ならば、次のように実行します。
./vendor/bin/sail artisan config:clear必要に応じて、アプリケーション全体のキャッシュも削除できます。
php artisan optimize:clearSail環境では、次のように実行します。
./vender/bin/sail artisan optimize:clearroutes/web.phpにルーティング設定する
Laravel内でInertia.jsとReactを使用している場合は、routes/web.phpにルーティングを追加できます。
Route::get('/api/kintone/records/{id}', [
KintoneController::class,
'show'
]);これにより、次のURLへアクセスすると、Laravelからkintoneのレコードを取得できます。
http://localhost/api/kintone/records/1URL末尾の1は、kintoneのレコードIDです。
/api/kintone/records/{id}例えば、レコードIDが10の場合は次のURLになります。
/api/kintone/records/10ReactからLaravelへリクエストする
Reactからは、kintone REST APIへ直接アクセスせず、Laravelに作成したエンドポイントへアクセスします。
import { useState } from 'react';
export default function KintoneRecord() {
const [record, setRecord] = useState(null);
const [error, setError] = useState('');
const [loading, setLoading] = useState(false);
const fetchRecord = async () => {
setLoading(true);
setError('');
try {
const response = await fetch('/api/kintone/records/1', {
method: 'GET',
headers: {
Accept: 'application/json',
},
});
const data = await response.json();
if (!response.ok) {
throw new Error(
data.message || 'レコードの取得に失敗しました。'
);
}
setRecord(data.record);
} catch (error) {
console.error(error);
setError(error.message);
} finally {
setLoading(false);
}
};
return (
<div>
<button
type="button"
onClick={fetchRecord}
disabled={loading}
>
{loading ? '取得中...' : 'レコードを取得'}
</button>
{error && <p>{error}</p>}
{record && (
<pre>{JSON.stringify(record, null, 2)}</pre>
)}
</div>
);
}「レコードを取得」ボタンを押すと、ReactからLaravelへリクエストが送信されます。
Laravelはkintone REST APIへアクセスし、取得したデータをJSON形式でReactへ返します。
kintoneから取得したレコードの表示結果
正常にデータを取得できると、次のようなJSONが表示されます。
{
"レコード番号": {
"type": "RECORD_NUMBER",
"value": "1"
},
"更新者": {
"type": "MODIFIER",
"value": {
"code": "your_mail_address",
"name": "name"
}
},
"作成者": {
"type": "CREATOR",
"value": {
"code": "your_mail_address",
"name": "name"
}
},
"文字列__1行_": {
"type": "SINGLE_LINE_TEXT",
"value": "P-202606-0001"
},
"顧客": {
"type": "SINGLE_LINE_TEXT",
"value": ""
},
"ドロップダウン": {
"type": "DROP_DOWN",
"value": "見積中"
},
"組織選択": {
"type": "ORGANIZATION_SELECT",
"value": []
},
"$revision": {
"type": "__REVISION__",
"value": "1"
},
"文字列__1行__0": {
"type": "SINGLE_LINE_TEXT",
"value": "システム開発プロジェクト"
},
"数値_0": {
"type": "NUMBER",
"value": "0"
},
"更新日時": {
"type": "UPDATED_TIME",
"value": "2026-06-12T06:02:00Z"
},
"文字列__複数行__0": {
"type": "MULTI_LINE_TEXT",
"value": "要件定義中"
},
"文字列__複数行_": {
"type": "MULTI_LINE_TEXT",
"value": "在庫管理システムの構築"
},
"数値": {
"type": "NUMBER",
"value": "5000000"
},
"日付_1": {
"type": "DATE",
"value": "2026-10-31"
},
"日付_0": {
"type": "DATE",
"value": "2026-08-15"
},
"作成日時": {
"type": "CREATED_TIME",
"value": "2026-06-12T06:02:00Z"
},
"ユーザー選択_0": {
"type": "USER_SELECT",
"value": []
},
"日付": {
"type": "DATE",
"value": "2026-06-01"
},
"$id": {
"type": "__ID__",
"value": "1"
}
}kintone REST APIから返される各フィールドには、主にtypeとvalueが含まれています。
{ "type": "SINGLE_LINE_TEXT", "value": "システム開発プロジェクト" }実際に画面へ値だけを表示する場合は、フィールドのvalueを指定します。
<p>
プロジェクト名： {record['文字列__1行__0']?.value}
</p>ただし、kintone APIを利用する際は、フィールド名ではなくフィールドコードを使用します。
そのため、kintoneアプリを作成するときは、次のような分かりやすいフィールドコードを設定しておくことをおすすめします。
つまづきやすい点
Reactからkintoneへ直接アクセスするとCORSエラーになる
Reactからkintone REST APIへ直接リクエストすると、次のようなCORSエラーが発生することがあります。
Access to fetch has been blocked by CORS policyこれは、ブラウザが異なるオリジンへのアクセスを制限しているためです。
Axiosへ変更しても、ブラウザのCORS制限そのものは回避できません。
fetchからAxiosへ変更する
だけでは解決しないため、今回のようにLaravelを経由してkintoneへアクセスします。
React → Laravel → kintone
APIトークンをReactへ記載しない
次のように、ReactのソースコードへAPIトークンを直接記載してはいけません。
const token = 'YOUR_KINTONE_API_TOKEN';Reactのコードはブラウザへ配信されるため、開発者ツールなどからAPIトークンを確認できてしまいます。
APIトークンはLaravelの.envに保存し、サーバー側だけで使用します。
APIトークンの権限を確認する
レコードを取得する場合、APIトークンに「レコード閲覧」の権限が必要です。
権限が不足していると、kintoneからエラーが返されます。
APIトークンの設定後は、次の点を確認してください。
- 「レコード閲覧」にチェックが入っている
- APIトークンを保存している
- kintoneアプリの設定を更新している
- 正しいアプリIDを指定している
.envの変更が反映されない
.envを変更しても値が反映されない場合は、設定キャッシュが残っている可能性があります。
php artisan config:clearまたは、次のコマンドを実行します。
php artisan optimize:clearSail環境の場合は、コマンドの先頭に./vendor/bin/sailを付けてください。
./vendor/bin/sail artisan optimize:clearkintoneのフィールド名が分かりにくい
kintoneでフィールドコードを変更せずにアプリを作成すると、次のようなコードになることがあります。
文字列__1行__0
文字列__複数行__0
数値_0
日付_1この状態でもデータは取得できますが、LaravelやReactから扱う際に、どのフィールドなのか分かりにくくなります。
開発を進める前に、kintone側でフィールドコードを整理しておくと管理しやすくなります。
kintoneの日時はUTCで返される
kintoneの作成日時や更新日時は、次のようなUTC形式で返されることがあります。
2026-06-12T06:02:00Z日本時間として表示する場合は、ReactやLaravel側でタイムゾーンを変換する必要があります。
Reactでは、例えば次のように表示できます。
const formattedDate = new Date(
record['更新日時'].value
).toLocaleString('ja-JP', {
timeZone: 'Asia/Tokyo',
});セキュリティ上の注意点
kintone REST APIをLaravelから利用する場合は、次の点に注意してください。
- APIトークンをReactへ渡さない
- APIトークンをGitHubへ登録しない
- .envを公開しない
- APIトークンには必要最小限の権限だけを付ける
- Laravel側のエラーメッセージに機密情報を含めない
- 外部公開するAPIには認証やアクセス制限を設定する
- レコードIDなどの入力値を検証する
今回のサンプルでは、説明を分かりやすくするため、kintoneから返されたエラー内容をそのままJSONで返しています。
'error' => $response->json(),本番環境では、詳細なエラー内容を利用者へ表示せず、Laravelのログへ記録する方法も検討してください。
if ($response->failed()) {
logger()->error('kintone API error', [
'status' => $response->status(),
'response' => $response->json(),
]);
return response()->json([
'message' =>
'kintoneからのデータ取得に失敗しました。',
], 500);
}
おわりに
今回は、Laravelからkintone REST APIへアクセスし、kintoneアプリのレコードを取得してReactに表示する方法を紹介しました。
Reactからkintoneへ直接アクセスすると、CORSエラーが発生する場合があります。また、React側へAPIトークンを記載すると、トークンがブラウザ上に公開されてしまいます。
そのため、次の構成でアクセスする方法が安全です。
React
↓
Laravel
↓
kintone REST APILaravelをkintone APIとの中継地点にすることで、次のメリットがあります。
- ブラウザのCORS問題を回避できる
- kintoneのAPIトークンを非公開にできる
- Laravel側で認証や入力値検証を実装できる
- エラーログやアクセス制御を一元管理できる
- 取得したkintoneデータを加工してReactへ返せる
今回は1件のレコードを取得しましたが、同じ仕組みを応用することで、複数レコードの取得、レコードの登録、更新、削除などもLaravelから実行できます。
Laravelとkintoneを連携する場合は、APIトークンの管理とアクセス権限に注意しながら、サーバー側からkintone REST APIを呼び出す構成をおすすめします。
