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

Shinjuku.ts#1 発表資料

Transcript

1. フォルシアのフレームワークとTypescript

   籏野 拓
   
2022.11.15 @Shinjuku.ts

   

   View Slide

2. Speaker
   ● 籏野 拓 (Taku Hatano)
   ● ソフトウェアエンジニア@フォルシア株式会社
   ○ webサイトの検索ページ(受注/SaaS)
   ○ 社内のお役立ちツール開発など
   ● 活動領域
   2
   

   View Slide

3. フォルシアのWebフレームワーク変遷
   aaaa
   3
   第一世代 第二世代 第三世代
   - 世にWebフレームワークがない時代
   ~CommonJSの時代
   - モジュールのrequireなどを自作
   - 独自の仕組み/書き方が多い
   - 非同期の処理なんかも作られていてすごい
   2018

   2010年代初期

   2000年代初期

   

   View Slide

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

   2010年代初期

   2000年代初期

   

   View Slide

5. フォルシアのWebフレームワーク変遷
   aaaa
   5
   第一世代 第二世代 第三世代
   入社

   への変遷で体験した「TSって素晴らしい！」を紹介

   2018

   2010年代初期

   2000年代初期

   

   View Slide

6. 当時は学習コストに対する懸念があった模様。。？

   →BUT. 学習コスト以上のメリットが間違いなくある！

   Typescript(Node.js)の選定理由
   6
   ● 静的型付けが可能

   ● 利用者/ライブラリの多さ

   ● client/serverのコードを共有できることによる生産性

   

   View Slide

7. TSって素晴らしい！①
   7
   リクエストパラメータに(限らず)型を付けられる

   var params = request.params;
   // ...????
   ● どんな値を持つのかわからない

   ○ 初めてジョインするプロジェクトでは地獄。。。

   ● プログラムの途中で自由に書き換わる

   ○ 気づいたら数値→文字列に変わっていることもよくある。。。

   

   View Slide

8. TSって素晴らしい！①
   8
   const params: APIParams = request.params;
   params.
   ● 可読性がぐんと高くなる

   ○ エディタの補完機能が強くなったり

   ● 意図せぬ型を代入しようとすると怒ってくれる

   

   ● OpenAPI定義と組み合わせて型やコードを自動生成すると

   さらに強固に型で守ることが可能

   リクエストパラメータに(限らず)型を付けられる

   

   View Slide

9. TSって素晴らしい！②
   9
   インターフェースの概念が導入された

   interface InterfaceA {
   method1() : void;
   };
   class ClassA implements InterfaceA {
   method1() : void{
   console.log("ClassA - method1()");
   }
   };
   ● インターフェースと実装を分離することができる。

   

   View Slide

10. TSって素晴らしい！②
    10
    アプリ開発者が意識せずとも、フレームワーク側で実装を切り替えられたり

    実装1
    C
    実装3
    C
    実装2
    C
    インターフェース
    I
    参考: TypeScript で学ぶインターフェース (抽象型)
    https://www.forcia.com/blog/001547.html
    

    View Slide

11. まとめ
    11
    一度型の恩恵を受けると、型のない生活には戻れません

    ● 型は最低限のテストである

    ● 型を利用することで実装を隠蔽できる

    

    View Slide

12. EOF
    

    View Slide