JSXをモダンな感じで開発してみた

2015/1/21 koba04 さんとワイワイJavaScript勉強会 #ajiting で発表した資料

Transcript

1. JSX をモダンな感じで開発 してみた
2. 自己紹介 宇野 陽太( ) @cancer6 株式会社ピクセルグリッド(2015/1～) AngularJS / Backbone / React あたりを触ったり CSS の設計したりなど
3. JSX
4. ... ではなく
6. ... でもなく
7. Adobe JSX
8. What is Adobe JSX http://en.wikipedia.org/wiki/ExtendScript 正式名称はExtendScript( たぶん) レイヤー 編集やファイル作成などの操作ができる Photoshop 用のスクリプト(JS) Photoshop CS の頃からある Photoshop の内部にあるJS エンジンで実行 ES3 相当 / JSON とかsetTimeout とか使えない Photoshop Script とかAdobe JSX とかとも呼ばれてる ExtendScript Toolkit というIDE がある
9. Architecture
10. Architecture 3,4 年ぐらい前に作ったものをリファクタリングする CoffeeScript gulp gulp-coffee gulp-concat(include 用) gulp-rename( 拡張子.js を.jsx に直す) (and more) Underscore
11. #include ExtendScript では外部ファイルを\#include で読み込むこと ができる #include "lib/underscore.js"; #include "actions/action.js"; #include "module/a.js"; #include "module/b.js"; 開発中はinclude.jsx とapp.jsx だけconcat し、 ビルド時に全部結合していました ( 理由は覚えてない...)
12. Test
13. テストフレー ムワー ク 実行環境がPhotoshop or ExtendScript Toolkit レイヤー オブジェクトや独自のファイルオブジェクトなど がある ブラウザやター ミナル上で実行するのが難しい
14. テストダブル Photoshop のエンジンがいつものJS と違う sinon.js 使おうとするもsetTimeout が無くてエラー が出る
15. なので自分で作る ocha.js mocha / jasmine ライクに書けるフレー ムワー ク sinobi.js sinon.js ライクに書けるテストダブル それぞれ最低限のテストが書ける程度に作って ExtendScript Toolkit から実行する
16. 今回はやらなかったけど... https://github.com/adobe-photoshop/generator-core Generator プラグインにするとよりモダンに Photoshop CC から利用可能 Photoshop の中にNode.js サー バー が組み込まれてる terminal などからGeneratorCore を起動することで接続で きる
17. ご清聴ありがとうございました