#47 Vue.js + Railsアプリ開発 アウトプット

こんにちは、hiroです😃
毎日自宅で転職のための企業応募と、新しい言語の学習、アウトプットを続けています。さすがに自宅ばかりで過ごすと集中力が低下しまくるので、本日はスタバに行って学習をしてみました😇
結論、気分転換になるし、程よい雑音で集中が出来るし、コーヒーは思ってたより安いし、長い時間滞在出来るので、週の半ばで通う事に決めました😎モチベーション保ちながら転職活動とレベルアップをしていきます！

本日もアウトプットしていきます！

＜開発内容＞
　Vue.jsとRailsを使ったメモアプリの開発
＜目　的＞
　学習したVue.jsが、Railsと組み合わせた時にどう実装するのかを確認
＜機能一覧＞
　メモ一覧機能
　・APIの実装
　　-モデルの作成
　　-ダミーデータの作成
　　-ルーティングの設定
　　-コントローラーの作成
　・Vue.jsの実装
　　-axiosを使ってAPIを呼び出す
　メモ投稿機能
　・APIの実装
　　-ルーティングの設定
　　-コントローラーの作成
　・Vue.jsの実装
　　-投稿フォームを追加
　　-axiosを使ってAPIを呼び出す

上記内容で不明点や理解が足りない部分を抜粋して記載しました。

Axios（アキシオス）

・Vue.jsで使用する "非同期通信" 。

■ターミナル
yarn add axios

・インストールが出来たかは以下ファイルにて確認出来る。

■package.jsonファイル
{
〜省略〜
  "axios": "^0.21.1",
〜省略〜
}

・Axiosを使ったAPIの呼び出しは以下ファイルに記述する。

■app.vueファイル
<template>
  <div id="app">
  <ul>
    # 配列を1つずつ要素として取り出す
    <li v-for="memo in memos" :key="memo.id">　
      {{ memo.title }}: {{ memo.description }}
    </li>
  </ul>
  </div>
</template>
<script>
import axios from 'axios'; 　　#axiosモジュールをインポート
export default {
  data: function () {
    return {
      memos: "memos"
    }
  },
  mounted(){　　　　　　　#アプリ立ち上がりの最初のタイミングで実行
    this.setMemo();
  },
  methods: {
    setMemo: function () {　　　　　#setMemoという関数を定義
      axios.get('/api/memos')　　　　  #APIを呼び出し
      .then(response => (　　　　　　#.then()で通信が成功した際の処理
        this.memos = response.data　#呼び出したAPI情報をmemosに代入
      ))
    }
  }
}
</script>
<style scoped>
p {
font-size: 2em;
text-align: center;
}
</style>

webpack-dev-server

・コードを追加した際に、ブラウザをリロードしないと追加したコードは反映されない。上記起動をすることで、"リアルタイムで変更結果を反映させる" 事が出来る。

■ターミナル
bin/webpack-dev-server

Talend API Tester

・簡単に送信パラメータを作成できる "Google Chromeの拡張機能" 。

v-model

・v-model を使うことで、 "data () {}" で定義したプロパティの値をリアルタイムで更新出来る。

v-onディレクティブ

<button v-on:イベント名="関数"></button>

・v-on ディレクティブを使うことで、 "イベントの発火時にJavaScriptの実行" が可能。

開発期間は2日あれば十分に完成出来る内容でした。学習した知識の定着は開発で手を動かすのが一番ですね！
ちなみに完成品はこちら
https://gyazo.com/b11454740efd9a3c5a5fada56e06a855

作成に興味のある方は、有料にはなりますがTechPit「Rails × Vue.js でメモアプリを作成しながらモダンな開発を学ぼう！」で学習してみてください😃

https://www.techpit.jp/courses/123

本日も最後まで読んで頂き、ありがとうございました！🙇‍♂️

※本日時点で学習した内容を備忘目的で投稿しております。各項目を全て網羅している内容では無いため、「駆け出しが張り切ってアウトプットしてるな〜」程度で温かい目で読んで頂けると幸いです😇

■参考教材TechPit　
Rails × Vue.js でメモアプリを作成しながらモダンな開発を学ぼう！