Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

React Hooksの使い方を学ぼう~関数コンポーネントの状態管理を行う

基礎からはじめるReact Native入門 第5回

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2019/10/24 11:00

 前回は、クラスコンポーネントで状態管理やライフサイクルを利用する方法について解説しましたが、関数コンポーネントでも同様の機能を実現することができます。今回は、Reactのバージョン16.8から導入された、関数コンポーネントを拡張するための機能群であるReact Hooksについて、基礎的な使い方を解説します。

目次

対象読者

  • JavaScriptとWeb開発の基礎に理解がある方
  • Reactを用いたJavaScriptアプリケーション開発の未経験者

前提環境

 筆者の検証環境は以下の通りです。

  • macOS Catalina 10.15
  • Node.js 11.7.0/npm 6.5.0
  • expo-cli 3.0.10
  • expo 34.0.1
  • React 16.8.3

関数コンポーネントを高機能にする

 第3回で、Reactのコンポーネントの作り方にはクラスコンポーネントと関数コンポーネントの2種類があることを解説しました。また、クラスコンポーネントにはライフサイクル管理や状態管理の仕組みが組み込まれていることを、前回解説しました。

 さて、これまで本連載で解説してきた範囲では、関数コンポーネントは「引数であるpropsに応じて決まったJSXを返す関数」でした。リスト1は簡単な関数コンポーネントの例です。

[リスト1]関数コンポーネントの例
function Welcome(props) {
  return <Text>Hello, {props.name}</Text>;
}

 クラスコンポーネントで同様の機能を実現する場合に比べると、関数コンポーネントではいくらか記述量やインデントの深さが減るので、コード全体の見通しがよくなるといった利点があります。一般に、できる限り、UI記述の多くの部分を関数コンポーネントで実装したほうが、コードの可読性は上がっていきます。

 しかし、UIの組み合わせをアプリケーションとして成立させるためには、状態管理やライフサイクル管理が不可欠です。どんなに関数コンポーネントだけでアプリケーションを作りたくても、これらの機能を利用するためだけにクラスコンポーネントを使うことを、以前の私たちは強いられていました。

 そんな状況は長くは続きませんでした。Facebook社のReact開発チームも、できるだけ関数コンポーネントだけでアプリケーションを作りたいと思っていたようで、関数コンポーネントをリッチにするためのツールが発明されました。それがReact 16.8で実装された、Hooks(フックス)と呼ばれる関数群です。日本語版ドキュメントでの呼び方に倣って、本記事では「フック」と表記します。

 現在では、私たちはクラスコンポーネントと関数コンポーネントを、おおむね同等の機能を実現できる対等な存在として、選択することができるようになりました。本記事では、フックを用いて関数コンポーネントをリッチに扱う方法を解説していきます。

フック

 フックの個別の関数について、役割と使い方について解説していきますが、百聞は一見にしかずということで、まずはリスト2のサンプルをご覧ください。前回はクラスコンポーネントで解説した、カウンターアプリの関数コンポーネント版です。

[リスト2]フックを利用したカウンターアプリ
import React, { useState } from 'react'; // (2)
import { Text, View, Button } from 'react-native';

export default function App() {
  const [count, setCount] = useState(0); // (1)

  return (
    <View style={styles.container}>
      <Button title="-1" onPress={() => setCount(count - 1)} />
      <Text>{count}</Text>
      <Button title="+1" onPress={() => setCount(count + 1)} />
    </View>
  );
};

 (1)で実行されている useState は、フックの1つで、状態管理を行います。また、(2)で react からインポートしていることから、Reactライブラリの一機能であることが分かりますね。

 フックの関数は、慣例として useXxxxx という形で命名することになっています。Reactライブラリが直接提供しているフックはこの命名に従っていますし、それらを組み合わせて自作する独自フック(後述します)も、 useXxxxx の命名規則に従うべきです。Reactアプリケーションを開発する中で useXxxxx という名前を見かけたら、フックのことだと思ってよいでしょう。

組み込みフック

 Reactに組み込まれているフックは10種類あります。多くのフックは慣れるまで使わないため、公式ドキュメントでは基本のフック、追加のフック、と分類されています。次の2つの表で簡単に列挙します。

表:基本のフック
フック 概要
useState 状態を管理する
useEffect ライフサイクルに基づいた副作用を管理する
useContext  Context APIから渡された値を取り出す
表:追加のフック
フック 概要
useReducer useStateよりも複雑な状態を扱う
useCallback コストが高い関数生成の実行回数を抑える
useMemo コストが高い値生成の実行回数を抑える
useRef DOMやその他のオブジェクトへの参照を保持する
useImperativeHandle 親コンポーネントへ渡す参照を加工する
useLayoutEffect DOMの更新後に同期的に呼び出される副作用を管理する
useDebugValue React DevTools でカスタムフックのラベルを表示する

 これらの中で、実用上、本当によく使うのは useStateuseEffect の2つだけです。同じく基本のフックである useContext も、ライブラリを作る際には頻繁に利用するものの、アプリケーションを作る際にはほとんど使いません。そのため、本記事では useStateuseEffect の2つを中心に解説します。


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト 中川幸哉(ナカガワユキヤ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:基礎からはじめるReact Native入門
All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5