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.3k
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
RailsGirls IZUMO スポンサーLT
16bitidol
0
200
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
390
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
150
テスト駆動Kaggle
isax1015
1
620
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
9
4.1k
Porting a visionOS App to Android XR
akkeylab
0
680
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
23
9.6k
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
6
800
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
300
Model Pollution
hschwentner
1
160
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
200
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
99
37k
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Writing Fast Ruby
sferik
628
62k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
970
Navigating Team Friction
lara
187
15k
Building Applications with DynamoDB
mza
95
6.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
990
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Facilitating Awesome Meetings
lara
54
6.5k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
GitHub's CSS Performance
jonrohan
1031
460k
KATA
mclloyd
30
14k
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はかなり楽なのでおすすめ。