2021-05-28

Nuxt.jsデータ取得

Nuxt.js

Nuxt.jsデータ取得

Nuxt.js （ユニバーサルアプリケーション）では、サーバーサイドレンダリング中にデータをレンダリングするために Nuxt.js 特有のフックを使う必要があります。

この方法について調査したので、記載する。

非同期データ読み込み方法

Nuxtでは非同期なデータを読み込むために２つのフックが用意されている。

fetchフック
asyncDataフック

fetchフック

1. 外部から取得したデータをVuexのstoreに格納して使用する
2. acyncDataとは違ってコンポーネントに値を直接セットすることができない

例）

<template>
  <div>{{ $store.state.hige }}</div>
</template>

<script>
export default {
  async fetch({ app, store }) {
    const doc = await app.$firebase.firestore().collection('hige').get()
    store.commit('setHige', doc.data().hige)
  }
}
</script>

<script>
export default {
  async fetch ({ store, params }) {
    await store.dispatch('GET_STARS');
  }
}
</script>

export const actions = {
  async GET_STARS ({ commit }) {
    const { data } = await axios.get('http://my-api/stars')
    commit('SET_STARS', data)
  }
}

注意：fetch内ではコンポーネントがインスタンス化される前に呼び出されるため、thisを通してコンポーネントのインスタンスにアクセスすることはできません。

asyncDataフック

1. 外部からデータを取得し、ページコンポーネントへ直接セットする
2. 返される値はコンポーネントのテンプレートからアクセスすることで使用できる

利用例）

<template>
  <div>{{ hoge }}</div>
</template>

<script>
export default {
  async asyncData({ app }) {
    const doc = await app.$firebase.firestore().collection('hoge').get()
    return { hoge: doc.data().hoge }
  }
}
</script>

注意：asyncData メソッド内で、thisを使用してはいけません。 asyncData メソッドはコンポーネントがインスタンス化される前に呼び出されるためです

asyncDataとfetchの共通点

両者ともページコンポーネントの初期化前に実行される関数。両処理はコンポーネントのインスタンスが生成される前に行われるため、 this を通してコンポーネントのインスタンスにアクセスすることはできません。

第1引数にcontext(オブジェクト)を取るので、クエリパラメータなどの値にアクセスして処理を行うことができる。

asyncDataとfetchの使い分け

以下のような方針で fetch と asyncData を使い分けるのが良さそうです。

asyncDataは外部から取得したデータをページコンポーネントのみで使用する場合に使用する

fetchは取得したデータをVuexのstoreに格納して使用したい場合に使用する

fetchはストアに保存するための処理をかく。 asyncDataはコンポーネントにデータをセットするための処理をかく。

asyncDataとfetchライフサイクルについて

SSRとCSRのライフサイクルはplugin→middleware→validate→asyncData→fetch→beforeCreateの順で処理が実行されてます。

タイミング的にはどちらも同じなので大きな差異はないです。

参考

データの取得 - NuxtJS

Nuxt.jsのasyncDataとfetchは何が違うのか - Qiita

【Nuxt.js】 asyncDataとfetchって結局どう使うの？

nuxtのasyncData / fetchの使い分け - inokawablog

2021-05-27

非同期処理について

JavaScript IT基礎知識

非同期処理について

プログラムは実行すると、コードを上から順に1行ずつ実行していきますね。

その処理の1つに時間のかかる処理があると、その実行が完了するまで、次の行には進みません。

どんな時に困るのでしょうか？

例）サーバーと通信を行った際に、リクエストが返ってくるまでに数秒以上もかかると困ります。

サーバーとの通信は非同期で行えば、リクエスト返信を待たなくても次の作業に進むことができます。

■左（同期処理イメージ）右（非同期処理イメージ）

f:id:lhiroki1205:20210527134434p:plain

非同期処理のメリット、デメリット

■ メリット - ユーザーを待たせない（重い処理を非同期にすることで）

■ デメリット - 制御が難しい（実行完了までデータが存在しない）

非同期処理にする方法(Promise)

■ Promiseの状態
- Pending: 初期状態
- fulfilled: 処理が成功した状態
- rejected: 処理が失敗した状態.

Promiseを関数内で利用する例

f:id:lhiroki1205:20210527135617p:plain

非同期処理にする方法(async/await)

Promiseよりaync/awaitの方がおすすめ - 記述がシンプル - 直感的で使いやすい

利用方法 - 非同期処理をともなう関数定義にasyncをつける - 非同期処理をともなう関数実行時にawaitをつける - awaitはaync付き関数内でしか利用できない

aync/awaitを関数内で利用する例 f:id:lhiroki1205:20210527141832p:plain

まとめ

WebAPIを叩く、データベースへクエリを投げる時などに非同期処理を活用する。（平行処理の場合は時間がかかるので）

参考

非同期処理の完了を待つ方法！Promise＆async/await【分かりすぎて怖いJavaScript入門】 - YouTube

2021-05-22

Firestore(NoSQL)について

firebase データベース備忘録 GCP

Firestore(NoSQL)について

個人開発でNoSQのFirestoreを利用することになりました。

ただ、RDBしか触ったことがなく、色々と調査したのでその備忘録を残します。

Firestoreとは？

Firestoreとはドキュメント指向NoSQLデータベースです。

RDBとFirestore(NoSQL)の比較

1. RDBでは基本的には、正規化を徹底するが、Firestoreでは、非正規化を許容する、むしろ活かす
2. RDBではテーブル結合(inner join, outer join)できるが、Firestoreではテーブル結合できない

Firestoreの利用メリット

1. 既存のDBと比較して、今からNoSQLを始める学習コストを考慮しても開発速度が早い
2. スケールするまでは無料で使える
3. グロースさせるまでをFirebaseで完結できる

FireStore構造について

■ コレクションデータベースのルート要素で、ドキュメントの集合。ドキュメントをまとめるフォルダのようなイメージです。

users: {
  userdocument1
  userdocument2
  userdocument3
}

■ ドキュメントデータおよびサブコレクションの集合データをまとめた紙のようなイメージ

key1 : value1
key2 : value2
key3 : value3

■ データキーとバリューのセットドキュメントに記載される最小単位のデータのイメージ

key1 : value1

データタイプ一覧

FireStore参照方法例

■ コレクション

usersコレクションを参照取得

var usersCollectionRef = db.collection('users');

FireStore CRUD処理

こちらの記事に詳しく記載されている。

■ ドキュメント usersというコレクション内のalovelaceドキュメントへの参照取得。

var alovelaceDocumentRef = db.collection('users').doc('alovelace');

参考

Firebase Cloud Firestoreの使い方 - Qiita

[Firebase]Firestoreの設計の思考法(正規化/非正規化)

2021-05-20

オブジェクト、プロパティ、メソッド

JavaScript

オブジェクト、プロパティ、メソッド

オブジェクト -> データと機能をまとめたもの
プロパティ -> オブジェクト内のデータ
メソッド -> オブジェクト内の機能

例）niceGuyというオブジェクトを作る

let niceGuy = {
  name: inoue
  playSoccer: function() {....}
}

niceGuyオブジェクトはnameというプロパティを保持している
niceGuyオブジェクトはplaySoccerというメソッドを保持している

後から追加変更もできます。

niceGuy.gender = "men" niceGuy.age = 20

参考

https://www.youtube.com/watch?v=vD1qoNrU8FY&list=PLwM1-TnN_NN7-zdRV8YsGUB82VVhfYiWW&index=3

2021-05-19

vscodeショートカット

備忘録

vscodeショートカット

1.複数行選択

Command + option +　矢印

2.ひとつもどる

Command + -

3.ファイルやフォルダのみを検索する方法

Command + P VSCodeにおいて、ファイルやフォルダのみを検索する方法

4.置換

Command + F Command + Fでファイル内の文字列を検索可能にする検索窓が表示されます。左側の矢印をクリックして置換する

5.window切り替え

Command + B

ディレクトリ表示・非表示

6.同じ文字の選択

Command + D

7.ファイルを探す

Command + P

8. 選択ファイル移動

Command + option +　矢印

2021-05-01

Figmaショートカット

備忘録

Figmaショートカット

レイヤー(選択中以外)を全て閉じる

⌥ + L

参考

www.koreyome.com

2021-04-24

Cloud Run(サーバーサイドレンダリング)

GCP firebase

Cloud Run

Clouf RunはGCPで提供されているDockerコンテナをデプロイできるコンピューティングサービスです。

Firebase Hostingは静的アセットの配信を基本機能としてますが、サーバーサイドロジックの実行環境として、Cloud FunctionsまたはCloud Runに接続できます。

2019年にCloud RunとFirebaseの連携が可能になりました。

Clooud Runについて説明します。

Cloud RunとHosting連携させるメリット

CloudRunはasianortheast1を利用できる
Dockerコンテナベースなので、ポータビリティ性が高い
ランタイム制約がないので、サーバーサイドレンダリングアプリケ- - ションと相性が良い
スケーリングし易い

Cloud RunとCloud Functionの違い

FirebaseHostingは静的なアセットの配信を基本機能としていますが、サーバーサイドロジックの実行環境として、CloudFunctionsまたはCloudRunに接続できます。

かつてはCloudFunctionsしか利用できませんでしたが、あるとき、それまでかなり不自由だったFirebaseでのサーバーサイドレンダリングが、一気に業務利用可能なレベルまで引き上げられました。（2019年の4月に、CloudRunとFirebaseの連携が発表されたことがきっかけ）

上記で挙げたようなメリットを考慮するとFirebaseを利用してサーバーサイドレンダリングする場合はCloudFunctionより、ClourRunを利用する方が現時点ではベター。

Cloud RunとHosting連携イメージ

Firebaseを利用したサーバーサイドレンダリングでは、CloudRunを用いてHTMLファイルとJavaScriptからなるアプリケーションを配信し、その他の静的なアセットはHostingから配信します。

参考

Cloud Run: コンテナを秒単位で本番環境にデプロイ | Google Cloud

Cloud Run を使用した動的コンテンツの配信とマイクロサービスのホスティング | Firebase Hosting

https://qiita.com/ryo2132/items/fe3e8e7dc410a316a0be