開発者向けコラムの第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におけるリレーショナルデータベース構築」についてご紹介したいと思います。
ご期待ください。

それでは皆様、良いお年を！

今回より始まりました、主に開発者の方を対象としたコラムです。
おおよそ1～2か月間隔を目安に不定期連載してまいります。

Buddyをよりご活用いただくための一助となれば幸いです。

■第1回　Buddyで解決できるWEB開発における4つの悩みについて

「Buddy」はWEBアプリ開発でよく聞かれる4つの大きな悩みを解決します。

【1】開発したアプリの動作が遅い…
「Buddy」はFacebookの開発したDOM制御ライブラリReact.jsを採用しています。
シングルページアプリケーションによる効率的な画面処理によりアプリ動作の高速化を実現します。
しかもReactの利用は「Buddy」の画面モジュールの中で自動的に行われ、開発者はReact特有の
プログラムコードを書く必要はありません。

【2】開発の自由度が低い…
「Buddy」はリレーショナルデータベースに対応しています。
テーブルを様々な条件で結合・加工して仮想的なテーブルとして扱う「ビュー」機能も、
GUIのビュー設計画面でテーブルの結合が行えるなど、しっかりとサポートします。
ビューに合わせたスクリーン設計も手軽に行うことができ、単一のDBテーブルだけでは実現できない
本格的なアプリ開発の要求に応えます。

【3】開発にスキルや時間がかかる…
「Buddy」では、クライアントサイドにReact.js、サーバーサイドにNode.jsを採用しています。
そのため、WEBアプリにおいて連携する"クライアント側の画面制御"と"サーバー側のデータベース
制御等ビジネスロジック"のプログラム、その両方をJavascript言語で開発できます。
多言語の習得を必要とせず、少ないスキルと時間での開発が行えます。

【4】UIのデザインに苦労する…
「Buddy」は画面全体～各モジュールに至るまでデザイン設定を行うことが可能です。
GUIの画面設計内での各画面モジュールのスタイルの調整や、モジュールに与えたクラス名に対する
スタイルを一括管理する「スクリーンテーマ」機能によって、CSSの知識がない方でも簡単に
編集できます。
また、画面幅によって画面要素の配置などを調整するレスポンシブデザインのための機能も
用意されています。

上記については、今後のコラムでより詳しく案内して参ります。
どうぞご期待ください。

次回は「開発したアプリの動作が遅い…」に対応する内容として、
「BuddyにおけるReact.jsの効果と活用」についてご紹介したいと思います。