30歳からのプログラミング

30歳無職から独学でプログラミングを開始した人間の記録。

React のプレリリースチャンネルで実験的な機能にアクセスする

React

React は公式に3つのリリースチャンネルを用意しており、これを利用すれば安定版以外の React もインストールすることが出来る。

  • Latest
  • Next
  • Experimental
    • Next と同様にmasterブランチを追跡するが、Next では無効になっている実験的な機能も有効になっている。このチャンネルでは、リリース間で破壊的変更が高い頻度で行われる可能性がある。

このうち Latest 以外の2つのリリースが「プレリリースチャンネル」と呼ばれる。

React の開発は GitHub 上で行われており、変更は随時masterブランチに取り込まれていく。
だが、その内容が全て安定版に取り込まれるわけではない。
安定版のブランチは別にあり、そこにmasterブランチからチェリーピックして安定版に変更を取り込んでいく。
そしてそれが Latest チャンネルからリリースされる。このプロセスによって、互換性が不本意に破壊されることを防ぎ、React の安定性が保たれるようになっている。

masterブランチに取り込まれた内容は、Next チャンネルからリリースされる。
そのため、Latest と Next の差分は、次回の Latest リリースに含まれる内容とほぼ同じになる。

Experimental もmasterブランチの内容が反映されているため、Next と同じコードをベースにしている。
違いは、Experimental ではフィーチャー・フラグがオンになっていること。これにより、実験的な機能が含まれたリリースになっている。
これらの機能は今後の開発で変更されたり削除されたりする可能性が十分にある。

Next や Experimental のようなプレリリースチャンネルが用意されていることで React コアチームは、コミュニティにそれらの機能を利用してもらい、フィードバックを得ることが出来るようになっている。

実際に使ってみる

全てのリリースが npm に公開されているので、簡単に利用できる。

リリースチャンネルを指定しなかった場合は Latest リリースがインストールされる。

$ npm i react react-dom

本日現在の最新安定版は16.12.0なので、それがインストールされた。react@latestやreact-dom@latestのように@latestを付けて明示的に Latest リリースをインストールすることも出来る。

@nextを付けると Next リリースをインストールできる。

$ npm i react@next react-dom@next

インストールされたバージョンは0.0.0-b53ea6ca0。
プレリリースのバージョンにはコンテンツのハッシュ値を使うため、このようになる。

最後に Experimental をインストールする。

$ npm i react@experimental react-dom@experimental

0.0.0-experimental-f42431abeがインストールされた。
このバージョンでは、まだ安定版には採り入れられていない Concurrent Mode の機能にアクセスできる。

以下のコードを実行すると、useTransitionやcreateRootを利用できることを確認できる。

// import 文に対応するのが面倒で require を使っただけであり、他意はない
const React = require('react');
const ReactDOM = require('react-dom');

console.log(React.useTransition);
console.log(ReactDOM.createRoot);

このコードを Latest や Next の React で実行すると、useTransitionもcreateRootもundefinedになる。

参考資料