「Nuxt.jsとFirebaseを使って爆速で何か作る前に読む本」の感想・備忘録

2022.11.12
スポンサーリンク
【POD】Nuxt.jsとFirebaseを使って爆速で何か作る前に読む本
posted with ヨメレバ
福田 雄貴 インプレスR&D 2020年11月30日頃
楽天ブックスで見る
Amazonで見る
Kindleで見る
ebookjapanで見る

点数

67点

感想

著者の技術力は高いと思うが、理解しづらい説明が多かった

ベンダーロックインと向き合う

  • どんなフレームワークやライブラリであっても、ある日使えなくなるリスクはある。
  • 開発者は「リスクが発生した際の代替手法を考えておく」「プロダクトのライフサイクルを計画する」必要がある。
  • 著者はアプリケーションの耐用年数を7年とし、開発開始から7年が経過するまでに作り直すと決めている。
  • 例えば日付処理ライブラリを使うのにロックインを気にすることはほとんどない。なぜなら、他のライブラリで置き換えられるという安心感があるからである。

再利用性を過度に期待しない

  • 再利用性に対する過度な期待が、フロントエンドの保守性に悪影響を与えている。
  • 再利用性を高めるということは、複数のユースケースをひとつのコードで解決することとは違う。
  • 誤った再利用性を高めると、複数のユースケースに対応した内部状態の決定に必要なパラメータを外部から受け取るため、コンポーネントのインターフェースが複雑になってしまう。
  • 再利用性を高めるよりも、コンポーネントの破棄・差し替えが簡単にできるように疎結合な状態を保つことの優先度を上げる方が効果的である。

useFetchメソッド

  • Nuxt3のページコンポーネントでは、非同期でデータを取得するためのuseFetchメソッドが用意されている。
    const { data } = await useFetch('/api/123');
    戻り値であるdataはref()で包まれているのでリアクティブに使うことができる。
  • 任意の変数名を付けたい場合は以下のようにする。
    const { data: count } = await useFetch('/api/count');
  • データを送信する場合は第2引数を指定する。
    const { data } = await useFetch(
      '/api/hoge',
      { method: 'POST', body: postData, }
    );
  • Nuxt3ではaxiosは使わなくなった。
  • Nuxt3内ではohmyfetchというパッケージ(axiosのようなもの)を$fetchで使用できる
  • useFetchメソッドはuseAsyncDataメソッドのラッパー関数である。
    以下の2つは同じである。
    基本的にはuseFetchを使っていれば問題ない。
    const { data } = await useAsyncData('hoge', () => $fetch(url))
    const { data } = await useFetch(url)
スポンサーリンク

コメント