Excelから関数型言語マスター7回目： Vue.js＋内部API（更新編）...をやってみた

元記事様: https://qiita.com/piacerex/items/7cd1162ce6d66a334a07

実行環境

・Mac OS v10.15.7(スペックがゴミすぎてOSのアップデートが不能💦)

・Elixir v1.13.2 ( Erlang/OTP 24)

・Phoenix v1.6.6

データ入力可能にし、全件更新できるようにする

うん、問題なし。 (前回のを引き継いでいるため相変わらずCSSが崩れてるけど)

コード自体の関数や仕組み、深い読み込みは２週目にします。まずは動く感動を味わいたい！

【Vue.js】→Javascriptのフロントエンドのフレームワーク。コンポーネントごとの管理ができる、拡張性が高い。双方向バインディングがあるためVue.jsを編集するとHTMLも変更されるし、逆も然り。

データ削除

おぉ、ボタン押したら消えた！

【async】→非同期処理。対義語はsync

【await】→ async function()内の処理が完了するまで、次の処理に映らない

【非同期処理】→Javascriptは基本的にメインメソッドの処理を一つずつ行う（この辺はやはりJavaと似ている）。この処理を同期処理と言うが、これを一旦停止し、次の処理に同時並行で入ってもらうための処理を非同期処理という。 

今回はasync と await を同時使用することで。axios.delete() の処理が終わるのを待ってから次の処理、すなわち axion.get() の処理に入ること 、言い換えれば同期処理 を指示している。

データ追加

「追加」ボタンでonCreateを呼び出しますが、追加用フィールドは、resultsとは別のモデルを用意します。onCreateは、POSTメソッドで追加APIを呼び出し、その後、データ取得し直します（ここも同期処理化しています）

メインメソッドでonCreateを呼出してasyncとawaitで同期処理= 'post'内の処理で新しいフィールドが生成されるのを終わるまで待ってから、axios.get()を呼出。

何をしてるかははっきりわかる。

この一連のデータの取得、追加、削除をVue.js＋REST APIによるSPA（Single Page Application）というそうな。覚えておこう。

参考: https://jsprimer.net/basic/async/, 

https://qiita.com/soarflat/items/1a9613e023200bbebcb3