駆動しよう〜ElixirでAI/MLを高速化」でした!本題PhoenixはElixirで書かれたWebフレームワークです。今回はこのPhoenixをAPIサーバーとして利用し、さらにそのAPIから取得したレコードをVue.jsを利用して画面表示するところまでを解説したいと思います。環境Phoenix環境はDockerで用意するのがオススメです。phx.*を利用するようにしましょう。APIアプリをサクッと書いてみる」のスライドでばっちりなので、こちらのスライドに則ればOKです。今回はphoenixが入っているこちらのdockerイメージを利用してみます。marcelocg/phoenix以下、コンテナ内での作業です。先にpostgresqlを入れておきましょう。restart続いて、本題のPhoenixプロジェクトを作成します。PhoenixフレームワークはデフォルトでBrunchというビルドツールを採用しており、これを利用しない場合には—no-brunchをつけてプロジェクトを作成します。ecto.createectoはElixirで書かれたデータベースのラッパーとクエリ操作を提供するモジュールです。DB操作の記述やバリデーションの記述が楽になる便利なものぐらいにとらえておきましょう。ectoはPhoenixに依存したものではないので、Phoenix環境下以外でも利用することができます。Elixirで値のバリデーションをEctoで行うの記事はその一例です。(SQL_ASCII)のように怒られたら、config/dev.exsにtemplateの項目を追加してみてください。rows)続けてAPIで提供するデータのモデルを作成します。今回は「タイトル」と「本文」をデータとして持つArticleモデルを用意しましょう。body:textファイルが生成されたら、ルーティングの追加をし、マイグレーションを実行しましょう。phx.serverAPIの準備ができたので、試しにlocalhost:4000/articlesに対してPostmanからgetとpostを試してみましょう。再度GETすると保存したレコードが取れています。アクセスしたときに表示される↓↓の画面をいじりましょう。事前準備としてvue.jsと、HTTPクライアントのaxiosをCDNで持ってきちゃいましょう。app.html.eexのheadタグ内に以下を追記します。src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>これでVue.jsが利用できる状態になりました。検証中にCDNでサクッと持ってこれるのはいいですね。Vue.jsで何を書くかまず方針を整理します。ここからVue.jsで書いていく内容は以下の2つです。DOMでどうデータを表示するか(View)(1)は.jsにVueインスタンスを作成して定義します。}}で記述して定義します。データ(Model)と見た目(View)をきれいに分離して記述するのがVue.jsのポイントです。VueインスタンスでDOMが持つデータを定義するまず(1)を書いていきましょう。body直前で呼ばれているapp.jsでvueインスタンスを作成します。}});app.html.eex内のmainタグをvueインスタンスのROOT要素として登録しています。Vueインスタンスが作成された後に実行されるフック関数created()を利用して、インスタンスが作成されたタイミングでAPIを叩き、自身のdataにapiの返り値を格納しています。似たフック関数にmounted()があり、こちらはDOMの描画が完了したタイミングで呼ばれます。APIを叩いてVueインスタンスにデータを格納する処理はDOMの構築を待たずに実行してOKなので、created()で書きましょう。Vueインスタンスが持つデータを表示する最後に(2)です。Vueインスタンスが持つデータをどう表示するかをhtmlに書いてあげれば完成です。<hr></div>v-forは配列データをループさせるときに書くvueの記法です。ここでは割愛しますが、あるデータが真のときだけDOMを表示するv-ifなど、他にもたくさんの記法があります。localhost:4000にアクセスすると、v-forでループしてDBのすべてのレコードが表示されているはずです!まとめ以下の流れで、Phoenix+Vueのシンプルなアプリケーションを作成しました。Vueインスタンスのdataに格納し、画面表示Phoenixで「いかにデータを作成するか」、Vueで「いかにデータを表示するか」という関心の分離が出来るので、この構成は良いですね。