こんにちは夏隣です。
当記事は個人用メモ的な内容です。
フロントエンド🔰なので何か触ってみたいなぁ～と思っていたところ、「ReactがJQueryより使いやすい！最強！神！』との確かな（←？）情報を入手したので早速触ってみました。JS系は簡単にデバッグできる環境をいい加減作ってほしい・・・。
目次
・Reactとは
・Reactを採用している企業
・Reactの特徴
・なぜReactなのか
・個人的メモ
Reactとは
一言でいうならユーザーインターフェースを作るためのJavaScript用ライブラリです。
フロントエンドと言えばJavaScript(以下js)ですが、jsをそのまま使うという方は極少数だと思います。ネットで公開されているいづれかのjs用のライブラリを使い、実装していくことがほとんどだと思います。Reactはそのjs用のライブラリのひとつというわけです。
フロントエンドとバックエンドが分からない方はこちら参照
【徹底比較】フロントエンド vs バックエンド！
ライブラリが分からない方はこちら参照
おすすめJavascriptライブラリ厳選10選！
Reactを採用している企業
Facebookが開発元でFacebook、Yahoo、ATOMなど、有名な企業で採用されています。
Instagramなどでも使われているみたいですね。これが人気の理由の一つです。
Reactの特徴
Reactの特徴は何といっても表示速度が速いことです。
それを可能にしているのが2つの理由みたいです。
1つ目は、ReactがSPAを使用しており、簡易に使えることです。
【従来】
ブラウザ-Webサーバ間の通信では、ブラウザからWebサーバになにかをリクエストした際、Webサーバはページ全体(htmlファイル・jsファイル・cssファイル等)をまとめてレスポンスします。これはユーザーが何かする度（つまりリクエストする度に）発生するため、読み込みに時間がかかっていました。
【Reactの場合】
SPAは最初の通信で1枚のHTMLファイルをWebサーバに渡し、Ajax通信というページ遷移なしに必要なデータのみ動的に更新できる技術を使い、表示速度が改善されます。
GoogleMapで近づくと詳細な地名が表示されますが、遠ざかると表示されないようなサービスにはSPAは必要ですね！
↓SPAは以下の図がとても参考になります。
SPA、SSR、プリレンダリングの違いをまとめてみた
js用のライブラリで一番知名度のあったJQueryは、SPAに対応することも可能でしょうが、コードが複雑化するため業務で選択が難しいと思われます。保守的な業務を除き、今から始めるならReactかVue.jsなどでしょうか。
2つ目は、DOMの扱い方法です。
DOM(Document Object Model)は、プログラム(JavaScript)からHTMLを自由に操作するための仕組みです。ページが描画(レンダリング)される際に必ず作成される物で
DOMのおかげでリッチなWebサイトの作成が可能になります。
例えばだけど、htmlファイルでid=sampleと指定されたテキストがあって、ボタンが押されるとjsでそのidを参考にテキストを置き替えるという処理をjsで組むことができる。
htmlファイル
<script type="text/javascript" src="./javascript/jsファイル.js">
</script>
～中略～
<body>
<div id="sample">ここが変更されます</div>
<form>
<input type="button" value="変更ボタン" onClick="change()">
</form>
</body>jsファイル
function change(){
var val = document.getElementById("sample").innerHTML = "変更した";
}このイメージは全然リッチじゃないけど,jsファイルに記述されてるgetElementByIdとかがhtmlを操作するための窓口になる存在だとおもってください。これがDOM操作の一例ですね。
【従来】
受け取った情報を元に毎回１からDOMを作成するため表示が遅い
【Reactの場合】
古い仮想DOMと新しい仮想DOMを比較結果から、変更箇所のみDOMに反映するため表示が速い。
なぜReactなのか
UX（ユーザ体験）に非常に重要だからです。
Googleの調査でもユーザーの50%が3秒以内に表示されることに期待し,2秒異なるだけでコンバージョン率が40%も変わると説明されています。
SPAやDOM等で表示速度を改善しやすい実装ができるのでReactが選ばれてるという印象です。また、Reactのライブラリが豊富で、コード分割など今までのJsのライブラリでは難しい実装もライブラリのみで解決できるそうです。楽しみだね！
個人メモ
・JSXとかいうjsファイル上でHTMLと同じ記述ができてしかも簡単に書けるものが用意されているらしい
→えっなにそれずるじゃん・・・
次回はここメモとしてまとめていきたい。
・こういう新技術系のもののwebサイトってなんで最後に講座系の広告が多いんだろうね・・・( ˘•ω•˘ )
参考
こちらの動画が参考になりました。
Comments