開発者向けコラムの第3回です。
遅ればせながら、本年もどうぞよろしくお願いいたします。

今回は本格的なアプリ開発には欠かせないリレーショナルデータベースの設計機能と、
安全に運用するための機能についてご紹介します。

■第3回　Buddyにおけるリレーショナルデータベースの設計と運用

多くの場合アプリの動作にはデータを保持するためのデータベースが欠かせません。
Buddyでは代表的なリレーショナルデータベースシステムの一つである「PostgreSQL」を使用
しており、アプリを作成すると自動的にそのアプリ用のデータベースがデバッグ用と本番用に
用意されます。

・ビューの活用

　リレーショナルデータベースでは、テーブルにデータを格納します。
テーブルは一件ずつのデータと対応するレコード（行）と、データの各項目となるカラム（列）
からなります。Excelのシートのようなものを思い浮かべればわかりやすいでしょう。

　単純なアプリ、例えばアドレス帳のようなものであれば一つのテーブルでも作ることができます。
しかし、例えば納品管理アプリであれば、納品、納品詳細、商品、社員、取引先、といったテーブル
を組み合わせて作成する必要があるでしょう。納品詳細にはどの商品コードの商品をいくつ納品したか
があり、それを商品テーブルと結びつけて商品名や単価を得て、単価×数量を計算する、
といった処理が必要となります。

　リレーショナルデータベースには、テーブル同士を結合したり、値を計算・加工したりする処理を
データベース側で行ってくれる「ビュー」という仕組みが用意されています。
本格的なアプリを作成する上で欠かせない機能と言えるでしょう。
Buddyにはこのビューを設計するためのGUIを用意しており、より直感的に組み立て、利用すること
ができます。

　また設計したビューを元に、複合的な情報を扱えるアプリのスクリーン（UI）を作成することも
できます。こちらについては次回のコラムでご紹介したいと思います。

・安全なSQL操作

　リレーショナルデータベースはSQLという言語でデータの読み書きなどの操作を行います。
アプリでデータベースを使用する際には、アプリで使用する言語（Buddyの場合はJavascript）と
SQLとの間でデータの受け渡しを適切におこなう必要があります。

　例えばユーザーが入力したデータをデータベースに格納する際には、insertやupdateという
SQLの命令文を組み立ててその中にデータを埋め込むことになりますが、その処理が正しくないと
悪意あるユーザーがデータを壊すような操作ができてしまう（SQLインジェクションという）
セキュリティ上の問題につながります。　

　Buddyではデータベース操作でSQL言語を直接扱うのでなく、用意されたAPIにJavascriptの
オブジェクトでデータ等を与える方法で行い、SQLの組み立ては内部で適切に行われるように
なっています。SQL言語の関数などを含む式を直接指定する場合もありますが、その場合も
式の内容が適切なものかチェックされます。
これにより、SQL言語の詳細を知らなくても安全にデータベース操作ができるようになっています。

・不整合を防ぐトランザクション

　データベースでもっとも重要なのが、データの不整合を起こさないことです。
同時に複数のユーザーが使用し、ブラウザが突然閉じられることも考えられるWebアプリであれば、
操作の競合や中断が起こることを考えておかねばなりません。

　例えば在庫処理のアプリであれば、競合や中断があっても在庫数と出荷数は必ず整合性が
保たれる必要があります。リレーショナルデータベースにはそのために、一連の処理の全体が成功するか、
さもなければ全体がなかったことになるかという、トランザクションという仕組みが用意されています。

　Buddyではクライアント（ブラウザ）側から一つ一つのデータベース処理を行うことはもちろん、
サーバー側でまとめてデータベース処理を行い、その中でトランザクションを利用することも可能です。
これによって、データの不整合を起こさない堅牢なアプリを作成することができます。

いかがだったでしょうか？

次回は、ビューにも対応したテンプレートや、自由なweb表現が可能なスクリーンテーマ編集機能など
UIに関する開発機能についてお話しします。

開発者向けコラムの第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の効果と活用」についてご紹介したいと思います。