フォルシアのフレームワークとTypeScript

Shinjuku.ts#1 発表資料

Transcript

1. フォルシアのフレームワークとTypescript
 籏野 拓 
2022.11.15 @Shinjuku.ts

2. Speaker • 籏野 拓 (Taku Hatano) • ソフトウェアエンジニア@フォルシア株式会社 ◦ webサイトの検索ページ(受注/SaaS) ◦ 社内のお役立ちツール開発など • 活動領域 2
3. フォルシアのWebフレームワーク変遷 aaaa 3 第一世代 第二世代 第三世代 - 世にWebフレームワークがない時代 ~CommonJSの時代 - モジュールのrequireなどを自作 - 独自の仕組み/書き方が多い - 非同期の処理なんかも作られていてすごい 2018
 2010年代初期
 2000年代初期

4. フォルシアのWebフレームワーク変遷 aaaa 4 第一世代 第二世代 第三世代 - 世の中に便利なフレームワークがかなり広がった - webフレームワークを自作することに優位性はない - Node.jsのモジュールを組み合わせて利用していく 2018
 2010年代初期
 2000年代初期

5. フォルシアのWebフレームワーク変遷 aaaa 5 第一世代 第二世代 第三世代 入社
 への変遷で体験した「TSって素晴らしい！」を紹介
 2018
 2010年代初期
 2000年代初期

6. 当時は学習コストに対する懸念があった模様。。？
 →BUT. 学習コスト以上のメリットが間違いなくある！
 Typescript(Node.js)の選定理由 6 • 静的型付けが可能
 • 利用者/ライブラリの多さ
 • client/serverのコードを共有できることによる生産性

7. TSって素晴らしい！① 7 リクエストパラメータに(限らず)型を付けられる
 var params = request.params; // ...???? • どんな値を持つのかわからない
 ◦ 初めてジョインするプロジェクトでは地獄。。。
 • プログラムの途中で自由に書き換わる
 ◦ 気づいたら数値→文字列に変わっていることもよくある。。。

8. TSって素晴らしい！① 8 const params: APIParams = request.params; params. • 可読性がぐんと高くなる
 ◦ エディタの補完機能が強くなったり
 • 意図せぬ型を代入しようとすると怒ってくれる
 
 • OpenAPI定義と組み合わせて型やコードを自動生成すると
 さらに強固に型で守ることが可能
 リクエストパラメータに(限らず)型を付けられる

9. TSって素晴らしい！② 9 インターフェースの概念が導入された
 interface InterfaceA { method1() : void; }; class ClassA implements InterfaceA { method1() : void{ console.log("ClassA - method1()"); } }; • インターフェースと実装を分離することができる。

10. TSって素晴らしい！② 10 アプリ開発者が意識せずとも、フレームワーク側で実装を切り替えられたり
 実装1 C 実装3 C 実装2 C インターフェース I 参考: TypeScript で学ぶインターフェース (抽象型) https://www.forcia.com/blog/001547.html
11. まとめ 11 一度型の恩恵を受けると、型のない生活には戻れません
 • 型は最低限のテストである
 • 型を利用することで実装を隠蔽できる

12. EOF