JavaScript の開発は簡単ではありません。この問題の原因となっているのは、一様ではない Web ブラウザーの互換性、期待外れのドキュメンテーション、そして力不足のツールです。しかし幸いなことに、そんなツールの状況が明るくなってきました。それは Eclipse 用プラグインのセット、JSDT (JavaScript Development Toolkit) の最新リリースのおかげです。

Eclipse はオープンソースの IDE フレームワークで、そのアーキテクチャーは拡張と柔軟性を目的に設計されています。Eclipse で動作する JSDT は、プラグインとして追加されます。Eclipse で JavaScript を実行するという概念は今に始まったことではありません。HTML と一部の JavaScript サポートは他のプラグインにも用意されています。ですが JSDT を他のプラグインと差別化するのは、このプラグインが提供する Web 開発の生産性を大幅に向上させる、豊富で多様なツールです。

JSDT は JDT (Java Development Toolkit) に見られる機能の多くを提供し、そのコア設計も JDT と共通しています。そんな JSDT は、Web Tools Platform V3.0 リリースでは現在の JavaScript エディターに代わって採用される予定です。

IDE と JavaScript

読者の皆さんは、JavaScript IDE がどうしてそれほど一般的でないのか疑問に思うことでしょう。Web 2.0 の人気、そして多くの開発者たちが彼らのブログやコミュニティーのページで JavaScript を使うように強く要求していることから、新しい JavaScript ツールが次々と登場しているのは確かです。それでも、大半のプログラマーにとっては「メモ帳」とブラウザーの更新ボタンが最善の JavaScript 開発環境であることに変わりありません。

問題は、JavaScript 言語の解釈にあります。Java™ や C 言語とは違い、JavaScript は型付けが弱いため、正確にモデル化するのは容易ではありません。強い型付けの言語ではコンパイルされたコードの効率性に重点が置かれ、言語の柔軟性が制限されますが、JavaScript の目標はそれとは異なります。JavaScript ではプラットフォームに対してさまざまな試行が行われた結果、開発者の意見が大きく分かれたことで言語上の矛盾が生まれ、これらの矛盾がツールと開発の双方の観点から事態を複雑にしています。

悪者は何もブラウザーだけではありません。オブジェクト指向の JavaScript は注目を浴びていますが、これは後からの思い付きです。Ajax ツールキットは率先して JavaScript をオブジェクト指向にするという役割を果たしていますが、これらのツールキットはそれぞれに方法が異なります。概して言えば、そのためにオブジェクト構造とクラス構造が識別しにくくなり、場合によっては識別できなくなることさえあります。さらに事態を悪化させているのは (あるいは話をする相手によっては事態を改善しているとも言えますが)、この言語には、プログラマーにとって困難な芸当を実現可能にする強力な抜け穴があるということです。その一例として、コードの塊を evalf(..) 関数でラップすれば、実行時にだけ有効にすることができます。これが、JSDT で正確なモデル化を行うために私たちが未だに奮闘している問題です。

現在のJavaScript IDE

現在、部分的に使用できる JavaScript ツールはいくつかあります。しかし、よく使われているツールの多くは本当の意味でコンテキストに応じたコンテンツ支援を行うことはできません。なぜなら、真の JavaScript 言語モデリング・メカニズムが欠けているからです。モデルがない IDE では、コンテンツの補完機能とツールは、使用可能な型を一覧にした静的フラット・ファイルを使って実現します。これらの型は型付けされた一部の文字列を基準にオンザフライで切り捨てられるため、コードに定義されたオブジェクト・メンバーについては無視するのが通常です。このようにモデルがなければ、実行できる内容は大幅に限られてしまうため、コンテンツ補完機能はコンテキストに応じた動作をしません。

言語モデルを使用しなければ、コンテキストでコードを配置するのは困難、あるいは不可能になります。多くのプログラミング要素はコードのコンテキストに依存することから、コンテキストを確立するためのツールは必要不可欠です。モデルとコードのコンテキストが欠けた IDE は、完全な型の解決と検証、スコープ、可視性の他、容易な開発に当然必要となるあらゆる検証を十分に行う機会も逃してしまいます。

上に戻る

JSDT の設計

JSDT は JavaScript 言語と暗黙のクラス構造をリアルタイムでモデル化します。このモデル化を実現する新しい手法ではまず、基本の言語要素を構成します。次に 1 つまたは複数の推論エンジンによってクラス構造と言語の間にあるギャップを埋めます。

基本言語モデル

推論およびモデリング・プロセスは、操作スタックとして捉えることができます。モデルの基礎となるのは JavaScript ソース・コードです。このソース・コードは Eclipse 用の JDT と同じようなエンジンによって専用言語モデルに変換されます。この純粋な言語モデルは、ECMA-3 標準に準拠します。

型とクラスの推論

JavaScript 言語がモデル化されると、次のステップとして型およびクラス推論の管理が行われます。JavaScript をベースとしたツールキットの多く (Dojo、Rico、Prototype など) は、独自の手法を使って JavaScriptでのオブジェクト指向プログラミングを容易に行えるようにします。JSDT ではカスタム・ツールキット対応推論エンジンを使用してツールキット内でクラスおよび型の構造を認識し、認識されたクラスと型を言語モデルに追加できるようになっています。

モデルの公開

最後に、専用モデルと推論されたモデルの構成部分が公開言語モデルに変換されます。この公開言語モデルは、ソース、リファクタリング、さらにお好きなツールで使用することができます。ツールのいずれかで JavaScript ソースを一部変更する必要が出てきたら、その変更は公開モデルで行われてから JavaScript ソース・コードに変換されます。

変数とメンバー・スコープの管理

言語モデルが JavaScript ソースおよびコンテキストを記述するための基礎を提供するとしても、もう1 つの重要な材料が必要となります。それは、環境コンテキストです。JSDT は JavaScript のグローバル・スコープを実行する際に使用できる変数と型を設定しなければなりませんが、これらの変数と型は JavaScript のランタイム環境に応じて異なります。JavaScript が Web ブラウザーのコンテキストで実行されている場合にグローバル・スコープで使用できるのは、オブジェクト、型、そして画面上のデータとブラウザーのオブジェクトを現すフィールドです。一方、コードがブラウザー以外のものを対象としているとしたら、オブジェクトのセットはがらりと異なってきます。

JSDT はライブラリー・メカニズムを使用して、プロジェクトで共通するオブジェクト、変数、型を管理します。つまり、ライブラリーをプロジェクトに追加すれば、ユーザーの対象ランタイム環境に固有のオブジェクトと変数を提供することができます。例えば競合するメンバーを定義するライブラリーが 2 つある場合、これらのライブラリーで定義されたメンバーは関連するユーザー・インターフェースで 1 つにまとめて示されます。このようにして、ブラウザーや環境全体で共通するメソッドを設定できるようになっています。

よく使われるブラウザーを対象としたライブラリーのプリパッケージは単純で、オブジェクトと型を定義する JavaScript ソース・ファイルが含まれるプラグインにライブラリーをバンドルします。JSDT はソース・エディターに開かれたファイルをモデル化する際に、まずファイルのソース・コードをモデル化してから、そのモデルに設定したプロジェクトのライブラリーにそれぞれのソース・ファイルを追加するため、ライブラリーのソース・ファイルが検証されることはありません。ライブラリーのソース・ファイルが使用されるのは、オブジェクト構造を定義して、ホバー・ヘルプとコンテンツ補完機能で表示される JsDoc を追加するためだけです。

ライブラリーの主な機能はJavaScript のランタイム・コンテキストを管理することですが、もう 1 つ、重要な役割も果します。それはソース・ファイル相互参照の操作です。純粋な JavaScript には、明示的なインクルード機能がありません。開発者にはソース・ファイル全体に関数を散りばめるという意地の悪い習慣がありますが、プロジェクトのなかでのソース・ファイル相互の可視性を管理するのに役立つのが、ライブラリー構成ページです。プロジェクト・フォルダーにソース・フォルダーのマークが付けられていれば、そのフォルダーに含まれるすべての JavaScript がグローバル・スコープにインクルードされるということになります。排他パターンを使うことによって、フォルダーに制限を設けることもできます。

上に戻る

ツール

全体から見た設計の要点を説明したところで、次は具体的な機能について検討していきます。JSDT のあまり目立たない (ただし必須の) 機能には、同一単語の強調表示、中括弧、括弧、引用符の自動完了、オートインデントなどがありますが、これらはほんの数例です。「優れた IDE にあるべき機能は、もちろん JSDT でサポートしている」と言えば十分でしょう。

コンテンツ支援

コンテンツ補完機能は、任意の場所で Ctrl+Space を使って呼び出します。図 3 に示しているのは、文書オブジェクトで呼び出されたコンテンツ支援です。コンテンツ補完機能はコンテキストに対応した動作をし、グローバル・スコープと JavaScript モデルを基準とします。補完候補には、フィールド名、フィールド型、そしてフィールドの宣言型が示されます。

エラーの検出と修正

積極的にコード・エラーを判断することができる IDE は極めて有益です。JSDT が検出するエラーには、文法/言語エラー、型/フィールド/メソッドの可視性、そしてフローまたはロジック・エラーという主要な3 つのタイプがあります。すべてのエラー警告レベルは、プリファレンス・ページによって個別に構成することができます。

JSDT はオブジェクトのすべてのフィールドとメソッドを解決しようと試みます。メソッドを解決できない場合には、そのメソッドにエラーのマークが付けられます。

構文エラーも同じく検出されてマークが付けられます。上記では、for() 文にセミコロンがありません。

図 6 は、フロー分析の例です。return 文の後のコードは実行されることがないため、エラーのマークが付けられています。

一部のエラーには簡易修正オプションがあります。図 7 は、ユーザーが未解決の変数、formyValue の横に表示されたエラー・マーカーをクリックした時に JSDT が表示する、このエラーを修正するためのオプションです。

コードの体裁の整え方

ソースの体裁が乱れてくることが時々あります。読みやすく、十分に構造化され、整然とした体裁のコードでも、開発とデバッグを行っているうちに、コードの体裁を維持するのが難しくなります。JSDT は、構成可能なオートインデントや文字ペアのマッチングなど、体裁を希望の形に整える機能をサポートしています。これらの機能は、開発の迅速化とコードの読みやすさに貢献します。

受け取ったコードがすでに乱雑だったとしたら、どう対処すればよいでしょうか。その場合には、マウスをクリックするだけで、JSDT コード・フォーマッターが乱雑な JavaScript をひととおり調べて、体裁を整え直してくれます。体裁を整えるためのエンジンは幅広い構成が可能で、構成をエクスポートしてチームで共有することもできます。

その他の JSDT 機能

JSDT がサポートする機能は、上記に挙げた項目だけではありません。以下に、JSDT の (必須の) 機能を見ればすぐわかるように、すべて記載します。

• 構文の強調表示
• 折り畳み/行番号
• 完全アウトライン表示、クラス、関数、フィールドの表示
• 中括弧/括弧の強調表示および一致のチェック
• 中括弧、括弧、インデントの自動補完
• 蛍光ペン
• コメントのトグル (行とブロック)
• JsDoc 要素の生成
• do、for、try/catch、while での包含
• ユーザーが構成可能な補完テンプレート
• 関数の抽出/関数シグニチャーの変更
• インデント修正
• オープン宣言
• オープン型階層
• オープン呼び出し階層
• カスタマイズ可能なコード・フォーマット
• 全検索
• リファクタリング/名前変更/移動
• ブレークポイントのサポート
• Firefox、Internet Explorer、および ECMA-3 向け JsDoc を使って定義されたブラウザー・ライブラリー
• JsDoc + JavaScript プロトタイプ定義によるユーザー定義ライブラリーのサポート
• ライブラリー・イメージのサポート
• ATF Project によるデバッグ・サポート

上に戻る

まとめ

無料の Web 開発環境が必要なら、Eclipse の他には何も探す必要はありません。最近追加された JSDT により、Eclipse での JavaScript 機能は市場に出回っている何にも増して優れています。オープンソース・プロジェクトによって促進される急速な成長のおかげで、JSDT は今後も JavaScript と同じく瞬く間に進化していくはずです。

参考文献

学ぶために

• ECMA の Web サイトで ECMA-3 標準の詳細を読んでください。
  
  
• Eclipse の JSDT ウィキで説明している JavaScript Development Toolkit の詳細を読んでください。
  
  
• Eclipse ATF Project の詳細を読んでください。
  
  
• 「Eclipse の推奨読み物リスト」を読んでください。
  
  
• developerWorks ですべての Eclipse 関連記事を調べてください。
  
  
• Eclipse の初心者は、developerWorks の記事「Eclipse Platform 入門」を読んでください。Eclipse の起源とアーキテクチャー、そしてプラグインで Eclipse を拡張する方法を学べます。
  
  
• IBM developerWorks の Eclipse project resources を調べて、Eclipse のスキルを磨いてください。
  
  
• ソフトウェア開発者を対象とした興味深いインタービューや討論については、developerWorks ポッドキャストをチェックしてください。
  
  
• developerWorks の Technical events and webcasts で最新情報を入手してください。
  
  
• 無料の developerWorks On demand demos で、IBM およびオープンン・ソースの技術と製品機能を調べて試してみてください。
  
  
• 世界中で近日中に予定されている IBM オープンソース開発者を対象とした会議、見本市、ウェブ放送やその他のイベントをチェックしてください。
  
  
• オープンソース技術を使用して開発し、IBM の製品と併用するときに役立つ広範囲のハウツー情報、ツール、およびプロジェクト・アップデートについては、developerWorks Open source ゾーンを参照してください。
  
  

製品や技術を入手するために

• IBM alphaWorks で Eclipse 技術の最新ダウンロードを調べてください。
  
  
• Eclipse Foundation から Eclipse Platform およびその他のプロジェクトをダウンロードしてください。
  
  
• IBM 製品の評価版をダウンロードして、DB2®、Lotus®、Rational®、Tivoli®、および WebSphere® のアプリケーション開発ツールとミドルウェア製品を使ってみてください。
  
  
• IBM ソフトウェアの試用版を使用して、次のオープンソース開発プロジェクトを革新してください。ダウンロード、あるいは DVD で入手できます。
  
  

議論するために

• Eclipse に関する質問を投じる最初の場所として、Eclipse Platform newsgroups があります (このリンクをクリックすると、デフォルト Usenet ニュース・リーダー・アプリケーションが起動され、eclipse.platform が開きます)。
  
  
• Eclipse newsgroups には Eclipse を利用し、拡張することに関心を持つ人達のために、さまざまなリソースが用意されています。
  
  
• developerWorks blogs から developerWorks コミュニティーに加わってください。
  
  

著者について

Bradley Childs は、2004年に Texas A&M University を卒業した後、IBM でミドルウェア開発の仕事に就き、その後、新技術に取り組むようになりました。彼は JSDT の開発者、Phil Berkland と緊密に連携して働いています。Ajax Tooling Framework プロジェクトでもコミュニティー参加者として積極的に活動しています。

この記事を評価する

コメント

上に戻る

目次

• IDE と JavaScript
• JSDT の設計
• ツール
• まとめ
• 参考文献
• 著者について
• コメント