土曜：7h

先週のファイルアップロードのまとめ
フロントとサーバでの問題点の切り分け。以下のようにサーバ側へ直接POSTをかけてサーバ側に問題がないかを検証する
curl -v -X POST "localhost:8080/upload" -F "name=demo.jpg" -F "file=@demo.jpg;type=image/jpg"
共通メッセージコンポーネントの作成
業務でやったということもあり先に共通メッセージコンポーネントを作る

日曜：3.5h,1.5h=5h

メッセージの共通化が意外とめんどくさい
画面（vue）からモジュール側へ処理を渡す際にパラメータを引数2つに分けて渡していたらずっとundefindになってハマった。
画面側から渡す際は、filterとして1つにまとめてから渡すこと
一旦メッセージの出力は完了（複数はまだ）

日曜：5h

メッセージの共通化
結構中身が複雑になってしまっている。とりあえずメッセージを出すまでは成功したが後で整理せねば。。。

月曜：10h

バグ対応。デザインを共通のプロジェクトに任せているため不意にデザインバグが発生する。そういうこともあるということを意識しとかねば。。
共通メッセージの整理
1.<cas-error-message :value="errorMessages" @close="removeErrorMessageAt" />を設置
2.import { CasErrorMessageBase, CasErrorMessage } from '~/components/atoms'をimport
3.compontsにCasErrorMessage登録
4.extends mixinsにCasErrorMessageBaseを登録
5.以降はエラーをcatchする箇所で.catch((error: AxiosError) => { this.addError(error) })を入れれば勝手に表示される

火曜：11h

共通エラーメッセージコンポーネントとalertの使い分け
APIのエラーなら共通メッセージコンポーネントを使用する。クライアントエラーならalertを使う
以下のような形で並列に貼っつけてサーバからのエラーならerror-message、クライアントのエラーならv-alertを使うようにする

<cas-error-message :value="errorMessages" @close="removeErrorMessageAt" />
    <el-alert
      v-if="errorMsg"
      :title="errorMsg"
      type="error"
      @close="closeAlert"
    ></el-alert>

水曜：7h

nuxtのエラーハンドリング

try-catchパターンとawait-catchパターンがある
await-catchパターンの方が簡潔に書ける
try-catchパターン

let response;
  try {
    response = await app.$axios.get(`/users/${id}`);
  } catch (err) {
    response = err.response
  }

await-catchパターン

const response = await app.$axios.get(`/users/${id}`)
    .catch(err => {
      return err.response
    });

木曜：12h

snacbarのサンプル qiita.com
エラーメッセージとかほどほどにして機能を実装していこう。。。

金曜：12h

エラーの出し方でthis.addError(error)としているが、これでエラーメッセージを出すにはサーバ側エラーメッセージIDとパラメータを返す必要がある。firebaseのみでそれを実現するのは調査含め面倒なので今回はエラーを受け取ったらそのステータスコードをもとにエラーメッセージをフロント側で整形しようと思った。

週次報告

目標勉強時間：70h
勉強時間：64h
目標との乖離：-203.25h
何を得たか：nuxt.js + TypeScriptの基礎 + javascriptの基礎 + ディベロッパーツールの使い方
何が必要か：nuxt.js + typescriptの基礎と応用
来週の目標：nuxt.js + typescript のインプットとアウトプットを続ける

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

12月2週

タスク

業務タスクが多いので今週はこれくらいが限界かも

土曜：7h

日曜：3.5h,1.5h=5h

日曜：5h

月曜：10h

火曜：11h

水曜：7h

nuxtのエラーハンドリング

木曜：12h

金曜：12h

週次報告