目指せ！JavaScriptカスタマイズ中級者（6） 〜React導入編〜

Index

• はじめに〜昨今のライブラリ事情〜
• Reactとは、Reactの特徴
• React を導入する際の検討ポイント
• カスタマイズビューをReactで構築する
• おわりに

はじめに〜昨今のライブラリ事情〜

フロントエンド界隈のトレンドは流れが速く、キャッチアップしづらい側面がありましたが、最近は比較的安定しています。
JavaScript のフレームワークやライブラリにも栄枯盛衰がありますが、近頃はReactやVue.jsなどが多くの開発者に利用されています。
ライトな開発であればそのようなライブラリを導入せずともJavaScriptカスタマイズする上では問題はありませんが、
ある程度規模が大きくなると、ライブラリに頼ったほうが効率的に開発することができます。

こちらの記事ではVue.jsとkintoneの組み合わせの良さを紹介いたしました。
今回はReactを使ってkintone JavaScriptカスタマイズに導入した場合、どのようになるかをみていただき、プロジェクトにフィットするものを選ぶための材料にしてもらえればと思います。

シリーズの記事一覧はこちら。

Reactとは、Reactの特徴

React は、FacebookとReactのコミュニティによって開発されているユーザインタフェース構築のためのJavaScriptライブラリです。

React の公式サイトに書かれている、3つの特徴を解説します。

宣言的な View

 「宣言的」というのは条件やどのように動作するかなどが明確に示されている状態です。
例えばjQueryは「手続き的」 で、DOM操作であれば、要素を取得しその要素に対し命令を積み上げていきます。
コードのいろんな箇所から要素に対して命令をすることができるので、複雑に絡み合うとバグの温床になります。

たとえば、「クリックしたとき、その要素の色を赤と青に交互に変更する」というものを書いてみます。

• jQuery

• React

これだけですと、大した差はないかもしれませんが、jQueryの場合は、どこからでもイベントハンドラーを追加することができてしまいます。
また、「今の要素の色は何色か？」というような状態もDOMで管理することになる（要素から現在の色を読み取る）ので、コード上でやることが増えていった場合、
どんどん複雑になり、正常に動作させつづけることが難しくなります。
Reactの場合はDOMと状態は分けて管理されるため、状態が自明です。

コンポーネントベース

Reactは、自分自身の状態を管理するカプセル化されたコンポーネントを作成し組み合わせることで、複雑なユーザインターフェイスを構築することができます。

コンポーネントのロジックは、Template ではなく JavaScript そのもので書くことができるので、様々なデータをアプリケーション内で簡単に取り回すことができ、
かつ DOM に状態を持たせないようにすることができます。

上記サンプルコードも、「赤なのか青なのか」という情報は、color変数が保持しており、DOMの状態を意識する必要がありません。
また、その状態管理やイベントハンドリングも一つにまとめたコンポーネントとすることができます。

一度学習すれば、どこでも使える

React と組み合わせて使用する技術に制限はありません。
React を使って新しい機能を追加する際に、既存のソースコードを書き換える必要はありません。

React は サーバ上でもレンダー（サーバーサイドレンダリング）できますし、React Native を使うことでモバイルアプリケーションの中でも動きますので、一度覚えると流用が可能です。

React を導入する際の検討ポイント

Reactには次のようなメリットとデメリットがありますので、導入の際は、これらを加味して検討すると良いでしょう。

メリット

•  jQueryやプレーンなJavaScriptと比較すると、宣言的に書くことができるのが一番の強みです。
  • 定義されたコンポーネントは、コンポーネントが持つ状態（上述のサンプルコードでいう、useStateで宣言されたcolor変数）が変化するとコードの上から下まで都度、実行されます。
    これにより、何が起きているかが明確になります。例えばjQueryやプレーンなJavaScriptだと、
    DOMに対してどこからどの命令が起きるかはわからず、複雑性が増していき、コントロールが大変になっていきます。
  • 一覧のカスタマイズビューの実装や、独自のボタン・要素を数多く扱いたいときなどに有効です。
• ブラックボックス的な部分がすくなく、自明です。
  • Vue.jsやその他ライブラリと比較したとき、Reactは特別なルールが少なく（Vue.jsでいうv-modelディレクティブなど）、何が行われているかがわかりやすいです。
    サンプルコードのとおり、イベントハンドリングや値がどうなるか、というのはプレーンなJavaScriptを書く感覚で、自分ですべて指定できます。
• ReactはJavaScriptライブラリのなかではかなりの人気があり、学習もしやすくいろんなコンポーネントも公開されています。
  上述の通りいろんなところに流用可能です。
  • 作り方にもよりますが、kintone JavaScriptカスタマイズ上で定義していたコンポーネントを、そのままモバイルアプリの作成にも流用できます。
• 部分的に導入することも可能です。
  • 一部のJavaScriptカスタマイズはプレーンなJavaScriptだが、複雑な箇所からReactを適用するといったことも可能です。
• UIとロジックが分離できるので、大規模な開発にも向いています。
  • 特に、いろんなアプリからREST APIでデータを取得して加工する、などのロジック部分をUIから別けれるので、ロジックを書く箇所がすっきりします。

デメリット

• 宣言的にかけるがゆえに、記述量としては増える傾向にあります。
  • どちらかというと、ずっと面倒を見ていくkintone環境などに向いていると思います。
• パフォーマンスを向上させるためにはメモ化をする必要があるなど、場合によっては多少難易度があがります。
• 数行で済むようなちょっとしたJavaScriptカスタマイズであればプレーンなJavaScriptで事足ります。
  • 条件によってテキストの色をかえる、などのJavaScriptカスタマイズなどであればわざわざ導入する必要はありません。

カスタマイズビューをReactで構築する

今回は、顧客リストアプリを利用し、カスタマイズビューを作成するサンプルコードを作ります。

会社名が一覧として表示され、チェックできます。

ボタンを押すと、現在選択されている会社名を表示できます。

事前準備

1. 顧客リストアプリを追加する。

2. カスタマイズビューを設定し、HTMLは下記を指定する。

<div id="target"></div>

3. Githubからクローンしてコードを用意する。

https://github.com/cybozudevnet/sample-kintone-webpack-for-intermediate

詳しくは第1回の記事からためしてみてください。

  今回、Reactを試せるような設定になっています。

サンプルコード

上記を実現するためのReactを使ったサンプルコードは下記のようになります。

/src/apps/react-sample/index.tsx

コードの概要説明

大まかに1.コンポーネントの定義と、2.コンポーネントの表示に分けて説明します。

今回は、前回第六章で説明したTypeScriptも利用したコードになります。

1. コンポーネントの定義

今回は、複数のチェックボックスを一つのコンポーネントとして定義しました。

ReactではJSXを利用して、要素の定義ができます。36〜47行目のように、HTMLを書くような感覚でかけます。

ボタンを押したときのハンドラや、チェックボックスをおしたときのハンドラは、それぞれ10〜17行目、20〜34行目のように宣言します。

また、7行目にチェックボックスでチェックしたIDを保管するようのState（状態）を定義しています。useStateを使うことで状態を保持することができます。

この内、selectedIdsは今保持しているIDがはいっており、setSelectedIdsでIDのセットができます。

このように、要素の定義と、そのハンドラの定義、状態をセットで書くことができ、一つのコンポーネントとして宣言できます。jQueryなどでは状態をclassなどで表現したりしますが、
ReactではUIと切り分けて状態を保持できるのも大きな利点です。

2. コンポーネントの表示

1で定義したコンポーネントは、57行目にあるようにReactDOM.render()で表示することが可能です。

今回は一覧表示イベントで表示したいため、一覧表示イベントハンドラ内でそれを定義しています。

コンポーネントにはeventオブジェクトに入っているレコードの一覧を渡しています。

今回のように、汎用的なコンポーネントをいくつか定義しておき、kintoneのイベントハンドラはそれを組み立てるだけの最低限で書くことも可能です。

おわりに

JavaScriptカスタマイズは、今回のようにReactを活用したり、Vueなどの他フレームワークや、プレーンなJavaScriptも利用できるなど、様々なカスタマイズ方法があります。

自分のプロジェクトにあったカスタマイズ方法は何かを見定めて技術選定をすることで、JavaScriptカスタマイズの運用がスムーズになります。
特にある程度カスタマイズし続ける可能性が見込まれそうな場合、ぜひ今回のようにReactなどの大きな規模にも耐えられるフレームワーク・ライブラリを利用してみるのもいいかと思います。

シリーズの記事一覧はこちら。

このTipsは、2021年9月版 kintone で確認したものになります。