プログラミングMaterial-UIでReactのスタイリングをしてみよう
ReactでのスタイリングはMaterial-UIがおススメとのこと。 ということで、Material-UIの使い方なんかをちょっとメモっておくことに。 ※Reactのプロジェクトが作成済みなことが前提です。 インストール npm inst...
プログラミング
プログラミングCross-Origin-Opener-Policy policy would block the window.closed callの対処方法
Firebaseを使ってのアプリを作成している時、Google認証でログインした時に、コンソールに「Cross-Origin-Opener-Policy policy would block the window.closed call」エ...
プログラミングFirebaseにメールまたはどのプロバイダからログインしたかを知る方法
Firebaseの認証には、 メール認証 GoogleID認証 facebook認証 Twitter認証 ・・・・ など、いろいろなプロバイダーを使ってログインする方法があります。 神谷 アプリにどんな認証を許可するかの設定はこちらから。 ...
プログラミングReactプロジェクトでreact-router-domを使ってSignIn/SignUp/Home画面を制御する。
当該記事のサンプルコードはこちら(Github)。 アプリはこちら(Outlet-Test) Reactのページ遷移はreact-router-domを使ってやる ユーザー登録をして、何かサービスを行うアプリには、SignIn/SignUp...
プログラミングReactのプロジェクトで環境ファイル(.env)の定義の読み込み方
Reactのプログラムを作っていた時、あるメソッドのプロパティにURLを設定する必要が出てきました。 そのとき、 コードにURLを”べた書き”するは嫌だな… と多くのエンジニアは思うでしょう。 なぜなら、今は開発中のプログラムは今はloca...
プログラミングVS Codeの拡張機能REST Clientを使った時に「connect ECONNREFUSED 127.0.0.1:(ポート番号)」のエラー発生について
REST Clientは、VS Code上でRest APIのレスポンスを確認できるVS Codeの拡張機能。 マーケットプレースで「REST Client」を検索して、REST Clientのページでインストールするか、VS Codeの拡...
フリーランス生活塩漬けしていた「個人型確定拠出型年金」を受給するためにいろいろやったこと
フリーランスになる前に勤めていた会社で、「個人型確定拠出型年金」という積み立てをしていました。 もしかすると「個人型確定拠出型年金」を「日本版401k」というキーワードで覚えている方もいるかもしれない。 退職金を自分で積み立てて、それを自分...
フリーランス生活ロリポップのプランをスタンダードプランからベーシックプランに変えた話
この記事は2023年5月に書いています。 記事を書いたときから時間がたっている場合は、改めてロリポップのサイトで情報を確認してください。 スタンダードプランが新規に契約できなくなる ある日ロリポップからメールが来ました。 そこで注目したのは...
プログラミングReactプロジェクトで画像にマウスオーバーしてポップアップを出す方法
「画像にマウスオーバーするとポップアップが出る」ということを実現する方法は何通りかあると思います。 この記事ではReactのcreatePortalを使用して、画像にポップアップを出す方法をご紹介。 プログラムの概要 表示された画像にマウス...
プログラミングReactのプロジェクトでsrcフォルダにある画像を読み込む
Reactのプロジェクトでsrcフォルダに保存しておいた画像ファイルが読み込めない! という場面に出くわい焦ったので、その対処を備忘録として残しました。 画像が表示されない Reactプロジェクトでsrcフォルダにある画像を出力しようとした...