画面とサーバの通信#

Webアプリケーションはブラウザ上で動くアプリケーションとサーバで動くアプリケーションが連携して動きます。

ブラウザ上で動くアプリケーションは画面を表示して、必要に応じてサーバと情報をやり取りして、顧客価値を実現します。ここでは、Axiosというツールを使って、ブラウザからサーバにアクセスします。

前提#

Railsのセットアップ、APIの作成、Vueによる画面の作成までを実行しておいてください。

Axiosのインストール#

ターミナルでrailsプロジェクト（rails new . を実行したディレクトリ）に移動して、以下のコマンドを実行してください。

yarn add axios

これでAxoisがインストールされました。

Axiosで情報を取得する。#

ターミナルを２つ開き、２つともRailsディレクトリにcdしておいてください。片方で、Railsを実行、

rails s

片方で、Vueのトランスパイルを実行してください。

npm run watch:front

src/front/componentsにUsers.vueというファイルを作成してください。内容は以下です。

<template>
  <div>
    <div v-for="user in users" :key="user.id">
      {{user.id}}:{{user.account_name}}:{{user.name}}:{{user.tel}}
    </div>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import axios from "axios"

export default Vue.extend({
  data() {
    return {
      users: [] as any[],
    };
  },
  async created() {
    let response = await axios.get("/api/users/");
    this.users = response.data;
    this.users.forEach(u=>console.log(JSON.stringify(u)))
  }
});
</script>

User.vueはVueのコンポーネントです。コンポーネントとは画面のパーツのことで、ここではUserの一覧を表示しています。 Vueコンポーネントが初期化されると、created()メソッドが呼ばれます。 axios.get でサーバにアクセスをしています。カッコの中はサーバのパスです。 async/await はTypeScriptで通信を同期して行うものです。

続けて、User.vueを画面に取り込みます。 src/front/componentsのApp.vueを編集します。

<template>
  <div>
    <p>{{message}}</p>
    <users></users><!-- この行を追加。画面にコンポーネントを埋め込んでいます。 -->
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import Users from "./Users.vue"; //この行を追加。Users.vueを取り込んでいます。

export default Vue.extend({
  components: { Users },//この行を追加。Usersを使えるようにしています。
  data() {
    return {
      message: "Vue動いたよ！",
    };
  },
});
</script>

これで、サーバから情報を取得できるようになりました。

データが入っていない可能性があるので、一度以下のURLをブラウザで開いてください。 [http://localhost:3000/api/users/create?name=比古清十郎&tel=000(0000)0000&account_name=hiko][http://localhost:3000/api/users/create?name=%E6%AF%94%E5%8F%A4%E6%B8%85%E5%8D%81%E9%83%8E&tel=000(0000)0000&account_name=hiko]

その後、http://localhost:3000/にアクセスすると、リストが表示されます。

次に、Userの新規作成機能を作ります。

Axiosで情報を送信する。#

新規ユーザ情報を追加して、サーバに送信する機能を作っていきます。まずは入力を受け付けるVueコンポーネントを作成します。 src/front/components/に UserInput.vue というファイルを作ります。内容は以下です。

<template>
  <div>
    <input type="text" placeholder="名前" v-model="user.name" />:
    <input type="text" placeholder="アカウント名" v-model="user.account_name" />:
    <input type="text" placeholder="電話番号" v-model="user.tel" />
    <button @click="createUser()" :disabled="!isUserHasAllParameter(user)">新規作成</button>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import axios from "axios";

export default Vue.extend({
  data() {
    return {
      user: { name: "", account_name: "", tel: "" },
    };
  },
  methods: {
    async createUser() {
      if (!this.isUserHasAllParameter(this.user)) {
        return;
      }
      let response = await axios.get(
        `/api/users/create?name=${encodeURIComponent(
          this.user.name
        )}&account_name=${encodeURIComponent(
          this.user.account_name
        )}&tel=${encodeURIComponent(this.user.tel)}`
      );
      var user = response.data;
      this.$emit("saved", user);
      this.user = { name: "", account_name: "", tel: "" };
    },
    isUserHasAllParameter(user: any) {
      return this.user.name && this.user.account_name && this.user.tel;
    },
  },
});
</script>

input、つまりは入力欄には v-model="user.name" により、userの値がバインドされるようになっています。 button @click="createUser()" により、ボタンが押されると、createUserメソッドが呼ばれます。 createUsersにより、userの値をサーバに送信し、送信し終わると、this.$emit("saved", user)により、このコンポーネントを使う側にuserが追加されたことを通知します。

src/front/components/Users.vue を更新します。

<template>
  <div>
    <user-input @saved="userSaved"></user-input><!--行を追加 UserInputコンポーネント追加 -->
    <div v-for="user in users" :key="user.id">
      {{user.id}}:{{user.account_name}}:{{user.name}}:{{user.tel}}
    </div>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import axios from "axios";
import UserInput from "./UserInput.vue"; //行を追加 UserInputコンポーネント取り込み

export default Vue.extend({
  components: { UserInput }, //行を追加 コンポーネントとしてUserInputを使えるようにする。
  data() {
    return {
      users: [] as any[],
    };
  },
  //ここから
  methods: {
    userSaved(user: any) {
      this.users.push(user);
    },
  },
  //ここまで追加。追加されたときに呼ばれます。
  async created() {
    let response = await axios.get("/api/users/");
    this.users = response.data;
    this.users.forEach((u) => console.log(JSON.stringify(u)));
  },
});

http://localhost:3000 にアクセスして、「名前」「アカウント名」「電話番号」を追加して、「新規作成」ボタンを押すと、ユーザが追加されます。

これでAxiosによりサーバ間通信を行うことができるようになりました。

これまでやってきたように、サーバにAPIを作り、画面をTypeScript、HTMLで作り、必要時に画面からAPIを呼び出すことにより、アプリケーションを作っていきます。

ご質問・ご要望をお待ちしています。