はじめに
元々10年間組込エンジニアとしてやっていた私が、4月からWebサーバーサイド && クライアントサイドエンジニアとしてやっていくことになりました。
そこでReactについてみてて感じたことを残しておきたくて記事化。Thinking about Reactいいな～
Reactとは
HTMLレンダリング(Webページをレイアウトを決める処理)をJavascriptで簡単にやろうぜ！っていうライブラリ。今までHTMLで書いていたことをJavaScript内で出来ますよって話。
当然propertyやonChangeのようなJavaScriptのイベント追加も出来ます。
考え方としては、htmlの要素と同じ単位でcomponentというクラスを作っていき、それらを組み合わせてレンダリングするという形になります。
なので、どうやってcomponentにするのか、そしてそのcomponentに対してどうやってhtmlの設定値やclickイベント等を渡すのかという手段を知る必要があります。
Reactエンジニアに話を聞く前に調べた印象
- Listの更新みたいな変更をかける必要のあるHTML要素を簡単にかける
- 遊びで触ったwebフレームワークでtemplateに設定を詰め込むレンダリングを使ってて感心した後だったので、「クライアントサイドでこれ出来ると便利そうだな～」とぼんやり
Reactエンジニアに話を聞いた後の印象
- オブジェクト指向的な細分化と相性いいし、Reactの思想を通じて設計の基本も学べるいいフレームワークだな
と感じました。
Reactを学ぶ
導入
現場にいたReactエンジニアの方にとっかかりを聞いたところ言われたこととしては、以下をしっかり見るのがいいよとのこと。
元々他の記事を見てわかった気になった上で上の話をもらった主観としても、チュートリアルと特にThinking about Reactが大事と感じました。
Reactを学ぶ ～チュートリアル
まずは使い方を知りたいですよね。まずはReactチュートリアルを見ていくのがいいと思います。
…といいつつ、利用するcodepenが何者かわからず、手元に動く環境が欲しくて最初は違う方法を取っていました。
チュートリアルの前に～手元にコードを置いて試したいなら
最初の参考はReact を、サンプルを実装しながら理解するという記事。より短時間でシンプルにチュートリアルが出来る構成になっているので、中々わかりやすかったです。
やっていることはcreate-react-appのコードベースでチュートリアルに似た流れでコードを弄る手順を説明しています。
- レンダリングしてみよう！
- 自作componentを作ろう！
- 設定値を渡そう！
- イベントを追加しよう！
と、大事な要素を順を追って説明してくれています。(自作componentへのproperty渡しには触れていないけど)
こちらベースで動きを見ると、ReactのJSコードはここから読み込むんだな～みたいな組み込み方もなんとなく見えてくると思います。
gitをインストールしている環境の方なら、手元でチュートリアル系をやる際gitリポジトリ化するのはどうでしょうと提案しておきます。(自分はいつもやっています)
手順としては、
1. 手番最初のフォルダ、今回ならcreate-react-appの中でgit initを実行
2. 何もせずgit add *、git commitを実行
3. 1作業する度にgit add *、git commitして保存
こうしておくとgit log -pで自分のやったステップを振り返ることが出来るので、忘れても振り返りやすいです。
チュートリアルに行きましょう！
いきなりチュートリアルを見ていけるなら(多分codepenへの違和感がなければ)チュートリアルが分かりやすいと思います。そこで詰まるならまずは前述した手元での確認をやるのが良いと思います。
内容はチュートリアルを見てね。頑張って実施してね！
2019/04/08 追記
Reactのチュートリアル、Completing the Game以降はただ使い方を覚えてもらう為ってよりも、このチュートリアルを通して開発時の考え方を学んでほしいという感じかもしれません。
なので、Why Immutability Is Importantに踏み込んだりしているんだろうなと。
「開発時に意識すること」といった半分読み物目線でチュートリアルに取り組むのも面白いかもしれません。
Reactを学ぶ ～思想
自分がいいな、記憶に残したいなと思ったのはこのThinking in Reactの部分です。
Reactの設計思想の根底にはオブジェクト指向等でよく見る原則が詰まっているため、Reactを通してシステム設計について使える考え方が学べる構造となっているので、原文を読むのが一番ためになるとおもえます。
Reactの使い方についてももう一度学べるのでお得
Step 1: Break The UI Into A Component Hierarchy
「componentの単位を単純なものを組み合わせた階層構造にしましょう」という話です。こちら、単一責任の原則(SRP: Single Responsibility Principle)の考え方を取り入れています。
こちらはオブジェクト思想の考え方で、「1クラスの役割は1つにしましょう」という話なんですが、同じように「1 componentの役割は1つにしましょう」となります。
ただWebページの構成は沢山のパーツを組み合わせて構築されたものになるため、「同系統の目的のパーツを1つに束ねるcomponent」という役割のcomponentも作る必要が出てきます。当然束ねる人という階層が出来るため、階層構造にしましょうという設計思想に繋がります。
Step 2: Build A Static Version in React
パチパチ切り替わらない画面情報の構築方法の話。階層下から設計する方法と上から設計する方法があるよ。下から構築した方がテストしやすいな。って感じすかね。
ポイントは出来るだけstateは使わないようにしようぜ！って点だという認識。C言語なら「無駄なglobal変数は使わない」、クラスのある言語なら「無駄にpublic変数にしない」といった考えと同じだと思います。「stateはglobal変数だから、極力propertyで値を渡しましょう」
Step 3: Identify The Minimal (but complete) Representation Of UI State
出来るだけ簡潔にstateを扱おう！って話。DRY: Don’t Repeat Yourself.繰り返しを避けよう！ってのがキーワード。
stateとpropを上手に使って、stateを少なく表現しよう！propで頑張れるならpropでやろう！って話ですね。
Step 4: Identify Where Your State Should Live
状態を変更するcomponentを明確にしよう！という話。状態管理がまとまっていないとみるの辛いですよね。
「新しい人にわかりやすい構造にしよう！」ってコメントが印象的
Step 5: Add Inverse Data Flow
値が変わった時の紐づけの話。ちょっとコードを書く量は増やしてますよ。
設定値は一旦stateに渡して、onXXXを介して処理していきますよって話。
Angularなんかはこういったデータの紐づけを完全に隠ぺいしていて、「こうJavaScriptとHTMLに書いてあればこうなる！」ってルールを覚えてもらう形になっていたけど、Reactはあえてその辺りを書いてもらうことで分かりやすさを重視したようです。
誰でも触れるようにするってソフトウェア開発である意味一番大事なことかもしれませんね。
その他
2019/04/08 追記
スルーしてましたが、右枠のADVANCED GUIDESを覗いてみると、AccessibilityやOptimizing Performanceといった設計・開発の助けになりそうなページもありますね。
AccessibilityなんかはWeb Content Accessibility Guidelines(使いやすいウェブコンテンツのガイドラインだと思う)をベースに、各要点をReactでどう対応するか？といったことが書いています。いいね！
最後に
フレームワークについて、便利な道具としての観点でしか見ていませんでしたが、ある視点での設計思想を学ぶ優秀な教材としてみてみると、また違った気付きがあるかもしれませんね。
まだ勉強段階ですが、実際に触るとまた見えてくるものがあると思いますので、今から楽しみです。