12月4週

図書管理アプリケーションを作ろう

  • 社内で図書の貸し出しをやっているけど管理がエクセルなのでデモを作って提出しよう。

    早速仕様（と言うか機能）

  • 図書一覧画面
    • 貸し出し＆返却ダイアログ
  • 図書詳細画面（amazonへのリンク）
  • 認証

    仕様技術

  • Nuxt.js
    • 今回はvuex-module-decoratorsは使わない（難しい）
  • TypeScript
  • firebase

一旦仕様はこのくらいにして早速デモのレイアウトを作る（と思ったけどツールをどれにすればいいか迷うのでとりあえず以下だけ先にやっとく）

  • create-nuxt-appでひな形作成
  • firebaseとの接続（plugin作成）

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

  • 一旦create-nuxt-appにて初期表示をして、TypeScript化をして表示を確認。
  • この次のアクションとしてはfirebaseとアプリケーションの紐付け
  • pluginを作る際にletをexportしたらExporting mutable 'let' binding, use 'const' instead.と怒られた。
    • f:id:yosuke0517:20191221135010j:plain

      解決策

  • 対象のletの上に// eslint-disable-next-lineを入れることで無視されるのでこれで解決

    asyncDataとfetchの違い

  • 非同期データ通信asyncDataとfetchの違い
    • asyncData：取得したデータをその場で使う(storeへの格納はしない）
    • fetch：取得したデータをstoreへ格納するための{store}を引数に入れることができる
    • 参考：qiita.com

Nuxt + TypeScriptでプラグインをthis.$●●で参照するためには以下のように肩定義ファイルを定義する必要があるらしい

日曜：3h

  • ユーザ登録の実装（firebase）はできた（排他制御などの考慮の必要があるか。。。）
  • Nuxt + Typescriptでのプラグインを作成してみたが、想定の動きをしない。。。
  • TODO
    • 共通のstateをユーザ登録のactionから呼べるか？←レイヤーをあげてpageからcommitすればいけルカの調査。。。

月曜：13h

  • ファイルダウンロード
    • まず型をBlob型で定義
import { AggregateRoot } from '~/types/util'

export interface OutputFileResult extends AggregateRoot {
  file: Blob
}
  • 次にaction。今回はバイナリなのでContent-typeはapplication/octet-stream。これはサーバ側と合わせる。
  • responseType: 'blob'も忘れずに。
/** ファイル出力処理 */
  async download({ commit }, filepath) {
    const response: Blob = await this.$axios.$post(
      '/juidosikkn/download-file',
      filepath,
      {
        responseType: 'blob',
        headers: {
          'Content-type': 'application/octet-stream'
        }
      }
    )
    commit('outputRslt', { outputRslt: response })
  }
  • 画面。疑似的にリンクを作りそれをクリックさせるらしい。
download(): void {
    // 受け取ったBlob型のデータをダウンロード用URL変換してaタグでクリック
    const fileURL = window.URL.createObjectURL(this.outputRslt)
    const a = document.createElement('a')
    a.href = fileURL
    a.download = this.createIdoFileName()
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
  }

火曜：11h

  • addEventListenerの中でthisが使えない問題
  • 初期化のところでページのグローバルなメンバーとして定義しているような値にはthis.〇〇でアクセスが可能だがaddEventListenerだとundefinedになる。。。
  • const vm = thisとしてvm.〇〇としたらページのグローバルなメンバーにアクセスできた。。。これは掘り下げたい。。。

水曜：8h

定数の定義と参照

  • 定義（stringとnumberのサンプル）
/** constant */
  static readonly HOGESTS: { [key: string]: string } = {
    ok: 'OK',
    ng: 'NG',
    notStarted: '未実施',
    reserved: '予約済',
    unReserved: '未予約',
    done: '完了',
    error: 'エラー',
    changed: '1',
    unchanged: '0'
  }
  static readonly HOGESTSNUM: { [key: string]: number } = {
    editMode: 1,
    deleteMode: 2,
    todayIdoExecTsColumn: 5
  }
  • 参照

クラス名.HOGESTS.okとかで参照が可能。これはaddEventListenerの中でも使用可能なのでthisで参照できない問題も解消する。

木曜：11h

  • 業務では発生したバグに対する処置スピードが上がった。気がする。
  • Firebaseについて理解（既存のアプリケーションのアーキテクチャも含む）するために以下を読み込む
  • qiita.com

金曜：8h

  • 特になし。雑談力の本を読んだ。くらい。

週次報告

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