はてなブックマーク

はじめに Next.js 13から利用可能になったappディレクトリでは、コンポーネント単位でSSRができるのでよりUXを向上させる実装が可能になりました。 個人開発者の強い味方であるFirebaseと合わせて利用するために、NextAuthとFirebase Authenticationを利用して、サーバサイドでも認証情報を参照できるようにするやり方の紹介です。 今回はEメール&パスワードを用いた認証を利用しますが、基本的にFirebase Authenticationが用意しているどの認証方法でも利用可能です。 前提条件 今回の記事で利用しているライブラリのバージョンは下記のとおりです。 { "name": "auth-test-app", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "bui

はじめに ReactとFirebaseを用いてフロントエンド開発するにあたって、追加で入れておきたい各種パッケージや設定を組み込んだ環境構築手順です。 この記事で構築する環境は以下の通りです。 ローカルで開発した内容をGitHubにpushすると、構文チェック→テスト→ビルド→デプロイされます。 また、mainブランチにpushしたらFirebaseの本番環境にデプロイされ、developブランチにpushしたらFirebaseの開発環境にデプロイされます。 事前準備 環境構築をするにあたって、以下は事前に準備してください。 VS Codeのインストール GitHubのアカウント登録 Node.jsのインストール 今回はv16.14.0を利用します Firebaseのプロジェクト作成 GitHubリポジトリの作成 GitHubのリポジトリを作成します。 公開範囲はPublic,Privat

概要 GASを用いてAWS S3上に保存されているファイルを、スプレッドシートから読み込む方法を解説します。 ドキュメント詳細ページだけでは、GASの新エディタやライブラリのバージョンでハマりポイントがあったのでまとめてみました。 IAMユーザー作成 AWS S3にアクセスするための権限を持ったAIMユーザーを作成します。 AWS マネージメントコンソールから、IAMと検索し、IAMのページにアクセス。 左側のメニューからユーザーをクリック。 ユーザーを追加をクリック 分かりやすい名前を入力し、プログラムによるアクセスにチェックを入れて次のステップ:アクセス権限をクリック。 既存のポリシーを直接アタッチを選択し、ポリシーのフィルタ(検索欄)にS3Readと入力して、AmazonS3ReadOnlyAccessを選択し、次のステップ:タグをクリック。 タグは何も入力せずに次のステップ:確認を

ウェブ版 CloudFirestoreのクエリ備忘録 日本語版公式ドキュメントに載っていないものがいくつかあったので、まとめてみた。 ※(注記)コレクショングループについては書いていません。 更新情報 2023年5月13日 ORクエリについて追記しました 2022年2月10日 日本語版公式ドキュメントに追記されていました。 Firebase SDK v9の記法を追記しました。 // コレクション users: { // ドキュメント "000": { // フィールド address: { prefecture: "沖縄", region: "沖縄", }, age: 20, createdAt: 2020年11月10日 15:00:00 UTC+9, friends: ["003"], userName: "山田太郎", }, "001": { address: { prefecture: "北海道

Amplifyを使わずにCognitoログイン及びクライアント認証を実装する方法です。 この記事ではJavaScriptを例に紹介しますが、SDKを使わずにAPIを直接叩くため、言語によらず実装可能です。 Cognitoの設定 ユーザープールの管理 ユーザープールとは ユーザープールとは、ユーザーのサインアップやサインインを提供するユーザディレクトリです。 Cognitoでユーザー管理をするために必要なもの、という認識で大丈夫です。 より詳しく知りたい方は、以下公式ドキュメントをご覧ください。 ユーザープールの作成 まずはユーザープールを作成します。 AWSマネージメントコンソールにサインインし、サービスからCognitoを検索して開き、「ユーザープールの管理」をクリックします。 次に、右上に表示されている「ユーザープールを作成する」をクリックします。 任意のプール名を入力し、「デフォルト

Firebase Cloud Functionsのセットアップから実行、テストまで、開発で利用するにあたって必要な一通りの知識をチュートリアル形式で詳しく解説します。

JavaScriptの躓きポイントの代表格である非同期処理(Promise や async/await )について解説します。 非同期処理とは 非同期処理とは、あるタスクを実行をしている際に、他のタスクが別の処理を実行できる方式をいいます。 一般的に、データベースから値を取得する等、通信を伴う処理は通信状況によって取得まで時間がかかったり、値が返ってくる保証がない等、時間がかかる処理とされています。 このような時間のかかる処理を、シングルスレッドで実行すると、実行中は他のタスクを行うことができなくなります。 例えば、データベースから値を取得する処理が走った後に、ユーザがページスクロールをしたとします。その場合、DBから値を取得し終わるまで、ページはスクロールされず、ユーザからすると画面がフリーズしたと思われるかもしれません。 このような事態を防ぐため、非同期処理が存在します。 先ほどのペー