フォルシアのフレームワークとTypeScript
by
forcia_dev_pr
×
Copy
Open
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Slide 1
Slide 1 text
フォルシアのフレームワークとTypescript 籏野 拓 2022.11.15 @Shinjuku.ts
Slide 2
Slide 2 text
Speaker ● 籏野 拓 (Taku Hatano) ● ソフトウェアエンジニア@フォルシア株式会社 ○ webサイトの検索ページ(受注/SaaS) ○ 社内のお役立ちツール開発など ● 活動領域 2
Slide 3
Slide 3 text
フォルシアのWebフレームワーク変遷 aaaa 3 第一世代 第二世代 第三世代 - 世にWebフレームワークがない時代 ~CommonJSの時代 - モジュールのrequireなどを自作 - 独自の仕組み/書き方が多い - 非同期の処理なんかも作られていてすごい 2018 2010年代初期 2000年代初期
Slide 4
Slide 4 text
フォルシアのWebフレームワーク変遷 aaaa 4 第一世代 第二世代 第三世代 - 世の中に便利なフレームワークがかなり広がった - webフレームワークを自作することに優位性はない - Node.jsのモジュールを組み合わせて利用していく 2018 2010年代初期 2000年代初期
Slide 5
Slide 5 text
フォルシアのWebフレームワーク変遷 aaaa 5 第一世代 第二世代 第三世代 入社 への変遷で体験した「TSって素晴らしい!」を紹介 2018 2010年代初期 2000年代初期
Slide 6
Slide 6 text
当時は学習コストに対する懸念があった模様。。? →BUT. 学習コスト以上のメリットが間違いなくある! Typescript(Node.js)の選定理由 6 ● 静的型付けが可能 ● 利用者/ライブラリの多さ ● client/serverのコードを共有できることによる生産性
Slide 7
Slide 7 text
TSって素晴らしい!① 7 リクエストパラメータに(限らず)型を付けられる var params = request.params; // ...???? ● どんな値を持つのかわからない ○ 初めてジョインするプロジェクトでは地獄。。。 ● プログラムの途中で自由に書き換わる ○ 気づいたら数値→文字列に変わっていることもよくある。。。
Slide 8
Slide 8 text
TSって素晴らしい!① 8 const params: APIParams = request.params; params. ● 可読性がぐんと高くなる ○ エディタの補完機能が強くなったり ● 意図せぬ型を代入しようとすると怒ってくれる ● OpenAPI定義と組み合わせて型やコードを自動生成すると さらに強固に型で守ることが可能 リクエストパラメータに(限らず)型を付けられる
Slide 9
Slide 9 text
TSって素晴らしい!② 9 インターフェースの概念が導入された interface InterfaceA { method1() : void; }; class ClassA implements InterfaceA { method1() : void{ console.log("ClassA - method1()"); } }; ● インターフェースと実装を分離することができる。
Slide 10
Slide 10 text
TSって素晴らしい!② 10 アプリ開発者が意識せずとも、フレームワーク側で実装を切り替えられたり 実装1 C 実装3 C 実装2 C インターフェース I 参考: TypeScript で学ぶインターフェース (抽象型) https://www.forcia.com/blog/001547.html
Slide 11
Slide 11 text
まとめ 11 一度型の恩恵を受けると、型のない生活には戻れません ● 型は最低限のテストである ● 型を利用することで実装を隠蔽できる
Slide 12
Slide 12 text
EOF