Posted at

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

More than 3 years have passed since last update.

からまとめてみた。

どれもJavaScriptに関係する。


1. Reactの「JSX」

https://facebook.github.io/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」

https://jsx.github.io/


  • 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/scripting.html

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の方が確実