JSXの関数あれこれ

関数の定義方法

素のJavaScriptでは，関数を定義する方法が4つありました．それぞれ使いどころが異なるのですが，細かい説明は省略します．以下，2つのパラメータを受け取り，それらの積を返す関数を考えます．

1. Function foo( x, y ) { return x * y; }
2. function bar( x, y ) { return x * y; }
3. baz = function( x, y ) { return x * y; };
4. qux = new Function( "x", "y", "return x * y;" );

一方，JSXでは以下の方法で関数を定義できます．JavaScriptではクラスの概念があやふやですが，JSXではクラスメソッドとインスタンスメソッドと単なるメソッドに区別されます．以下の中では，1がインスタンスメソッド（インスタンスを作成して「インスタンス名.メソッド名」で呼び出す）で2がクラスメソッド（「クラス名.メソッド名」で呼び出す）です．3〜5が単なるメソッド（メソッド名で呼び出す）です．単なるメソッドは変数に代入する形になるので，変数のスコープ外からは使用できません．また，「->」の表記方法は後になって追加されたので，初期にJSXをセットアップした人はエラーとなってしまいます．その場合はJSXを更新してみてください．

1. function foo( x: number, y: number ) : number { return x * y }
2. static function bar( x: number, y: number ) : number { return x * y }
3. var baz = function( x: number, y: number ) : number { return x * y; };
4. var qux = ( x: number, y: number ): number -> { return x * y; };
5. var quux = ( x: number, y: number ): number -> x * y;

関数を関数に渡す

使う機会は限定されますが，JavaScript同様，関数に関数を渡すことが必要な場面があります．例を挙げると，GUIアプリや非同期処理などでコールバック関数を指定する時です．関数を渡す際には，上記3〜5のように一旦変数に代入することも，無名関数を直接記述することもできます．

まずは関数を受け取る側の記述例です．やっていることは単純に，パラメータとして関数と2個の数値を受け取り，受け取った関数にその数値を渡して実行し，実行結果を表示するものです．

次に，上記メソッドに関数を渡して実行する例を示します．上記メソッドはクラスメソッドなのでクラス名が必要です．今回は_Mainクラスに記述されているものとします．

今回は関数の渡し方について記述しました．githubにソースコードを置いておきましたのでご利用ください．

func.jsx

最後になりますが，こちらのページにはお世話になりました．ありがとうございました．

JSX の進化速度が半端ない | ぐるぐる～

ツイート