アルパカログ

Webエンジニア兼マネージャーがプログラミングやマネジメント、読んだ本のまとめを中心に書いてます。

JavaScript・TypeScript

Firestore データベースの使い方とルールの設定方法(Web/React)

Firebaseでアプリケーションを作るときは、データベースとしてFirestoreを使うのが便利です。FirestoreはクラウドベースのNoSQLで、FirebaseやGCPから簡単に扱うことができます。このエントリでは、Firestoreの簡単な使い方とFirestoreルールの設定方法を紹…

React コンポーネントのアンマウント時のエラーを修正する方法(componentWillUnmount)

Reactアプリで表示を切り替えるためにコンポーネントをアンマウントしたときに、エラーが出ることがあります。このエントリでは、Reactコンポーネントのアンマウント時のエラーを修正する方法を紹介します。

React URLパスを定義してページ遷移する方法(react-router-dom)

react-router-domを使うと、ReactでURLパスによるページ遷移を実装することができます。しかし、ReactやSPAに慣れていない人にとっては、react-router-domの使い方に少し戸惑うかもしれません。このエントリでは、react-router-domを使ったページ遷移の実装…

React FirebaseでGoogleログインを実装する方法(Authentication)

ReactアプリにGoogleログインを実装したいときは、Firebase AuthenticationとFirebase SDKを使うと簡単です。むしろ、Firebase AuthenticationやGCPコンソールでのOAuthクライアントの設定の方でハマりがちかもしれません。このエントリでは、ReactアプリにG…

AngularJS ユーザーの権限によって表示を切り替える方法

AngularJSで、ユーザーの権限によって表示を切り替えるという認可っぽいことをしたいケースがあります。「認可っぽいこと」と言っているのは、データは取得できてしまうものの、非表示にすることでそれらしく見せているためです。このエントリでは、AngularJ…

AngularJS テストでAngularFire2のsnapshotChangesをスタブする方法(Firestore)

Angular.js + Firestoreという構成では、クライアントライブラリとしてAngularFire2を使うケースが多いと思います。メタデータを含めたデータを返す`snapshotChanges()`をスタブするのは少し面倒です。このエントリでは、AngularJSのテストでAngularFire2のs…