Sanity CMS + Next.js(React) でのサイトの作り方
本稿ではNext.jsをフロントエンドに、ヘッドレスCMSの一つであるSanity CMSをバックエンドとしてサイトを構築する方法をご紹介します。具体的には、ヘッドレスCMSの用途、Sanityのアカウント作成から、ヘッドレスCMSの構造、Sanity Studioの使い方、クエリ言語GROQ、フロントエンドでの実装Sanityまでを解説しています。 本稿を読めば公式ドキュメントを難なく理解できる […]
CATEGORY
React
Vercelで独自ドメインを設定する方法
VercelはNext.jsやReactで作成したWebアプリを動かすサーバーです。Vecelにも独自ドメイン取得機能とネームサーバー（DNSサーバー）はありますが、本稿ではConohaで取得した独自ドメインとConohaのネームサーバーを利用して、Vercel上のWebアプリに独自ドメインを設定する方法をご紹介します。他のドメイン取得サービスをご利用の方でも参考になると思います。 ゴールイメージ […]
React-toastifyの使い方
React-toastifyはユーザーに対してエラーその他アラートを表示させるときに便利な機能です。トーストメッセージやトーストアラート、単にトーストと呼ばれることもあります。本稿ではReactのプロジェクトでReact-toastifyを使う方法をご紹介します。 下記は、私の手元のプロジェクトにおけるトーストの完成イメージ（gifファイル）です。メールとパスワードを空欄でサインインしようとすると […]
カスタムフックの使い方 – useFetchを例に解説
Reactには、useState、useEffectなどに代表されるフック（関数）が幾つかありますが、カスタムフックと呼ばれるフックを自作することも可能です。本稿ではReactのカスタムフックのうち、GETリクエストによく用いられるカスタムフックであるuseFetchの書き方・使い方をご紹介します。カスタムですのでフック（関数）の名称も任意ですが、useFetchについては慣例でこの名前が用いられ […]
FormでのuseRefの使い方
useRefフックを使うと、DOMにアクセスしてその内容を取得・変更できます。他にもReactの公式ドキュメントでは、状態変数（props又はstate）の一つ前の状態を記憶するという使い方も紹介されています（How to get the previous props or state?）。よって用途はかなり広いのですが、本稿ではuseRefを使って、submitされたformの内容を参照し取得す […]
オブジェクトを要素に持つ配列の追加・削除・更新 – JavaScript
本稿では、JavaScriptのオブジェクトを要素に持つ配列に対して、（１）新たなオブジェクトを追加する方法、（２）特定のオブジェクトを削除する方法、（３）特定のオブジュクトの内容を更新する方法をご紹介します。オブジュクトを持つ配列とは例えば下記のような配列で、本稿でも下記の例を用いて説明します。また、本稿ではReact等Webでの実践的な使用を想定し、各オブジュクトに固有のidを設定する方法、そ […]
くるくる回るローディング画面の実装方法 – Reactなら簡単
データの読込み時に、クライアント側でくるくる回るアイコンが表示されることがあると思います。本稿ではこのスピナーアイコンを表示させる仕組みと、Semantic UI Reactのコンポーネントを使った具体的な実装方法を解説します。Material UIにも同様のコンポーネントがあり、本稿を読めばMaterial UIでも問題なく構築できると思います。英語ではくるくる回るアイコンのことをSpinner […]
VercelにNext.jsアプリをデプロイする方法
Vercelは2015年にリリースされたNext.js及びReactに最適化されたホスティングサービスです。バックエンドとSSRを備えるNext.jsで作ったアプリをデプロイしようとすると、Herokuやfirebaseでは特別な設定を要し、正常に動かすのはやや手間です。場合によっては、まっさらなLinuxサーバを借りて設定をした方が早いかもしれません（なお、問題なく動きます）。VercelはNe […]
Recoilの仕組みと使い方
RecoilはReactのグローバルの状態管理ライブラリーで、Reduxとの比較では簡単で使いやすのが特徴です。FaceBook（Meta）が2020年に発表し、2022年1月にはRecoil 0.6がリリースされました。筆者同様2018年-2020年頃にReactを始めた方は、UseStateでは足りない場合はReduxを避けて通れなかった訳ですが、2022年以降にReactを学び始めた方は、関 […]
Setting up Styled Components in Next.js
In this article, I want to show you how to set up Styled Components in Next.js. Unlike the case in React, we cannot use Styled Components in Next.js by just installing it. Installing Styled Components […]