Nuxt.js

bz0 2022/04/27

ESLintとPrettierを併用する理由
- https://zenn.dev/t28_tatsuya/articles/integration-of-eslint-and-prettier
- https://fwywd.com/tech/next-eslint-prettier
- Prettier はフォーマットのために使用して、バグを発見するには(Prettier 以外の)Linter を使用する。

bz0 2022/05/06に更新

Nuxt.js
バージョン
- nuxt: ^2.15.8
- vue: ^2.6.14
コンポーネントを 1 つの vue ファイル（単一ファイルコンポーネント）として作成し組み合わせる
ページ、レイアウト以外のコンポーネントは/componentsフォルダに作成
単一ファイルコンポーネント：1 つのコンポーネントに対する HTML(template)、JavaScript(script)、CSS(style) を定義
- 必ずルート要素が 1 つ
https://b1san-blog.com/post/nuxtjs/nuxt-component/
yarn devの立ち上がりに時間がかかる
computedとmethodsの違い
- https://zenn.dev/naoki_oshiumi/articles/8c99581ca5bdd0
- 違いはキャッシュ機能の有無
  - computedにキャッシュ機能有り：データが変わらない限りは再計算されない
    - リアクティブなデータは基本computed
    - 乱数や日付等の都度変わるものはcomputedだと変更されないのでmethodsで
  - methodsはデータが変わらない場合でもページをリロードする度に新しく実行される
    - api呼び出し、モーダル表示、ページ遷移などデータ加工・計算以外の処理

bz0 2022/05/09に更新

音声録音
- MediaStream Recording APIで録音して生成されたblobデータをFormDataオブジェクトに入れてアップロードする
  - https://stackoverflow.com/questions/39218673/sending-formdata-with-a-binary-data-by-using-jquery-ajax
  - https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q11253291201
- https://jpdebug.com/p/122770
- MediaStream Recording APIを利用した音声録音ライブラリ：@codekraft-studio/vue-record
  - https://github.com/codekraft-studio/vue-record
- MediaStream Recording APIをラップしたライブラリ
  - https://github.com/kaliatech/web-audio-recording-tests
- Web上で録音する機能を最低限のコードで分かりやすく解説【WebRecorder】
  - https://qiita.com/jhon931/items/73ff1936b8747dc4d539
- MediaRecorder：https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder
  - https://github.com/wayou/audio-recorder
BlobとはBinary Large OBjectの略：イミュータブル（不変）なバイナリデータ
- File APIを介してのみアクセスされることが想定されている
- Blob URL Scheme：バイナリデータを保持するURL
  - URL.createObjectURL()を使用することで簡単に変換できる
  - バイナリデータ自身はブラウザで保持されている
Nuxt.jsへのプラグイン導入：https://qiita.com/fj_yohei/items/cddf267a94fa30ecb0b8
- Vue.use(VueRecord)でプラグインを入れる
コンポーネントを入れると「document is not defined」になる
- 【Nuxt 1.0.0 RC7以降】<client-only>：SSRさせるアプリケーションにおいて、SSRさせずにクライアント側で展開させたい場合に使うタグ：https://qiita.com/kubotak/items/d7e7f319c258a0bbacb4
- 【Nuxt 2.9以降】<no-ssr>：https://crieit.net/posts/Nuxt-document-is-not-defined
- 上記２つやってみるも解消せず
- Warnで出力されている「This browser does not support Tone.js」も気になる

    <no-ssr>
      <VueRecordAudio @result="onResult" />
    </no-ssr>

bz0 2022/05/02に更新

Auth0とNuxt.jsで認証ページを作る
- メリット
  - 個人情報をこちらで持つ必要がない
  - 認証部分を実装する必要がない（Auth0側でフォーム等用意してくれる）
- デメリット
  - Auth0が落ちるとサービスの認証機能が使えなくなる
- https://abillyz.com/vclbuff/studies/124
- githubでのOAuth認証
  - callbackURLに「https://[AUTH0_TENANT].auth0.com/login/callback」を入れる
  - https://community.auth0.com/t/always-getting-a-redirect-uri-mismatch-error-from-github/32845/6
- バックエンドとの連携
  - 認証済のユーザかを、auth0が発行したトークンを元にバックエンド(API)でチェックしてOKならデータを返す
  - データとユーザの紐付けを行う為にユーザテーブルをバックエンドでもたせる必要がある
    - Auth0のIDである「sub」をもたせる
- https://zenn.dev/tasuya/articles/cb2742c819eb1e
- https://qiita.com/unhurried/items/e9f751dcdfc0900947ee
  - 漏洩時の影響が大きいリフレッシュトークンを扱う処理をWeb Workerに分離するアプローチを採っている。（リフレッシュトークンに関する処理はSDK利用者が意識する必要がないため、SDKで隠蔽しやすいということもある。）

$ npx create-nuxt-app study-record-front

create-nuxt-app v4.0.0
✨  Generating Nuxt.js project in study-record-front
? Project name: study-record-front
? Programming language: JavaScript
? Package manager: Yarn
? UI framework: None
? Nuxt.js modules: Axios - Promise based HTTP client
? Linting tools: ESLint
? Testing framework: Jest
? Rendering mode: Single Page App
? Deployment target: Static (Static/Jamstack hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Continuous integration: GitHub Actions (GitHub only)
? What is your GitHub username? bz0
? Version control system: Git