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
470
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
230
CSSスプライトを動的生成して快適ソシャゲ開発
cancer
1
260
JavaScriptでKeyframeAnimationを作ってみた
cancer
1
77
第2回 Sass勉強会 in 社内
cancer
1
70
Other Decks in Technology
See All in Technology
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
6
2.4k
AI専用のリンターを作る #yumemi_patch
bengo4com
5
4.3k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
50
19k
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
4
13k
OSSのSNSツール「Misskey」をさわってみよう(右下ワイプで私のOSCの20年を振り返ります) / 20250705-osc2025-do
akkiesoft
0
170
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
170
B2C&B2B&社内向けサービスを抱える開発組織におけるサービス価値を最大化するイニシアチブ管理
belongadmin
1
7k
MUITにおける開発プロセスモダナイズの取り組みと開発生産性可視化の取り組みについて / Modernize the Development Process and Visualize Development Productivity at MUIT
muit
1
16k
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
380
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
1.9k
Core Audio tapを使ったリアルタイム音声処理のお話
yuta0306
0
190
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.7k
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Embracing the Ebb and Flow
colly
86
4.7k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
300
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Building Adaptive Systems
keathley
43
2.7k
Become a Pro
speakerdeck
PRO
29
5.4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Designing for humans not robots
tammielis
253
25k
Navigating Team Friction
lara
187
15k
We Have a Design System, Now What?
morganepeng
53
7.7k
How to Ace a Technical Interview
jacobian
278
23k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
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 を起動することで接続で きる
ご清聴ありがとうございました