TS未経験から ３ヶ月で 新機能開発した話

Transcript

1. 本資料は、トグルホールディングス株式会社に許可なく複製・転載をしないようお願いします。 TS未経験から ３ヶ⽉で 新機能開発した話
2. © toggle holdings inc. 2
 ⽊下 隼 所属 2024/09〜2025/3 インターン 2025/04〜現在 トグルホールディングス 株式会社 趣味 競⾺、アニメ鑑賞、料理 X @hk10_it
3. © toggle holdings inc. 3
 タイトル 本⽇話す内容 • インターンで新機能開発まで⾏った体験談 • フルスタックTSのメリット ◦ 学びやすい！ ◦ 全体像の把握がしやすい！ ◦ 型定義が怖くない！
4. © toggle holdings inc. 4
 学びやすい！
5. © toggle holdings inc. 5
 学びやすい！ 私の経験（インターン前のスキルセット） プログラミング経験：９年 • ⼤学/修⼠：Python（６年） • ⾼校⽣以前：Unity(C#)、その他基礎レベル • Web系 ◦ フロントエンド（HTML/CSS/JS）：授業/独学レベル ◦ TypeScript：未経験 ▪ React, Hono, Prisma, Zod … ？
6. © toggle holdings inc. 6
 学びやすい！ インターンでの稼働時間 • 稼働時間：3 h/⽇（15 h/週） • 限られた時間の中で技術的なキャッチアップをしな がら開発を進める必要
7. © toggle holdings inc. 7
 学びやすい！ 最初のタスク フロントエンドの簡単な改修 (ボタンのデザイン変更)
8. © toggle holdings inc. 8
 学びやすい！ 1営業⽇でプルリクを作成 🚀わずか 1 営業⽇で 🎉 初めてのPull Requestを作成！ 🎉
9. © toggle holdings inc. 9
 学びやすい！ なぜ、1営業⽇で出せたのか？ 1/3 環境構築がとても早く終了した • GitHub Codespaceの起動 • セットアップ⽤のコマンドを実⾏
10. © toggle holdings inc. 10
 学びやすい！ なぜ、1営業⽇で出せたのか？ 2/3 TypeScriptのキャッチアップがしやすかった • 似ている機能のコードを参考に編集 • TypeScriptの構⽂をスムーズに理解 • HTML/CSS/JSを少し知っていてReactが 理解しやすい
11. © toggle holdings inc. 11
 学びやすい！ なぜ、1営業⽇で出せたのか？ 3/3 ホットリローディングによる試してみるができる ➔ この処理をコメントアウトしたら、どうなるか？
12. © toggle holdings inc. 12
 学びやすい！ ２つ⽬のタスク バックエンドの改修 「タグ更新時に更新⽇時が変更されない」 タグとは？ →物件の管理で物件毎に設定できるもの
13. © toggle holdings inc. 13
 学びやすい！ 2つ⽬のタスク バックエンドの改修 「タグ更新時に更新⽇時が変更されない」 更新されていないとは？ →タグを編集しても更新⽇時が作成⽇のままになっている
14. © toggle holdings inc. 14
 学びやすい！ バックエンドの経験ゼロでも壁は低かった 最⼤の要因：⾔語が同じTypeScript！ • 構⽂の学習コストが、実質ゼロ • Hono、Prismaの学習に集中できた ❏ Hono：TypeScriptのバックエンドのフレームワー ク ❏ Prisma：TypeScriptでデータベースの操作を型安 全に⾏う
15. © toggle holdings inc. 15
 学びやすい！ フルスタックTypeScriptが学びやすいと感じた部分！ • 環境構築が早い • Web開発の基礎知識があればすぐに キャッチアップ可能 • ホットリローディングによるお試しができる • フロントエンドとバックエンドの スイッチングコストが低い
16. © toggle holdings inc. 16
 全体像の把握がしやすい！
17. © toggle holdings inc. 17
 全体像の把握がしやすい！ 1-2⽉の開発タスク：こんな課題に取り組みました • PDF出⼒時の記載事項が間違っているバグ • 権限のチェック漏れでタグを削除できるバグ • タグ削除時のエラー表⽰が2つ出現する • ボタンが初期状態で活性化された状態になっている • 道路幅の変更によってバリデーションエラーが発⽣
18. © toggle holdings inc. 18
 全体像の把握がしやすい！ 課題全体を通じて意識したこと 解決にはどこにバグが潜んでい るかの特定が必要 ➔ レイヤードアーキテクチャを 意識 ➔ 全てTypeScriptで確認ができ るため、特定がしやすい
19. © toggle holdings inc. 19
 全体像の把握がしやすい！ 1-2⽉の開発タスク：こんな課題に取り組みました • PDF出⼒時の記載事項が間違っているバグ • 権限のチェック漏れでタグを削除できるバグ • タグ削除時のエラー表⽰が2つ出現する • ボタンが初期状態で活性化された状態になっている • 道路幅の変更によってバリデーションエラーが発⽣
20. © toggle holdings inc. 20
 全体像の把握がしやすい！ 「PDF出⼒時の記載事項が間違っているバグ」の場合(1/2) • フロントエンドのボタンコンポーネントから、呼び 出し関数などを追っていき、バックエンドの処理へ ‧‧‧ バック エンド
21. © toggle holdings inc. 21
 全体像の把握がしやすい！ 「PDF出⼒時の記載事項が間違っているバグ」の場合(2/2) • バックエンド部分も、TypeScriptのままなので、そ のまま概要部分を少し編集するだけで修正完了 ➔ 全てTypeScriptで書かれていると、全体を⾒通せる ためバグ修正までが早い
22. © toggle holdings inc. 22
 全体像の把握がしやすい！ 「権限のチェック漏れでタグを削除できるバグ」の場合 バグ再現→原因の仮説→修正の検証までのやりやすさ • ⼀部の条件下で権限チェックが漏れてタグが削除できてしまう • 仮説から、バグ原因の特定、修正までが早く、ミニマム ➔ 全てTypeScriptで書かれていると、全体を⾒通せる ためバグ修正までが早い
23. © toggle holdings inc. 23
 型定義が怖くない！
24. © toggle holdings inc. 24
 型定義が怖くない！ ３ヶ⽉⽬の挑戦：新機能開発 🌟集⼤成タスク：ユーザー利⽤状況の集計‧表⽰機能 担当範囲: • 要件理解 • バックエンドの実装 • フロントエンドの実装 • 中間ブランチへのマージ
25. © toggle holdings inc. 25
 型定義が怖くない どんな機能か？ ユーザの利⽤状況（物件登録数‧VC実⾏数）を集計
26. © toggle holdings inc. 26
 型定義が怖くない！ どんな機能か？ ユーザの利⽤状況（物件登録数‧VC実⾏数）を集計 VC実⾏数とは？ ➔ VC（ボリュームチェック） を実⾏した回数
27. © toggle holdings inc. 27
 型定義が怖くない！ タスクをサブタスクに分割 • 物件登録数取得のバックエンド実装 • VC実⾏数を取得するバックエンド実装 • 画⾯の実装 • 年度‧部⾨での絞り込み機能実装
28. © toggle holdings inc. 28
 型定義が怖くない！ バックエンドの実装 できるだけservice層には処理を 追加しない • 変更場所が少ない⽅が良いと判断 ➔ transaction層に既存処理を 使ってデータ取得処理を記述
29. © toggle holdings inc. 29
 型定義が怖くない！ API境界が怖く無く開発が進む Zodによるスキーマ定義と、型推論 • serviceから渡されるデータの型がちゃんと決まっている • 持っているプロパティが分かるので、使えるメソッドが分かる ➔ transactionに⼀つのメソッドを追加するだけで 済む実装ができた
30. © toggle holdings inc. 30
 型定義が怖くない！ 最終課題の結果... 🎉最後まで実装完了！🎉
31. © toggle holdings inc. 31
 まとめ
32. © toggle holdings inc. 32
 まとめ 私の３ヶ⽉とフルスタックTSの可能性 体験して分かった！ フルスタックTSは... • 学びやすい！ ◦ FE、BEで同じ⾔語のため学習コストが低い • 全体の把握がしやすい！ ◦ バグなどの箇所でどこが問題かを発⾒しやすい • 型定義が⼀貫していて怖くない！ ◦ API境界でもzodによる型推論によって怖くない
33. © toggle holdings inc. 33
 ご清聴ありがとうございました