React.jsに関連する 用語のまとめ
本日の記事ではReact.jsに関連するいくつかの一般的な用語をできるだけざっくりと簡単に定義していきます。
全ての関連用語をまとめるとあまりにも多いので記事を分割させて頂きます。
気になった箇所を選び飛んで読んで下さい。
React.js 関連用語
仮想DOM
『仮想』という表現がメモリに保持されReactDOMのライブラリによって通常のDOMと同期されるプログラミング概念となっております。
『仮想DOM』にも通常のDOMオブジェクトと同じプロパティがありますが、画面に表示されているものを直接変更する実際の機能が存在しません。
通常でのDOM描画には時間がかかります。
それは変更箇所の更新が１つだったとしても通常DOMではDOM全体を再構築する為です。
つまり別の機能の更新をしていなくても全体を再構築してしまいます。
その為、描画するまでの時間に負荷がかかっています
Reactでは仮想DOMを再構築し、変更前の仮想DOMと変更後の仮想DOM同士で比較(差分)をし変更箇所のみを更新した後にリアル(通常)DOMに反映をします。
『仮想DOM』を利用する方がはるかに高速となっております。
関連記事
Reactノード
Reactノードは基本的にDOMノードと同等となります。
Reactアプリを高速化する理由の1つは、仮想DOMを構築し、変更前と変更後の仮想DOMと比較(差分)して、前回のレンダリング以降に変更されたノードのみを置き換えることになります。
ですが概念的にはReactノードとDOMノードは同等だと思って下さい。
つまり、Reactは仮想DOMを定義する為にReactノードを使用している事になります。
要素
Reactでの要素はブラウザのDOM要素とは異なります。
React DOMでReact要素に一致するようにDOMを更新し、要素を作成した後はReact要素である子や属性などの変更はできません。
変更できないのはそれはReact要素は不変だからです。
React要素を変更する唯一の方法としては、毎回新しい要素をレンダリングさせる事です。
JSX
『JSX』は静的に型付けされたオブジェクト指向プログラミング言語であり、最新のWebブラウザで実行するように設計されております。
『JSX』はReactが世の中に公開される前からすでに存在しておりました。
Reactでの前は『Meta旧Facebook』内のみで使用されていました。
HTMLのようなJavaScriptを作成するのに役立つJavaScriptの拡張機能となっております。
JSXはReact要素を生成し、主にReactで使用され『UI』がどのように見えるかを記述します。
関連記事
トランスパイル
トランスパイルは、ソースコードをある言語から別の言語に変換するプロセスとなります。
トランスパイリングは、『トランスパイラー』または『ソースツーソースコンパイラと』呼ばれるソフトウェアプログラムによって実行されます。
JavaScriptでの世界で最も有名なトランスパイラーは『Babel』となります。
JSXをReact.jsおよび『es6』から『es5』のコードにトランスパイルすること
つまりBabelはJSXをJavaScriptにトランスパイルするために使用されます。
Babel以外でのJSXをJavaScriptにトランスパイルするためのツールは現在は提供されておりません。
関連記事
module bundler
モジュールバンドラーは、 JavaScriptモジュールをブラウザで実行できる単一のJavaScriptファイルにバンドルするために使用されるフロントエンド開発者ツールです。
コードの依存関係を管理していくのに役立ち、依存順にモジュールをロードします。
Javascriptコードを複数のファイルにバンドルすることは、バンドル分割と呼ばれており
最初のページの読み込み時にごく少量のコードをダウンロードできますが、Webアプリの他のセクションは後で必要に応じて読み込まれていきます。
それだけではなく
Reactでのアプリケーションを作成する場合、バンドルサイズが重要です。
特に多くの外部パッケージを使用する場合、それらは急速に成長する可能性があります。
ほとんどの場合ではアプリケーションはすべてのパッケージを事前に必要としません、ですがそれはアプリケーションで使用される場合に限ります。
それを実現するために、Reactが提供するバンドル分割もございます。
Reactでのコード分割は、『動的インポート』およびReactが提供する『React.lazy』と呼ばれるものによって実現が可能となります。
コンポーネント
コンポーネントはReactアプリケーションの構成要素です。
JavaScriptのクラスまたは関数であり、UI(ユーザーインターフェイス)のセクションの表示方法を説明するReact要素を返します。
コンポーネントは、独立した再利用可能なコードとなっておりJavaScriptの関数と同じ役割を果たしますが単独での動作をしレンダリングしてからHTMLを返していきます。
ですのでアプリケーションの開発時間が大幅に短縮されます。
先程もおっしゃいましたがReactでは、クラスコンポーネントと関数コンポーネントの2種類のコンポーネントが存在します。
関連記事
制御されたコンポーネントと非制御コンポーネント
Reactでは、フォームの入力を扱う際に2つの異なる方法が存在します。
フォーム入力データがDOM自体によって処理されるコンポーネントが『制御されていない』と呼ばれており、そのコンポーネントがReact状態によって制御されていない事を指します。
一方でReactで制御されるコンポーネントは、フォーム入力データがコンポーネントの状態によって処理されるコンポーネントとなります。
DOMによって状態が制御されているか
コンポーネントの状態によって制御されているかになります。
制御されていないコンポーネントでは、従来のHTMLフォームに非常に似ております。
フォーム要素の値は、通常のDOMによって制御されDOMに格納されフォーム要素のインスタンスを参照してからDOMから値を取得する必要がある為です。
制御されたコンポーネントでは、常に入力フォームの値をチェックが可能な即時性のある検証チェックとなっております。
関連記事
ライフサイクル
各コンポーネントでは、『Mounting(マウント)』『Updating(更新)』『Unmounting(アンマウント)』の3つのフェーズをもちます。
それは私たちの生き方と同じライフサイクルと考えることもできます。
『生まれる』『成長』『死』
つまり時間の流れに似ています。
これらのようにReactコンポーネントでは、DOMに『マウント』生成され、『更新』で機能の変更がされ最後にDOMから不要になった機能が破棄(アンマンウント)されます。
これら3つのフェーズであるライフサイクルを理解することで、Reactコンポーネントを制御し、アプリケーションのパフォーマンスを向上させるための１つの概念となっております。
関連記事
Props(小道具)
小道具はプロパティを表すキーワードであり、小道具を追加する事により、コンポーネントをより柔軟にします。
コンポーネントから別のコンポーネントにデータを渡すために使用されます。
渡される際はデータが一方向の小道具の流れとなっており(親と子の間の一方向)で渡される事になります。
つまり一方向なので、逆(子から親)へは渡されません。
関連記事
下記stateリンクとまとめて記事にしております
props.children
『props.children』プロパティを使用すると、呼び出されたときに親が変更できる汎用テンプレートコンポーネントを作成し、親コンポーネントから子コンポーネントで必要なものをすべて渡すことができる機能となっております。
つまり『props.children』は、親から渡されたすべてのデータをレンダリングし、コンテンツをカスタマイズできるようにするという事になります。
関連記事
近いうちに当ブログで記事に致します。
State(状態)
Reactの『状態』は、変更可能なアプリの部分を表すオブジェクトです。
コンポーネントの動作を制御する一連の監視可能なプロパティのオブジェクトとして定義できます。
関数が実行され終了した時、通常では役目を終えた変数は消えて無くなります。
ですが状態変数ではReactによって保持されます。
動的でインタラクティブなコンポーネントを作成できるようにするものがState(状態)となります。
関連記事
React Hooks
フックはReact v16.8から新しく追加された機能です
クラスコンポーネントでは特定のReact機能を利用していくにはコンポーネントの作成が必須でした。
フックではコンポーネント間での階層を変更する事なくコンポーネントを構築する事が容易となります。
クラスを作成せず、状態やその他のReact機能を使用が可能となります。
クラスでの『小道具、状態、参照、ライフサイクル』これらの代替えとなりAPIを提供します。
フックはJavaScript関数に非常に良く似ていますが使用する際はフックルールに従って扱っていかなければいけません。
フックは全部で10個存在します。
関連記事
パフォーマンス
Reactアプリケーションを高速化したい場合、Reactのパフォーマンスの最適化は重要な要素となっております。
多くのReact開発者は長い間これらの問題に直面しているのが現状です。
例えばReactコンポーネントをメモ化し、不要な再レンダリングを防いだり、コード分割、複数の画像を使用しいる場合はその全ての画像を一度にレンダリングさせないように遅延読み込みさせたりなどです。
遅延読み込みコンポーネントに『React.Suspense』と『React.Lazy』を活用します。
Reactでの自慢できる点は非常に高速なDOM描画です。
しかしそれは無関係なコンポーネントにツリーをレンダリングさせる方法な為、高速となっておりますがそれが逆に仇となる場合があります
その原因によりUIに問題が生じます。
Webアプリのパフォーマンス問題を解決する方法は様々な方法が存在します。
ユーザーを満足させるための一歩先を行くことが重要となります。
プロジェクトを構築してからパフォーマンスを最適化することで、アプリケーションの速度とUX(ユーザーエクスペリエンス)を大幅に向上させ、パフォーマンスの高いアプリを構築するよう常に努力していく必要があります。
関連記事
近いうちにReactでのパフォーマンス最適化方法の記事を書く予定です。
SPA(シングルページアプリケーション)
もちろんですがSPAはJavaScriptで構築されています、もしくはJavaScriptにコンパイルされブラウザで動作されています。
SPAは従来のページアプリとは異なります。
もっとも大きな違いとしては、単一ページのアプリケーションをナビゲートする事です。
ユーザーはサーバーから新しいページをロードせずにページ移動する事が可能となります。
注意が必要なのは、SPAの場合はJavaScriptを沢山作成していきます。
アプリでは長時間の間、実行される可能性があります
そうなればメモリリーク(メモリ領域の解放)に注意を払っていく必要性があります。
メモリの問題が発生した場合は、不快になるほど遅いエクスペリエンスが発生致します。
関連記事
SSR(Server Side Rendering)
これはサーバー側でレンダリングをします。
コンテンツはリクエストごとにサーバー上で生成されます。
つまりすべてのHTML・CSS・JSファイルはバックエンドサーバーに配置されます。
Reactコードを記述したファイル、それらをサーバーにデプロイした後に
ユーザーがデータを要求すると、サーバー側はReactコードを実行し始めHTMLとCSSを構築します。
構築され生成されたHTMLとCSSは、その後サーバーによって画面に表示されていきます。
サーバー側ではHTMLページをレンダリングする前からすでに準備可能状態である事です。
事前にHTMLを作成しておく事になります。
SSRの欠点はサーバーでのレンダリングにコストがかかり、リソースを大量に消費する可能性がある点です。
関連記事
SSG(Static Site Generator)
SSGは日本語に訳すと静的サイトジェネレーターとなります。
静的に生成されているWebサイトは、我々開発者からしてみたら目新しいものではありません。
それはHTMLとCSSのみのWebサイトは静的だからです。
JSの追加により、インタラクティブで動的なWebサイトを作成できるようになってきました。
SSGを使用すると、すべてのページがビルド時に静的ページとして生成されていきます。
つまり静的HTMLは、開発者によって提供されたテンプレートとコンテンツからビルド時にレンダリングされ、クライアントからの要求に応じて返されます。
ビルド時に生成すると、非常に高速なロード時間が生成されます。
しかし、ビルド時にレンダリングするといくつかの問題が発生します。
例えばサイトのビルド度にサイトのURLごとに個別のHTMLファイルを生成する必要があります
そうなった場合、無数の多くのページのサイトがある場合はビルド速度が非常に遅くなります。
プロセスはビルド時に実行されるため、変更を加える場合は常に、サイトでビルドスクリプトを再実行し、再デプロイしていく必要があります。
関連記事
本日は以上となります。
最後まで読んで頂きありがとうございます。
これからReact.jsを学んでいくのに当ブログの記事が役に立つ事を願っております。
