9月4週目（実績）

土曜日：1h=1h

• 3連休ということで今日はパソコンは触らない日とし積んであったWebを支える技術を読書
• メモメモ：サイボウズのエンジニアブログ
• blog.cybozu.io
• リフレッシュできたので明日からVue.jsをやっていく

日曜：2h=2h

• Vue.jsのインプット
• template以下の要素は必ず1つである必要がある。
• コンポーネントのローカル登録とグローバル登録について
  • componentメソッドはグローバル登録（使える範囲：どこでも）
  • componentsオプションはローカル登録（登録したコンポーネント内でしか使えない）
• 親コンポーネントから子コンポーネントへのデータの受け渡し
  • props
• 命名規則
  • v-bind⇒ケバブケース（小文字ハイフンつなぎ（user-name)）
  • props⇒キャメルケース（つなぎ部大文字（userName））
• 子コンポーネントから親へのデータの渡し方
  • 具体例）子コンポーネントで編集してそれを親で反映する
  • $emitメソッドで値を渡す
• その他コンポーネント間の通信方法でsync修飾子を使う方法もある

月曜：2h=2h

• qiita.com
• この3連休はダメダメでした。切り替えてしっかりやっていこう。

火曜：1.5h=1.5h

• vue.jsでのgoogle認証の実装
• やること検索機能の実装
  • https://www.webopixel.net/javascript/1461.html
  • techblog.scouter.co.jp
• 夕方は次のプロジェクトの面談...Vue.jsとAWSが触れそうでホッと一息。
• それに伴ってNuxtでView開発ができるようにスピードあげてNuxtを勉強する
• これはチャンスだ。

水曜：朝1.5,夕1.5=3h

• vue.js + firebaseでTodoアプリを作成
• なんも無いけど一旦デプロイ
  • https://qa-sample-c9972.firebaseapp.comqa-sample-c9972.firebaseapp.com

木曜：朝1.5h、夕1.5h=3h

• NuxtでfirebaseSDKを使うことでNuxt プロジェ クト上から Firebase の Auth 機能、Database 機能にはアクセスできるようにする
• Nuxt では、アプリ起動時の初期化処理が必要なライブラリ群を plugins フォルダにいれ、 nuxt.config.js で登録するという方法がある。firebaseのAPIキーを取得して以下のようにpluginフォルダに登録する

//[プロジェクトフォルダ]/plugins/firebase.js（なければ作る）
import firebase from 'firebase/app'
import 'firebase/firestore'
import 'firebase/auth'

export default (context, inject) => {
  let fireApp
  if (!firebase.apps.length) {
    fireApp = firebase.initializeApp({
      apiKey: 'AIzaSyBz6GJpQb5a8cLeJBOGp94DaX7kO4sCZcI',
      authDomain: 'qa-sample-c9972.firebaseapp.com',
      databaseURL: 'https://qa-sample-c9972.firebaseio.com',
      projectId: 'qa-sample-c9972',
      storageBucket: 'qa-sample-c9972.appspot.com',
      messagingSenderId: '851821328438',
      appId: '1:851821328438:web:fe1ac19d4dd9ed2c2bc097',
      measurementId: 'G-W0BMRV96H3'
    })
  } else {
    fireApp = firebase.app()
  }
//エイリアスを設定
  inject('fireApp', fireApp)
}

• ※Firebase の import は、app,firestore,auth を別々にインポートしないと、コンソー ルでエラーが出ます。
• inject メソッドは、第一引数にエイリアスを第二引数に初期化したインスタンスを代入します。 そうすることで、Nuxt の vue ファイル上で ‘this.$fireApp‘という風に名前をつけた変数でアクセ スできます。
• nuxt.config.js に plugins を登録する

/*
  ** Plugins to load before mounting the App
  */
  plugins: ['@/plugins/firebase'],
  /*

• nuxt.config に定義することで、nuxt のアプリケーション初期化からプラグインを読み込み、ア プリケーション内でライブラリを使用できるようになる。
• ファイル名がURLにひもづく
• pageコンポーネントはファイルの命名の仕方で勝手にルーティングしてくれる。
• 2つのSSRメソッド
  • asyncData / fetch
  • 2つの違いはstore に保存するかどうかという所
  • asyncData がリターンするのは、コンポーネントで利用する data 属性
  • fetchメソッドでは、最終的に store へコミットして template では、その store データを参照し ています。
  • fetch メソッドを利用した方が、SSR 後 の CRUD 処理も vuex アクションに統一できるので無駄な記述が減る。らしい。
• Nuxt.jsでの大まかな実装の流れ

• レイアウトファイルを作成(最初のみ) 
  ◦ default.vue の編集
• pages フォルダに新しい page を作成
  ◦ vue の template を作成
  ◦ 共通化できそうな UI は components フォルダに分離します
• store に(state / mutate / action / getter)を書きます 
• ページでデータが正しくレンダリングされているか確認
  ◦ vue の script を記述する 
• 次の実装へ

金曜：朝1.5h,昼1.5h,夕1.5h=4.5h

• vuexの使い方が曖昧だったので整理
• qiita.com
• 流れとしてはActions→Mutations→State→Vue Components
• Cloud Firestore のデータ構造
  • Cloud Firestore は、コレクション（テーブル相当）・ドキュメント（レコード相当）・データ（カラム相当）という 3 つのデータ構造を基本とし ます。

今週の総括

ブログで必ず報告する内容

• 2020年8月までに1560hの自己学習を達成するために（目標を時間とするのはどうかとも思うがとりあえず）

  • 目安となる週の学習時間：30h
  • 今週の勉強時間：17h
  • 累積の勉強時間：215h
  • 進捗予定との乖離：-19h

• 2020年8月までに習得したいこと：

  • クラウドコンテナ基盤についての知見
  • クラウド動画配信基盤についての知見
  • IoTの知見（ネタはある）
  • イケてるフロントを実装したい(vue.jsのUdemyを視聴し始めた2019/08/28)