Re:ゼロから始める文系プログラマ

未経験がプログラミングを通して人生を変える

【Vue.js】axiosでAPIのデータを操作する①

vue.js JavaScript

スポンサードリンク
　

f:id:ShotaNukumizu_1000:20211218162349j:plain

おはようございます。Shotaです。

今回の記事では、Vue.jsを活用してaxiosでAPIからのデータを抽出する方法を徹底解説します。

使用するAPIはJSONPlaceholderです。これは無料でAPIの動作確認を行える無償のサイトです。このサイトを利用するだけで、axiosの動作確認をするために事前にデータを用意する必要はないのです。

▼JSONPlaceholder公式サイト

jsonplaceholder.typicode.com

それでは早速、本題に入りましょう。



Vue.js✕axiosの使える環境を構築

まずは、HTMLとJavaScriptそれぞれ一つずつファイルを用意してください。そして、以下のコードをコピペしてください。


HTML

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    
    <h1>ProtoTyping</h1>
    <hr>

    <div id="app">
        <h1>{{ message }}</h1>
    </div>

    <script src="main.js"></script>
</body>
</html>


JavaScript

main.js

Vue.createApp({
    el: '#app',
    data() {
        return {
            message: 'Hello Axios',
        }
    },
}).mount('#app')


axiosの使用方法


axiosとは

axiosとはPromiseベース(２つの結果を持ちどちらか一方の結果を出力するJavaScriptに備わっているライブラリ)のHTTP ClientライブラリでGETやPOSTのようなHTTPリクエストを使ってサーバからデータの取得やデータへのデータ送信を行うことができます。


GETメソッドによるデータ取得

GETメソッドは非常に簡単なメソッドでaxios以外にも外部から情報を習得する際の基本になるメソッドです。通常のブラウザでもサーバにアクセスする際もGETメソッドを利用しています。

一番データ取得数の少ないusersから情報を取得してみましょう。

f:id:ShotaNukumizu_1000:20211220092511p:plain

ブラウザからhttps://jsonplaceholder.typicode.com/usersにアクセスしてもusersのデータを確認できますので、axiosを利用する際に取得できる情報を確認できます。本記事ではidとnameのみ取得します。

axiosのGETメソッドの基本的なプログラムの書き方は以下の通りになります。getの引数にURLを入れるだけでURLに対してGETリクエストを送信できます。リクエスト後に戻される値はすべてresponseの中に保存されます。

Vue.createApp({
    el: '#app',
    data() {
        return {
            message: 'Hello Axios',
        }
    },
    mounted() {
        axios.get('https://jsonplaceholder.typicode.com/users')
            .then(response => console.log(response))
            .catch(error => console.log(error))
    },
}).mount('#app')

これを実行すると、ブラウザのコンソールにresponseオブジェクトのdataプロパティに10件分のユーザデータが入っています。これでaxiosのGETメソッドの動作確認は完了です。

f:id:ShotaNukumizu_1000:20211220093514p:plain

確認した通り、responseオブジェクトのdataプロパティの中にusersのデータが配列として入っているのでVueインスタンスのdataプロパティに取得したデータを保存するusersを追加します。

response.dataをusersに入れるように変更を行います。

▼JavaScriptファイル

Vue.createApp({
    el: '#app',
    data() {
        return {
            message: 'Hello Axios',
            users: [],
        }
    },
    mounted() {
        axios.get('https://jsonplaceholder.typicode.com/users')
            .then(response => this.users = response.data)
            .catch(error => console.log(error))
    },
}).mount('#app')

▼HTMLファイル

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    
    <h1>ProtoTyping</h1>
    <hr>

    <div id="app">
        <h1>{{ message }}</h1>

        <ul>
            <li v-for="user in users">{{ user.name }}</li>
        </ul>
    </div>

    <script src="main.js"></script>
</body>
</html>

これを実行すると、以下のようにブラウザが表示されます。

f:id:ShotaNukumizu_1000:20211220093949p:plain


GETメソッドにフィルターをかける

ユーザ一覧から名前を使って検索をかけたい場合は、ある名前のユーザの情報のみ取得できます。JSONPlaceholderではその場合、パラメータを付けて取得できます。

下記のように指定すれば、Leanne Grahamという名前の人だけ情報を取得できます。

axios.get('https://jsonplaceholder.typicode.com/users?name=LeanneGraham')
    .then(response => this.users = response.data)
    .catch(error => console.log(error))

パラメータオプションでも同じようなことができます。

axios.get('https://jsonplaceholder.typicode.com/users',
{
    params: {
        name: 'Leanne Graham'
    }
})
    .then(response => this.users = response.data)
    .catch(error => console.log(error))


POSTメソッドによる新規作成

axiosのPOSTメソッドを使うと新規でデータを登録できるようになります。POSTメソッドが行えるかどうかはサーバの設定にもよるので、POSTリクエストを送信する際には事前に確認が必要です。

POSTの場合はGETとは違ってデータを新規作成する際に必要な項目とその値のセットを設定する必要があります。

POSTメソッドの場合、書式は以下のようになります。firstName, lastNameの項目を持つデータを追加しようとする際には下記のように設定する項目と値の組を設定します。2つ以上の項目がある場合は同じような方法で必要な情報すべての組を追加します。

axios.post('/users',
{
    params: {
        firstName: 'Roy',
        lastName: 'Johnshon'
    }
})
    .then(function (response) {
        console.log(response)
    })
    .catch(error => console.log(error))

WEBアプリケーションを開発する場合、新規データを追加する場合はユーザ入力が大半だと思いますのでinput要素を追加してユーザが入力した情報を利用してPOSTリクエストを送信します。

この際、vue.jsを利用するので、input要素にv-modelで新しいdataのnameを設定し、作成ボタンにv-onディレクティブでclickイベントを設定します。ボタンを入力するとcreateNewUserメソッドが実行されます。

▼HTMLファイル

<div id="app">
    <h1>{{ message }}</h1>

    <input type="text" v-model="name"><br>
    <button @click="createNewUser">Create</button>

    <ul>
        <li v-for="user in users">{{ user.name }}</li>
    </ul>
</div>

▼JavaScriptファイル

Vue.createApp({
    el: '#app',
    data() {
        return {
            message: 'Hello Axios',
            users: [],
            name: ''
        }
    },
    methods: {
        createNewUser() {
            axios.post('https://jsonplaceholder.typicode.com/users', {
                name: this.name
            })
            .then(response => this.users.unshift(response.data))
            .catch(error => console.log(error))
        }
    },
    mounted() {
        axios.get('https://jsonplaceholder.typicode.com/users')
            .then(response => this.users = response.data)
            .catch(error => console.log(error))
    },
}).mount('#app')

JSONPlaceholderはPOSTメソッドを使って動作確認を行うことはできますが、ユーザを追加したからと言ってサーバ上のデータが追加されるわけではないことは念頭に入れてください。

入力されたデータをunshiftメソッドを使って現在のusersの先頭に追加しております。

then(response => this.users.unshift(response.data))

inputに名前を入力して、作成ボタンを押すと入力したKosugi Kenがリストの一番上に表示されます。

f:id:ShotaNukumizu_1000:20211220100653p:plain


DELETEメソッドによるデータ削除

axiosのDELETEメソッドを利用して、データを削除する機能を実装します。GETメソッドとは違って削除するデータをサーバに伝える必要があるのでDELETEするデータを識別するIDが必要です。

各リストの行に削除ボタンを付けて、ボタンを押すとdeleteUserメソッドが実行できるように変更を行います。引数には削除するユーザを識別するためにuserのidを設定します。

▼HTMLファイル

<ul>
    <li v-for="user in users">{{ user.name }} <button @click="deleteUser(user.id)">Delete</button></li>
</ul>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    
    <h1>ProtoTyping</h1>
    <hr>

    <div id="app">
        <h1>{{ message }}</h1>

        <input type="text" v-model="name"><br>
        <button @click="createNewUser">Create</button>

        <ul>
            <li v-for="user in users">{{ user.name }} <button @click="deleteUser(user.id)">Delete</button></li>
        </ul>
    </div>

    <script src="main.js"></script>
</body>
</html>

▼JavaScriptファイル

deleteUser(id) {
    axios.delete(`https://jsonplaceholder.typicode.com/users/${id}`)
        .then(response => console.log(response))
        .catch(error => console.log(error))
}

Vue.createApp({
    el: '#app',
    data() {
        return {
            message: 'Hello Axios',
            users: [],
            name: ''
        }
    },
    methods: {
        createNewUser() {
            axios.post('https://jsonplaceholder.typicode.com/users', {
                name: this.name
            })
            .then(response => this.users.unshift(response.data))
            .catch(error => console.log(error))
        },
        deleteUser(id) {
            axios.delete(`https://jsonplaceholder.typicode.com/users/${id}`)
                .then(response => console.log(response))
                .catch(error => console.log(error))
        }
    },
    mounted() {
        axios.get('https://jsonplaceholder.typicode.com/users')
            .then(response => this.users = response.data)
            .catch(error => console.log(error))
    },
}).mount('#app')

コチラに関しても、クリックしてもブラウザ上のデータに変化は起こりません。また、サーバ上のデータも実際にはデータの削除は行われません。


PUTメソッドによるユーザの更新

axiosのPATCHメソッドを利用して、データの更新情報を取得します。PATCHでは既存のデータの上書きを行うので、更新したい項目と値の組を指定する必要があります。また、更新するユーザをし毀滅するIDも必要になります。

データを更新する際にはユーザ情報を変更するフォームが必要となりVue.js側の設定が少し複雑になるので本書では変更フォームの作成は行いません。

その代わり、axiosの更新履歴を確認するためにvue.jsのmountedにある関数処理でidが1のuserの名前の更新を行います。PATCHの場合はJSONPlaceholderでは更新したユーザのすべての情報が戻ってくるので、その情報をブラウザに表示させるためにunshiftを利用しています。

mounted() {
    axios.patch('https://jsonplaceholder.typicode.com/users/1', {
        name: 'John Doe'
    })
        .then(response => this.users.unshift(response.data))
        .catch(error => console.log(error))
}


まとめ

本日の記事では、Vuejsにおけるaxiosの操作について、

  • POST

  • GET

  • DELETE

  • PUT


以上の4種類のメソッドのデータ操作について解説しました。

次回の記事では、Vuejsでのaxios通信をもっと効率化させるための方法について詳細に解説していきます。

今回の記事はこれで終了です。

【参考サイト】

reffect.co.jp

jp.vuejs.org