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
110
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
2.6k
Parsing Javascript
brn
12
7.2k
JSON & Object Tips
brn
1
300
CA 1Day Youth Bootcamp for Frontend LT
brn
0
680
Modern TypeScript
brn
2
680
javascript - behind the scene
brn
3
600
tc39 proposals
brn
0
650
プロダクト開発とTypeScript
brn
8
2.7k
React-Springでリッチなアニメーション
brn
1
500
Other Decks in Programming
See All in Programming
ScalarDBを用いたマイクロサービスにおけるデータ管理 (Database Engineering Meetup #2)
scalar
0
100
データアナリストが行うDatabricksを活用したETLの自動化事例
shinoa
0
260
見た目から始める生産性向上
ikumatadokoro
7
790
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
5
880
CQRS/ES avec Symfony, c’est (trop) bien !
jeremyfreeagent
1
640
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.7k
Designing for tomorrow's programming workflows
honnibal
PRO
2
120
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
1.1k
Netty Chicago Java User Group 2024-04-17
sullis
0
170
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
220
Snowflakeで眠ったデータを起こそう!
estie
0
110
PostmanでAPIの動作確認が楽になった話
h455h1
0
160
Featured
See All Featured
Designing the Hi-DPI Web
ddemaree
276
33k
Raft: Consensus for Rubyists
vanstee
132
6.3k
Automating Front-end Workflow
addyosmani
1356
200k
Imperfection Machines: The Place of Print at Facebook
scottboms
260
12k
Practical Orchestrator
shlominoach
182
9.7k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
The Art of Programming - Codeland 2020
erikaheidi
42
12k
BBQ
matthewcrist
80
8.8k
Being A Developer After 40
akosma
57
580k
YesSQL, Process and Tooling at Scale
rocio
164
13k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
322
20k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
241
1.2M
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はかなり楽なのでおすすめ。