【やってみた】デザイン出身の方やWebで開発を始めた方でも心が折れないVue.js SPA

最近Phoenixに興味があり、学習の一環として以下の記事をやってみました
[デザイン出身の方やWebで開発を始めた方でも心が折れないVue.js SPA（ElixirによるAPI開発付き) Elixir / piacerex](https://qiita.com/piacerex/items/a6da39204eb302465181)
##Vue.jsとHTMLの間でデータ受け渡しを行う
コピペで問題なくできました
![posts.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505609/7a756152-fb02-0d1b-6618-4e0ae41545b7.png)
コンソールウィンドウでの確認も行いました
![console.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505609/058736c5-be0c-83f9-a939-9e8779b6e283.png)
##PostgreSQLでつまずいた
以下の記事を参考に再インストールしたら、正常に起動できました
[[Elixir]Excelから関数型言語マスターの3~5回目をやってみた / yoshitake_1201](https://qiita.com/yoshitake_1201/items/d03c3ecba9da2a37f050)

<details><summary>これについても少しまとめました</summary>
<div>
###Homebrewでインストール
```terminal
$ brew install postgresql
```
### 設定ファイル等の削除
```terminal
$ rm -rf /usr/local/var/postgres
```
ここで、日本語を使用する前提のデータベースの初期化をするため、インストール時に作成された設定ファイル、ログ、データ等をすべて削除します
### データベースの削除
```terminal
$ initdb /usr/local/var/postgres -E utf8 --no-locale
```
そして、データベースの初期化をします（デフォルトのエンコーディングをUTF-8,日本語を対象としたデータベースを作るので、ロケール設定をしない）

```terminal
$ postgres --version
```
念の為インストールしたPostgreSQLのバージョンが合っているか確認します
### HomebrewのServicesを追加する
```terminal
$ brew tap homebrew/services
```
追加しないと、エラーが発生するので忘れずに
### データベースを起動する
```terminal
$ brew services start postgresql
```
### データベース一覧の確認
```terminal
$ psql -l
```
### ユーザの作成
このままでは、環境変数$USERがスーパーユーザーになっているので、新しいユーザーを作成します
```-P```オプションをつけることでパスワードを付与し、```-d```オプションをつけることで「ecto でデータベースの作成を行うために」権限をつけることができます

```terminal
$ createuser -P -d postgres
パスワードを計2回入力
Enter password for new role:
Enter it again:
```
これでPostgreSQLのインストールは完了したはず
<b>~~めんどくさいですね~~</b>
</div>
</details>
##PhoenixでAPIを作る
API作成、その後の作業は記事通りに進めました
###DB マイグレーションとは
SQLを書くことなくデータベース内にテーブルを作成することができる機能
###CSRF とは
CSRF(クロスサイト リクエスト フォージェリ)の略
Webアプリケーションの脆弱性を利用したサイバー攻撃の一種
##Vue.jsから自前のAPIを呼び出す
###HTML部分の解説
``script``内以外はVue.jsを利用したHTMLである
```v-for```: Python等のfor文と類似したVue.jsの機能```item in items```と記載することで、`items`の中身が`item`に代入される
```v-model```: そのテーブルに割り当てる変数を記載する
###Vue.jsの```<script>```解説
####mounted
更新時に呼ばれる関数である

```javascript:mounted()
        mounted()
        {
            axios.get( '/posts' )
            .then( response => { this.results = response.data.data } )
        }, 
```

`/posts`をget処理し、得た情報を```this.result```に代入している
```response.data```: data以外にはstatus, headers, statusText, config等がある
####OnUpdate

```javascript:OnUpdate
onUpdate: function( evt )
            {
                this.results.forEach( ( result, i ) => 
                {
                    axios.put( '/posts/' + result.id, 
                        { 
                            'post':
                            {
                                'title': result.title, 
                                'body':  result.body, 
                            } 
                        } )
                } )
            }, 
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505609/c90c26f2-1819-eca4-4f31-d1209b46e84c.png)
resultsがある限り、`/posts/result.id/`内にtitle, bodyを更新する
####OnDelete

```javascript:OnDelete
 onDelete: async function( id )
            {
                await axios.delete( '/posts/' + id )

                axios.get( '/posts' )
                .then( response => { this.results = response.data.data } )
            }, 
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505609/a5f1adad-6e83-c811-eb7e-c221532f7aaf.png)
指定された項目に対応した`/posts/id/`内にあるデータを削除する
####OnCreate

```javascript:OnCreate
onCreate: async function( evt )
            {
                await axios.post( '/posts/', 
                    { 
                        'post':
                        {
                            'title': this.new_title, 
                            'body':  this.new_body, 
                        } 
                    } )

                this.new_title = ''
                this.new_body  = ''

                axios.get( '/posts' )
                .then( response => { this.results = response.data.data } )
            }, 
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505609/e6ebf8a9-de14-8f89-50f1-8876463c63f7.png)
指定された項目を`/posts/`以下に追加する。その後、new_title, new_bodyを初期化
(ちなみに初期化しなければ、次の新規フォームに前回入力した文字が残る)

##実行結果
![ss.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/505609/ec7d9217-c242-c876-eb84-408b0aa30eaa.png)
プログラムを実行してみたところ、想定通りの動作をしました

##感想
- $\mathbb{Vue.js}$を初めて触ったが、Web系はプログラムの反映がわかりやすいから、楽しい
- ログイン機能を追加して、DBに少し手を加えるとSNSも制作できそう