フリーランスエンジニア/デザイナーの為のお役立ちコンテンツとテック情報をお届けする【エンデック】

フリーランスエンジニア/デザイナーの為のお役立ちコンテンツとテック情報をお届けする【エンデック】

Reactでコンポーネントを実装してみよう!

Reactでできることはきわめて簡潔です。実はAPIも数えるほどしかないのですが、jQueryのメソッドの大部分を駆逐するだけの威力を持っています。
Reactの機能はページ状態を保持しているプレーンなJavaScriptのオブジェクトにテンプレート的な関数を作用させることで、DOMの設計図にあたる仮想DOMを作り出すというもの。それを利用することでリアルなDOMを構築することにあります。
Reactは、このように非常にシンプルな作業だけを行うライブラリですが、JSXと呼ばれる新しい記法がJavaScriptに導入されており、これが実に使い勝手がよく、機能も高いのです。
Reactを利用してコンポーネントを作っていくという方法はいくつか考えられますが、今回はその代表的なものを2つご紹介していきます。

よく利用されているReactの手段とは

Reactを利用するケースとしてよく利用されるのが、関数としてコンポーネントを定義する方法です。
引数としてpropsを受け取り、Reactエレメントを返す関数を定義するだけで機能します。
これが、非常に単純な作業でReactを利用するという意味では、もっともポピュラーな利用方法でしょう。

React.Componentを継承したクラスを作る方法

関数の定義とは別に、Reactの利用法としてよく登場するのがReact.Componentを継承したクラスとして定義していく方法です。
renderメソッドによりReactエレメントを返す形となりますが、上述の関数として定義するケースと異なり、stateオブジェクトでその状態を保てたり、コンポーネントが作成や削除された場合に呼ばれるライフサイクルメソッドの定義が可能になったりするのが特徴です。
一般的には、関数としてReactを定義したほうがシンプルですが、React.Componentを継承したクラスとして利用したほうが、様々な機能を活用することができます。

仮想DOMをつくってみる

Reactは仮想DOMという仕組みを作ることが可能になります。これはいわゆるDOMの設計図にあたるものです。
仮想DOMは、リアルなDOMとは別にJavaScriptのデータとしてDOMと同じツリー構造を保持し、そのツリーの変更前と変更後の差分を計算することによって、実際のDOMの更新が必要となるところだけ再レンダリングを行う、という機能を持っています。
これにより、人の記述を介さずに変更箇所を修正できますので、パフォーマンス的にも優れた結果を運に出すことができるようになっているのです。
このように、仮想DOMは、Reactと使う上でもっとも卓越した特徴ということができます。

【相談無料】案件の紹介や自身のキャリアについてなど相談したい方はこちら
スタートアップ、ベンチャー、大手・上場企業、VCなどIT業界の人脈豊富なコンサルタントがサポートさせていただきます

Return Top