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
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.3k
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
120
RailsGirls IZUMO スポンサーLT
16bitidol
0
190
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
170
Hack Claude Code with Claude Code
choplin
4
2.1k
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
120
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
120
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
18k
ふつうの技術スタックでアート作品を作ってみる
akira888
1
860
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
790
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Speed Design
sergeychernyshev
32
1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Six Lessons from altMBA
skipperchong
28
3.9k
Designing Experiences People Love
moore
142
24k
Embracing the Ebb and Flow
colly
86
4.7k
Building Applications with DynamoDB
mza
95
6.5k
Done Done
chrislema
184
16k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
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はかなり楽なのでおすすめ。