【fetch関数を学ぶ！】RailsAPIを利用するためのフロントエンド実装

## はじめに
JavaScriptのfetch関数を使えば、Rails APIなどの外部APIと簡単に通信できます。

この記事では、fetchを用いたデータの取得や送信の基礎と、Rails APIとの連携方法について解説します。
## fetch関数とは何か

fetch関数は、JavaScriptでWeb APIへのHTTPリクエストを送信するための標準的な方法です。

Webサーバーからデータを取得したり、サーバーにデータを送信することができます。




### fetch関数の基本的な使い方


```javascript
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を渡すことで、指定されたリソースからデータを取得します。

```javascript
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に添付します。

```javascript
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リクエスト
```javascript
fetch('http://localhost:3000/api/todos')
  .then(response => response.json())
  .then(todos => {
    console.log("取得したTODOリスト:", todos);
  });
```
このコードは、Rails APIの/api/todosエンドポイントからTODOリストを取得し、コンソールに表示します。

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