IBM i用アプリケーション開発者向けのJavaScriptとフレームワーク
どのような形であるにせよ、JavaScriptはアプリケーション開発用のプログラミング言語としておそらく最も幅広く使用されている言語でしょう。ECMAScript という非公式に聞こえる名前でも知られているJavaScriptは、モバイル端末を含めた現代のすべての世代のブラウザに含まれています。JavaScriptはまたサーバー上でも利用可能ですし、Adobe PDFファイルなどのような様々なアプリケーション用のスタンドアロン型のスクリプティング言語としても利用が可能です。
実際には皆さんが目にするどのJavaScriptの書籍にもこの言語の歴史が書かれているでしょう。WikipediaのJavaScriptの頁(en.wikipedia.org/wiki/JavaScript)には特に有用な情報が記載されています。この言語の歴史を振り返る代わりに、本稿ではJavaScriptがなぜウェブ・アプリケーションにとって重要な機能であるかについて説明します。JavaScriptの重要性を理解すれば、jQueryやExt JS JavaScriptフレームワークなどの価値を十分に理解できるでしょう。ドン・デノンコート氏と マイク・パヴラク氏による本号の記事の目的はまさにそこにあります。
編集機能としてのJavaScript
JavaScriptがなぜ必要なのかを理解するためには、ウェブ・アプリケーションを開発する際に利用できるものに何があるのかを考えなければなりません。IBM iの場合、IBMが提供しているウェブ開発環境は主に以下の2つがあります。
- Javaベース: この環境にはWebSphere Application Server、Integrated Web Application Server for i、古いバージョンのOS/400、Apache Tomcatサーブレット・コンテナが含まれています。
- CGIベース: この環境にはRPGとCGIDEV2、PHP、成熟したNet.Dataが含まれています。
使用している環境あるいはその環境でのプログラミング言語が何であるかにかかわらず、IBM HTTP Server for i (Apache付き)がIBM iに出入りするウェブのやりとりの経路になります。IBM i用のウェブ・アプリケーションを開発するときは、通常はIBM iデータベースとの間でデータをやり取りし、ブラウザ上にそれを表示することが関心事です。ウェブ・プログラムの目的は、ウェブ環境でどのようなプログラミング言語で稼働していたとしても、HTMLやデータが埋め込まれたXHTMLストリーム・ファイルを作成することです。
データ入力フォーム用のウェブ上でのやり取りの典型的な例を図―1に示します。クライアントのウェブ・ブラウザがIBM HTTP Serverに接続すると、IBM HTTP Serverは受け取ったリクエストを適切なウェブ環境に転送します。サーバー側のウェブ・プログラムはデータを取り出してストリーム形式に変換し、HTTP Server経由でそのストリームをブラウザに返します。この時点でブラウザはページとデータを表示します。ユーザーはデータを入力し終わったフォームをサーバーに送信します。ウェブ・プログラムが受け取ったフォームのデータを編集してからデータベースを更新します。もしエラーがあれば、ウェブ・プログラムはフォームとユーザー・データとエラー・メッセージをブラウザに送り返します。
JavaScriptを使用すると編集作業の一部をブラウザ側に移すことができます。そのワークフローを図―2に示します。その大部分のステップは図―1と同じです。違いは編集作業をブラウザ側に可能な限り移すことでユーザーはフォーム・データをサーバーに送信する前にデータの訂正ができることです。たとえば、もし入力必須のフィールドが空白だった場合は、空白フィールドをサーバーに送ってその応答を待つよりは、そのエラーをブラウザ側で発見してデータを入力するようユーザーに促す方が理にかなっています。
ブラウザ内で編集するためにJavaScriptを使用したからといってサーバー側での編集が不要になるわけではなく、実際のところ、図―1および図―2のいずれのシナリオでも同じサーバー側のウェブ・プログラムを使用できます。JavaScriptを編集目的で使用することおよびJavaScriptを使用することの大きな理由の1つは、ユーザーの視点から見たときにウェブ・アプリケーションの応答性能が改善されるということです。リクエストから応答までのサイクル全体の完了を待つよりは、些細なエラーは修正されるべきであるとわかればJavaScriptを使用することで簡単な編集作業をよりユーザーに近い側に移動することができます。JavaScriptをブラウザ中で使用することで、IBM i DDSの編集機能がCHECK、COMP、RANGE、VALNUM、VALUESなどのキーワードを編集するのと同様の編集機能を容易に提供することができます。
対話性のためのJavaScript
多くのアプリケーションでは基本的な編集機能だけでなくより複雑な編集機能が必要となります。たとえば、皆さんが開発しているアプリケーションではIBM iデータベース中の顧客番号や発注番号を検証する必要があるときがあります。JavaScriptはその基本的な編集作業を簡単に処理して顧客番号や発注番号中の「番号」がたとえ英数字の混じったもの(A0912など)であってもそのフォーマットを検証することができます。しかしJavaScriptの編集機能自体はデータベース中にその他の有効な番号があるかどうかを判断することはできません。
確かにデータの一覧をデータベースからブラウザに送信できます。そしてそのようにして送信した一覧は通常ドロップ・ダウン・ボックスやスクロール・リストとしてユーザーに表示されます。データの一覧をブラウザに送信した場合、JavaScriptを使用してその一覧に対して入力データを編集したり、GUIの要素を使用することで表示した一覧から入力をユーザーに選択させるようにしたりすることもできます。ただし、長い一覧をブラウザに送信してドロップ・ダウン・ボックスから要素をユーザーに選択させるようにしただけでは、一覧中に十数個以上の項目があるときに問題となります。長い一覧の中をスクロールするのは疲れますし、一覧を表示するスペースが限られているモバイル環境では通常は歓迎されません。
検証を目的としてブラウザにデータを送りつけようとするのではなく、JavaScriptは別のテクニックを提供しています。それは非同期JavaScriptとXMLで、Ajaxとして良く知られています。Ajaxを有効にしたウェブ・アプリケーションを開発するときは、小さな通信環境をアプリケーション中に組み込みます。ユーザーはいつも通りウェブ・ページを要求することでアプリケーションを起動します。その後アプリケーションの稼働中はフォーム全体をサーバーに送信したり、サーバーからフォームをリフレッシュしたりする必要がないかもしれません。
たとえば、ウェブ・アプリケーションはAjaxを使用して顧客番号をサーバーに送信するだけで顧客番号の編集をすることができます。サーバー上では到着したリクエストがそのデータ要素だけを処理するプログラムに転送されます。IBM iの開発者であれば、顧客番号のような単一のデータ要素を編集するのは短いプログラムで処理できるということをお分かりであると思います。ご想像の通り、応答時間は桁外れに短くなっています。サーバー側のプログラムはブラウザ中のAjaxコードに対して顧客番号が有効かどうかを示す最小限のデータで応答します。
Ajaxはその登場以来どんどん軽量化されています。たとえばブラウザとサーバー間の通信はXML形式である必要はありません。最近開発されたAjaxアプリケーションはJavaScriptオブジェクト・ノーテーション(JSON: JavaScript Object Notation)を使用してデータを移動します。
JavaScriptとDOM
JavaScriptに関する参考文献のほとんどはドキュメント・オブジェクト・モデル（DOM: Document Object Model）の機能を制御するためにJavaScriptをどのように使用するかについて説明しています。ウェブ・ブラウザのHTMLに対する要件は従来どちらかというと緩いものでしたが、すべてのブラウザはページの内部表現を構築しています。その内部表現がDOMです。DOMはツリー構造のような形で表記され、ドキュメント内の要素が階層構造でモデル化されていることを表しています。DOMを使用するとJavaScriptを使ってブラウザ内に表示されている要素を見つけてやりとりすることができます。また、要素を追加、削除、変更することでドキュメントを修正することもできます。
データの入力やウェブ・アプリケーションの更新に対して、ユーザーがやり取りするデータへの主たるアクセスに使用するのがJavaScriptとDOMとなります。たとえば、ユーザーがデータをテキスト・ボックスに入力した場合、DOMをJavaScript中で使用して入力された値を読むことができます。必要があれば入力を修正したり、たとえばフォントの色を赤くしてエラーがあることを示すようにしたりする等、テキスト・ボックス自体の見た目を修正することができます。
近い将来: HTML5
HTMLの現在のバージョンは4.01ですが、1999年12月にW3C標準として発行されたものです。当然のことながらそれ以来、ウェブ・アプリケーションがどのように動作してどんな機能が提供されるのかという期待に対してさまざまな変化がありました。
そのような変化の中で最大なものはモバイル・アプリケーションの急速なスケール拡大でしょう。モバイル機器の津波が押し寄せてくる以前は新しいバージョンのHTMLを定めて採用しようという差し迫ったものがあるようには思えませんでした。Apple社などを含む複数のベンダーが仕様を推進し、HTML5と呼ばれている次世代バージョンのHTMLの機能を使い始めました。現時点では公式なHTML5の標準というものはありませんので、主要なブラウザがHTML5の機能をどのようにサポートするかについてさまざまなバリエーションがあります。
HTML5はIBM iの開発者にとっても興味深いものです。それはウェブ・フォームを作成するのに使用する機能の多くがネイティブの要素として組み入れられているからです。今までのバージョンのHTMLではデータ入力に利用可能な主なユーザー・インタフェース要素は<input type="text">というタイプのものでした。このタイプが与えられると、たとえばフィールド中にデータが必要であることを示すといった非常に簡単な編集でさえも入力フィールドにJavaScriptコードを付けなければなりません。テキストを編集するときに利用可能なJavaScriptコードのライブラリすべてが、JavaScriptフレームワークについての記事に掲載されています。
HTML5は他の機能に加えてこうした機能を提供しており、これを使ってウェブ・フォーム上の入力を処理します。
- 入力フィールド用のRequiredキーワード
- 数値の入力を強制するための数字用のスピナー・コントロール
- 日付と時間のポップアップ選択コントロール
- 入力仕様の一部としての正規表現
- 電子メール・アドレスのフォーム中の入力をチェックするための基本的な編集が可能なEmailタイプ
- URLのフォーム中の入力をチェックするための基本的な編集が可能なURLタイプ
- 範囲内の値を視覚的に選択するためのスライダー・コントロール
- 複数のファイルの選択を可能にするファイル・タイプ用のMultipleキーワード
- テキスト・ボックス内のプレースホルダー・テキスト(最初に表示されていてユーザーが上書き可能になっているプロンプト・テキスト
これらの機能は機能的なウェブ・フォームを作成するのを手助けするには程遠いものです。HTML5の機能を有しているということは、簡単なデータ検証要件用のJavaScriptを使用しないでもウェブ・アプリケーションを開発することが可能になるかもしれないということを意味します。
成功事例: フレームワーク
HTML5がまだ広く利用可能ではないのに対してJavaScriptはすべての実用的な目的に対してウェブ・ページでやり取りを行う際に必須のものであるということを考えれば、JavaScriptをどのように扱うかを考慮することが重要です。ウェブ・ページにJavaScriptのコードを単に追加してフォームの編集を可能にすることは決して難しいことではありませんが、ただ退屈なだけです。コードを記述し、テストして保守することに加えてブラウザがHTML、JavaScript、DOMをどのようにサポートしているかのバリエーションも考慮する必要があります。言うまでもなく、こうした問題の動きのスピードに付いていくことはウェブ・アプリケーションの開発にとっては障害となります。IBM iの開発者としては、低レベルのインフラストラクチャの問題へ対処するためではなく、アプリケーション領域の問題を解決することに時間を費やした方が良いでしょう。
低レベルのJavaScriptを直接処理するのではなく、広く利用されている1つないし複数のJavaScriptフレームワークを採用することを考慮した方が良いでしょう。フレームワークを採用することについては実際上何のマイナス面はありません。本稿で取り上げる2つのフレームワーク、jQueryとExt JS、はもう数年に渡って広く利用されているものです。いずれのフレームワークともあらゆるタイプの開発環境で使用されており、しっかりしたユーザー・コミュニティーもあります。なんといっても両フレームワークとも無償で利用可能な点が最高です。
フレームワークを採用する際の大きな懸念の1つは、新しいテクノロジーを採用するときと同じものです。その使用方法に熟達するにはかなりのきつい学習曲線をたどらなければなりません。ただし、初期投資をためらうと本物の仕事をやり遂げるのを妨げることになりがちですから、そのフレームワークがどんなものを提供しているのか、自分が良く知っていて期待している要件と一致するかどうかを注意深く評価しなければなりません。
現在のJavaScriptの最新技術では実用上、非常に簡単なアプリケーションを除いてはフレームワークを検討することが必須とされています。私たちが執筆した本号の記事を読み進んで、jQueryおよびExt JSフレームワークの詳細について勉強してください(記事ID 698684の「RPGアプリケーションでjQueryを使う」を参照方)。
忘れないでおいていただきたいのは、どちらか片方しか使えないというわけではなく、両方のフレームワークを同じアプリケーション内で使用することができるということです。jQueryとExt JSについて学習すれば、このフレームワークあるいは他のフレームワークのどれが自分の環境やアプリケーションに一番合うかをより上手に決めることができるでしょう。
