はじめに

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関数を使うことで、簡単にデータを取得したり、サーバーにデータを送信したりすることができます。
ぜひ皆さんも活用してみてください！