LoginSignup
71

More than 5 years have passed since last update.

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

Posted at

からまとめてみた。

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
71