Web制作 【MW WPForm終了対策】Contact Form 7で完了ページにリダイレクトする方法【公式推奨】
MW WPFormの開発終了に伴い、フォームの再構築を余儀なくされている制作現場が増えています。特に多いのが、Contact Form 7（以下CF7）に移行したものの、完了ページへ遷移できないJavaScriptで無理やり対応している有料...
Web制作 
Next.js-3.API通信編- Laravel（バックエンド） + Next.js（フロントエンド）の構成例
API通信編ではjson-serverにてバックエンドを構築しましたが、より実践的にバックエンドをLaravelを用いた場合の構成例と各種設定について説明します。結論 → Laravel を API サーバーとして使い、Next.js でフ...
Next.js-4.Typescript編- TypeScriptその③
useStateの型宣言useStateの型宣言は下記にようにします。const [count, setCount] = useState<number>(0);API のレスポンス型宣言APIのレスポンスで受け取った値の型宣言は下記のよう...
Next.js-4.Typescript編- TypeScriptその②
配列の型宣言配列の場合の書き方const numbers: number[] = [1, 2, 3, 4, 5];const numbers: Array<number> = [1, 2, 3, 4, 5];どちらも同じ意味となります。オブ...
Next.js-4.Typescript編- TypeScriptその①
本章ではTypeScriptを学習します。実際にNext.jsのプロジェクトはTypeScriptで記述されることが多いので、習得しましょう。TypeScriptとは？TypeScriptとは、データの型を指定できるJavascriptです...
Next.js-3.API通信編- fetchを使ったAPI通信（Next.js）その⑤
Delete（データ削除）app/components/DeleteDog.js"use client";export default function DeleteDog({ dogs, setDogs }) { const delete...
Next.js-3.API通信編- fetchを使ったAPI通信（Next.js）その④
データ更新(Update)app/components/UpdateDog.js"use client";import { useState } from "react";export default function UpdateDog(...
Next.js-3.API通信編- fetchを使ったAPI通信（Next.js）その③
データ追加(Create)app/components/CreatDog.js"use client";import { useState } from "react";export default function CreateDog(p...
Next.js-3.API通信編- fetchを使ったAPI通信（Next.js）その②
データ取得（Read）app/components/ReadDogs.js"use client";import { useEffect } from "react";export default function ReadDogs(pro...
Next.js-3.API通信編- fetchを使ったAPI通信（Next.js）その①
本章よりfetchを使ったAPI通信について学んでいきます。API通信とはAPI（Application Programming Interface）通信とは、アプリ同士がデータをやり取りする仕組みのことです。Next.jsはフロントエンド...