1月3週

やっと業務が落ち着いたのでやっと図書管理アプリの作成に取りかかれる。

土曜：2.5h,2h,2h=6.5h

  • 今回はエラーメッセージとしてVeeValidateを使うことにした
  • メッセージの共通化は以下を参考にして定義・実装することにした
  • takumon.com
  • 前提としてnuxt-i18nを使ってメッセージファイルを読み込む設定を書かないといけないんだけど前回Qiitaにアップしていた物をそのまま使った。
  • qiita.com
  • veevalidateのサンプルがあって助かった。
  • qiita.com
  • 認証情報の永続化は以下を参考にした
  • www.memory-lovers.blog

一旦今日はサインアップ・ログイン（再読み込みでstoreの情報は消える）までの実装 + 一覧画面の書籍追加ボタン・ダイアログの仮設置まで完了。

  • 明日は認証情報の永続化・ログアウトで認証情報の削除 + 書籍追加処理・書籍一覧くらいまでが目標。
  • ログインの確認はステートを確認して、で一旦問題なさそう？？？
    • 44ページにあるので確認
  • 再読み込みした際にログイン情報をセッションからstoreへ再格納するような処理が必要？？？

日曜：2.5h,2h,0.5h=5h

  • 認証情報の永続化についてあまり記事がなくて詰まっている
  • universal-cookieを使用してログイン時にcookieに詰める→middleware階層にてcookieからidを取得する

月曜：10h

  • 以下は時間のある時にやっておきたい
  • cross-envを使い環境ごとに環境変数を分ける
  • qiita.com

    認証情報の永続化

  • @nuxtjs/dotenv": "^1.4.1"でやる
  • 1.src配下に.envファイルを作成
  • 2.以下のように作成（シングルクォート''やカンマ,は不要）←でハマった
API_KEY = HOGEHOGE
AUTH_DOMAIN = 
DATABASE_URL = 
PROJECT_ID = 
STORAGE_BUCKET = 
MESSAGING_SENDER_ID =
APP_ID = 1::web:
MEASUREMENT_ID = G-
  • 3.使う時はprocess.env.API_KEYでいける。
fireApp = firebase.initializeApp({
    apiKey: process.env.API_KEY,
    authDomain: process.env.AUTH_DOMAIN,
    databaseURL: process.env.DATABASE_URL,
    projectId: process.env.PROJECT_ID,
    storageBucket: process.env.STORAGE_BUCKET,
    messagingSenderId: process.env.MESSAGING_SENDER_ID,
    appId: process.env.APP_ID,
    measurementId: process.env.MEASUREMENT_ID

middlewareでcookie管理

import Cookies from 'universal-cookie'

export default ({ req, store }) => {
  if (process.browser) {
    return
  }
  const cookies = new Cookies(req.headers.cookie)
  // ↓はログイン時にセットしたcookie
  const userId = cookies.get('user_id')
  store.commit('authenticate/setId', { id: userId })
}
  • もう一つmiddleware
  • 認証していない時はログインページへ飛ばす
/**
 * 認証が必要なページで未認証の場合はリダイレクトする
 */
export default function({ store, redirect }) {
  if (
    store.state.authenticate.id === null ||
    typeof store.state.authenticate.id === 'undefined'
  ) {
    redirect('/login')
  }
}

火曜：10h

水曜：8h

  • Nuxtでモバイル最適化されたUIフレームワークがない
  • onsenuiで以下のように型定義ファイルを作成すれば使用できるかも
  • github.com
  • 全体で参考にする

- 以下のように端末を判定してレイアウトを分けなきゃいけないか？

qiita.com

木曜：12h

  • lodashで配列のなかのキーを指定してそのキーが何番目の配列にあるかを探す
  • 以下は指定した組織コードに引っかかるものが何番目にあるかを探している
this.selectTabIndex = _.findIndex(this.tabs, {
      sikCd: node.sikcd
    })

金曜：12h

  • 最終更新日付を作成するのに詰まったが配列にしてソートさせれば良いと気づいた。
dateArr.sort(function(a, b) {
      return a > b ? 1 : -1
    })
  • これで昇順に並ぶのであとはdateArr[dateArr.length - 1]で一番後ろを取ればおけ。

週次報告

  • 目標勉強時間：70h
  • 勉強時間：63.5h
  • 目標との乖離：-255.25h
  • 何を得たか：nuxt.js + TypeScriptの基礎 + javascriptの基礎 + ディベロッパーツールの使い方
  • 何が必要か：nuxt.js + typescriptの基礎と応用
  • 来週の目標：nuxt.js + typescript + firebaseにて書籍管理アプリのモックを作成する