11月3週（実績）

土曜：朝2h、昼1.5h、夕1.5h=5h

• actionからのmutationの呼び出し方でハマった。正解は以下

commit('setUserInfo', { payload: authUser })

• 今日はサインアップ機能、ログイン機能、ログアウト機能を作成する。

  その後

• ノマド的カフェ一覧画面（一旦リストで一覧表示するだけ）
• 詳細画面（無料WiFi・トイレの有無・混雑状況（コレはまた別画面へのリンクでもいいな）・電源・住所・クチコミ）
• 口コミ投稿

日曜：2h,1h,1h=4h

今日やること

• クラシックモードを使っているという警告が出るので以下を使ってモジュールモードに書き換える

qiita.com

• getterは呼び出し元画面で定義するようだ。

//呼び出し元画面
get incrementCounter() {
     return counterModule.incrementCounter; // インテリセンスが効く
   }

• Module 'xxx' has no default exportと言われる対応 qiita.com

月曜：9h

• ファイルアップロード：input要素を@changeで監視
  • input type="file" @change="upload"
  • input要素を@changeで入力がある度にバリデーションを掛けることもできる

火曜：10h

• グリッドの中のチェックボックスをクリックしたタイミングでそのチェックボックスたちの情報を取得するという要件
• 初期化処理のなかでaddEventListenerによりmouseupイベントを設定する。
• onInitGrid(初期化処理）でmouseupイベントを登録している例

onInitGrid(s: Grid.FlexGrid): void {
   s.headersVisibility = Grid.HeadersVisibility.Column
   s.allowDragging = Grid.AllowDragging.None
   console.log('s')
   console.log(s)
   s.addEventListener(s.hostElement, 'mouseup', function(ev: MouseEvent) {
     // クリックが発生した行／列の情報を取得
     console.log('click')
     const ht: Grid.HitTestInfo = s.hitTest(ev)
   })
 }

水曜：10h

• PromiseAllの順番を検証
• • Promise.allは本当に順番を守ってくれるのか検証。
• これはおそらくは先人たちが何回も検証してくれているんだろうけど自分の目で見ない限りは信用できない体質なので。。。
• 下記の通り複数の処理をPromise.allに入れ込んでみた。処理内容にはfor文などを入れて少し複雑にしている。
• 結果がわかるようにconsole.logで呼び出したメソッド順にconsole.logを連番で付与。

async Delete(s: Grid.FlexGrid) {
   await Promise.all([
     //1
     this.checkboxCheckedCheck(this.checkbox_form),
     //2
     this.getCheckedCheckboxInfo(
       this.checkbox_form,
       this.selected_checkbox_num
     ),
     //3
     this.compareUploadToUser(this.selected_checkbox_num),
     //4
     this.getExecStsAllDone(
       this.selected_checkbox_info,
       this.selected_checkbox_num
     )
   ])


 /**1 */
 checkboxCheckedCheck(checkbox_form) {
   console.log('1-1')
   let active_checkbox_checked = 0
   checkbox_form.forEach(checkbox => {
     if (checkbox.chkRslt !== 'NG' && checkbox.execSts !== '完了') {
       if (checkbox.todayIdoExecTs === true) {
         active_checkbox_checked++
       }
     }
   })
   console.log('1-2')
   this.selected_checkbox_num = active_checkbox_checked
 }

 /**2 */
 getCheckedCheckboxInfo(checkbox_form: object, selected_checkbox_num: number) {
   console.log('2-1')
   let activeCheckboxInfo = []
   for (let i = 0; i <= selected_checkbox_num; i++) {
     if (
       checkbox_form[i].chkRslt !== 'NG' &&
       checkbox_form[i].execSts !== '完了'
     ) {
       if (checkbox_form[i].todayIdoExecTs === true) {
         activeCheckboxInfo.push(checkbox_form[i])
       }
     }
   }
   console.log('2-2')
   this.selected_checkbox_info = activeCheckboxInfo
 }

 /**3 */
 compareUploadToUser(selected_checkbox_num: number) {
   console.log('3-1')
   let hasError: boolean = false
   for (let i = 0; i < selected_checkbox_num; i++) {
     if (
       this.selected_checkbox_info[i].uploadTnt !==
       this.$store.state.auth.user.username
     ) {
       hasError = true
     }
   }
   console.log('3-2')
   this.hasError_upload_TNT = hasError
 }

 /**4 */
 getExecStsAllDone(
   selected_checkbox_info: object,
   selected_checkbox_num: number
 ) {
   console.log('4-1')
   let isExecSts: boolean = true
   for (let i = 0; i < selected_checkbox_num; i++) {
     if (selected_checkbox_info[i].execSts !== '完了') {
       isExecSts = false
     }
   }
   console.log('4-2')
   this.isExecStsAllDone = isExecSts
 }

結果

• おー。順番通りに実行されました。検証にはパターンが足りないけど要件は満たしたので現場からは一旦以上です。

木曜：10h

ローディング処理

• 処理開始時にローディング開始してfinallyで閉じる

const loading = this.$loading(this.loadingOptions)
   this.clearErrorMessages()
   //TODO 削除ボタンをポチッたときにフォームに値を詰めておく
   this.$store
     .dispatch('juidoSikkn/delete', this.uploadRForm)
     .catch((error: AxiosError) => {
       this.addError(error)
     })
     .finally(() => {
       loading.close()
     })

エラーハンドリング

• AxiosErrorをimportしてcatchの型に入れる

金曜：10h

• チェックボックスにv-modelで値をバインドしておくとイベント時に取得が可能

//v-modelで値（form.notRunとform.checkRslt）をバインド
<cas-checkbox
       v-model="form.notRun"
       :checked="true"
       class="mr-auto mt-5 pagination"
       @change="search"
     >未実行行のみ表示</cas-checkbox>
     <cas-checkbox
       v-model="form.checkRslt"
       :checked="false"
       class="mr-auto mt-5 pagination"
       @change="search"
     >チェック結果がOKのみ表示</cas-checkbox>
   </div>

//バインドした値を初期化
/** 画面入力情報（初期表示） */
 form: FormInfo = {
   notRun: true, // 未実行のみ表示
   checkRslt: false // チェック結果がOKのみ表示
 }


search(): void {
   console.log('search')
   console.log('this.form.notRun')
   console.log(this.form.notRun)
   console.log('this.form.checkRslt')
   console.log(this.form.checkRslt)
 }

• いやー、便利。

週次報告

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