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
180
フォルシアのフレームワークとTypeScript
Shinjuku.ts#1 発表資料
forcia_dev_pr
December 07, 2022
Tweet
Share
More Decks by forcia_dev_pr
See All by forcia_dev_pr
第6回ゆるふわオンサイト解説
forcia_dev_pr
0
100
よくわかるFORCIAのエンジニア旅行SaaSプロダクト開発編
forcia_dev_pr
0
210
よくわかるフォルシアのエンジニア 新卒採用編
forcia_dev_pr
0
1.3k
第5回ゆるふわオンサイト解説
forcia_dev_pr
0
74
よくわかるフォルシアのエンジニア 旅行プラットフォーム部編
forcia_dev_pr
0
2.8k
React hooks を気合で理解する
forcia_dev_pr
0
170
k8sマニフェストを Typescriptで管理したい― cdk8s+を導入してみました ―
forcia_dev_pr
0
170
第4回ゆるふわ競技プログラミングオンサイト解説
forcia_dev_pr
0
370
TypeScript(WebGL)+React+Viteで、さくっとGeodesic Polyhedronを描画してみた
forcia_dev_pr
0
200
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
3
3.4k
Building Flexible Design Systems
yeseniaperezcruz
320
37k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
323
20k
Designing for Performance
lara
602
67k
Music & Morning Musume
bryan
41
5.6k
We Have a Design System, Now What?
morganepeng
44
6.8k
Producing Creativity
orderedlist
PRO
338
39k
Clear Off the Table
cherdarchuk
85
310k
Rebuilding a faster, lazier Slack
samanthasiow
74
8.2k
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