React– category –

Next.js13からCloudTasksにタスクを登録する際に、ハマったので記事にします。 事前準備 CloduTasksでキューを作成 サービスアカウントにタスク追加のためのロールを追加 サービスアカウントのメール、シークレットキーを環境変数に登録 プロジェクトID、C...

この記事ではNext.jsでPrismaを使う方法をご紹介します。 Prismaを使うことでJSでデータベース作ったり、クエリを発行してデータを取得することができてとても便利です。 この記事ではPlatforms Starter KitとPrisma Examplesを参考にしています。 【prism...

この記事ではNext.jsでnext-seoを使う方法をご紹介します。next-seoはNext.jsのプロジェクトでSEOで必須となるタイトルタグやメタタグを管理するプラグインです。 Next.jsをインストール済みとして進めていくので、Next.jsのインストールがまだの方は「Nex...

この記事ではreact-beautiful-dndを使って要素の順序をドラッグ＆ドロップで入れ替える方法をご紹介します。 react-beautiful-dndを使うと以下のデモのようにドラッグ＆ドロップで質問の順序を入れ替えることができます。 react-beautiful-dndはyarnまたは...

この記事ではSWRのuseSWRInfinite()を使って無限スクロールの実装方法をサンプルコードを使ってご紹介します。 サンプルコードのデモは次の通りです。 このデモの仕様は データは2件づつ取得一番下の「読み込み中」が表示されたのをトリガーとして次のデー...

この記事ではSWRのuseSWRInfinite()を使って「もっと見る」機能の実装方法をサンプルコードを使ってご紹介します。 サンプルコードのデモは次の通りです。 このデモの仕様は 1ページ目から取得1ページあたり2枚の写真ボタンをクリックすると次のページの写...

この記事ではテキスト内にあるツイッターのURLやyoutubeのURLをもとにプレビューを表示する方法をサンプルコード付きでご紹介します。 サンプルコードのデモは次の通りです。 デモではテキストエリアに入力されたツイッターのURLやyoutubeのURLを1つづつ表...

この記事ではコメントなどのテキスト内の任意の文字列をリンクに変換する方法をサンプルコード付きでご紹介します。テキスト内の任意の文字列とは具体的に URLハッシュタグ（#hogehoge）メンション（@hogehoge） です。これらの文字列をテキストリンクする...

In this article, we will show you how to select and upload multiple images in react. In the sample code shown later, we will use the material UI v5axiostypescript in the sample code I will show later. This sample code assumes a form wher...

この記事ではreactで複数の画像を選択してアップロードする方法をご紹介します。 後でご紹介するサンプルコードでは material UI v5axiostypescript を使用しています。 ご紹介するサンプルコードはコメントに画像を付けて投稿するフォームを想定していま...