🐈
Reactのカスタムフックを理解する
はじめに
Reactのカスタムフックって得意ですか？
ベテランのフロントエンジニアならともかく、バックエンドエンジニアにとってはかなり難しいのではないでしょうか？
というか私がすぐわからなくなるので、改めてゼロから再勉強したので、その過程を含めて共有いたします。
これをコピペしながら動かせばきっと理解できると思います。
STEP1 固定の文言を１つ返すだけのフック
まず、最も単純なフックを書いてみます。
それが、これ。
なんのへんてつもない、ただ固定値を１つ返すだけの関数です。
App.js
import "./App.css";
/**
* カスタムフック
* @returns
*/
const useDice = () => {
return 6; // 固定値を返す。
};
function App() {
const value = useDice(); // 固定値を受け取る。
return (
<div className="App">
<h1>フックの練習</h1>
<p>値= {value}</p>
</div>
);
}
export default App;
STEP2 複数の値を返すフック
次に複数の固定値を返してみます。
そして分割代入で値を受け取ります。
App.js
import "./App.css";
/**
* カスタムフック
* @returns
*/
const useDice = () => {
return [6, 5]; // 配列に入れて返す。
};
function App() {
const [value1, value2] = useDice(); // 配列を分割代入で受け取る。
return (
<div className="App">
<h1>フックの練習</h1>
<p>値= {value2}</p>
</div>
);
}
export default App;
STEP3 状態と関数を返すフック
今度は状態と状態を更新する関数を返します。
はい、よくみるカスタムフックになりましたね。
App.js
import "./App.css";
import { useState } from "react";
/**
* カスタムフック
* @returns
*/
const useDice = () => {
const [diceValue, setDiceValue] = useState(1);
return [diceValue, setDiceValue];
};
function App() {
const [diceValue, setDiceValue] = useDice();
const handleOnClick = () => {
// 1~6をランダムでつくる。
const randomValue = Math.floor(Math.random() * 6) + 1;
setDiceValue(randomValue);
};
return (
<div className="App">
<h1>フックの練習</h1>
<p>値= {diceValue}</p>
<button onClick={() => handleOnClick()}>振る</button>
</div>
);
}
export default App;
STEP4 ロジックをカスタムフックの中に移動
STEP3までで構文の仕組みはおしまい。
ですが、さっきのはサイコロの値を決める肝心なロジックがフックを使う側にあったので汎用性がありませんでした。
なのでフックの内部に移動します。
STEP３と見比べてもらえれば分かりますが、ほとんどただ移動しただけですね。
App.js
import "./App.css";
import { useState } from "react";
/**
* カスタムフック
* @returns
*/
const useDice = () => {
const [diceValue, setDiceValue] = useState(1);
const rollTheDice = () => {
// 1~6をランダムでつくる。
const randomValue = Math.floor(Math.random() * 6) + 1;
setDiceValue(randomValue);
};
return [diceValue, rollTheDice];
};
function App() {
const [diceValue, rollTheDice] = useDice();
return (
<div className="App">
<h1>フックの練習</h1>
<p>値= {diceValue}</p>
<button onClick={() => rollTheDice()}>振る</button>
</div>
);
}
export default App;
おわりに
以上で、カスタムフックの説明は終わりです。
ベテランのフロントエンジニアでないとものすごく分かりにくい機能ですが、簡単なパターンから順番んにステップアップすればわかりやすいですね。
あとは数をこなすのみかなと思います。
株式会社ONE WEDGE
【Serverlessで世の中をもっと楽しく】 ONE WEDGEはServerlessシステム開発を中核技術としてWeb系システム開発、AWS/GCPを利用した業務システム・サービス開発、PWAを用いたモバイル開発、Alexaスキル開発など、元気と技術力を武器にお客様に真摯に向き合う価値創造企業です。
Discussion