こちらの記事では、Goを使ってコンソールに出力を行う方法について、いくつかまとめてご紹介します。 Hello worldまで 文字列の連携 他の関数を走らせる 初期化後にmain以外の関数を走らせる Hello worldまで まずは Hello world をコンソールに出力するまで…
go getでGoDocをインストールした後、 $ godoc fmt を入力すると command not foundになることが。コマンドが以下のように変更されたようです。 $ go doc fmt.Printf
GoをPCにインストール後、ターミナルから $ go を打つと、 command not found になってしまう。単純にパスが通っていないだけなので、以下の通りターミナルからコマンドを入力して、パスを通しましょう。 $ export PATH=$PATH:/usr/local/go/bin Getting Sta…
定期的にFirebase Functionsを実行させたいという場合には、Cloud Schedulerを使用できます。以下のようなファンクションを設定することによって、5分毎に処理が実行されます。 exports.removeMember = functions.pubsub.schedule('every 5 minutes').onRun(…
Firebase Functionsのindex.js内で、指定したドキュメント内の値にアクセスしたい場合があります。具体的には以下の枠線で囲まれた部分をどのように取得するのか、という話です。 以下のコードを例にとってみてみましょう。 exports.addFanpageMember = func…
以下の枠に囲われた固有IDを取得したい場合があります。 例えば、指定したIDのドキュメント直下に、さらにコレクションやドキュメントを作成する場合です。その場合、以下のような書き方で固有IDを取得できます。 exports.addFanpageMember = functions.fire…
今回は、Next.jsとFirebase Functionsを用いて、お問い合わせフォームを実装していきます。 参考にした記事 Firebase側の実装 Firebaseとの接続を行います。 Firebase Functionsの設定 フロント側の実装 Firebase Functionsにエラーが出る場合 参考にした記…
Next.jsでデプロイ前に環境変数を設定する際には以下のコマンドを用いることができます。 now secret add で環境変数を追加 $ now secrets add <secret-name> <secret-value> 以下は一例です。 $ now secret add FIREBASE_API_KEY xxxxxxxxxxxx > Success! Secret firebase_api_key adde</secret-value></secret-name>…
以前まとめたこちらの記事の続きとなります。nekorokkekun.hatenablog.com nekorokkekun.hatenablog.com nekorokkekun.hatenablog.com以前の段階で、StripeとFirestoreとFirebase Authenticationのユーザーを同時に作成し、登録したクレジットカードで単発決…
以前まとめたこちらの記事の続きとなります。nekorokkekun.hatenablog.com nekorokkekun.hatenablog.com以前の段階で、StripeとFirestoreとFirebase Authenticationのユーザーを同時に作成することができました。こちらの記事では、Next.js上にFirebaseでStr…
以前まとめたこちらの記事の続きとなります。 nekorokkekun.hatenablog.com以前の段階で、StripeとFirestoreとFirebase Authenticationのユーザーを同時に作成することができました。こちらの記事では、タイトルの通り、StripeとFirestoreとFirebase Authent…
Next.js（React）の関数コンポーネントにライフサイクルフックであるcomponentDidMount的な役割を持つ何かを実装したいときには、 useEffect(() => { ... } , []); が使えます。以下は一例です。 import { db } from '../lib/db'; import React, { useEffect…
Next.js（React）でreact-stripe-elementを実装した際に、フォームだけが表示されないという現象が起こりました。これは、Headタグ内で読み込んでいるstripe-jsのバージョンが不適合であったということでした。 <script src="https://js.stripe.com/v3/"></script> を実装しなければならないところ <script src="https://js.stripe.com/v2/"></script> を実装して…
こんなエラーが出た場合、 Invariant Violation: React.Children.only expected to receive a single React element child. 意味としては、「Reactのコンポーネントは、1つしかエレメントを内包できません」という意味となります。 return ( <StripeProvider stripe={this.state.stripe}> <Head> <script src="https://js.stripe.com/v2/"></script> </Head> <Header /> <div> <h2>{det…</h2></div></header></stripeprovider>
Next.jsで決済処理を実装したいという場合、FirebaseとStripeへ同時にユーザー登録をしたいという場合があるはずです。（厳密には、Stripeは顧客登録）今回はStripeとFirebase Authenticationへのユーザー登録を同期させ、その後、クレジットカードを登録す…
Next.jsでHead内にCSSや外部script、titleタグなどを組み込みたかったので調べてみました。 結論としては、 import Head from 'next/head' をインポートし、render関数内などに、 <Head> <script src="https://js.stripe.com/v2/"></script> </Head> こんな感じでHeadタグを作って、組み込みたい要素を入れてあげるだけでOK…
Next.js内でFirebase Functionsを使用するためにyarn serveを行うと以下のようなエラーが。 error functions@: The engine "node" is incompatible with this module. Expected version "8". Got "10.16.3" error Commands cannot run with an incompatible …
Laravel5.8のmake:authで作成したログアウト機能で、redirect先をカスタマイズしたい際の方法です。 /magotaku/app/Http/Controllers/Auth/LoginController.php
前回の記事では、Next.jsにFirebaseのAuthenticationを使ってユーザー登録機能を追加しました。 nekorokkekun.hatenablog.comそこで「登録したユーザーの情報を動的に描画するマイページ」を作りましょう。 前提 ユーザー情報の取得 firebase.auth().current…
今回はNext.jsでFirebaseから任意のデータを取得して描画する方法について解説をしていきます。ウェブアプリを作成する際、レイアウトは決めておいてコンテンツの名前や説明文などはデータを取得してレイアウトにはめ込みたい、という場合がありますね。この…
本記事では、Next.jsプロジェクトにFirebase Authenticationを組み込み、サインイン機能を実装するとともに、HOC（高階コンポーネント）を使用してサインインユーザーのみが閲覧できるページを作成していきます。 Next.jsプロジェクトの準備 サインインユー…
今回はNext.jsからFirebase Cloud Firestoreのデータを削除する方法について解説していきます。 コードの全体像 一意のidを取得する 削除イベントの作成 以下の記事を前提にしています。 nekorokkekun.hatenablog.com nekorokkekun.hatenablog.com コードの…
こちらでは、Next.jsで作成した投稿フォームからFirebaseのCloud FirestoreのDBへデータを登録（インサート）する方法について解説をしていきます。DB設定などについては以下の記事に詳しく記述してあります。 nekorokkekun.hatenablog.com FirestoreのDBに…
Next.jsからCloud Firestoreへの接続をするための方法をまとめておきます。 まずやること .env作成 dotenvのインストール next.config.js作成 lib/db.js作成 具体的な使用例 まずやること 忘れがちなDB設定でやるべきことをまとめておきます。 .env作成 dote…
Cloud Firestoreに格納されたデータから一意のIDを取得したいという時の方法を解説します。以下の赤枠の部分ですね！ すでにFirebaseのDBと接続できているという前提で、以下のような書き方をすれば取得可能です。pages/Posts.js // 上記省略 handleDelete =…
こちらではNext.jsのプロジェクトにFirebaseのCloud Firestoreを組み込む方法について解説をしていきます。 Firebaseでプロジェクトの作成〜コレクションの作成 Next.js側の設定 Firebaseでプロジェクトの作成〜コレクションの作成 Firebaseにアクセスし、Co…
こちらではGCP（Google Cloud Platform）をNext.jsのプロジェクトに組み込む方法を解説していきます。 Next.jsプロジェクトの立ち上げ GCPでデータベースの作成 GCPシェルからデータベースの作成 データベース、テーブルの作成 Next.jsプロジェクトにMySQLを…
Vue.jsを使用している際にもVuexやVue Routerなどで、 Stateを全てのコンポーネントに渡すことができるという機能がありましたが、 そのReact版がReact Reduxです。大まかに、React Reduxを使ったState/Store/Actionの設定まとめをしていきます。 React Redu…
Reactにはpropsとよく似たものにstateという機能があります。 こちらもコンポーネントに対して値を渡すことができる機能ですが、 propsが静的な値（変化しない値）である一方、stateはコンポーネント内で値を変更させることができます。以下がその使用例です…
propTypesによって、propsから受け取る値のタイプを定義することができます。 エラーは出ませんが、警告を出してくれます。 バリデーションのような感じで使えます。 import React from 'react'; import PropTypes from 'prop-types'; // インポートする con…
