これからはじめるRIAとFlexプログラミング
～第2回　Flex開発のためのプログラミング基礎知識～

Flex開発でもっともベーシックとなるトピック

2. コンポーネント － COMPONENT

Ⅰ．コンポーネントの一般概念

　ソフトウェアの世界でコンポーネントという言葉は、「再利用可能なプログラム」を表し、別のプログラムに部品として組み込める形態のプログラムをさします。

　例えば、あるアプリケーションを作成して「ファイルを開くためのダイアログを表示する」という処理を記述したとします。別のプログラムでも「ファイルを開く」処理を行う場合、最初に作成したプログラムの「ファイルを開くためのダイアログを表示する」部分をコンポーネントとして切り出しておくと、別のプログラムでそのまま使用でき、開発の手間が省けます。

図：コンポーネントのイメージ

　コンポーネントは他のプログラムでも再利用可能な形の機能プログラムです。Flex開発では、MXMLやActionScriptを使用して再利用可能なコンポーネントを作成したり、Adobeのエキスパートや、他のFlex開発者が作成したコンポーネントを自分のアプリケーションで使用することができます。

　また、自分で作成したアプリケーションの中に使い回しできそうな部分があったらコンポーネントとして切り出しておけば、別のアプリケーションでも利用できるようになります。

II．Flex Builderでコンポーネントを使う

　Flex Builderにはユーザインタフェース画面を編集するためのデザインエディタがあり、豊富なコンポーネントが用意されています。次の図は、Flex Builderのデザイン画面です。ブラウザ上で実行されるユーザインタフェース画面を、コンポーネントを配置することにより、ビジュアルに作成することができます。

図：Flex Builderのデザイン画面

3. ライブラリ － LIBRARY

Ⅰ．ライブラリの一般概念

　「ライブラリ（library）」は、コンポーネントと同様に「再利用可能なプログラム」を指しますが、一般的には、コンポーネントよりもソースレベルで利用される、関数レベルの機能集合を指します。

　ライブラリという形態は古くからソフトウェア業界で使用され、再利用可能な関数レベルのプログラムの集合をさします。

　ライブラリは、コンパイル時に使用されるタイプと、実行時に使用されるタイプに分けられますが、特に実行時に使用されるライブラリは、UNIXやWindowsでは「共有ライブラリ」や「ダイナミックライブラリ」という名称でOSを構成する主要な要素になっています。

　Flexの場合、コンパイル時に使用されるタイプはSWC、実行時にはRSLというタイプのライブラリが使用できます。

II．クラスライブラリとActionScript Class Library

　ActionScriptやJavaなどのプログラミング言語では、プログラムを機能ごとに「クラス」という単位にまとめて作成してゆきます。そのため、これらのプログラム言語で再利用することを目的として作成されたライブラリは、「クラスライブラリ」と呼ばれます。

　Adobeでは、Flash、Flex、AIRアプリケーション開発者用に「ActionScript Class Library」を提供しており、Flexの機能はこのライブラリに集約されています。開発者はこのライブラリから必要な機能を選択してプログラムを構築してゆくことになります。

　Flexアプリケーションを作成する場合、MXMLで記述したソースコードは、ActionScript Class Libraryを利用するActionScriptコードに変換されます。この変換作業を行うのは、前節でご紹介したFlexコンパイラです。またプログラマがActionScriptコードを書く場合、このActionScript Class Libraryを直接利用することになります。

　Flex開発を行う際に使用するActionScript Class Libraryの詳細は、「Flexリファレンスガイド」として公開されています。たとえばFlex3の場合、以下から日本語版が参照可能です。

• Adobe Flex 3.2 リファレンスガイド

図：Flexリファレンスガイド

※注

　Flex2などの旧バージョンのリファレンスも引き続き公開されています。

4. プログラムエラーとデバッグ

　プログラムを作成する際に越えなければならない、エラーに関するハードルが2つあります。ひとつ目は文法エラーとも呼ばれるミス（文法ミス）で、2つ目はプログラムの処理上のミスで、論理（ロジック）ミスとも呼ばれます。後者はいわゆる「バグ」と呼ばれるもので、時には実行時にプログラムが異常終了することにもつながります。

Ⅰ．文法ミス

　文法ミスはスペルミスや構文の誤りによる間違いで、コンパイラによりチェックされるミスです。

　プログラムを書き始められる方はまずこのエラーに悩まされます。文法ミスがあるうちは、プログラムの実行ができません。例えば次のActionScriptコードは文法ミスでコンパイルできません。

private function runAS():void {
　　var i:Int;
　}

※注

　上記のActionScriptプログラムでは、「int」と書くべきところを「Int」と書いているため、文法エラーになってしまいます。しかし、このようなエラーはFlex Builderのコード補完機能により未然に防げるようになっています。

　Flex Builderでは、下図のようにエラーが一目でわかるようになっています。文法エラーが見つかった個所は、［問題］ペインに表示されるので、修正を行います。

図：Flex Builderの文法エラーチェック

Ⅱ．ロジックミスとプログラムテスト

　ロジックミスはプログラムの処理上のミスで、いわゆる「バグ」と呼ばれるプログラムエラーになります。文法ミスをすべて修正し、実行できるようになるとこの難関が待ち受けています。プログラムの「テスト」とは、このバグを見つけだして修正する作業です。

　簡単なバグの例を見てみましょう。次のActionScriptプログラムでは、2つの金額の合計値を元に税込み価格を計算しようとしていますが、実行結果からわかるように、正確に合計金額の計算を行いません。これは明らかにロジックミスです（ちなみに、プログラム中で行っているように、ActionScriptでは数値演算のかけ算は、「*」という記号を使用します）。

private function logicError():void {
trace( "100円の品と200円の品のお買い上げ合計は税込みで"
+　( 100 + 200 * 1.05 ) + "円です。" );
}

　実行結果：100円の品と200円の品のお買い上げ合計は税込みで310円です。

※注

　上記のActionScriptプログラムでは、「100+200*1.05」という計算式は、数学と同じように「100+(200*1.05)」と計算されます。そのため、上記の計算方法をショッピングカートで行うと、いつも損をする店になってしまいます。

　正しくは次のように足し算の部分に( )をつけて優先的に計算を行う必要があります。

private function logicError ():void {
trace( "100円の品と200円の品のお買い上げ合計は税込みで"
+　( ( 100 + 200 ) * 1.05 ) + "円です。" );
}

　実行結果：100円の品と200円の品のお買い上げ合計は税込みで315円です。``

最後に

　今回はFlex開発を行う上で必要なプログラミングの概念とプログラムエラーについてご紹介しました。次回はFlexアプリケーションの開発言語であるMXMLとActionScriptの基本事項をご紹介いたします。

次回のトピック

• XMLの超基本とMXML
• ActionScriptの基本概念
• FlexとFlash Playerについて
• Flexアプリケーション開発の流れ