Next.js-4.Typescript編- TypeScriptその①
本章ではTypeScriptを学習します。実際にNext.jsのプロジェクトはTypeScriptで記述されることが多いので、習得しましょう。TypeScriptとは？TypeScriptとは、データの型を指定できるJavascriptです...
2025-02
Next.js-4.Typescript編- 
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はフロントエンド...
Next.js-2.React Hooks編- Reace Hooks その⑦ 発展編（任意）
useReducerとは？useState よりちょっと賢い「状態管理の方法」「どう変えるか？」のルールを reducer という関数にまとめて管理する状態が増えてもスッキリ書ける🐾useReducerの使い方少し複雑ですので、まず実際のコ...
Next.js-2.React Hooks編- Reace Hooks その⑦ 発展編（任意）
これまで、React HooksのuseState,useEffect,useRefについて学んできました。ここからは発展編ということで、必須ではありませんが、知っておくと便利なHooks（useContext,useReducer）につい...
Next.js-2.React Hooks編- Reace Hooks その⑥
useRefとは？useRef は React の フック（Hook） の一つで、次のような用途で使われます。✅ ① コンポーネントが再レンダリングされても値を保持する（state とは違い、変更しても再レンダリングしない）✅ ② DOM（...
Next.js-2.React Hooks編- Reace Hooks その⑤
コンポーネントのアンマウントとは？コンポーネントのアンマウントとは「コンポーネントが画面から削除されること」です。コンポーネントが再レンダリング（マウント）されるということはその都度削除され、更新されているということです。クリーンアップ処理...