【Laravel5.8】ログアウトのredirect先をカスタマイズしたい

Laravel

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

2019-09-25

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

Next.js Firebase

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

2019-09-25

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

Firebase Next.js

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

2019-09-25

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

Next.js Firebase

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

2019-09-23

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

Next.js

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

2019-09-23

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

Next.js

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

2019-09-23

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

Next.js

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

2019-09-22

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

Next.js

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

2019-09-21

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

Next.js

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

2019-09-20

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

Next.js

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

2019-09-17

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

React.js

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

2019-09-17

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

React.js

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

2019-09-17

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

React.js

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

2019-09-17

【React】propsにデフォルト値を持たせる

React.js

propsを設定したコンポーネントをレンダリングする際に、デフォルトで値をもたせたいという場合があります。そのような際には以下のようにdefaultPropsという設定を行いましょう。 import React from 'react'; const App = () => { const details = [ {name:…

2019-09-17

【React】propsとmap関数の組み合わせでリストレンダリング

React.js

未だに使い慣れていないJavaScript版foreachのmap関数。たまたまpropsと組み合わせて使用する機会があったため、記録として残します。 import React from 'react'; const App = () => { // ①リストレンダリングするためのオブジェクトを用意 const details …

2019-09-13

HanzOn Privacy Policy

Hiraku Morishima built the [HanzOn] app as a Free app. This SERVICE is provided by Hiraku Morishima at no cost and is intended for use as is.This page is used to inform visitors regarding my policies with the collection, use, and disclosur…

2019-09-13

HanzOnサポートページ

Next.js

シンプルかつ機能的なメモアプリを作成しました。直感的に操作することが可能で、思いついたことをすぐに記録することができます。現在iPhone、iPadに対応しています。iPhone上の画面iPad上の画面今後、デザイン、機能面での充実を予定しています。

2019-09-12

【Next.js】Next.jsにMaterial-UIを組み込み、ボタン表示をするまで

Next.js

Next.jsにMaterial-UIを組み込み、ボタン表示をするのがとても簡単だったので備忘録として残します。 $ npm install @material-ui/core $ npm run dev import Button from '@material-ui/core/Button'; const Index = () => ( <Button variant="contained" color="primary"> Hello World </Button> ); export defau…

2019-09-11

【Next.js】Next.jsのプロジェクトにMaterialize.cssを組み込みたい

Next.js

Next.jsのプロジェクトにMaterialize.cssを組み込みたい場合は以下のような設定に。Next.jsの設定は以下の記事にて解説しています。 nekorokkekun.hatenablog.com import React from 'react'; import Link from 'next/link'; import Head from 'next/head'; …

2019-09-11

【Next.js】Next.jsで<head>タグを設定する簡単な方法

Next.js

Next.jsでタグを設定する簡単な方法は以下の通りです。 import Link from 'next/link'; ★ class Header extends React.Component { render() { return ( <React.Fragment> <Head> ★ <title key="title">タイトル</title> </Head> ★ </React.Fragment> ) } } export default Header;