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
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
310
OPENLOGI Company Profile
hr01
0
67k
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
2
16k
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
1
17k
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
7.7k
SaaS型なのに自由度の高い本格CMSでサイト構築と運用のコスパ&タイパUP! MovableType.net の便利機能とユーザー事例のご紹介
masakah
0
110
NewSQLや分散データベースを支えるRaftの仕組み - 仕組みを理解して知る得意不得意
hacomono
PRO
2
160
Model Mondays S2E04: AI Developer Experiences
nitya
0
120
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
130k
開発生産性を測る前にやるべきこと - 組織改善の実践 / Before Measuring Dev Productivity
kaonavi
10
4.4k
ビズリーチにおけるリアーキテクティング実践事例 / JJUG CCC 2025 Spring
visional_engineering_and_design
1
120
さくらのIaaS基盤のモニタリングとOpenTelemetry/OSC Hokkaido 2025
fujiwara3
3
440
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Embracing the Ebb and Flow
colly
86
4.7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Gamification - CAS2011
davidbonilla
81
5.4k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Statistics for Hackers
jakevdp
799
220k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Become a Pro
speakerdeck
PRO
29
5.4k
Faster Mobile Websites
deanohume
307
31k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
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 を起動することで接続で きる
ご清聴ありがとうございました