はじめに
JavaScriptのfetch関数を使えば、Rails APIなどの外部APIと簡単に通信できます。
この記事では、fetchを用いたデータの取得や送信の基礎と、Rails APIとの連携方法について解説します。
fetch関数とは何か
fetch関数は、JavaScriptでWeb APIへのHTTPリクエストを送信するための標準的な方法です。
Webサーバーからデータを取得したり、サーバーにデータを送信することができます。
fetch関数の基本的な使い方
fetch('https://example.com/data')
.then(response => response.json())
.then(data => console.log(data));
このコードは、https://example.com/data からデータを取得し、そのデータをJSON形式に変換してコンソールに表示します。
fetch関数の構文 → fetch(url, [options])
url : リクエストを送信するURL
options : リクエストの設定を指定するoptionsオブジェクト。
これは任意で、指定しない場合はデフォルトのGETリクエストが使用されます。
＊上記のコード例でも、fetch関数にURLのみが渡されており、optionsオブジェクトは指定されていません。この場合、fetchはデフォルトでGETリクエストを行います。
[options]optionsオブジェクトについて
method : HTTPリクエストメソッド（例: 'GET', 'POST'）
headers : HTTPヘッダーを指定（例: { 'Content-Type': 'application/json' }）
body : リクエスト本文。
POSTリクエストでデータを送信する場合にJSON文字列として指定します。
応答処理 :
.then(response => response.json())・・・レスポンスをJSONとして解析
.catch(error => ...)・・・エラー発生時の処理
では、実際にHTTPリクエストに応じたコードの記述方法を見てみましょう。
GETリクエストを使ったデータの取得方法
GETリクエスト
データを取得する際に使用される最も一般的なHTTPリクエスト方法です。
使い方
fetch関数にURLを渡すことで、指定されたリソースからデータを取得します。
fetch('https://example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('ネットワークレスポンスが不正です');
}
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error('問題が発生しました:', error));
このコードは、指定されたURLからデータを取得し、正常なレスポンスを受け取った場合にのみデータをJSON形式に変換します。
POSTリクエストを使ったデータの送信方法
POSTリクエスト
サーバーにデータを送信するために使われるHTTPリクエスト方法です。
使い方
fetch関数でmethodをPOSTに設定し、送信するデータをbodyに添付します。
fetch('https://example.com/submit', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
key1: 'value1',
key2: 'value2'
})
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('問題が発生しました:', error));
このコードは、指定されたURLにJSON形式のデータをPOSTリクエストで送信し、応答を受け取ります。
Rails APIとの連携
Rails APIとは
Rails APIは、Ruby on Railsで作られたバックエンドシステムです。これを使うと、Webやモバイルアプリのフロントエンドとデータをやり取りできます。
なぜ重要なのか
Rails APIとフロントエンドをつなげることで、アプリの見た目とデータ管理が分けられます。これにより、開発が柔軟になり、更新や改善がしやすくなります。セキュリティの面では、APIを通じての通信には認証が必要になることもあります。
基本的な構成要素
Rails APIを構築するには、どのデータにどうアクセスするかを定義するルーティング、データの取り扱いを決めるコントローラー、そしてフロントエンドに送るデータ形式を指定するビュー（主にJSON）が必要です。
実際のアプリケーション例
例として、TODOアプリにおけるデータの取得と追加の方法を見てみましょう。
例えば、以下のようなエンドポイントでTODOリストのデータを取得し、新しいTODOアイテムを追加する機能を実装できます。
GETリクエスト
fetch('http://localhost:3000/api/todos')
.then(response => response.json())
.then(todos => {
console.log("取得したTODOリスト:", todos);
});
このコードは、Rails APIの/api/todosエンドポイントからTODOリストを取得し、コンソールに表示します。
POSTリクエスト
fetch('http://localhost:3000/api/todos', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
title: '新しいタスク',
completed: false
})
})
.then(response => response.json())
.then(newTodo => {
console.log("追加されたTODO:", newTodo);
});
このコードは、新しいTODOアイテムをRails APIに送信し、返ってきたデータをコンソールに表示します。
まとめ
外部API、特にRails APIとの連携において不可欠なJavaScriptのfetch関数について、GETやPOSTリクエストの基本的な使い方をまとめました。
fetch関数を使うことで、簡単にデータを取得したり、サーバーにデータを送信したりすることができます。
ぜひ皆さんも活用してみてください！