1.はじめに

バックエンドとフロントエンドのフレームワーク両方学習し終わった皆さん、本格的に両方を用いたWebアプリ制作を始めると思います！その中の道しるべになればいいなと考えているので、ぜひ見ていってください！
今回は組み合わせ方の中で最も有名であるRESTfulな通信をするREST APIを紹介したいと思います！

1-1.使用する環境について

Python           3.9.13
Flask            2.2.2
Flask-Cors       3.0.10
Node.js          v16.17.0
@vue/cli         5.0.8

2.前提

2-1.フロントエンド

2-1-1.フロントエンドの知識

フロントエンドを勉強し終わった人は以下の知識があることを前提としています。

Vue.jsやReactの書き方を知っている
これらにおいてSPAで実装できる
つまり、Routingができる

まだの人は、学習頑張ってください！

2-1-2.フロントエンド終了後の想定される疑問

firebaseなどのBaaSやSaaSなどを利用しての実装はわかったけど、どうやってバックエンドとつながるのだろう

2-2.バックエンド

2-2-1.バックエンドの知識

バックエンドを勉強し終わった人は以下の知識があることを前提としています。

Flask、Ruby on Rails, Django, Express.jsなどのバックエンドの書き方を知っている
DBの知識は今回は問いません！

2-2-2.バックエンド終了後の想定される疑問

バックエンドを勉強してると、大体htmlを表示できる特殊な手法(erbなど)が出てきたけど、フロントエンドとの連携させる場合はどのようにすればいいのかわからない

3.どう連携させる？

基本的に、サーバー側とクライアント側での通信を行うように設計します。

引用:https://www.infraeye.com/2020/07/05/network051/

実はいろいろ方式があり、SOAP,XML-RPCなどがありますが、今回はRESTという方式を使ったものを紹介します！(SOAPやXML-RPCが気になる人は調べてみてね！)

具体的には、バックエンドをAPI(データをやり取りするもの)として動作させていきます！

4.REST APIとは

REST APIはRESTful APIとも呼ばれますが、大体以下の条件を満たすもののことを指します。

HTTPメソッドによって、通信を行う
あらかじめ、データの形式を決めて通信する(大体JSON形式)
URI(Webだと大体URL)でアクセスする
APIの処理が1回で完結する

5.実装

今回はFlaskとVue3を用いて実装していきます
形態としては、同じサーバー上に実装する感じで行きたいと思います！(FlaskでVueをホスティングする)
もし、別サーバーで実装したい場合は、CORS設定を追加してください！
細かい構築方法はこちらの記事で書いてくれていますのでご覧ください！

ディレクトリ構造

practice
  ├─backend (Flask)
  └─frontend (Vue.js)

バックエンド(Flask)側

まず、ローカルPCにFlaskが入ってない人はインストールしましょう(バックエンドを別サーバーからのアクセスを許可したい場合はflask_corsも入れましょう)

$ pip install flask

バックエンド側のコード全文

practice/backend/app.py

from flask import Flask, request, jsonify
from flask_cors import CORS # cors設定する人は追加する

app = Flask(__name__,static_folder='../frontend/dist/static', template_folder='../frontend/dist')#vueのbuildファイルのインポート

@app.route('/', defaults={'path': ''})#ホスティングの設定
@app.route('/<path:path>')
def index(path):
    return render_template('index.html')

@app.route("/api/get",methods=["GET"])#GETメソッドでの処理
def say_hello():
    return jsonify({"say":"hello"})

@app.route("/api/post",methods=["POST"])#POSTメソッドでの処理
def say_name_hello():
    name = request.json["name"]
    comment = f"hello {name}-san!!!"
    return jsonify({"say":comment})

if __name__ == '__main__':
    app.run()

フロントエンド(Vue)側

Vue-CLI想定で作成しています

下準備

Flaskとの連携を行うために下準備を行います

vue.config.jsに以下の文を加えましょう

practice/frontend/vue.config.js

module.exports = {
  assetsDir: 'static',
};

favicon.icoの場所の配置をこのように変えましょう

frontend
  └─public
      ├─static
      │   └─img
      │       └─favicon.ico
      └─index.html

それに合わせてfrontend/public/index.jsを書き換えましょう

public/index.html

   <head>
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="icon" href="<%= BASE_URL %>static/img/favicon.ico">
     ...
   </head>

axiosの導入

フロント側でリクエストを送る機能を作っていきましょう
まず、リクエストを送るのにaxiosを用いていきたいと考えていますので、下記を実行しましょう

$ npm install axios

そしてリクエスト用の関数を記述していくため、
src下にfunctionsディレクトリを作成してreqs.jsを作成しましょう

practice/frontend/src/functions/reqs.js

import axios from "axios"
export const get = async function(){
    try {
        const response = await axios.get("/api/get")// /getにGETメソッドでのリクエストを送る
        return {...response.data, error: false}
    } catch(e) {//通信失敗したときの処理を記述する
        console.log(e)
        return {error: true}
    }
}
export const post = async function(obj){
    try {
        const response = await axios.get("/api/post",obj)// /postにPOSTメソッドでのリクエストを送る, 送信データはobjに入っている
        return {...response.data, error: false}
    } catch(e) {//同上
        console.log(e)
        return {error: true}
    }
}

今書いたこれらの関数を実際のvueファイルので用いていきましょう！
今回はただ表示させるだけの内容にしてみました！

practice/frontend/src/App.vue

<template>
  <div>{{ getComment.say }}</div>
  <div>{{ postComment.say }}</div>
</template>

<script>
import { get, post } from "./functions/reqs.js"//functionsからインポートしてくる
export default {
  data() {
    return {
      getComment: "",//getで取得したオブジェクトを格納する変数
      postComment: "",//postで取得したオブジェクトを格納する変数
    }
  },
  async created() {
    this.getComment = await get()//getを実行して代入
    this.postComment = await post(//たけしという名前をpostして戻り値を代入
      {
        name: "Takeshi"
      }
    )
    console.log(this.getComment)//オブジェクトを見てみよう!!
    console.log(this.postComment)//オブジェクトを見てみよう!
  },
}
</script>

実行

これでフロントエンド側の実装が完了しました！
では早速ビルドして実行してみましょう！！
まずフロントエンドをビルドします

$ npm run build

そして、Flaskを起動します

$ python app.py

そこで起動されるURLから実行結果が下のようになれば成功です👏

6.おわりに

いかがだったでしょうか？
本記事ではSPAでREST APIを作成、利用する方法について述べてきました。
そもそも、フロントエンドとバックエンドの両方ともやっている時点で知識は十分身についていると思います。あとは組み合わせ方をいくつか学べば、作れるWebアプリの幅が一気に広がりますので頑張りましょう！
最後までご覧いただき、ありがとうございました。

VueなどのSPAを使った際のREST APIの設計