Reactの登場から10年以上経っていますが、まだまだトップシェアを誇る強力なツールです。
気軽に触れられるように、今回は部分的に導入する方法をご紹介します。
WEB業界では、もはや必須級の知識です。
恐れず、ステップバイステップの一歩目を踏み出してみましょう。
React導入の前提条件
Reactとは何か？
まず定義として、ReactはFacebookによって開発されたJavaScriptライブラリです。
UI部分を効率的に開発でき、Nodeツールとの相性も良く柔軟性があります。
同系統のツールとしてVueなどが挙げられるでしょうか。
どちらかというと、Reactの方が大規模に向いていると言われています。
既存プロジェクトにReactを導入するメリット
Reactは全体に適用するパターンがほとんどだと思います。
私が導入した時は、他の方とレベル差があって、またAPIも極一部でしか利用しなかった時でした。
もちろん、全てReactで統一した方が開発・保守面双方でベストだと思います。
-
少しずつ既存のプロジェクトを更新していく場合
-
そもそも限定的にしか使う必要がなく、人員も確保できている場合
上記のようなパターンであれば、一部にだけ導入するという選択肢もありではないでしょうか。
導入前の準備チェックリスト
Reactを部分導入するというケースは、限定的な状況と考えられます。
まずは、以下の点を確認しましょう。
- 既存プロジェクトの場合は、バージョンなどの依存関係で衝突がないか
- React以外で、全員が共通して使えるツールはないか
Reactの基本
JSXの基礎
Reactでは、JSを拡張した「JSX」という特別な構文を使います。
HTMLとJSを組み合わせたような構文で、再利用性の高いUIを作成できます。
コンポーネントとは
コンポーネントは、Reactアプリケーションの基本的な要素です。
独立した機能として動作するため、基本的には自立した機能を持っています。
構造などは全然違うのですが、クラスとメソッドの関係でいうとメソッドの立場に近いと思います。
StateとPropsの理解
Stateはコンポーネントの状態を管理し、Propsは親コンポーネントから子コンポーネントへデータを渡すために使用されます。
このあたりがメソッドの関係に近いと感じた点です。
Reactが動的ツールとして動作するための基本概念になります。
グローバルの汚染などを起こさないため、専用の機能を経由してコンポーネント間の連携を行っていきます。
既存ページへのReact導入
ステップバイステップでの導入プロセス
既存のページにReactを導入するには、一般的な導入方法から学ぶのが大切です。
基本を知らず例外を扱うのは危険なので、まずは「普通」の使い方を押さえておきましょう。
以下は、ある特定のページ全体にReactを適用した例です。
// bodyのHTMLを置き換える(元の記述があれば上書き)
document.body.innerHTML = '';
// 上記で追加した「id: app」の要素をReactで置き換える
const root = createRoot(document.getElementById('app'));
root.render(Hello, world
); // renderの中身がReactの記述になる
既存のJavaScriptとの統合
追加方法さえ分かってしまえば、組み合わせはほとんど自由に設定できます。
す。
段階的な拡張にも使えるので、改善(リファクタリング)をしながらの運用も視野に入れて活用して採用していきましょう。
以下は、ページの一部にReactを適用する例です。
function HtmlParts() {
return コンテンツ
;
}
const domNode = document.getElementById('part-element'); // HTMLでidで宣言。body直下でなくても可。
const root = createRoot(domNode); // 上のid値を持つ要素をrootとするReact要素を作成
root.render(Reactはなぜ効率がいいのか
他のライブラリ系もそうですが、大きい部分としては「無駄な描画はしない」点にあります。
ゲーム系の開発経験などあれば思いつくと思いますが、どのようにリフレッシュをするかはパフォーマンスに大きく影響します。
Reactも同様で、無駄な描画を抑えることによって高効率な動作を実現しています。
書き方にも依存するので、やはり基礎や基本をドキュメントで学ぶことが第一歩です。
実践的な導入例
サンプルプロジェクトにReactを導入する
実際の導入例を通じて、具体的な手順を確認していきましょう。
例で示したものと同様ではありますが、複数ポイントで設定可能です。
それぞれが、パーツに分解できている点に注目してください。
// html部分。宣言など省略
独立したhtmlコンテンツ
// script部分
function HtmlParts() {
return 一部コンテンツ
;
}
const domNode = document.getElementById('part-element-1'); // HTMLでidで宣言。body直下でなくても可。
const root = createRoot(domNode); // 上のid値を持つ要素をrootとするReact要素を作成
root.render(まとめ: Reactを通じてモダンなライブラリに触れてみよう！
今回は、Reactの部分導入というやや変則的な例を紹介しました。
基礎的な部分が分かっていると、応用的な使い方にもアタリがつけやすくなります。
レガシーなライブラリなどを使っているほど、Reactのようなモダンなツールは大きな力になると思います。
まだ触れたことがないならば、部分的にでも導入して威力を体感してはいかがでしょうか。
