9月2週目（実績）
土曜日：朝1.5h,昼1.5h,夜2h,夜中0.5h=5.5h
- Vueの基礎
- v-bindディレクトリ（短縮系は
:）- 属性をjavascriptの式として設定できる
- 以下の画面ではpタグの
title属性に変数messageを設定している。マウスポインターを当てると設定されている値が展開されていることがわかる。 
- フィルター（データを加工する）
- HTML側では
{{ （引数） | （メソッド1）| （メソッド2）}}の形で渡す。 - 例）
{{ sum | numberWithDelimiter }}
- HTML側では
- computedプロパティ
- データが変らない限りキャッシュを利用するため再実行されない
- データを元に処理を加えた結果をプロパティとして提供したい場合に使う。
- v-onディレクティブとmethodsプロパティ
v-onでイベントを設定してmethodsに定義したメソッドを呼び出すイメージmethods内ではどこでイベントが発生したかなどを受け取れる- v-onの省略記法は
@
- v-ifとv-showの使い分け
- 頻繁に表示・非表示がある時はv-showそれ以外はv-if
- v-ifはDOM要素を作成・削除しているがv-showは表示・非表示しているため
- 頻繁に表示・非表示がある時はv-showそれ以外はv-if
- v-for
- 基本的な考え方は一般的なfor文と同じ
- keyを渡す
- keyを渡すことで各データの一意性を保ち、動的に並べ替えるなどの動作が可能となる。
- [https://noumenon-th.net/programming/2019/05/08/v-for/]
- qiita.com
- v-model
- tamplateオプション
- javascript内にhtmlが書ける
- vueインスタンスのライフサイクル
- コンポーネント
- v-bindディレクトリ（短縮系は
<user-list><user-list>
Vue.component('user-list', {
data() {
return {
users: [
{ id: 1, name: 'ユーザー１' },
{ id: 2, name: 'ユーザー2' },
{ id: 3, name: 'ユーザー3' },
{ id: 4, name: 'ユーザー4' },
{ id: 5, name: 'ユーザー5' }
]
}
},
template: `
<ul>
<li v-for="user in users" :key="user.id">
{{ user.name }}
</li>
</ul>
`
})
- コンポーネントの親子構造について
- 前提はVueインスタンの中にコンポーネントがあるということ。
- テンプレートの先頭要素は1つしか書けない。
- 例）以下ではdiv要素1つが先頭になっているが、divを消すとlist-titleとulが並ぶので2つ先頭ができてエラーとなる。
Vue.component('list-title',{
template:
<h2>ユーザリスト</h2>
})
Vue.component('user-list', {
data() {
return {
users: [
{ id: 1, name: 'ユーザー１' },
{ id: 2, name: 'ユーザー2' },
{ id: 3, name: 'ユーザー3' },
{ id: 4, name: 'ユーザー4' },
{ id: 5, name: 'ユーザー5' }
]
}
},
template: `
<div>
<list-title></list-title>
<ul>
<li v-for="user in users" :key="user.id">
{{ user.name }}
</li>
</ul>
</div>
`
})
- ローカルコンポーネントとグローバルコンポーネント
- 使用できる場所が変わってくる
- グローバルの場合
Vue.componentで生成する- どこからでも呼び出しはできるがコンポーネントの読み込みが毎回発生するためサイズやビルド時間に影響が出る。
- ローカル登録の場合
- 親コンポーネントから子コンポーネントへのデータの渡し方
const UserDetail = {
props: {
user: {
type: Object
}
}
}
propsとdataの違い
- propsの値は変更できない
- v-bind→
ケバブケース（単語をハイフンでつなぐ） - props→
キャメルケース（つなぐ単語の先頭のみ大文字にする）
node 8.9以上 省略
vue cli
- npm install -g @vue/cli@3.5.0
サーバーの起動・停止
- 起動
- npm run server
- 停止
- ctrl + c（cmdじゃない）
- 起動
vue create sample-app
-
- Vue.js Extention Packを導入
単一ファイルコンポーネント
- コンポーネントをファイルごとに分ける
- 部品化してメンテナンスが容易になる
- 1つのファイルにテンプレート・javascript・cssを書く
Vue Router
- SPAにおいてRoutingを定義する
Vuetify
Vuex
- ストアというデータの入れ物を作り、各コンポーネントからストアにアクセスしてデータの出し入れを行う。
- Vuexの昨日は
Action,Mutation,State,Getterで構成される。 - 基本的にはアプリケーションで1つのストアを持つ。
Vue.jsの値の更新
- templateから
$storeでストアにアクセスできる
- templateから
mapActionsでメソッドにアクションを組み込む
- 今までは
App.vueのmethodsの中でstore.jsで定義したメソットを呼び出すメソッドを定義していた。 mapActionscomponentsのmethodsにstoreのactionメソッドを組み込む- 分割代入を使用することでアクションをmethodsに組み込む
- 今までは
日曜日：朝1.75h,昼3.5h,夕2.5h=7.75h
- 引き続きVue.js。今日は一旦
Firebaseでデプロイまでいった。※デプロイ記念にキャプ撮るの忘れた。。。 
- mBaasの知見も欲しいところだけど今回は一旦ここまでにしてrails + vue.js on docker での開発を進めていく
- 参考資料
- qiita.com
- re-engines.com
月曜日：朝1.25h,夕1.5h=2.75h
- dbをmysqlにしたのとnodejsを12系にした以外はほぼ以下の通り
- qiita.com
- とりあえず
Hello Vue!までは表示できたので、手順をまとめて今週のタスクはOKだ。。。ガンガン開発進めよう。 
火曜日：朝1.5h,夕1.5h=3h
- 昨日の環境構築を整理するためにdockerでテンプレートを作成し
githubへ - github.com
- 何か新しい技術を習得しようって時はいつも
docker-composeで環境を作ってはアゲている気がする... - おかげでdockerは浅く理解はできた。
- 一応今週決めたタスクは終わったので水木金を使って
RSpecでのテストを実践しながら身に着ける。
水曜日：朝1.5h,夕1.5h=3h
- 以下を参考に今回作るポートフォリオに対するRSpecのルールを作成
- tech.medpeer.co.jp
- エイリアスを利用した自分辞書の作成の記事。面白い。
- qiita.com
以下、RSpecの準備として軽く機能を作り込んでいく
- ログイン
- お問い合わせ画面（リッチテキストで画像の投稿まで）
- RailsでMarkdownエディタとプレビューを実装する | D-Blog
- Vue.jsとmarked.jsでリアルタイムプレビューできるマークダウンエディタの作成 | Hodalog
以下、メモ
- 指定フォルダ内を再帰的に検索
find [検索対象フォルダのパス] -type f -print | xargs grep '[検索したい文字列]'
- Linuxでフォルダごとコピーは
-rオプションを使う（同名ファイルがある場合は上書き）cp -r ./ニューフォルダ/ ./オールドフォルダ/
木曜日：朝1.5h,夕0h=1.5h
金曜日：朝1.5h,夕1h=2.5h
- 以下を使用してrailsをapiとして使用する
- jsonを返すらしい
- qiita.com
- strongparametersでfetchを使っていたので調査
- morizyun.github.io
- ターゲットがnilの時にエラーを出したくない。って時に使うらしい。
- curlコマンドでrailsへPOSTでハマった。
- application_controller.rbへprotect_from_forgery メソッドを追加したところ正常にPOSTできた。
- 今回つまずいた原因はRailのCSRF対策を理解していなかったから。
- Qiitaにまとめてみた。
- qiita.com
- curlコマンドもQiitaにまとめる -qiita.com
