JSX
出典: フリー百科事典『ウィキペディア（Wikipedia）』 (2024/06/09 14:48 UTC 版)
| パラダイム | オブジェクト指向[1] |
|---|---|
| 登場時期 | 2012年5月31日[1] |
| 設計者 | DeNA, Co., Ltd. |
| 開発者 | DeNA, Co., Ltd. |
| 評価版リリース | 0.9.89 / 2014年5月20日[2] |
| 型付け | 静的型付け[1] |
| 影響を受けた言語 | JavaScript |
| プラットフォーム | クロスプラットフォーム |
| ライセンス | MIT License |
| ウェブサイト |
jsx |
| 拡張子 | .jsx |
JSX は、DeNAによって開発されたウェブアプリケーション向けのプログラミング言語である。ECMAScript 4から影響を受けた構文を持ち、静的型付けなのが特徴。ウェブブラウザ組み込みのスクリプト言語であるJavaScriptのデメリットを解消することを目的に作られている。またJSXのソースコードは最適化されたJavaScriptコードに変換して実行され、同等のJavaScriptプログラムと比較して10%以上高速になるとされる[3][1]。
なお、Reactで用いられるJavaScriptの拡張構文JSXや、Adobe社製ソフトウェアに搭載されているJavaScriptマクロは、同じく「JSX」という名前がつけられているが、全くの別物である。
言語仕様
JSXの特徴は以下の点が挙げられる。
- クラス構文のサポート
- モジュール機構
- テンプレート（総称型）のサポート
- 関数オーバーロードのサポート
- アロー関数式
- レキシカルスコープをもつthis
- デフォルト引数
- 最適化で削除されるassert文
- プロファイラ（スマートフォンでも利用可能）
- source mapのサポート
- nullを許容しないプリミティブ型(number, boolean, string)
例
Hello worldプログラムは、以下のとおりである[4]。JSXプログラムは _Main.main(:string[]) : void がアプリケーションのエントリポイントとなる。
class _Main {
static function main(args : string[]) : void {
log "Hello, world!";
}
}
JSXでは、継承関係にないクラスに総称的な操作をするためにはインターフェイスを使う。インターフェイスを使ったプログラムは以下のようになる[4]。
// an example for class inheritance and interfaces
interface Flyable {
abstract function fly() : void;
}
abstract class Animal {
function eat() : void {
log "An animal is eating!";
}
}
class Bat extends Animal implements Flyable {
override function fly() : void {
log "A bat is flying!";
}
}
abstract class Insect {
}
class Bee extends Insect implements Flyable {
override function fly() : void {
log "A bee is flying!";
}
}
class _Main {
static function main(args : string[]) : void {
// fo bar
var bat = new Bat();
var animal : Animal = bat; // OK. A bat is an animal.
animal.eat();
var flyable : Flyable = bat; // OK. A bat can fly
flyable.fly();
// for Bee
var bee = new Bee();
flyable = bee; // A bee is also flyable
flyable.fly();
}
}
関連項目
脚注
- ^ a b c d “高速なJavaScriptコードを生成できるWebアプリケーション向け言語「JSX」が公開される”. OSDN (2012年5月31日). 2012年6月1日閲覧。
- ^ Releases · jsx/JSX - GitHub
- ^ http://www.slideshare.net/kazuho/jsx-optimizer
- ^ a b “JSX Tutorial”. JSX. 2012年6月1日閲覧。
外部リンク
- 公式ウェブサイト （英語）
| 概念 | |
|---|---|
| エンジン | |
| コンパイラ | |
| デバッガ | |
| エディタ | |
| サーバーサイド |
|
| フレームワーク・ライブラリ | |
| ユニットテスト |
|
| Docジェネレータ | |
| コード解析 | |
| パッケージ管理 | |
| アプリケーションバンドラー | |
| 関連技術 | |
| 人物 | |
 | この項目は、FLOSSに関連した書きかけの項目です。この項目を加筆・訂正などしてくださる協力者を求めています（Portal:FLOSS）。 |
JSX
出典: フリー百科事典『ウィキペディア（Wikipedia）』 (2021/11/17 15:55 UTC 版)
JSXは、JavaScriptの構文に対する拡張である。HTMLと外観が似ているが、JSXは多くの開発者がよく知っている構文を使用して、構造化されたコンポーネントを描画する方法を提供する。Reactコンポーネントは、必須ではないが、通常はJSXを使用して書かれている。JSXはFacebookがPHP向けに作成した拡張構文であるXHPに似ている。 JSXのコードの例: class App extends React.Component { render() { return (
); }} 入れ子の要素 同じレベルの複数の要素は、上記の{10+1}
上記のコードは下記のように描画される。11
条件文 if文はJSX内で使用することはできないが、条件式は使用することができる。以下の例の{ i === 1 ? 'true' : 'false' }では、iと1が等しいので、文字列'true'が描画される。 class App extends React.Component { render() { const i = 1; return ({ i === 1 ? 'true' : 'false' }
※この「JSX」の解説は、「React」の解説の一部です。
「JSX」を含む「React」の記事については、「React」の概要を参照ください。
- JSXのページへのリンク
辞書ショートカット
カテゴリ一覧
すべての辞書の索引
