Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JSXをモダンな感じで開発してみた
Search
cancer
January 21, 2015
Technology
0
440
JSXをモダンな感じで開発してみた
2015/1/21 koba04 さんとワイワイJavaScript勉強会 #ajiting で発表した資料
cancer
January 21, 2015
Tweet
Share
More Decks by cancer
See All by cancer
AngularJSで作ったアプリをReactで置き換えてみた
cancer
0
220
CSSスプライトを動的生成して快適ソシャゲ開発
cancer
1
230
JavaScriptでKeyframeAnimationを作ってみた
cancer
1
74
第2回 Sass勉強会 in 社内
cancer
1
61
Other Decks in Technology
See All in Technology
転移学習とドメイン適応の基礎
kmatsui
2
570
コードを書く隙間を見つけて生きていく技術/Findy 思考の現在地
fujiwara3
24
5.2k
巨大なテーブルのテーブル定義を無停止で安全に誰でも変更できるようにする / Table-definitions-for-huge-tables-can-be-modified-by-anyone-safely-and-non-disruptively
freee
1
740
Delivering Millions of Messages within seconds @ Duolingo
pelelgrino
0
330
クラウドサインにおけるプロダクトマネージャーの役割と開発プロセス / 20240410_cloudsign-PdM
bengo4com
1
680
インシデントレスポンスのライフサイクルを廻すポイントってなに / Pinpoints of Incidentresponse Lifecycle for Operation
sakaitakeshi
1
300
o11y入門_外形監視を利用したWebアプリケーションへの最適なモニタリング_TechBrew
k5k
3
100
[2024年3月版] Databricksのシステムアーキテクチャ
databricksjapan
8
1.9k
Tableau事例紹介 / Tableau Case Study of Eureka
kazuya_araki_tokyo
1
170
Four keys改善の取り組み事例紹介
sansantech
PRO
3
230
株式会社EventHub・エンジニア採用資料
eventhub
0
1.9k
キャラクター制御のためのプロンプト術 for LINE Bot
uezo
0
520
Featured
See All Featured
Producing Creativity
orderedlist
PRO
336
39k
Code Review Best Practice
trishagee
54
15k
Writing Fast Ruby
sferik
620
60k
Designing the Hi-DPI Web
ddemaree
276
33k
A Tale of Four Properties
chriscoyier
150
22k
Design by the Numbers
sachag
274
18k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
Building Your Own Lightsaber
phodgson
98
5.7k
The Language of Interfaces
destraynor
151
23k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
29
6k
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
Facilitating Awesome Meetings
lara
41
5.6k
Transcript
JSX をモダンな感じで開発 してみた
自己紹介 宇野 陽太( ) @cancer6 株式会社ピクセルグリッド(2015/1~) AngularJS / Backbone /
React あたりを触ったり CSS の設計したりなど
JSX
... ではなく
None
... でもなく
Adobe JSX
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 がある
Architecture
Architecture 3,4 年ぐらい前に作ったものをリファクタリングする CoffeeScript gulp gulp-coffee gulp-concat(include 用) gulp-rename( 拡張子.js
を.jsx に直す) (and more) Underscore
#include ExtendScript では外部ファイルを\#include で読み込むこと ができる #include "lib/underscore.js"; #include "actions/action.js"; #include
"module/a.js"; #include "module/b.js"; 開発中はinclude.jsx とapp.jsx だけconcat し、 ビルド時に全部結合していました ( 理由は覚えてない...)
Test
テストフレー ムワー ク 実行環境がPhotoshop or ExtendScript Toolkit レイヤー オブジェクトや独自のファイルオブジェクトなど がある
ブラウザやター ミナル上で実行するのが難しい
テストダブル Photoshop のエンジンがいつものJS と違う sinon.js 使おうとするもsetTimeout が無くてエラー が出る
なので自分で作る ocha.js mocha / jasmine ライクに書けるフレー ムワー ク sinobi.js sinon.js
ライクに書けるテストダブル それぞれ最低限のテストが書ける程度に作って ExtendScript Toolkit から実行する
今回はやらなかったけど... https://github.com/adobe-photoshop/generator-core Generator プラグインにするとよりモダンに Photoshop CC から利用可能 Photoshop の中にNode.js サー
バー が組み込まれてる terminal などからGeneratorCore を起動することで接続で きる
ご清聴ありがとうございました