Introducing Hooks（日本語訳）

【所要時間】

2時間くらい(2019年2月7日)

【概要】

• Introducing Hooksを日本語に翻訳する
• React v16.8: The One With Hooksとかなり重複する内容。

【要約・学んだこと】

HooksはReact 16.8で新たに追加された。stateやその他Reactの機能をclassを書かずに使うことが出来る。

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

この新しいuseState機能が”Hook”で我々が最初に学ぶことだが、この例は単なる。まだ意味が分からなくても心配ご無用。

次のページからHooksについて学び始める。このページでは引き続きなぜReactにHooksを追加したか、どのように素晴らしいアプリを書くための手助けとなるかを説明する。

Note

React 16.8.0がHooksをサポートした最初のリリースだ。アップグレードをするときに、React DOMを含むすべてのパッケージをアップグレードすることを忘れずに。React Nativeは次回の安定版リリースでHooksをサポートする。

Video Introduction

2018年のReact Confで、Sophie AlpertとDan AbramovがHooksを紹介し、続いてRyan FlorenceがHooksを使ってアプリのリファクタをどうやって行うか実演した。こちらのビデオを参照。

No Breaking Changes

Hooksの特徴：

• Completely opt-in.
  既存のコードを書き直すことなくHooks componentを試すことが出来る。しかし、使いたくなければ今すぐにHooksを学び、使う必要はない。
• 100% backwards-compatible.
  Hooksは重大な変更を含まない。
• Available now.
  Hooksはv16.8.0のリリースから利用可能

Reactからclassを削除する予定はない。詳しくはこのページの下のHooksの段階的な採用戦略を参照。

HooksはReactコンセプトの知識の代替にはならない。その代わり、Hooksはすでに知っている、props, state, context, refs, lifecycleといったReactコンセプトに、より直接的なAPIを提供する。後ほど紹介するが、Hooksはそれらを繋ぐ新たなパワフルな方法も提供する。

ただHooksの学習を開始したいなら、気軽に次のページに進もう。引き続きなぜHooksを追加したか、アプリの書き直しをせずにHooksを使い始める方法をこのページで学び続けてもよい。

Motivation

Hooksは5年以上作成され、維持され続けた無数のcomponentが遭遇したReactの一見無関係な多岐にわたる問題を解決する。Reactを学んでいる、毎日使っている、同様のcomponentモデルを持つ異なるライブラリを好む人でさえ、これらの問題を認識するかもしれない。

It’s hard to reuse stateful logic between components

Reactはcomponentに再利用できる挙動を取り付ける方法を提供していない(例えばstoreと接続する。)。Reactを使って仕事をしたことがあるなら、 render props やhigher-order componentsがこれを解決しようとしているのをよく知っているかもしれない。しかし、これらを使用する際にcomponentを再構築する必要がある。それは面倒で追跡が難しいコードを生み出す。React DevToolsで典型的なReactアプリケーションを見ると、provider, consumer, higher-order components, render props, その他のあやふやさのレイヤーによって囲まれたcomponentの”wrapper hell”を見つけるだろう。DevToolsでこれらをフィルタリングすることが出来る一方で、これは根本的な問題を指摘している。

Hooksを使えば、componentからstateful logicを抽出することが出来るので、独立したテストや再利用が可能となる。Hooksはcomponentの階層(hierarchy)を変えることなくstateful locitの再利用を可能とする。これは多くのcomponent間やコミュニティ間でHooksを共有することを簡単にする。

詳しくは Building Your Own Hooks参照。

Complex components become hard to understand

我々はよくシンプルに始めたが、stateful logicや副作用でカオスになって、手に負えなくなったcomponentをメンテナンスしなければならない。それぞれのライフサイクルメソッドは、無関係のロジックが混在していることがよくある。例えば、componentがcomponentDidMountとcomponentDidUpdateでデータをfetchしているといったことだ。しかし、同じcomponentDidMountメソッドに、イベントリスナをセットし、componentWillUnmountでクリーンアップを実行する無関係なlogicを含んでいる可能性もある。相互に関連するコードは互いに分割されるが、完全に無関係のコードは一つのメソッドにまとめられる。これはバグや矛盾を発生しやすくする。

多くの場合、これらのcomponentを小さく分けることはできない。なぜならstateful logicはいたるところにあるからだ。また、テストをするのも難しい。これは多くの人が別のstate管理ライブラリをReactで使うことを好む理由の1つだ。しかし、それらの導入はとても複雑で、異なるファイル感を飛び回ることを要求し、componentの再利用をさらに難しくする。

これを解決するために、Hooksはライフサイクルメソッドに基づいて分割するのを強制せず、1つのcomponentを関連する小さな機能に基づいて分割することを可能にする(サブスクリプションの設定やデータの取得など)。また、componentをより予測しやすくするために、reducerを使ってcomponentのローカルのstateの管理を選択することも可能。

詳しくは Using the Effect Hook参照。

Classes confuse both people and machines

コードを再利用とコードの編成がより難しいのに加え、classはReactを学ぶのに大きな障壁となりうることがわかった。JavaScriptで”this”がどう動作しているのかを理解する必要がある。これは多くの言語の動作と大きく異なる。イベントハンドラをbindすることを覚えておく必要がある。変わりやすいsyntax proposalsがなければ、コードはとても冗長だ。人々はprops, state, top-down data flowを完全に理解できるが、それでもclassで苦戦する。Reactのfunction componentとclass componentの区別と、それらをいつ使うかは、熟練のReact開発者間でも意見の違いを生む。

さらに、Reactは5年前に現れ、そして今後5年間も関連性があることを保証したい。 Svelte, Angular, Glimmer, やほかの人が示しているように、componentの事前コンパイル( ahead-of-time compilation)には将来の可能性がたくさんある。特にテンプレートの制限がなければそうだ。最近はPrepackを使ってcomponentの折り畳みcomponent foldingを実験しており、近いうちに結果が出そうだと期待している。しかし、class componentはこれらの最適化を襲いパスにフォールバックさせる意図しないパターンを助長することが判明した。classは今日のツール問題も示す。例えば、classはあまり縮小できず、ホットリロードをフレーク状で信頼しにくいものにする。コードが最適化可能なパスにとどまるようにするAPIを提供したい。

これらの問題を解決するために、Hooksはclassを使わずReactの機能を使えるようにする。概念として、React componentsは常にfunctionと近いものである。Hooksはfunctionを取り入れるが、Reactの実用的な精神を犠牲にしない。Hooksは命令型エスケープハッチ(imperative escape hatches)へのアクセスを提供し、複雑なfunctional またはreactiveなプログラミング方法を習得を求めない。

Examples
Hooks at a GlanceはHooksを学ぶのによい。

Gradual Adoption Strategy

要約：Reactからclassを削除する計画はない。

React開発者たちはプロダクトの制作にフォーカスをしており、リリースされた全てのAPIを研究する時間はない。Hooksはとても新しく、Hooksの学習や採用を考えるより前に、より多くの例やチュートリアルをまた方がいいかもしれない。

我々はReactに新たな原理(primitive)を加えるための基準は非常に高いともまた理解している。好奇心旺盛な読者のために、より詳細な動機を書いたdetailed RFCを用意し、設計の決定や、関連する先行技術についての追加の観点を提供する。

重要なこととして、Hooksは既存のコードと並行して機能するため、段階的に採用することが出来る。我々はReactの未来の形成に興味を持つ人たちのコミュニティから、早期のフィードバックを得るため、実験的なAPIを共有している。- そしてオープンでHooksを繰り返す。

最後に、Hooksを慌てて導入する必要はない。特に既存の複雑なclass componentで大きな書き直しを避けることを推奨している。”Hooksの考え”にマインドシフトをし始めることに少し気を付けて欲しい。経験上、新しく、重要でないcomponentで最初にHooksを使ってみるのがベストで、チームメンバー全員がHooksを快適に使えるようになることを確かにするとよい。Hooksを使ってみたら、いい点も悪い点も気軽にfeedbackを送って欲しい。

我々は全ての既存のclassでのユースケースをHooksでカバーしようとしているが、当分はclass componentをサポートし続ける。Facebookでは、無数のclass componentが存在し、それらを書き直すつもりは全くない。その代わり、新しいコードではclassと並行してHooksを使う。

Frequently Asked Questions

Hooksについてのよくある質問は Hooks FAQ pageを参照。

Next Steps

このページの最後に、Hooksがどんな問題を解決するかざっくりとしたアイデアを持ったに違いないが、多くの詳細はよくわからないだろう。次のページでHooksについて学び始めよう！

【わからなかったこと】

• Hooksの使い方again

【感想】

React v16.8: The One With Hooksとほとんど同じ内容だったが、引くに引けなくなって最後までやった。