BLOG

R3 Cloud Journey

kintone のカスタマイズで React を使うと何が嬉しいか

2017-10-31

こんにちは。 React 使ってますか?

今回は kintone の Javascript/CSS カスタマイズにおいて、React を使うと どのような利点があるのかを考えていきたいと思います。

題材として、PDFファイルを表示するという要件で考えてみます。

React を使用しない場合のコードは “Data URI形式のPDFをIE11でプレビュー” の「Chromeなどの場合」のサンプルコードを使用させていただきます。(IEの話は今回の題材でないので・・)

jQuery.noConflict();
(function($) {
'use strict';

**function** getFile(url) { **var** df **\=** **new** $.Deferred(); **var** xhr **\=** **new** XMLHttpRequest(); xhr.open('GET', url, **true**); xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); xhr.responseType **\=** 'blob'; xhr.onload **\=** **function**(e) { **if** (**this**.status **\===** 200) { df.resolve(**this**.response); } }; xhr.send(); **return** df.promise(); } kintone.events.on('app.record.detail.show', **function**(event) { **var** record **\=** event.record; **var** space **\=** kintone.app.record.getSpaceElement('space1'); **var** fileKey **\=** record.file1.value\[0\].fileKey; **var** fileUrl **\=** '/k/v1/file.json?fileKey=' **+** fileKey; **var** promise **\=** getFile(fileUrl); promise.done(**function**(pdfData) { **var** url **\=** window.URL **||** window.webkitURL; **var** imageUrl **\=** url.createObjectURL(pdfData); **var** preview **\=** '<object data="' **+** imageUrl **+** '" type="application/pdf" width="100%" height="100%">'; preview **+=** '</object>'; $(space).append(preview).css('height', '500'); }); });

})(jQuery);

一方、React を使用する場合は一例ですが、以下のようになります。

コードが増えているような気がしますが、PDF表示機能を呼び出している部分は実質的に

render( <PdfView fileKey={event.record\["file1"\].value\[0\].fileKey} height={500} />, elm );

だけです。

このように特定の機能や UIを部品化(コンポーネント化)できることが React を使用する一番の利点になります。

機能を部品化することで kintone の世界から切り離し、StorybookEnzyme といった React の世界のツールを用いて部品の開発・テストを進めることができます。

また、コンポーネントのライフサイクルを理解し適切に実装することで、仮想DOMによる描画パフォーマンスの最適化を見込むことができます。

Vue.js を使用する場合も考え方は同じです。コンポーネントベースで考えましょう!

アールスリーインスティテュートで、これまでになかった画期的な kintoneカスタマイズサービス gusuku Customine(カスタマイン) を開発しています。 kintone認定アプリデザイン/カスタマイズ スペシャリスト

自社のシステム開発・移行などをご依頼したい方
お客様とともに
作りながら考える
新しいシステム開発
詳しく見る
kintone導入・アプリ開発・カスタマイズにお困りの方
ノーコードでらくらく
kintoneカスタマイズ
詳しく見る
kintoneアプリの
バージョン管理・バックアップ
詳しく見る
kintoneアプリの開発・運用を
強力サポート

詳しく見る
更新情報をメールでお届けします!

kintoneアプリのカスタマイズに役立つ情報や、イベントの情報をメールでお届けいたします。
ご登録をお待ちしております!

R3のご提供サービス
自社のシステム開発・移行などをご依頼したい方
お客様とともに作りながら考える
新しいシステム開発
詳しく見る
kintone導入・アプリ開発・カスタマイズにお困りの方
kintoneをもっと使いやすくする
gusukuシリーズ
詳しく見る
更新情報をメールでお届けします!
kintoneアプリのカスタマイズに役立つ情報や、イベントの情報をメールでお届けいたします。
ご登録をお待ちしております!