axiosを使ってVue.jsアプリからHTTPリクエストを送信するコード

## はじめに
以下はVue.jsからLaravelなどで構成されたサーバーにHTTPリクエストを送信し、APIを実行する工程のメモになります

## AxiosをVue.jsプロジェクトに追加する
Vue.jsのプロジェクトでAxiosを使用するには、Axiosをインストールする必要があります。Axiosは標準でVue.jsに組み込まれていないため、以下のコマンドでプロジェクトに追加する必要があります。

```bash
npm install axios
```

## VueコンポーネントでAxiosをインポートする

Axiosを使うためには`scriptタグ`の中で`axios`を`import`をする必要があります

```javascript
<script>
import axios from 'axios';

export default {
  data() {
    return {
      message: '',  // APIから取得するメッセージを保存する変数
    };
  },
  methods: {
    async fetchData() {
      try {
        // APIのURLにGETリクエストを送信
        const response = await axios.get('https://api.example.com/data');
        
        // APIから返ってきたデータをmessageにセット
        this.message = response.data.message;
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    }
  },
  mounted() {
    // コンポーネントがマウントされた時にfetchDataメソッドを呼び出す
    this.fetchData();
  }
};
</script>

```

### import

`axios`はJavaScriptの外部ライブラリであり、別のファイルに定義されています。そのため、axiosを使用するには、まずそのライブラリをインポート（import）する必要があります。

### export default

ァイルが他のファイルに読み込まれたときに、そのファイルが提供する主要な機能やオブジェクトを簡単にインポートできるようします。`export default`は「ファイルの主要な部分を他のファイルに公開する」ために使いますが、モジュールの内容を他のファイルで簡単に利用できるようにするだけで、ファイルを読み込んだ際に自動的にメソッドが実行されるわけではありません。

### data()

コンポーネント内で使う変数を設定するためのものです。
以下の場合、`returen`で変数を返し、返された変数は`template`で使用することができます
後述のAPIで変数の値を変更することができます
```vue
<template>
  <div>
    <h1>{{ message }}</h1> <!-- ここで message 変数の値が表示される -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'  // 初期値として 'Hello, Vue!' を設定
    };
  }
};
</script>
```

### methodsオブジェクト
Vue.jsコンポーネント内で使用する関数（メソッド）を定義するための部分です。
`methods`という名称を使用することでVue.jsはそのセクションを自動的に認識しているので名称の変更はNGです

例ではAPIからデータを取得して、取得したデータを`data()`で宣言している変数に設定しております
```javascript
methods: {
  async fetchData() {
    try {
      // APIのURLにGETリクエストを送信
      const response = await axios.get('https://api.example.com/data');
      
      // APIから返ってきたデータをmessageにセット
      this.message = response.data.message;
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  }
}
```
### async 
JavaScriptで非同期処理を扱うための特別なキーワードです。`async` を付けると、そのメソッド内で `await` を使って非同期処理の完了を待つことができます。

### fetchData

データを取得するためのメソッド名で名前は自由に決められます。

### tryブロックとcatchブロック
エラーが発生する可能性のあるコードを実行するためのブロックを作成するために使います。`try` ブロック内でエラーが発生すると、プログラムは `catch` ブロックに移ります。これにより、エラー処理を行うことができます

`try` は`axios` を使用する際に必ずしも必要というわけではありません。ただし、エラー処理が重要な場合には、`try` と `catch` を使ってエラーを適切に処理することが推奨されます。
```javascript
methods: {
  async fetchData() {
    try {
      // APIからデータを取得
      const response = await axios.get('https://api.example.com/data');
      this.message = response.data.message;  // データをコンポーネントのデータに保存
    } catch (error) {
      // エラーが発生した場合にエラーメッセージを表示
      console.error('データの取得中にエラーが発生しました:', error);
    }
  }
}
```
### await

await は非同期処理の結果を待つために使います。
非同期処理を行う関数の前に await を書くと、その処理が終わるまで次の行のコードが実行されません。

### axios.get

特定のURLにリクエストを送り、そのレスポンスを取得できます

APIに合わせてリクエストの種類を以下のように変更できます
- axios.get: データを取得する
- axios.post: データをサーバーに送信する
- axios.put: データを更新する
- axios.delete: データを削除する

### this.message = response.data.message;

- `response`
APIから返されたレスポンスデータを格納しています。axios を使ってHTTPリクエストを送信すると、response というオブジェクトが返ってきます。

- `response.data`
レスポンスの中で、実際にサーバーから取得したデータ部分を指します。APIから返されるデータは、通常 `response.data` に含まれています。

- response.data.message:
サーバー(API)からのデータの中で `message` というキーの値を取り出しています。サーバーが返すデータが 
`{ "message": "Hello, world!" }` のような形になっている場合は、`response.data.message` で `"Hello, world!"` という文字列が取り出せます。

- this.message:

Vueコンポーネント内で定義された変数 `message` を指します。
`this` は現在のコンポーネントのインスタンスを指します。

- this.message = response.data.message;
APIから取得した message をコンポーネントの変数 message に保存しています。これにより、コンポーネント内で this.message にアクセスすることで、取得したデータを表示したり利用したりすることができます。

### catch (error) 

try ブロック内でエラーが発生した場合、そのエラーは `catch` ブロックで処理されます。`error` は、発生したエラーの詳細を含むオブジェクトです。

APIリクエストが失敗した場合、そのエラー情報が `error` 変数に格納されます。

#### error 変数に含まれる情報
- error.message
エラーの簡単な説明やメッセージが格納されています。
例: 'Request failed with status code 401'
- error.response
サーバーからの応答（レスポンス）に関する情報が含まれます。このプロパティは、サーバーがエラー応答を返した場合に存在します。
- error.response.status
サーバーからのステータスコード（例: 401, 404, 500 など）
- error.response.data
サーバーから返されたエラーメッセージや追加情報が含まれています。
- error.response.headers
サーバーから返されたレスポンスヘッダー
- error.request
サーバーにリクエストを送信したときのリクエストに関する情報が含まれます。このプロパティは、リクエストが送信されたが、サーバーから応答がなかった場合に存在します。リクエストの内容（URLやヘッダーなど）が含まれます。
- error.config
リクエストの設定や構成が含まれます。リクエストの送信時に使用した設定（URL、ヘッダー、データなど）がここに格納されています。

### console.error

`console.error`はコンソールにエラーメッセージを表示するための関数です。
通常のログ出力とは異なり、エラーメッセージとして表示され、赤く表示することができます

例えば、API リクエストが失敗した場合、コンソールには次のようなメッセージが表示されます

```javascript
async function fetchData() {
  try {
    const response = await axios.get('https://api.example.com/data');
    console.log('データ:', response.data);
  } catch (error) {
    console.error('データの取得中にエラーが発生しました:', error);
  }
}
```

```less
データの取得中にエラーが発生しました: [エラーの詳細]
```