私は限界インハウスUIデザイナー。最近、エンジニアの工数が不足し、開発を効率化するため、デザインシステムを導入し浸透する活動をしている。
そこで出てくるのが「React」だ。リアクトって何すか…フロントエンドチームから説明はしてもらえるのだが、自分でも調べておかないとやばい。
HTMLとCSSがちょっと書けるレベルのデザイナーが、Reactについて調べた記録を残していくよ。
Reactって何ですか?
いつもならGoogle先生に聞く所だが、ChatGPT先輩に聞いてみた。
エンジニアと同じ様な回答が返ってきた。遠慮せずに何回でも聞けるのが先輩の良い所だ。もっと聞いてみよう。
そもそも、JavaScriptって何だ?
概要
HTMLとCSSを書いて、「アニメーションをつけるやつ」くらいの認識で止まっている。JavaScriptってそもそも何なんだ?
おおむね、合ってるっちゃ合ってるか?
用途
ちょっと待った。いっぱい用語が出てきたぞ。1つずつ見ていこう。
クライアントサイドとは?フロントエンドとの違いは?
スクリプティングとは?
クライアントサイドのスクリプティングってどういうこと?
あ〜そういうことか。いつもエンジニアと、仕様の相談をしているので理解できる。再読み込みしなくても処理ができるやつだ!(アホ)
う〜ん。なんか違うことは分かった。
ブラウザオブジェクトモデル(DOM)とは?
ブラウザオブジェクトモデル(DOM)とは何ですか
う〜ん。なんか動くやつだな。
DOMの特徴 - 文書ツリー構造
出た「ノード」ってよくエンジニアが言ってるやつだ!
おお、知ってる顔だな。君たちはノードとして扱われていたのか!!
DOMの特徴 - その他
これはさっき見たやつ。
JavaScriptライブラリ
JavaScriptライブラリって何ですか?
はあん。だからjQueryがどうした、Meta社がどうのって話になるのね。Reactもその一つですと。
ここまでのおさらい
ここまでは、わかりました。
仮想DOM
ーーReactって何ですかの続き
仮想DOMとは
なるほど、分からん。
なんか、聞いたことがあるような気はする。
なるほどね〜全然分かんないけど、デザインする側からすると…
ユーザーの操作やデータの変更に応じて、新しい状態をアプリケーションに適用させたい時にいつも使ってるやつで、新しい仮想DOMと前回の仮想DOMを比較し、必要な部分だけを再描画するってことか〜
仮想DOMとコンポーネントベースのアーキテクチャ
でも、なんでそれが、コンポーネントベースのアーキテクチャになるの?
それは知ってる。
あ、そっか。必要な部分だけを再描画するときに、各コンポーネントが自己完結していることで、局所的な状態管理が可能になるのか。
いつも状態別のコンポーネントを作っているけど、あれを、あのまんま扱ってホイホイ局所的に状態管理をしているって訳か。
だから、一枚絵としてデザインするのではなく、コンポーネントの集合としてデザインすることで、Reactと相性の良い画面設計になるってことか〜
ぼんやりと概要が分かった気がするので、本日はここまで。