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
jspmとtypescriptでの開発について
Search
Taketoshi Aono(青野健利 a.k.a brn)
June 07, 2017
Programming
0
120
jspmとtypescriptでの開発について
jspmとtypescriptを組み合わせた開発のメリット・デメリット
Taketoshi Aono(青野健利 a.k.a brn)
June 07, 2017
Tweet
Share
More Decks by Taketoshi Aono(青野健利 a.k.a brn)
See All by Taketoshi Aono(青野健利 a.k.a brn)
document.write再考
brn
6
3k
Parsing Javascript
brn
14
9.2k
JSON & Object Tips
brn
1
490
CA 1Day Youth Bootcamp for Frontend LT
brn
0
950
Modern TypeScript
brn
2
810
javascript - behind the scene
brn
3
740
tc39 proposals
brn
0
880
プロダクト開発とTypeScript
brn
8
2.9k
React-Springでリッチなアニメーション
brn
1
700
Other Decks in Programming
See All in Programming
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
570
PicoRuby on Rails
makicamel
2
130
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
170
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
1
10k
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
120
ニーリーにおけるプロダクトエンジニア
nealle
0
840
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
1
150
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
220
生成AI時代のコンポーネントライブラリの作り方
touyou
1
220
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
120
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
390
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
We Have a Design System, Now What?
morganepeng
53
7.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
The Cult of Friendly URLs
andyhume
79
6.5k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Transcript
jspm+typescript で開発する
名前: @brn (青野健利) 職業: フロントエンドエンジニア・ネイティブエンジニア 会社: Cyberagent アドテクスタジオ RightSegment・AI Messenger
ブログ: http://brn-log.hatenablog.com/
What is jspm? ブラウザ向けのモジュール管理ツール ES6 Moduleを利用してランタイムでトランスパイルを行う cliも用意されており、npmのようにモジュールのinstallも可能
What is jspm? Pros • watch等のジョブが不要 • npm・jspm・githubからインストールできる Cons •
jspm_packagesというディレクトリを管理しなければいけない • 常に再コンパイルするのでメモリ負荷が大きい
How dose it works? Systemjsのtranspilerという仕組みを利用する。 現在の所、typescriptとbabel、traceurが選択できる。
How to use? jspm init moduleのインストール jspm.config.jsの初期化 jspm install <repo>:<module名>
How to use? SystemJS.config({ paths: { "npm:": "jspm_packages/npm/", "test-package/": "src/"
}, browserConfig: { "baseURL": "/" }, devConfig: { "map": { "plugin-babel": "npm:
[email protected]
" } }, transpiler: "plugin-babel", packages: { "test-package": { "main": "test-package.js", "meta": { "*.js": { "loader": "plugin-babel" } } } } }); SystemJS.config({ packageConfigPaths: [ "npm:@*/*.json", "npm:*.json" ], map: {}, packages: {} });
With Typescript jspm install ts compiler optionの設定 plugin-typescriptを使う typescriptOptions: {
"tsconfig": true, "typeCheck": ‘strict’ }
With Typescript { “module”: “system” } tsconfig.json
With Typescript そのままブラウザで画面をチェック!
With Typescript typescriptでimportしたmoduleがsystemjs経由でロードされる
With Typescript Sourcemapsも勝手に生成してくれる!
Impressions 使い勝手は良い。 typescriptを書いて、コンパイルするフェーズが無いので、 ブラウザで直接typescriptを実行している感覚 一度設定してしまえば、開発するときには コードを書く => ブラウザをリロードする の流れで通常のJSを書いていた頃の感覚で作業できる。 またkarmaのプラグインもあるので、テストでも利用できる。
Impressions ただし、ブラウザ上で • 依存モジュールのロード • ロードしたモジュールのコンパイル と少々負荷のかかる事を行うので、規模が大きくなってくると 非常にリロードに時間がかかるようになる。 特にnpmのモジュールを使っていると、 稀に依存が非常に多いモジュール等があり、
そういうものをロードすると 一気にストレスがたまる開発環境になってしまう。
Adopt or Hold? 使う分にはwebpack、browserifyに移行するのもそんなに難しくないので、 チャレンジしても問題ない。 特にtypescriptやbabelを利用する場合は出力するモジュール形式を 柔軟に変更できるため、どのモジュール管理システムを利用しても 移行・復帰共にあまり気にせず使うべき。 とりあえず、小・中規模程度のアプリにはjspmはかなり楽なのでおすすめ。