6.1 CRUDの概要
CRUD は、データに対して行う4つの基本的な操作を表す頭字語です: 作成 (Create), 読み取り (Read), 更新 (Update) そして 削除 (Delete)。これらの操作はデータベース作業の基礎であり、ほとんどのウェブアプリケーションの基盤となっています。
CRUDとは？
- Create (作成): 作成操作は、新しいレコードをデータベースに追加するために使用されます。これにより、システムに新しいデータを入力できます。
- Read (読み取り): 読み取り操作は、データベースからデータを取得するために使用されます。これにより、ユーザーは既存の情報を要求して表示できます。
- Update (更新): 更新操作は、データベース内の既存のレコードを変更するために使用されます。これにより、データを編集および修正できます。
- Delete (削除): 削除操作は、データベースからレコードを削除するために使用されます。これにより、不必要または古いデータを削除できます。
CRUD操作のためのHTTPメソッド
ウェブ開発の文脈では、CRUD操作はしばしばAPIに対するHTTPリクエストを使用して行われます。異なるHTTPメソッドは様々なCRUD操作に対応しています:
- POST: 新しいリソースの作成に使用されます。
- GET: リソースの読み取り（取得）に使用されます。
- PUTとPATCH: 既存のリソースの更新に使用されます。PUTは通常、リソースの完全な置換に使用され、PATCHは部分的な更新に使用されます。
- DELETE: リソースの削除に使用されます。
なぜCRUD操作が重要なのか？
CRUD操作はウェブアプリケーションでのデータ作業の基礎です。これにより、開発者はユーザーアカウントの作成、プロフィールの編集、データの表示、レコードの削除などの基本的な機能を実装できます。これらの操作はまた、クライアントとサーバーの間のやり取りを可能にし、データとコマンドの伝達を支援します。
CRUD操作を実行するための最新ツール
最新のウェブアプリケーションはしばしばAPIを通じてCRUD操作を実行するために様々なツールやライブラリを使用します:
- Fetch API: ブラウザに組み込まれた、PromiseベースのHTTPリクエストを実行する方法。
- Axios: HTTPリクエストを実行するための人気のあるライブラリで、便利かつ拡張可能なAPIを提供します。
これらのツールは、開発者がCRUD操作を簡単かつ効率的に実行できるように支援し、様々なサーバーAPIとの柔軟な統合を可能にします。
6.2 Fetchの使用
Fetchを使用したCRUD操作の実行を見てみましょう。
作成 (Create):
JavaScript
const createData = async (data) => {
const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
});
const result = await response.json();
console.log('Created:', result);
};
createData({ title: 'foo', body: 'bar', userId: 1 });
読み取り (Read):
JavaScript
const readData = async (id) => {
const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
const result = await response.json();
console.log('Read:', result);
};
readData(1);
更新 (Update):
JavaScript
const updateData = async (id, data) => {
const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
});
const result = await response.json();
console.log('Updated:', result);
};
updateData(1, { title: 'foo', body: 'bar', userId: 1 });
削除 (Delete):
JavaScript
const deleteData = async (id) => {
const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
method: 'DELETE'
});
if (response.ok) {
console.log('Deleted:', id);
} else {
console.error('Failed to delete:', id);
}
};
deleteData(1);
6.3 Axiosの使用
Axiosを使用したCRUD操作の実行を見てみましょう。
作成 (Create):
JavaScript
const axios = require('axios');
const createData = async (data) => {
try {
const response = await axios.post('https://jsonplaceholder.typicode.com/posts', data);
console.log('Created:', response.data);
} catch (error) {
console.error('Error creating data:', error);
}
};
createData({ title: 'foo', body: 'bar', userId: 1 });
読み取り (Read):
JavaScript
const readData = async (id) => {
try {
const response = await axios.get(`https://jsonplaceholder.typicode.com/posts/${id}`);
console.log('Read:', response.data);
} catch (error) {
console.error('Error reading data:', error);
}
};
readData(1);
更新 (Update):
JavaScript
const updateData = async (id, data) => {
try {
const response = await axios.put(`https://jsonplaceholder.typicode.com/posts/${id}`, data);
console.log('Updated:', response.data);
} catch (error) {
console.error('Error updating data:', error);
}
};
updateData(1, { title: 'foo', body: 'bar', userId: 1 });
削除 (Delete):
JavaScript
const deleteData = async (id) => {
try {
const response = await axios.delete(`https://jsonplaceholder.typicode.com/posts/${id}`);
if (response.status === 200) {
console.log('Deleted:', id);
}
} catch (error) {
console.error('Error deleting data:', error);
}
};
deleteData(1);
6.4 CRUD使用のヒント
APIを通じたCRUD操作使用のヒント:
- エラーハンドリング: HTTPリクエストを実行する際には常に潜在的なエラーを処理する。
try...catchブロックやcatchメソッドを使用してエラーを処理しよう。 - データのバリデーション: サーバーにデータを送信する前に、それが期待される形式に合致しているか確認しよう。
- 認証と認可: 保護されたリソースを扱う場合は、認証と認可を正しく処理していることを確認しよう。たとえば、リクエストヘッダにアクセストークンを追加するなど。
- ページネーションとフィルタリング: 大量のデータを取得する場合は、クエリパラメータを使用してページネーションとフィルタリングを行おう。
- キャッシング: パフォーマンスを向上させるために、頻繁に要求されるデータをキャッシュすることができる。
GO TO FULL VERSION