Vue.jsとFlaskによるシングルページ・アプリケーション。AJAXの統合

REST APIによるAJAXインテグレーション

Vue.jsとFlaskを使ったフルスタックWeb開発の5回目の投稿にお付き合いいただきありがとうございます。この投稿はかなり短いですが、Asynchronous Javascript and XML (別名、AJAX) を使ってフロントエンドとバックエンドのアプリケーションを接続する方法を実演するため、非常に価値のあるものになるでしょう。

この投稿のコードは、私の GitHub アカウントの FifthPost ブランチで見ることができます。

シリーズ内容

  1. VueJSの紹介と概要
  2. Vueルーターの操作
  3. Vuexによる状態管理
  4. FlaskによるRESTful API
  5. REST APIによるAJAX統合 (あなたはここにいます)
  6. JWT認証
  7. 仮想プライベートサーバーへの展開

AJAXとシッククライアントアプリの簡単な説明

AJAXは、高度にインタラクティブで高速なWebアプリケーションを構築する上で大きな成功を収めた強力な技術です。実際、AJAX は、シンクライアント Web アプリの時代から、今日見られるようなますますシックまたはファットなクライアント Web アプリへの大きなパラダイムシフトを促進した、おそらく最も衝撃的な技術だと思います。このシリーズで私が実演してきた調査アプリケーションは、シッククライアントとして実装された分散型クライアントサーバアプリケーションと考えられています。つまり、ロジックと動作の大部分は、クライアント側で JavaScript（主に Vue.js を使用）により実装され、サーバー側は、単にデータを消費して提供する、かなり間抜けな RESTful API ということになります。

このシッククライアントアプリケーションが、状態（データ）の維持、動作、データ駆動型のプレゼンテーションを両立させるためには、2つの主要な技術があります。

    1. Vue.jsフレームワークと、vuex fluxライクなライブラリと共有される優れたリアクティブ・システム
  2. AJAX機能は、axiosというよくできたJavaScriptライブラリに実装されています。

Vue.jsとvuexの素晴らしさについては、すでにこのシリーズの以前の投稿でご理解いただいていることと思います。そこで、今回はAJAXの説明に重点を置いてみます。AJAXとは、HTTPを利用して、ブラウザ内で非同期的にサーバとの間でデータをプッシュしたりプルしたりするネットワーク通信技術です。これにより、ブラウザはページ全体を更新するのではなく、少量のデータに依存する個々のコンポーネントを迅速に更新することができ、はるかに応答性の高いエクスペリエンスを実現することができるのです。

AxiosのセットアップとCORSの有効化

axiosをインストールするために、npmを使用して、次のコマンドで私のpackage.jsonファイルに保存します。

$ npm install --save axios

さて、axios を使用してクライアントからバックエンドサーバーに AJAX リクエストを行うには、Flask アプリケーションを変更して Cross Origin Resource Sharing (CORS) を有効にする必要があります。クライアントが、プロトコル、IP アドレス/ドメイン名、ポート番号で定義される別のマシンに存在するリソースにリクエストを行う場合は、いつでも CORS に関連する追加のヘッダーを追加する必要があります。幸いなことに、Flask には Flask-CORS という便利な拡張機能があり、Flask との統合が非常に簡単になります。前回と同様に、私は pip を使用して、次のようにインストールします。

(venv)$ pip install Flask-CORS

次に、 CORS 拡張オブジェクトをインポートしてインスタンス化し、バックエンドアプリケーションの application.py モジュール内で Flask アプリケーションオブジェクトに登録する必要がある。

"""
application.py
- creates a Flask app instance and registers the database object
"""


from flask import Flask
from flask_cors import CORS


def create_app(app_name='SURVEY_API'):
  app = Flask(app_name)
  app.config.from_object('surveyapi.config.BaseConfig')


cors = CORS(app, resources={r"/api/*": {"origins": "*"}})


from surveyapi.api import api
  app.register_blueprint(api, url_prefix="/api")


from surveyapi.models import db
  db.init_app(app)


return app

AxiosによるAJAXリクエストの実装

次は scr/api/index.js で実装したモック関数を axios ライブラリを使った GET、POST、PUT リクエストに置き換える必要があります。前回の記事で、Flaskアプリケーションで以下のRESTful APIエンドポイントを定義したのを覚えているかと思いますが、これはブラウザ内のJavaScriptから呼び出す必要があるのです。

| ルート｜メソッド｜機能
| — | — | — |
| /api/surveys/ | GET | すべてのアンケートを取得する。
| /api/surveys/ | POST | 新しいアンケートを作成します。
| /api/surveys/id/ | GET | アンケートの ID を取得する｜?
| /api/surveys/id/ | PUT | アンケートの選択項目を更新する｜(英語)

src/api/index.js で axios ライブラリをインポートし、再利用性のために API リソースのルート http://127.0.0.1:5000/api に等しい API_URL という変数も定義しています。そして、既存の関数の本体を、axiosのメソッドである get(...), put(...), post(...) を利用するように、以下のように置き換えます。

// api/index.js


import axios from 'axios'


const API_URL = 'http://127.0.0.1:5000/api'


export function fetchSurveys() {
  return axios.get(`${API_URL}/surveys/`)
}


export function fetchSurvey(surveyId) {
  return axios.get(`${API_URL}/surveys/${surveyId}/`)
}


export function saveSurveyResponse(surveyResponse) {
  return axios.put(`${API_URL}/surveys/${surveyResponse.id}/`, surveyResponse)
}


export function postNewSurvey(survey) {
  return axios.post(`${API_URL}/surveys/`, survey)
}

あとは、src/store/index.js に 2 つの小さな変更を加えるだけで、axios が get リクエストからデータを返す際に使用している規約に対応することができます。loadSurvey(…)とloadSurveys(…)アクションメソッドでは、それぞれaxios.get(…)メソッドを呼び出す関数を呼び出していますが、この関数はプロミスを返します。これらのプロミスが解決すると、サーバーへのAJAXリクエストによって返されたデータが含まれ、そのデータは解決されたプロミスオブジェクトの.dataメンバーに保持されます。したがって、ミューテーションに渡されるデータはresponseではなくresponse.data` である必要があります。

const actions = {
  // asynchronous operations
  loadSurveys(context) {
    return fetchSurveys()
      .then((response) => {
       // context.commit('setSurveys', { surveys: response })
        context.commit('setSurveys', { surveys: response.data })
      })
  },
  loadSurvey(context, { id }) {
    return fetchSurvey(id)
      .then((response) => {
        // context.commit('setSurvey', { survey: response })
        context.commit('setSurvey', { survey: response.data })
      })
  },

そして、出来上がりです! なんてシンプルなんでしょう。

前の記事でフロントエンドとバックエンドを構築するために必要なすべての重労働はすでに対処されているので、AJAX通信を統合するために必要な作業は文字通りとても簡単です。あとは開発サーバーを立ち上げて、アンケートアプリケーションを動かしてみるだけです。

結論

この短い記事では、強力な AJAX 通信技術によってフロントエンドとバックエンドのアプリケーションを接続する方法を示しました。これを達成するために、私はクライアント側を処理するために axios ライブラリを利用し、バックエンド側では CORS を有効にするために Flask-CORS 拡張を利用しました。

次回は、ユーザーの登録と認証の実装について説明します。いつも通り、コメントや批判をお待ちしています。

タイトルとURLをコピーしました