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
13
9.1k
JSON & Object Tips
brn
1
440
CA 1Day Youth Bootcamp for Frontend LT
brn
0
870
Modern TypeScript
brn
2
770
javascript - behind the scene
brn
3
710
tc39 proposals
brn
0
830
プロダクト開発とTypeScript
brn
8
2.9k
React-Springでリッチなアニメーション
brn
1
650
Other Decks in Programming
See All in Programming
DRFを少しずつ オニオンアーキテクチャに寄せていく DjangoCongress JP 2025
nealle
2
180
負債になりにくいCSSをデザイナとつくるには?
fsubal
10
2.5k
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
160
昭和の職場からアジャイルの世界へ
kumagoro95
1
400
Spring gRPC について / About Spring gRPC
mackey0225
0
230
Rubyで始める関数型ドメインモデリング
shogo_tksk
0
120
新宿駅構内を三人称視点で探索してみる
satoshi7190
2
110
Formの複雑さに立ち向かう
bmthd
1
890
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
9
1.8k
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
130
WebDriver BiDiとは何なのか
yotahada3
1
150
時計仕掛けのCompose
mkeeda
1
310
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Agile that works and the tools we love
rasmusluckow
328
21k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
350
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Building Applications with DynamoDB
mza
93
6.2k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Statistics for Hackers
jakevdp
797
220k
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はかなり楽なのでおすすめ。