Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

forcia_dev_pr
December 07, 2022
51

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

Shinjuku.ts#1 発表資料

forcia_dev_pr

December 07, 2022
Tweet

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