Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
フォルシアのフレームワークとTypeScript
Search
forcia_dev_pr
December 07, 2022
460
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
フォルシアのフレームワークとTypeScript
Shinjuku.ts#1 発表資料
forcia_dev_pr
December 07, 2022
Transcript
12 slides
フォルシアのフレームワークとTypescript 籏野 拓 2022.11.15 @Shinjuku.ts
Speaker • 籏野 拓 (Taku Hatano) • ソフトウェアエンジニア@フォルシア株式会社 ◦ webサイトの検索ページ(受注/SaaS)
◦ 社内のお役立ちツール開発など • 活動領域 2
フォルシアのWebフレームワーク変遷 aaaa 3 第一世代 第二世代 第三世代 - 世にWebフレームワークがない時代 ~CommonJSの時代 -
モジュールのrequireなどを自作 - 独自の仕組み/書き方が多い - 非同期の処理なんかも作られていてすごい 2018 2010年代初期 2000年代初期
フォルシアのWebフレームワーク変遷 aaaa 4 第一世代 第二世代 第三世代 - 世の中に便利なフレームワークがかなり広がった - webフレームワークを自作することに優位性はない
- Node.jsのモジュールを組み合わせて利用していく 2018 2010年代初期 2000年代初期
フォルシアのWebフレームワーク変遷 aaaa 5 第一世代 第二世代 第三世代 入社 への変遷で体験した「TSって素晴らしい!」を紹介 2018 2010年代初期
2000年代初期
当時は学習コストに対する懸念があった模様。。? →BUT. 学習コスト以上のメリットが間違いなくある! Typescript(Node.js)の選定理由 6 • 静的型付けが可能 • 利用者/ライブラリの多さ •
client/serverのコードを共有できることによる生産性
TSって素晴らしい!① 7 リクエストパラメータに(限らず)型を付けられる var params = request.params; // ...???? •
どんな値を持つのかわからない ◦ 初めてジョインするプロジェクトでは地獄。。。 • プログラムの途中で自由に書き換わる ◦ 気づいたら数値→文字列に変わっていることもよくある。。。
TSって素晴らしい!① 8 const params: APIParams = request.params; params. • 可読性がぐんと高くなる
◦ エディタの補完機能が強くなったり • 意図せぬ型を代入しようとすると怒ってくれる • OpenAPI定義と組み合わせて型やコードを自動生成すると さらに強固に型で守ることが可能 リクエストパラメータに(限らず)型を付けられる
TSって素晴らしい!② 9 インターフェースの概念が導入された interface InterfaceA { method1() : void; };
class ClassA implements InterfaceA { method1() : void{ console.log("ClassA - method1()"); } }; • インターフェースと実装を分離することができる。
TSって素晴らしい!② 10 アプリ開発者が意識せずとも、フレームワーク側で実装を切り替えられたり 実装1 C 実装3 C 実装2 C インターフェース
I 参考: TypeScript で学ぶインターフェース (抽象型) https://www.forcia.com/blog/001547.html
まとめ 11 一度型の恩恵を受けると、型のない生活には戻れません • 型は最低限のテストである • 型を利用することで実装を隠蔽できる
EOF
More Decks by forcia_dev_pr
See All by forcia_dev_pr
第9回ゆるふわオンサイト_解説スライド.pdf
forcia_dev_pr
0
93
"書く文化"を仕組みで育てる──フォルシアの技術ブログ継続戦略
forcia_dev_pr
1
320
新しいおもちゃを見つけたい私がやっている情報収集
forcia_dev_pr
2
510
「Pythonの環境構築について」と記事作成で意識したこと
forcia_dev_pr
1
210
Neovim で VS Code みたいにコーディングする
forcia_dev_pr
1
250
なぜ・どうやって・何を書く? 〜技術記事を書く習慣の作り方〜
forcia_dev_pr
1
250
第8回ゆるふわオンサイト 解説スライド
forcia_dev_pr
0
300
第7回ゆるふわオンサイト解説
forcia_dev_pr
0
330
第6回ゆるふわオンサイト解説
forcia_dev_pr
0
330
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
39
3.5k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
2.2k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.6k
Lessons Learnt from Crawling 1000+ Websites
charlesmeaden
PRO
1
1.7k
Navigating Weather and Climate Data
rabernat
0
590
Docker and Python
trallard
47
4.3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
133
20k
How to Align SEO within the Product Triangle To Get Buy-In & Support - #RIMC
aleyda
2
1.9k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
tomoyanonymous
3
1.4k
Ten Tips & Tricks for a 🌱 transition
stuffmc
1
280
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
marcoroth
6
920