Next.js 【Next.js】NextAuth.jsとFirebase Authenticationを使ってGoogleログイン機能を作る
Next.jsで認証機能を実装するためのライブラリであるNextAuth.jsを使ってGoogleログイン機能を作成する方法を解説します。
環境
next @13.2.1
next-auth @4.19.2
re...
プログラミング
Next.js 
React 【React】カウントアップ機能を作成して”Jotai”に入門する
Reactでアプリケーションの状態管理を行うのにはReduxを利用するのがポピュラーですが、Reduxは学習コストが少し高い上に、コードが複雑になりがちというデメリットがあります。
そこで、比較的小規模なアプリケーションであればその...
React 【React】カウントアップ機能を作って”Redux”に入門する
Reactでアプリケーションの状態管理を行うにはReduxを使うとよいという噂を聞き、Reduxに入門してみることにしました。
本記事では、Reduxを使用するメリットから、使用方法までわかりやすく解説しています。
R...
React 【React × Tailwind CSS】transitionを使ってhoverでアニメーションさせる方法
環境
react @18.2.0
tailwindcss @3.2.4
heroicon/react @2.0.15
CSSでアニメーションを付ける際に使用するtransitionについてご紹介します。...
git・インフラ・環境構築 【Firebase】Functionsを使ってログイン機能をつくる
Firebaseでは、ログイン機能は、Authenticationプロジェクトがあるため、簡単に作成することができます。
しかし、こんな場合にはどうでしょう。
"OAuth"と、"メール/パスワード"2種類のログインプ...
React 【React × Vite】Uncaught ReferenceError: global is not defined
ReactとViteとFirebaseで構築したアプリで以下のエラーが発生したのでその解消方法をまとめました。
Uncaught ReferenceError: global is not defined
エラー原...
React 【React】Headless UIのDialogの使い方を丁寧に解説
ReactでDialog(Modal)を実装するUIライブラリといえば、王道はMaterial UIかと思います。
ですが、今注目を集めているUIライブラリといえばtailwindCSSではないでしょうか。
Material ...
React 【React】MUI DataGrid リストから詳細に遷移する3つの方法
Reactでリストを作るといえばコレですよねMUIのDataGrid！
そのDataGridを使い、リストから詳細ページへの遷移をさせたいと思うことが多いのではないでしょうか。
詳細ページへの遷移方法はいろいろあります...
React 【React Hook Form】MUIライブラリと素のHTMLの違いをラジオボタンで比較
Reactでフォームを作成するときに便利で優秀なライブラリ、React Hook Form！
素のHTMLで使用するなら導入は簡単ですが、MUI等のUIライブラリと組み合わせると、記述が少し複雑になりますよね。その違いを比較して整理...
JavaScript 【GAS】覚えておきたい頻出メソッド集
業務の自動化を行うため、SpreadSheetでGASを使ったスクリプトをよく組んでいます。
しかし、何かを作るたびにググってとても効率が悪いことを繰り返しているのでこの度メソッドをまとめ、GASおまとめ集を作ることにしました。
...