ニュースレターつき会員制メディア作成サービス Medy の開発において得た TypeScript の知見を小規模チームによるアプリケーションの構築に着目してお伝えします。

1. Title
yyyy/mm/dd
小規模チームで TypeScript を選んだ理由
2021/12/17 Harajuku.ts Meetup #1

2. Spectra, Inc.
Spectra, Inc.
自己紹介
2
● 山本 達也
● 株式会社Spectra 取締役CTO
● ERP ベンダー → 起業 → 売却したりいろいろ → 現在

3. Spectra, Inc.
Agenda
● どうして TypeScript を使うのか
● TypeScript の型システムを活用する
● Dependabot とうまく付き合う
3

4. Spectra, Inc.
前提
● 小規模チームの定義
○ 基本的に 1 人で Frontend ~ Backend & Infra まで
見なきゃいけないくらいのチーム（？？）を想定しています
4

5. Spectra, Inc.
Spectra, Inc.
どうして TypeScript を使うのか
5
01

6. Spectra, Inc.
Spectra, Inc.
どうして TypeScript を使うのか
6
メンテナビリティ
コードの量
プロダクト誕生からの経過時間
コードベースは大きくなるほどメンテナビリティは下がる
メンテナビリティの下降スピードを緩やかにしたい

7. Spectra, Inc.
Spectra, Inc.
どうして TypeScript を使うのか
7
ランタイムエラーが
起こり得るコード
builder
ビルドエラー
エラーの早期発見ができる
※「型」で排除できないエラーパターンも
当然あるので注意
builder
ビルドOK
適切なコード
※変更箇所、内容によっては
最低限の品質担保が
できているため
自動マージを活用
`compilerOptions.strict = true` を使う！

8. Spectra, Inc.
メンテナビリティの維持が大事！

9. Spectra, Inc.
Spectra, Inc.
TypeScript の型システムを活用する
9
02

10. Spectra, Inc.
Spectra, Inc.
TypeScript の型システムを活用する
10
型の恩恵は受けたいけど、面倒なので型は書きたくない！

11. Spectra, Inc.
Spectra, Inc.
TypeScript の型システムを活用する
11
● TypeScript には型を便利に使う手段がいろいろ用意されている
○ Utility Types
■ ある型を別の型定義とすることができる
○ Indexed Access Types
■ ある型のあるフィールドの型を参照することができる
○ など
https://www.typescriptlang.org/docs/handbook/utility-types.html
https://www.typescriptlang.org/docs/handbook/2/indexed-access-types.html

12. Spectra, Inc.
Spectra, Inc.
TypeScript の型システムを活用する
12
● TypeScript Handbook の Type Manipulation の章は非常に有用なので
要チェック
● GraphQL Code Generator などのコード生成ソリューションとの
組み合わせが便利
○ e.g. 生成した types をもとに新たな型をつくる
https://www.typescriptlang.org/docs/handbook/2/types-from-types.html

13. Spectra, Inc.
Spectra, Inc.
Dependabot とうまく付き合う
13
03

14. Spectra, Inc.
Spectra, Inc.
Dependabot とうまく付き合う
14
依存ライブラリの改善やバグ修正を取り込みたいけど
面倒くさい！

15. Spectra, Inc.
Spectra, Inc.
Dependabot とうまく付き合う
15
● Dependabot を利用して依存ライブラリを最新に維持する
● Dependabot
○ GitHub が買収したライブラリアップグレードの
PR 自動生成ソリューション
https://github.com/dependabot/dependabot-core
https://docs.github.com/ja/code-security/supply-chain-security/keeping-your-dependencies-updated-a
utomatically/about-dependabot-version-updates

16. Spectra, Inc.
Spectra, Inc.
Dependabot とうまく付き合う
16
1. Dependabot がアップデート PR を作成する
GitHub Actions
2. GitHub Actions で検証 3. GitHub Actions でマージ
GitHub Actions と組み合わせて自動マージができる
とくに devDependencies は自動マージしやすい
https://docs.github.com/ja/code-security/supply-chain-security/keeping-your-dependencies-updated-automatically/auto
mating-dependabot-with-github-actions#enable-auto-merge-on-a-pull-request

17. Spectra, Inc.
Spectra, Inc.
Dependabot とうまく付き合う
17
● Linter や Tester
○ 前回の結果と同じ結果（= エラーなし）が得られる場合は
自動でマージして問題ない場合が多い

18. Spectra, Inc.
Spectra, Inc.
Dependabot とうまく付き合う
18
● Definitely Typed
○ > The repository for high quality TypeScript type definitions.
○ @types/hoge なやつ
○ 対応するライブラリ本体のマイナーバージョンまでと対応関係が
ある
■ = パッチバージョンの更新はライブラリ本体の更新とは
関係ないためビルドが通るなら更新してよい場合が多い
https://github.com/DefinitelyTyped/DefinitelyTyped

19. Spectra, Inc.
Spectra, Inc.
Dependabot とうまく付き合う
19
● Definitely Typed
○ 更新する意味ある？？
■ YES
■ 型定義のバグ修正や、より使いやすい型への変更が
入ることがある