職務経歴書PJ

Sekken 2022/05/29

日付を扱うライブラリ選定

背景

これまでMoment.js一強だったようだがMoment.js公式が使わないようにアナウンスしている
- https://momentjs.com/docs/#/-project-status/
アナウンスの中で紹介されていた候補が以下
- Luxon
- Day.js
- date-fns
- js-Joda

トレンド

https://www.npmtrends.com/date-fns-vs-dayjs-vs-luxon-vs-moment-vs-js-joda
Luxon, js-Jodaをあえて使う必要がないと思うので、Day.jsとdate-fnsに絞って検討する

Day.js

オブジェクト指向っぽい感じ
Moment.jsに書き味が似てるらしい（自分は使ったことなかったのでそこまでプラスにはならず）
https://github.com/iamkun/dayjs/releases
- 月１リリースされていて開発が活発な感じ

date-fns

関数型っぽい感じ
https://github.com/date-fns/date-fns/issues
- 2021/12からリリース止まってる...?

結論

Day.jsで進める

Sekken 2022/05/29

Vuexによるデータ管理

Nuxtにおける使い方

https://nuxtjs.org/ja/docs/directory-structure/store
storeディレクトリが作成されていて、（ほぼ）index.tsを作成して書き始めればよいそう
巨大なindexファイルになることを避けるためにモジュール化がおすすめされている

注意点

Sekken 2022/06/06

バックエンド

NestJS
理由
- TypeScriptでフロントと共通化
- Spring FrameworkとDIやデコレータの機能が似ているため馴染みがある

Sekken 2022/06/09に更新

テーブル定義

プライマリーキーに何を使うか
- 選択肢
  - DB採番/連番型
    - AUTO_INCREMENT
    - 事前採番方式
    - 連番型 + Hashids
  - 非DB採番/文字列型
    - UUID
    - ULID
  - 非DB採番/数値型
- 参考：https://zenn.dev/j5ik2o/articles/a085ab3e3d0f197f6559

Sekken 2022/06/30

メモ

開発環境のWebサーバーをコンテナ上で動かすパターンとホストOS上で動かすパターンがあるけどプロコン整理したい

Sekken 2022/07/19

Nuxt vue-routerでpushが動作せずにはまった

そもそもエラーを吐かないのでこうする

const result = router.push({ path: '/'},
              () => {},
              // 失敗時
              (err) => {
                console.log(err)
              }
            )

と以下のエラーが吐かれている

Error: Redirected when going from "/login" to "/" via a navigation guard.
    at createRouterError (vue-router.esm.js?8c4f:2065:1)
    at createNavigationRedirectedError (vue-router.esm.js?8c4f:2024:1)
    at eval (vue-router.esm.js?8c4f:2376:1)
    at Vue._next (client.js?06a0:299:1)
    at app.context.redirect (utils.js?ebed:235:1)
    at Auth.redirect (runtime.mjs?edb1:596:1)
    at authMiddleware (runtime.mjs?edb1:654:1)
    at promisify (utils.js?ebed:314:1)
    at middlewareSeries (utils.js?ebed:291:1)
    at Vue.callMiddleware (client.js?06a0:264:1)

エラーが出ていることを検知しにくい
- Navigation guard
  - https://v3.router.vuejs.org/ja/guide/advanced/navigation-guards.html#グローバルビフォーガード
- この辺で議論されているっぽい
  - https://github.com/vuejs/vue-router/issues/2881
  - https://stackoverflow.com/questions/62223195/vue-router-uncaught-in-promise-error-redirected-from-login-to-via-a
解決策
- nuxt.config.tsでmiddlewareの指定が間違っていた

router: {
// middleware配下に配置した認証機構はauthenticated.tsだったので、正しくはmiddleware: ['authenticated']
    middleware: ['auth'] 
  },

メモ
- nuxtではなくvue-routerの機能であるnavigation guardがエラー内容に出てくるが、nuxtdはそれが隠蔽されてmiddlewareという仕様になっていると思われるためわかりずらかった