「JSX」って名前のものが色々あって混乱する


からまとめてみた。

どれもJavaScriptに関係する。

1. Reactの「JSX」

  • JavaScriptの独自拡張構文
  • Facebook社
  • Facebook社製フレームワーク、Reactで使われている構文
  • E4XみたいにJavaScriptの構文中にXML風のものをそのまま書く記法
公式のサンプルより
// Using JSX to express UI components.
var dropdown =
  <Dropdown>
    A dropdown list
    <Menu>
      <MenuItem>Do Something</MenuItem>
      <MenuItem>Do Something Fun!</MenuItem>
      <MenuItem>Do Something Else</MenuItem>
    </Menu>
  </Dropdown>;

render(dropdown);
  • 最近よく見かけるようになった
  • 各種LintやBabel,TypeScriptが対応(予定)らしい

検索方法

React JSX : Google検索

2. AltJSの「JSX」

  • AltJSの一つ、JavaScriptに似た言語
  • DeNA社
  • DeNA社製のAltJS言語
  • ES4やAS3に似た文法をもち、コンパイル後はJavaScriptになる
公式のサンプルより
class _Main {
    static function main(args : string[]) : void {
        log "Hello, world!";
    }
}

検索方法

DeNA JSX -React : Google検索
* -Reactを入れないとややノイズが載る
* AltJS JSXだとReactの方が混じるのでダメ

3. Adobeの「JSX」

http://www.adobe.com/jp/devnet/photoshop/scripting.html
http://www.adobe.com/jp/devnet/illustrator/scripting.html
https://helpx.adobe.com/jp/after-effects/using/scripts.html
https://helpx.adobe.com/indesign/using/scripting.html

  • Adobe社製ソフトのJavaScriptマクロ
  • Adobe社
  • Photoshop,Illustrator,InDesign,AfterEffectsなどのAdobe製品を弄る事のできるJavaScript
  • ブラウザやnode.jsなどとはAPIが全然別もの
    • なので photoshop.d.ts などの型定義ファイルがあったりする
  • さらに製品によっても微妙に差異がある
  • 拡張子が.jsx
  • ExtendScriptという呼び方も

検索方法

Adobe JSX : Google検索

ただし、(製品名) JavaScriptの方が確実