目指せ!JavaScript カスタマイズ中級者(6)〜React 編〜
はじめに〜昨今のライブラリ事情〜
フロントエンド界隈のトレンドは流れが速く、キャッチアップしづらい状況でしたが、最近は比較的安定しています。
JavaScriptのフレームワークやライブラリにも栄枯盛衰がありますが、近ごろはReactやVue.jsなどが多くの開発者に利用されています。
ライトな開発ならそのようなライブラリを導入せずともJavaScriptカスタマイズする上では問題はありませんが、ある程度規模が大きくなると、ライブラリに頼ったほうが効率的に開発できます。
次の記事ではVue.jsとkintoneの組み合わせの良さを紹介しました。
kintone と Vue.js は相性がいい?Vue.js で独自のビューと検索フォームを作ってみよう
今回はReactを使ってkintone JavaScriptカスタマイズに導入した場合のイメージを確認し、プロジェクトにフィットするものを選ぶための材料にしてもらえればと思います。
目指せ中級者シリーズの記事一覧は以下を参照してください。
目指せ中級者シリーズ
React とは:React の特徴
Reactは、FacebookとReactのコミュニティによって開発されているユーザインターフェース構築のためのJavaScriptライブラリです。
ここでは、
React の公式サイト
に書かれている、3つの特徴を解説します。
宣言的な View
「宣言的」というのは、条件やどのように動作するかなどが、明確に示されている状態です。
たとえばjQueryは「手続き的」で、DOM操作なら要素を取得しその要素に対し命令を積み上げていきます。
コードのいろんな箇所から要素に対して命令をできるので、複雑に絡み合うとバグの温床になります。
たとえば、「クリックしたとき、交互にその要素の色を青または赤に変更する」というものを書いてみます。
-
jQuery
1 2 3 4 5 6 7 8
const element = $('#target'); element.on('click', () => { if (this.backgroundColor === 'red') { this.backgroundColor = 'blue'; } else { this.backgroundColor = 'red'; } });
-
React
1 2 3 4 5
const Element = () => { const [color, setColor] = useState('red'); const clickHandler = () => (color === 'red' ? setColor('blue') : setColor('red')); return <div style={{backgroundColor: color}} onClick={clickHandler} />; };
これだけですと、大した差はないかもしれませんが、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 とロジックを分離できる
UIとロジックが分離できるので、大規模な開発にも向いています。
特に、いろんなアプリからREST APIでデータを取得して加工する、などのロジック部分をUIから分けられるので、ロジックを書く箇所がすっきりします。
デメリット
記述量が増えやすい
宣言的にかけるがゆえに、記述量としては増える傾向にあります。
数行で済むようなちょっとしたJavaScriptカスタマイズなら、プレーンなJavaScriptでもこと足ります。
条件によってテキストの色をかえる、などのJavaScriptカスタマイズなどでは、あえてReactを導入する必要はありません。
どちらかというと、ずっと面倒を見ていくkintone環境などに向いていると思います。
パフォーマンスを考慮する場合は考慮が必要
パフォーマンスを向上させるためにはメモ化をする必要があるなど、場合によっては多少難易度があがります。
カスタマイズビューを React で構築する
今回は、 顧客リストアプリ を利用し、カスタマイズビューを作成するサンプルコードを作ります。
会社名が一覧として表示され、チェックできます。
ボタンを押すと、現在選択されている会社名を表示できます。
下準備
-
顧客リストアプリ を追加します。
-
カスタマイズビューを設定し、次のHTMLを指定してください。
1
<div id="target"></div>
-
Githubから以下のリポジトリをクローンしてコードを用意します。
https://github.com/cybozudevnet/sample-kintone-webpack-for-intermediate
詳しくは
第 1 回の記事からためしてみてください。
Reactを試せるような設定になっています。
サンプルコード
上記を実現するためのReactを使ったサンプルコードは次のようになります。
リポジトリのファイルは「src/apps/react-sample/index.tsx」です。
|
|
コードの概要説明
大まかに「コンポーネントの定義」と「コンポーネントの表示」に分けて説明します。 今回は、前回説明したTypeScriptで利用したコードになります。
コンポーネントの定義
今回は、複数のチェックボックスをひとつのコンポーネントとして定義しました。
|
|
Reactでは
JSX
を利用して、要素の定義ができます。
36〜53行目のように、HTMLを書くような感覚でかけます。
|
|
ボタンを押したときのハンドラーや、チェックボックスをおしたときのハンドラーは、それぞれ10〜17行目、20〜34行目のように宣言します。
|
|
|
|
また、7行目にチェックボックスでチェックしたIDを保管するようのState(状態)を定義しています。
useState
を使うことで状態を保持できます。
|
|
この内、selectedIds
は今保持しているIDがはいっており、setSelectedIds
でIDのセットができます。
このように、要素の定義と、そのハンドラーの定義、状態をセットで書くことができ、ひとつのコンポーネントとして宣言できます。
jQueryなどでは状態をclassなどで表現したりしますが、ReactではUIと切り分けて状態を保持できるのも大きな利点です。
コンポーネントの表示
|
|
先に定義したコンポーネントは、57行目にあるようにReactDOM.render()
で表示できます。
|
|
今回は一覧表示イベントで表示したいため、一覧表示イベントハンドラーの中に定義しています。
コンポーネントにはevent
オブジェクトに入っているレコードの一覧を渡しています。
今回のように、汎用的なコンポーネントをいくつか定義しておき、kintoneのイベントハンドラーはそれを組み立てるだけの最低限で書くことも可能です。
おわりに
JavaScriptカスタマイズは、今回のようにReactを活用したり、Vueなどの他フレームワークやプレーンなJavaScriptも利用できるなど、さまざまなカスタマイズ方法があります。
自分のプロジェクトにあったカスタマイズ方法は何かを見定めて技術選定をすることで、JavaScriptカスタマイズの運用がスムーズになります。
特にある程度カスタマイズし続ける可能性が見込まれそうな場合、ぜひ今回のようにReactなどの大きな規模にも耐えられるフレームワーク・ライブラリを利用してみるのもいいかと思います。
このTipsは、2021年9月版kintoneで動作を確認しています。