開発者向けコラムの第2回です。
Buddyの採用しているライブラリReact.jsがもたらすWEBアプリ開発における効果と、
Buddyのモジュールにおける活用のメリットについてご紹介します。
■第2回 Buddyで解決できるWEB開発における4つの悩みについて
・WEBアプリ開発における課題
WEBアプリはクライアント（ブラウザ）とサーバーの連携・協調によって動作しますが、
快適なアプリ動作を実現するためにはクライアント側とサーバー側の役割分担が常に問題となります。
通信速度が遅い場合も考慮すると、通信量を抑えることが重要です。
そうした課題から、画面表示内容（HTML）を毎回サーバー側で生成して送るのではなく、
クライアント側で操作・更新する方法、＝いわゆるシングルページアプリケーションが生まれました。
ブラウザに組み込まれたJavascript言語で、DOMというインタフェースを利用してHTMLの要素を
操作することで、画面を更新していくわけです。
しかし、DOM操作は決してスピードは早くありません。
多くの要素がある複雑な画面で全体を置き換えるような操作をすると、快適な操作性とはなりません。
そこで、必要な部分だけを更新するような工夫が必要となりますが、要素間の依存関係を適切に処理
しなければならず、大変複雑でメンテナンス性の悪い（いわゆるスパゲッティ化した）プログラム
になりがちです。
・React.jsとは
React.jsは、Facebookが開発したJavascriptライブラリで、このDOM操作の問題を解決します。
Facebookのほか、TwitterやYahooなどでも利用されています。
React.jsの主な特徴はコンポーネントと仮想DOMにあります。
HTMLでは例えば表を作るには<table>の中に各行の<tr>、その中に各セルの<th>や<td>、のように
階層的に構成します。
React.jsではこの考え方を拡張して、必要な要素を「コンポーネント」としてユーザーが自由に定義して、
コンポーネントを階層的に配置することで画面を組み立てます。表示するデータ内容などの動的な部分は、
コンポーネントに対する属性として与えます。
最上位のコンポーネントの属性としてデータを与え、それが下位のコンポーネントに影響する部分があれば
そのコンポーネントの属性として与える、というようにデータも階層的に上から下へ伝わるようにするのが
基本的なやり方です。
こうすれば、画面の構成は階層的なわかりやすい構造となり、各コンポーネントは属性で与えられた
内容を表示することに専念すれば良く、データは属性で与えれば良いので処理もシンプルで、
メンテナンス性も良くなります。
しかし、この仕組みをそのまま実装すると、データの変更があると画面全体を書き換えることになり、
パフォーマンスの問題が生じます。そこでReact.jsではDOMを直接扱うのではなく仮想DOMという
ワンクッションを置いています。仮想DOMに対して操作をおこなうと、実際に更新が必要な部分だけ
DOMの更新操作が行われます。
・BuddyにおけるReact.js
Buddyでは、アプリ一覧、運用管理、開発の各画面や、Buddyで作成されたアプリの画面も含めて、
全面的にReact.jsを採用しています。
Buddyでアプリを作成する場合、ボタンやテキストボックスなどの「モジュール」を配置して画面を作っていきます。
この各モジュールはReact.jsのコンポーネントになっています。React.jsには特有の様々な記法やプログラミング方法
がありますが、Buddyではその部分はモジュールの中に閉じ込められており、ユーザーは意識する必要はありません。
Buddyを使えば、React.jsそのものについて学ぶことなく、React.jsを利用したWEBアプリを開発できるわけです。
いかがだったでしょうか？
次回は、第1回であげた課題「開発の自由度が低い…」に対応した内容として、
「Buddyにおけるリレーショナルデータベース構築」についてご紹介したいと思います。
ご期待ください。
それでは皆様、良いお年を！
