【Go】初歩的な出力方法いろいろまとめ【Hello world】

Go

こちらの記事では、Goを使ってコンソールに出力を行う方法について、いくつかまとめてご紹介します。 Hello worldまで 文字列の連携 他の関数を走らせる 初期化後にmain以外の関数を走らせる Hello worldまで まずは Hello world をコンソールに出力するまで…

【Go】godoc fmtでcommand not found

Go

go getでGoDocをインストールした後、 $ godoc fmt を入力すると command not foundになることが。コマンドが以下のように変更されたようです。 $ go doc fmt.Printf

【Go】インストール後に go コマンドが not found

Go

GoをPCにインストール後、ターミナルから $ go を打つと、 command not found になってしまう。単純にパスが通っていないだけなので、以下の通りターミナルからコマンドを入力して、パスを通しましょう。 $ export PATH=$PATH:/usr/local/go/bin Getting Sta…

【Firebase Functions】Functionsの定期実行の方法

定期的にFirebase Functionsを実行させたいという場合には、Cloud Schedulerを使用できます。以下のようなファンクションを設定することによって、5分毎に処理が実行されます。 exports.removeMember = functions.pubsub.schedule('every 5 minutes').onRun(…

【Firebase Functions】指定したドキュメントのフィールドの値を取得する

Firebase Functionsのindex.js内で、指定したドキュメント内の値にアクセスしたい場合があります。具体的には以下の枠線で囲まれた部分をどのように取得するのか、という話です。 以下のコードを例にとってみてみましょう。 exports.addFanpageMember = func…

【Firebase Functions】Databaseの固有IDを取得したい

以下の枠に囲われた固有IDを取得したい場合があります。 例えば、指定したIDのドキュメント直下に、さらにコレクションやドキュメントを作成する場合です。その場合、以下のような書き方で固有IDを取得できます。 exports.addFanpageMember = functions.fire…

【Next.js】メールフォームをFirebase Functionsで実装

今回は、Next.jsとFirebase Functionsを用いて、お問い合わせフォームを実装していきます。 参考にした記事 Firebase側の実装 Firebaseとの接続を行います。 Firebase Functionsの設定 フロント側の実装 Firebase Functionsにエラーが出る場合 参考にした記…

【Next.js】nowコマンドでAPIキーなどの環境変数を設定する

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>…

【Next.js】任意のクレジットカードでStripe決済

以前まとめたこちらの記事の続きとなります。nekorokkekun.hatenablog.com nekorokkekun.hatenablog.com nekorokkekun.hatenablog.com以前の段階で、StripeとFirestoreとFirebase Authenticationのユーザーを同時に作成し、登録したクレジットカードで単発決…

【Next.js】FirebaseでStripeの単発決済の実装

以前まとめたこちらの記事の続きとなります。nekorokkekun.hatenablog.com nekorokkekun.hatenablog.com以前の段階で、StripeとFirestoreとFirebase Authenticationのユーザーを同時に作成することができました。こちらの記事では、Next.js上にFirebaseでStr…

【Next.js】StripeとFirestoreとFirebase Authenticationのユーザー同時削除

以前まとめたこちらの記事の続きとなります。 nekorokkekun.hatenablog.com以前の段階で、StripeとFirestoreとFirebase Authenticationのユーザーを同時に作成することができました。こちらの記事では、タイトルの通り、StripeとFirestoreとFirebase Authent…

【React】関数コンポーネントにcomponentDidMount的なものを使いたい

Next.js(React)の関数コンポーネントにライフサイクルフックであるcomponentDidMount的な役割を持つ何かを実装したいときには、 useEffect(() => { ... } , []); が使えます。以下は一例です。 import { db } from '../lib/db'; import React, { useEffect…

【React】react-stripe-elementでフォームだけが表示されない

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> を実装して…

【Next.js】Invariant Violation: React.Children.only expected to〜が吐き出される

こんなエラーが出た場合、 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】StripeとFirebaseにユーザー&クレカ登録同期処理ハンズオン

Next.jsで決済処理を実装したいという場合、FirebaseとStripeへ同時にユーザー登録をしたいという場合があるはずです。(厳密には、Stripeは顧客登録)今回はStripeとFirebase Authenticationへのユーザー登録を同期させ、その後、クレジットカードを登録す…

【Next.js】Head内に要素を組み込む(外部スクリプトとか)

Next.jsでHead内にCSSや外部script、titleタグなどを組み込みたかったので調べてみました。 結論としては、 import Head from 'next/head' をインポートし、render関数内などに、 <Head> <script src="https://js.stripe.com/v2/"></script> </Head> こんな感じでHeadタグを作って、組み込みたい要素を入れてあげるだけでOK…

【Firebase Functions】functions@: The engine "node" is incompatible with this module. Expected version "8". Got "10.16.3"エラーが吐き出される

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】ログアウトのredirect先をカスタマイズしたい

Laravel5.8のmake:authで作成したログアウト機能で、redirect先をカスタマイズしたい際の方法です。 /magotaku/app/Http/Controllers/Auth/LoginController.php

【Next.js】FirebaseのAuthenticationで登録したユーザー情報を描画する

前回の記事では、Next.jsにFirebaseのAuthenticationを使ってユーザー登録機能を追加しました。 nekorokkekun.hatenablog.comそこで「登録したユーザーの情報を動的に描画するマイページ」を作りましょう。 前提 ユーザー情報の取得 firebase.auth().current…

【Next.js】Firestoreから任意のデータを取得して描画する

今回はNext.jsでFirebaseから任意のデータを取得して描画する方法について解説をしていきます。ウェブアプリを作成する際、レイアウトは決めておいてコンテンツの名前や説明文などはデータを取得してレイアウトにはめ込みたい、という場合がありますね。この…

【Next.js】Firebase AuthenticationとHOCを使用してサインイン機能を実装する

本記事では、Next.jsプロジェクトにFirebase Authenticationを組み込み、サインイン機能を実装するとともに、HOC(高階コンポーネント)を使用してサインインユーザーのみが閲覧できるページを作成していきます。 Next.jsプロジェクトの準備 サインインユー…

【Next.js】Firestoreのデータを削除する

今回はNext.jsからFirebase Cloud Firestoreのデータを削除する方法について解説していきます。 コードの全体像 一意のidを取得する 削除イベントの作成 以下の記事を前提にしています。 nekorokkekun.hatenablog.com nekorokkekun.hatenablog.com コードの…

【Next.js】Firestoreにデータの登録(挿入)をする

こちらでは、Next.jsで作成した投稿フォームからFirebaseのCloud FirestoreのDBへデータを登録(インサート)する方法について解説をしていきます。DB設定などについては以下の記事に詳しく記述してあります。 nekorokkekun.hatenablog.com FirestoreのDBに…

【Next.js】Cloud Firestoreへの接続方法まとめ

Next.jsからCloud Firestoreへの接続をするための方法をまとめておきます。 まずやること .env作成 dotenvのインストール next.config.js作成 lib/db.js作成 具体的な使用例 まずやること 忘れがちなDB設定でやるべきことをまとめておきます。 .env作成 dote…

【Next.js】Cloud Firestoreに格納されたデータから一意のIDを取得する

Cloud Firestoreに格納されたデータから一意のIDを取得したいという時の方法を解説します。以下の赤枠の部分ですね! すでにFirebaseのDBと接続できているという前提で、以下のような書き方をすれば取得可能です。pages/Posts.js // 上記省略 handleDelete =…

【Next.js】Cloud FirestoreをNext.jsに組み込みデータ取得

こちらではNext.jsのプロジェクトにFirebaseのCloud Firestoreを組み込む方法について解説をしていきます。 Firebaseでプロジェクトの作成〜コレクションの作成 Next.js側の設定 Firebaseでプロジェクトの作成〜コレクションの作成 Firebaseにアクセスし、Co…

【Next.js】GCPのデータベースをNext.jsプロジェクトに組み込みたい

こちらではGCP(Google Cloud Platform)をNext.jsのプロジェクトに組み込む方法を解説していきます。 Next.jsプロジェクトの立ち上げ GCPでデータベースの作成 GCPシェルからデータベースの作成 データベース、テーブルの作成 Next.jsプロジェクトにMySQLを…

【React】ReduxのState/Store/Action/Reducer設定まとめ

Vue.jsを使用している際にもVuexやVue Routerなどで、 Stateを全てのコンポーネントに渡すことができるという機能がありましたが、 そのReact版がReact Reduxです。大まかに、React Reduxを使ったState/Store/Actionの設定まとめをしていきます。 React Redu…

【React】関数を使ってstateの値を変える

Reactにはpropsとよく似たものにstateという機能があります。 こちらもコンポーネントに対して値を渡すことができる機能ですが、 propsが静的な値(変化しない値)である一方、stateはコンポーネント内で値を変更させることができます。以下がその使用例です…

【React】propTypesを使って受け取ったpropsの型を定義する

propTypesによって、propsから受け取る値のタイプを定義することができます。 エラーは出ませんが、警告を出してくれます。 バリデーションのような感じで使えます。 import React from 'react'; import PropTypes from 'prop-types'; // インポートする con…