Reactの新しいドキュメントhttps://react.devが登場しました❗
まだ日本語ページはありませんが・・・
興味があったので Quick Startを読んでみました、結論としては良いドキュメントだと思います。 早く日本語ページもできると良いですね。
従来のドキュメントの問題点
現時点では、従来の日本語ドキュメントhttps://ja.reactjs.orgはアクセス出来ますが、下の画像のように新ドキュメントへのリンクが置かれています。
また、新ドキュメントのブログには従来のページはhttps://legacy.reactjs.orgに移動し、もう更新はされないと書かれています。
従来のドキュメントは歴史的経緯もあり、現状のReactのコードとかけ離れている問題点がありました。
現在のReactコードは関数コンポーネントが主流で、ステートやライフサイクルの管理にはHooksが使われています。
しかし、チュートリアルに書かれているReactのコードは現在ではほとんど使われていないクラスベースのコンポーネントで書かれていました。🥺
また、チュートリアルは三目並べゲームの面白い課題を取り上げていますが、最初にJSXの解説がほぼ無く、何らかのフロントエンド・フレームワークを知っていない初心者には難しいかと思われます。
まずInstallationを少し
新ドキュメントのチュートリアルを語る前に、開発ツールに付いてのInstallationページを見てみましょう。
Start a New React Project(新規プロジェクトの作成)ページを見ると、
最初に以下のようなReactフレームワークが紹介されています。
Reactフレームワークを使わない開発方法Can I use React without a framework?のShow Detailsをクリックして表示すると、長々と『・・・Reactフレームワークを使った方が良いよ・・・』と書かれています。そして最後にどうしてもフレームワークを使いたくない場合はViteやParcelを使ってください。と書かれています。
あれ！ 公式のCreate React App はどうしたの ❗❓
create react app deadで検索するとたくさんの記事が出てきます。😅
create-react-appのバージョンアップは2022年9月から止まったままです・・・
Quick Start
さて、チュートリアルの前にあるQuick Startを眺めてみましょう。
Create and nest components
関数コンポーネントを使い、すごく簡単なコンポーネントとアプリを作っています。
Reactの雰囲気がわかりますね！
Writing markup with JSX
ReactではHTML生成にJSXを使っているいると解説されています。
また、JSXはHTMLに比べ閉じタグが厳密だよ！と初心者のハマりポイントへのアドバイスが書かれてます。
Adding styles
CSS指定の簡単な解説。
Reactではクラス属性はclass=ではなくclassName=と書くReactの重要な教えが書かれています。😁
Display data
JavaScriptの値を、JSX（Reactで作られる画面）に組み込みという重要な機能を説明しています。
Conditional rendering
条件により、JSX（Reactで作られる画面）を切り替える方法の説明。
JSXを書くのに重要で、かつJavaScript初心者に難しい、条件演算子〜 ? 〜 : 〜 や 論理積演算子 〜 && 〜 などが説明されています。
Rendering lists
リスト、繰り返し表示の解説。
これもJSXのなかで判りにくい概念ですが、非常に重要なものです！
Responding to events
イベントハンドリングの説明。
JavaScriptの関数値（関数名）と関数呼び出しの違いが付いての注意点が書かれているのが良いですね。
Updating the screen
ステートの簡単な解説。
画面の中で変化（更新される）値を扱うためのステートという概念は、Reactの重要な概念ですよね。
Using Hooks
Hooksに付いての短い説明。
Sharing data between components
ステート等の値を他のコンポーネントに渡す、共有する方法に付いての説明。
きれいなイラストがとても良いですね！
Next Steps
ここでQuick Startは終わりで、次のチュートリアルは、やはり三目並べです。
関数コンポーネントで書かれているので安心・安全ですね。😁
まとめ
従来のドキュメントは歴史的経緯もあり現状にあってなかったので、新ドキュメントでは完全に書き直されました。
新ドキュメントでは、JSXの丁寧な解説が追加されたのは素晴らしいですね。また、State/Propsの解説もスートーリがあり初心者に優しいと思います。
新ドキュメントのQuick Startは、JavaScriptやフロントエンドフレームワークに慣れてない新人が一人で学ぶには、まだ難しかも知れません。しかし、すでにReactを慣れているプログラマーが指導しながらなら、新人教育等にも使えそうなドキュメントだと思いました。
今後の期待大ですね❗
