ハンバーガー屋で隣の女子高生が語るReact 第1話

ハンバーガー屋さんで隣の女子高生がReactを語っていました。

・ 第二話 隣の女子高生が語るデータの持ち方
・ 第三話 React Hooks
・ 予定 React Hooks チューニング
・ 予定 React 自動テスト

このシリーズを加筆・修正して、働きアップグレードガイド2020 〜楽しく働くために取り組めること〜という合同誌に収録することが決まりました。この合同誌、フルリモート・フルフレックスの会社でどうやって楽しく働くのか？2020年代の働き方についててんこ盛りの本なので、興味ある人はぜひチェックリストに追加してみてください。

Reactとは

R子「最近さー、うちReact書いてんねん」

　Reactは、Facebook社が開発しているウェブブラウザ向けのユーザーインターフェースライブラリ。同種のモノにVueやAngularなどがあるが、現時点で世界シェアトップはReactである。

J美「まじでー？jQueryじゃだめなん？」

　jQueryは、ウェブブラウザ戦争が激しかった頃に、ブラウザ間の互換性を取り持つことでシェアを拡大したライブラリ。昔としてはとても便利だった。プラグイン含め様々な情報やソースコード資源がある。

R子「ペライチなウェブサイト制作するならええけどー。真面目に開発しよー思たら、jQueryは治安悪すぎてしんどいよー」

　ここでいうペライチとは固有のサービスのことではなく、ペラ一枚、つまり単一ページか、それの組み合わせ程度で成り立つ昔ながらのウェブ制作のこと。ウェブというとこちらを想像する人が多い。単価は安くても案件としては多い（はず）
　治安とは、ソースコードがとっちらかったり、ルール無用であらゆる書き方やプラグインやライブラリやコピペなどが横行している状態。「ソースコードの治安が悪い」などと表現される。

J美「Reactって仮想DOMだっけ？あれってなんなん？魂震えるん？」

　仮想DOMは、ウェブブラウザの画面描画では、DOMの更新が動作を重くする原因であるため、Reactを使うプログラマはDOMを直接操作せずに、Reactのコンポーネント及びDOMのサブセットのようなものを操作する。Reactはこれらの操作を元に、最終的にDOMの書き換えを行う。賢いヤツ
　DOMは、Document Object Modelの略で、HTMLをJavaScriptから扱う時にアクセスするデータモデルだと思えばOK。

R子「うちらがやりたいのはDOM操作やのーて、ウェブブラウザを使ったアプリ開発やからなー。ReactみたいなSPAライブラリが流行ったのと、ブラウザ戦争が終結してくれたおかげで、めっちゃ楽になったんよー」

　DOM操作が主目的ならjQueryでもなんでもいいと思う。
　SPAはSingle Page Actionの略で、ページ遷移せずに画面が切り替わる技術のこと。これのおかげで、ウェブブラウザ上で、ネイティブアプリに近い操作感が得られるようになった。
　ブラウザ戦争があった頃は、各社が好き勝手やってたせいで、5年経っても仕様が固まらないなどといった停滞があった。

J美「DX改革だね」
R子「そうそう。今はもうウェブ開発ってVSCodeと優秀なライブラリのおかで、DXめっちゃアガってんねんよー」

　DXはここでは Developers eXperience 開発者体験の方。実際にここ数年でウェブフロントエンドを中心に、開発の快適さが急激に上昇している。特にMicrosoft社のOSSなIDEであるVSCodeは並のテキストエディタよりも軽量なのに、IDEとしての機能も十分で、ウェブ開発に最適である。最近はJavaなんかもサポートを強化している。

J美「最近やったらVueとかもいいんじゃないの？」
R子「ええーと思うよー。世界的なシェアは圧倒的にReactやけど、伸びてるのは間違いないでー。ウチはJSXがあるからReactの方が好きやけどねー」

　VueもReactみたいなやつ（語弊がある）Reactよりは高機能かつ、公式エコシステムが豊富な分、Reactよりはとっつきやすいと言われている。
　JSXは、JavaScript/TypeScriptのソースコードの中にHTMLタグのようなものを記述できる拡張。

J美「JSXってどうなん？あたしはHTMLテンプレート使う方がなじみやすいと思うんだけど」
R子「JSXは考え方がHTMLテンプレートとは逆やねんよー。HTMLやDOMってツリー状のデータ構造やん？そういうデータを扱うのは、プログラミング言語が元から普通にやってることやねんから、テンプレートっていう考え方でいちいち分けるよりは、プログラミングの一工程に混ぜ込む方がシンプルやねー」

　HTMLテンプレートの考え方はとても古くからあり、JSPやRailsなど多くのフレームワークで採用されている、おなじみのもの。HTMLの中に特殊な記法で変数名や、限定的なプログラムコード（DSLという）を書く。
　ツリー状のデータ構造とは、根っこ（root）から、幹が伸びて枝が広がって葉っぱがあるような、データ構造のこと。プログラミングでは標準的に使われる。

J美「HTMLテンプレートって分かりやすいと思うけど、JSXの利点ってプログラミングの工程に混ぜ込めることなの？」
R子「プログラミングの工程に混ぜ込むだけやと、あんまり利点わからんかもやねー。真価を発揮するのはリファクタリングとかやでー。HTMLテンプレートでリファクタリングするのはどうしても限界あるしなー」

　リファクタリングとは、「外からみた振る舞いを変更せずに、中身を書き換える」こと。外から見た振る舞いが変わってしまったら、それは決してリファクタリングではないことに要注意。

J美「リファクタリングってなんで必要なの？」
R子「プログラムを最初から完璧な状態で書くのが無理やからやでー。いつでも、慣れた同じものを作れるとは限らんし、そもそもビジネスの変化早い時代やねんから、一ヶ月で異なる要件出てくることもザラやし、実際のモノを作ったら、クライアントがコレジャナイって言い出すこともあるしねー」

J美「確かにプロトタイピングって重要だよね」

　プロトタイピングは人によって違うものを指す場合も多いが、中身は完成してなくても最小限の動きを実装し、なるべく実際のアプリケーションに近いものを作ることで、プロダクトについて判断できる人や企画者に動きを確認してもらう。

R子「リーンでいうMVP（仮説を検証する最小限のプロダクト）を短いサイクルでリリースして、仮説を立てて市場を伺いつつ検証するっていう考え方も当たり前になってきてるしなー。短いサイクルで効率的に開発しよう思たら、がっちり最初からキチキチに開発するよりはリファクタリングできるような開発を最初からしておいた方が後々楽なんやわー」

　リーン開発手法、大本はトヨタの生産手法に源流を置く、世界的な、ソフトウェア開発手法のこと。
　原則1：ムダをなくす
　原則2：品質を作り込む
　原則3：知識を作り出す
　原則4：決定を遅らせる
　原則5：速く提供する
　原則6：人を尊重する
　原則7：全体を最適化する

J美「HTMlテンプレートだとリファクタリングしづらい？」
R子「せやねー。HTMLテンプレートって、もともとの目的が非プログラマに触らせるためのもんやから、リファクタリングはほとんど考えられてないからなー。使い捨てならええけど、リファクタリングやるんなら、ユニットテストとかもある、ホンモノのプログラミング言語の方が絶対楽なんよー」

　ユニットテストは、単一機能を持った関数・メソッドなどを自動テストするための軽量な仕組み。JavaのJUnitやJavaScriptのJestなどがある。
　ホンモノのプログラミング言語じゃない環境で何か工夫しようとすると大体破綻する。

シリーズ

・ 第二話 隣の女子高生が語るデータの持ち方
・ 第三話 React Hooks
・ 予定 React Hooks チューニング
・ 予定 React 自動テスト

などを予定しています。

また、このシリーズを加筆・修正して、働きアップグレードガイド2020 〜楽しく働くために取り組めること〜という合同誌に収録することが決まりました。この合同誌、フルリモート・フルフレックスの会社でどうやって楽しく働くのか？2020年代の働き方についててんこ盛りの本なので、興味ある人はぜひチェックリストに追加してみてください。