土曜：朝2h,夜2h=4h

Nuxt.jsの基礎
APIからデータを取得して画面へ表示する（詳細画面）
使用技術（vuex)
- 画面側でmapGettersを使うとgetterに定義してあるゲッターをゲッター名を呼ぶだけで使えるようになる

日曜：朝2h,昼2.25h,夜1h=5.25h

共通レイアウトのベストプラクティス
- 何も指定しなければdefault.vueが適用されるのでその母数が一番多いのが理想
Nuxt.jsのライフサイクルを知っておく執筆
- qiita.com
以前から実行できなかったeslintコマンドの自動修正するやつについて、以下のようにすることで実行できた
- "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore ."

月曜：朝1.5h,昼2h=3.5h

親子コンポーネント間のデータのやり取り（propsとemit）
- props:は子コンポーネント側に（親コンポーネントからどの値を受け取るかを）記述する。
- propsは変更することができない
手順（ソース以下）
- 1.対象の子コンポーネントの作成（ここではComponentChildrenと仮定）
- 2.親コンポーネントでのインポート
  - script部分にimport ComponentChildren from './ComponentChildren.vue'
  - 同様にscript部分にcomponents: { ComponentChildren }を記述
- 3.受け取る変数名と値を親のtemplate部分に記述<component-children v-bind:variable="message" />こんな感じ
- 4.受け取る変数名を子コンポーネントに記述
  - template部<p class="received">{{ variable }}</p>
  - script部props: ['variable']
- ※注意：v-bindの名前とpropsで定義した名前が一緒であること

//親コンポーネント
<template>
  <div class="container">
    <div>
      <p>{{ $store.state.hello.message }}</p>
      <button @click="$store.dispatch('hello/updateMessageAction', 'Dispath with payload')">Dithpatch</button>
    </div>
    <Child v-bind:variable="message" />
  </div>
</template>

<script>
import Child from "@/components/Children.vue";
export default {
  components: {
   Child
  },
  data: function() {
   return {
    message: 'Child !!'
     }
  }
}
</script>

//子コンポーネント
<template>
 <div class="child">
  <p>{{ variable }}</p>
 </div>
</template>

<script>
 export default {
  name: 'ComponentChildren',
  props: [
   'variable'
  ]
 }
</script>

参考 https://designsupply-web.com/knowledgeside/4778/
業務ではもちょうど親から子へのデータの伝搬を実装。明日実装して完璧にしよう。

火曜：朝1.75h,昼2h,夕0.5h=4.25h - 子から親へのコンポーネント間でのデータのやり取り - $emitを利用すると子コンポーネントから親コンポーネントのメソッドを呼び、データを受け渡すことが可能 - 第一引数には呼ぶメソッドを記述第二引数には渡すデータを記述 - 業務ではtypescriptをインプット - asyncDataとfetchの違い（以下参考 - qiita.com - asyncData：コンポーネントへデータを設定するために使用する。コンポーネントのテンプレートからアクセス可能 - 例）

<template>
  <h1>{{ title }}</h1>
</template>

<script>
export default {
  async asyncData ({ params }) {
    let { data } = await axios.get(`https://my-api/posts/${params.id}`)
    return { title: data.title }
  }
}
</script>

fetch：Vuex storeにデータを格納することを目的として使用する。コンポーネントに値をセットすることはできない
例）

<template>
  <h1>Stars: {{ $store.state.stars }}</h1>
</template>

<script>
export default {
  async fetch ({ store, params }) {
    let { data } = await axios.get('http://my-api/stars')
    store.commit('setStars', data)
  }
}
</script>

水曜：朝1h,昼8h=9h

elementuiにしたらバリデーションの仕方が違ったようでハマり中
elementuiのバリデーションはこんな感じでruleを指定するらしい
github.com
業務で扱っているNuxt.jsのアプリケーションはバックエンドに静的型付け言語を使用しているのでtypescriptを使っている
typescriptでのstoreの書き方は型を意識しているため難易度は上がる。。。

木曜：朝1h,日中7h,夕0.75h=8.75h

fetchの使い方
fetch メソッド内の this を通してコンポーネントのインスタンスにアクセスすることはできない
- それはコンポーネントがインスタンス化される前に呼び出されるため
これ火曜日に書いてた。。。疲れが。。。www
業務ではライフサイクルを意識した実装ができた。これについては明日まとめる
payloadについて
- store関連の処理で、よくpayloadと見るけどいまいち理解していなかった
- payloadはactionで使用する。
- actionを呼ぶmathods内（vueファイル）などで第二引数で値を渡ししてaction側の第二引数でpayloadとして一気に受け取る。取り出すときはpayload.●●で取り出すことができる。以下サンプル
vueファイルからactionをdispathしている箇所

this.$store
          .dispatch('personas/uploadImage', {
            //以下はaction側ではpayloadとしてまとまる
            name: fileName,
            file: file
          })

action内で受け取った値をpayloadとして使用している

//上記の第二引数をpayloadとして受け取り使用
uploadImage: (context, payload) => {
    return new Promise((resolve, reject) => {
      // firestorage にファイルをアップロード
      const uploadTask = firestorage
        .ref('images/' + payload.name)
        .put(payload.file)
        .then(snapshot => {

金曜：1h,8h=9h

firebaseにてログイン情報（ユーザがログインしてるか）の管理をするには以下のようにonAuthStateChangedメソッドを使用する形で行う
ログインしていればuserにユーザ情報が入ってくる

this.$fireApp.auth().onAuthStateChanged(user => {
      if (user) {
        const authUser = {
          id: user.uid,
          email: user.email,
          name: user.displayName
        };

TypeScriptにかなり悩まされている
擬似的にapi作ってやってみよう
qiita.com

週次報告

目標勉強時間：70h
勉強時間：39.5h
目標との乖離：-73.25h
何を得たか：nuxt.jsの基礎
何が必要か：nuxt.js + typescriptの基礎と応用
来週の目標：nuxt.js + typescript のインプットとアウトプットを続ける

自分による自分のためのブログ

10月2週目（実績）