![見出し画像](https://assets.st-note.com/production/uploads/images/52803517/rectangle_large_type_2_010a911accdff6be61118aeab48c52bd.jpeg?width=1200)
#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 でメモアプリを作成しながらモダンな開発を学ぼう!
この記事が気に入ったらサポートをしてみませんか?