管理画面SaaS

ベースマキナにおける

TypeScriptコードベース改善活動の紹介

2024-11-16 TSKaigi Kansai 2024

株式会社ベースマキナ 福田健人

管理画面SaaSとは？

管理画面SaaSとは？

こんな社内オペレーションはありませんか？

• ID: XXXのユーザーアカウントのお試し期間を2週間追加してください
• Xカテゴリの商品の倉庫ごとの在庫数を一覧できますか？
• 今月も料金プランのマスターデータを変更したいです。�Excelの内容に沿って更新クエリの作成と実行お願いします。

管理画面SaaSとは？

こんなお困りごとはありませんか？

• 本体の仕様変更に管理画面が追従できていない
• 画面を作り込む工数がないので操作ミスが起きがち
• オペレーションの証跡保存やレビュー体制が確立できていない
• そもそも管理画面がなく、開発チームが随時DBにクエリを流している

ベースマキナで作りませんか？

管理画面SaaSとは？

ベースマキナで作りませんか？

管理画面SaaSとは？

弊社メンバーの登壇予定

ベースマキナの

tsconfig.json strict化の歴史

2023年 6月頭 strict: false

TypeScriptコードベース改善活動の紹介

2023年 9月末 strictest rules に近づく

TypeScriptコードベース改善活動の紹介

2023年 9月末 strictest rules に近づく

https://github.com/tsconfig/bases

改善方法

毎週のペアプロタイム

TypeScriptコードベース改善活動の紹介

• 1時間のペアプロを週2セットやっている
• 基本的にコードベースの改善活動をする

コードベース改善PRの粒度

TypeScriptコードベース改善活動の紹介

• 手元でtsconfig.jsonのオプションを有効にする
• エラーが出る箇所を時間内にできるだけ直す
• できたところまでPRを出してマージする
• すべてのエラーが直せたらオプションを有効にしたtsconfig.jsonをマージする

改善過程の紹介

全15個のPRで完了!!

有効にできていなかったオプションの例

noImplicitAny: true

TypeScriptコードベース改善活動の紹介

• どんなもの？
• 型推論できず暗黙的にany型となってしまったらエラーになる
• 何を防ぐ？
• 型チェックされていると思っていたのにany型になっていて実行時エラー発生
• どう直す？
• any型になっている箇所に型をつけて回る

noUncheckedIndexedAccess: true

TypeScriptコードベース改善活動の紹介

• どんなもの？
• 配列の範囲外の要素がundefinedになる挙動を型推論で考慮する
• 何を防ぐ？
• const numbers = [0, 1, 2]; numbers[3] // 実際はundefinedだがnumber型と推論されてしまう
• どう直す？
• 配列のインデックスアクセスを避ける
• またはアクセスする前に要素の存在を確認する

まとめ

TypeScriptコードベース改善活動の紹介

• 週次でコードベースを改善する活動をしています
• その一環でtsconfig.jsonで有効にできていなかったオプションを�設定しました
• より安心・安全に開発できるようになりました

ベースマキナは

ブースを出展しています!!