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
フォルシアのフレームワークとTypeScript
Search
forcia_dev_pr
December 07, 2022
0
380
フォルシアのフレームワークとTypeScript
Shinjuku.ts#1 発表資料
forcia_dev_pr
December 07, 2022
Tweet
Share
More Decks by forcia_dev_pr
See All by forcia_dev_pr
"書く文化"を仕組みで育てる──フォルシアの技術ブログ継続戦略
forcia_dev_pr
1
190
新しいおもちゃを見つけたい私がやっている情報収集
forcia_dev_pr
2
430
「Pythonの環境構築について」と記事作成で意識したこと
forcia_dev_pr
1
140
Neovim で VS Code みたいにコーディングする
forcia_dev_pr
1
160
なぜ・どうやって・何を書く? 〜技術記事を書く習慣の作り方〜
forcia_dev_pr
1
170
第8回ゆるふわオンサイト 解説スライド
forcia_dev_pr
0
110
第7回ゆるふわオンサイト解説
forcia_dev_pr
0
240
第6回ゆるふわオンサイト解説
forcia_dev_pr
0
240
よくわかるFORCIAのエンジニア旅行SaaSプロダクト開発編
forcia_dev_pr
0
830
Featured
See All Featured
The Invisible Side of Design
smashingmag
301
51k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
KATA
mclloyd
32
15k
Navigating Team Friction
lara
189
15k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Docker and Python
trallard
46
3.6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
We Have a Design System, Now What?
morganepeng
53
7.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
850
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Transcript
フォルシアのフレームワークと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