Reactに調べたことを書く！ 2022年5月

最近ちゃんとフロントエンドに向き合おうと思っていろいろ調べてみました。

そこで分かったことを書いていきたいと思います。

まず私についてですが、５年ほど一応フロントエンドエンジニアを名乗っています。

３年ほどまえから「最新のフロントエンドやりたくねぇ・・・」との思いから最新技術については本気を出して学んでいませんでした。

フロントエンドのトレンドは数年で入れ替わり、それについていくことに辟易していたからです。

jQueryのみでなんとかなる、枯れた技術で利益を出している素晴らしい会社に就職したので特に新しい技術を身に着ける必要がなかったのです。

でもそんなわけにもいかないし、Reactというものも一般化してわりとメジャーな技術になった感があります。

重い腰を上げてJavascriptを学びなおす決意をしました。

javaScriptのアンラーンです。

※アンラーンとは今までの知識や常識を取っ払って再度知識を入れなおすことです。jQueryで知識が止まっている方は一緒に「アンラーン」していきましょう。

この記事は、ある程度JavaScriptの知識がある方に向けて書いています。

jQueryを扱える程度には知識がある前提で話を進めますので、ご承知おきください。

jQueryでいいんじゃないの？進化をやめようぜ！

そう言いたくなる気持ちは、痛いほどわかります。

実際Reactが必要ないケースもありますからね。小規模な会社サイトや単発のLP程度ではわざわざReactをつかうよりもシンプルなHTMLとjQueryで構築したほうが良いケースもあるでしょう。

ほぼ静的な小規模サイトなのに無理やりReactを導入しようとする人は、単なる技術マニアの人なので注意しましょう。

あんまりメリットはないと思います。

でも、ちょっと学んでみると、「React」や「Vue.js」の利点に気づくことができます。

そのメリットを説明するにはまず、ReactやVue.jsで用いられている「仮想DOM」という概念を理解しておく必要があります。

仮想DOMとは

通常のJavaScriptやjQueryでは直接要素を指定して、その要素に変更を加えたりします。

要素を追加したり削除することもできます。

こういったものが「直接DOMを変更する」旧来のJavaScriptとなります。

ほかになんかやり方があるの？

というのが気になるところですよね。

ReactではJavaScriptで生成した「仮想DOM」に変更を加えます。

そうすると、React側でリアルDOMに動機が行われるのです。

こうすることで取得/表示の記述を省くことができるのです。

チェックボックスが無効になっていたら、隣のインプットを入力できないようにする。

という処理を想像してみてください。

旧来のものは

• まずはチェックボックスが変わった瞬間を検知する

• インプットの状態を確認する。

• 有効になっていたらインプットを有効にする。

• 無効になっていたら隣のインプットを無効にする。

• さらに、読み込んだ瞬間も状態の判定が必要なので・・・

といったように旧来のものは手続きが非常に長くなってしまい、エラーケースも想定してコードが非常に長くなってしまいます。

「データの取得」「状態の判定」「DOMへの描画」など、やることが無限に広がってしまうのです。

では、Reactなどの仮想DOMの操作イメージを紹介しましょう。

• チェックボックスの値が変更されたら、その値によってインプットの有効と無効を切り替える

以上です！

チェックボックスが変更されたときは「props」が変更され、その際のプログラムを仕込んでおけば「取得や表示」は気にしなくていいのです。

また「state」という状態を管理するものもあるので、これにより今どんな状態かを正確に判定できるようになります。

jQueryでちょっと複雑なプログラムを作ったことがある人ならわかると思うのですが、今どんな状況かを正確に管理するのは非常に難しいのです。

それを専用に行う「state」は素晴らしいソリューションといえるのではないでしょうか。

ページ遷移がなくなり、一つのページだけで完結することも可能

「SPA（シングルページアプリケーション）」をご存じでしょうか。

ページ遷移を必要とせずに動作するアプリのことです。

Reactを使用したアプリケーションは必ずしもSPAではないのですが、作りこむとそういったことも可能、というイメージでしょうか。

ページ遷移をしないということは、画面のちらつきがなくなり、使用者のアプリの利用体験が向上することにつながります。

「そんなに重要なことか？」と開発者であれば思ってしまうかもしれません。

しかし、利用者の立場に立ってみましょう。

普段使っているTwitterなどのＳＮＳは読み込みが発生しているでしょうか。

画面を下に引っ張って、新しい投稿はないかな？とチェックするのではないでしょうか。

そこで、画面を引っ張るたびにページの再読み込みが発生し、いちいち白くなり画面が崩れる動作が発生してしまったらどうでしょうか。 

相当にイライラしてしまうこと請け合いです。

さらに最小限の画面更新にとどめることで、より無駄なく高速な画面表示を可能にします。

「画面のちらつきがない」「高速な画面表示を可能にする」

たったこれだけのことです。

しかしこれが極意といえるほどにユーザー体験に作用してサービスの使い勝手や、（売り上げを目標にしているアプリなら）売り上げなどに影響するのです。

まとめ

・ページをめっちゃ早くして、最小限の更新にとどめることでユーザー体験を爆上げする

・製作者側としても、より本質的でシンプルな記述ができるの開発が快適にできる。（バグも減る）

こういうことです。

モダンフロントエンドの使いどころ

ここまで読んでくれた方は、なぜこういった新しいフロントエンド普及しているのか理解できてきたのではないでしょうか。

そうすると、どんなところに使うべきかというのが見えてきます。

小規模サイト

jQueryでも問題なし。 ただし、速度や使い勝手を考慮する場合は一考の余地あり。

大規模かつコンテンツが頻繁に書き換わる。フォームがあり速度が重要

これがReactの使いどころではないかな、と思います。

ここは多々異論があるところかと思います。

そういった場合は教えてください・・・。