Perl歴約10年のエンジニアがフルスタックTypeScriptに出会ってみた

Transcript

1. 本資料は、トグルホールディングス株式会社に許可なく複製・転載をしないようお願いします。 Perl歴約10年のエンジニアが フルスタック TypeScriptに 出会ってみた
2. © toggle holdings inc. 2
 papix（パピックス） 所属 2025/01〜 トグルホールディングス株式会社 出⾝ Perl界隈 - （⼀社）JPA理事 - 湘南.pm / 湘.なんか ⾸魁 趣味 旅⾏、料理 SNS X: @__papix__ / id:papix
3. © toggle holdings inc. 3
 本⽇の式次第 • ⼆部構成です • 第⼀部: papix（10分） ◦ トグルホールディングスのご紹介 ◦ Perl歴約10年のエンジニアが フルスタックTypeScriptに出会ってみた • 第⼆部: ⽊下（10分） ◦ TS未経験から3ヶ⽉で新機能開発した話
4. © toggle holdings inc. 4
 トグルホールディングスの ご紹介
5. © toggle holdings inc. 5 わたしたちのパーパス 新しい何かをつくる。 そこに宿る喜びを、わたしたちは愛しています。 新しい何かによって、 古い産業を、硬直化した社会を、 そして、人々の生活をかえられる。 その可能性を、わたしたちは信じています。 この愛と可能性を体現する中で、わたしたち自身もかわっていく。 そしてまた、つくって、かえて、かわっていく。 わたしたちは、この挑戦を不断に続けていきます。 つくる・かえる・かわる PURPOSE
6. 不動産開発に、⾰新的な業務インフラを 1. 開発余地のある⼟地探索 2. ⼟地‧道路測量 3. 建物企画 4. 相場分析‧投資ｼﾐｭﾚｰｼｮﾝ 5. 販促資料 (BIM) 6. 詳細設計‧建築確認
7. © toggle holdings inc. 7
 デベNAVI • https://tsukuru-ai.co.jp/deve-navi
8. © toggle holdings inc. 8

9. © toggle holdings inc. 9
 デベNAVIの構成 デベNAVI Frontend デベNAVI Backend PlanetScaleなどSaaS 各種API 他チームが開発
10. © toggle holdings inc. 10
 https://engineer.toggle.co.jp/
11. © toggle holdings inc. 11
 Perl歴約10年のエンジニアが フルスタックTypeScriptに出会ってみた
12. © toggle holdings inc. 12
 これまでのあらすじ • ⼤学に⼊ってC⾔語、Javaなどを学ぶ • 研究室でPerlに出会う（出会ってしまう） • 以後、2社で約10年Perl主体でWebサービス開発 ◦ フロントエンド（TypeScript）は⽚⼿間程度 • 2025年1⽉、トグルホールディングス⼊社 ◦ 突如「フルスタックTypeScript」の世界へ…
13. © toggle holdings inc. 13
 Perl？ • 動的型付け⾔語 ◦ ＝型がない！！！！！！！！ ◦ 数値や⽂字列は「よしな」に扱われる • 内部的に型はあるが、ユーザーは意識せずに使える my $number = 1; my $string = $number . " + 1 = 2"; print $string; # => "1 + 1 = 2"
14. © toggle holdings inc. 14
 Perl？ • 「classないんでしょ」、「try/catchないんでしょ」… ◦ 着実に進化しているんですよ！ ▪ 5.38.0でclass構⽂が追加 ▪ 5.40.0でtry/catch構⽂が安定版に • 「スイスアーミーナイフ」を作る道具としてのPerlは令和に なっても以前便利と思います
15. © toggle holdings inc. 15
 閑話休題
16. © toggle holdings inc. 16
 フルスタックTypeScriptに出会ってみた • 「型がない」世界から「型がある」世界へ… ◦ まさに「異世界転⽣」 • しかし、⾼速にキャッチアップして成果を出せた ◦ その理由は…？ ▪ 会社‧チーム: 環境構築の⾼速化‧シンプル化 ▪ 個⼈: AI技術の活⽤
17. © toggle holdings inc. 17
 環境構築の⾼速化‧シンプル化
18. © toggle holdings inc. 18
 環境構築の⾼速化‧シンプル化 • ⼊社して最初の壁が「環境構築」 ◦ 必須ツールの導⼊、ライブラリのインストール、データ ベースの初期化‧初期データ投⼊… ◦ ⼿順書があっても、誤っていたり古かったりすることも… • ここを短縮できれば、⾼速にプロダクト開発に参加できる ◦ より素早くドメインの理解に進める ◦ より素早くコードを書いて、成果を出せる
19. © toggle holdings inc. 19
 環境構築の⾼速化‧シンプル化 • 環境構築の⾼速化‧シンプル化の鍵 ◦ GitHub Codespaces ◦ PlanetScale
20. © toggle holdings inc. 20
 GitHub Codespaces • GitHubが提供する開発環境 ◦ GitHubからボタンをポチるだけで、即座に開発環境が⽴ち 上がり、VSCodeから操作できる • → 必須ツールの導⼊が不要になる！ ◦ ⼿順もシンプルになる（ボタンを押すだけ） • GitHub Codespacesでしか開発できない、ということはない ◦ 従来通り、⾃分のマシンに開発環境を構築することも可能
21. © toggle holdings inc. 21
 PlanetScale • フルマネージドMySQL • ブランチ機能がある！ ◦ 例: mainからdevelを⽤意する ▪ develはmainから独⽴していて、schemaの変更やデー タの追加‧削除ができる ▪ 作ったdevelブランチは、作った時点のmainブランチ のレコードが格納されている
22. © toggle holdings inc. 22

23. © toggle holdings inc. 23
 PlanetScale • 更に、schemaのマージも可能！ ◦ develの変更をmainに取り込む、など
24. © toggle holdings inc. 24

25. © toggle holdings inc. 25
 PlanetScale • GitHubのブランチごとにPlanetScaleのブランチを作る • → データベースの初期化‧初期データ投⼊を任せられる ◦ ⼿順もシンプルになる（コマンドを⼊⼒するだけ） • 万が⼀、データベースの中⾝がおかしくなっても、削除して作 り直せばOK！というのも嬉しいポイント
26. © toggle holdings inc. 26
 AI技術の活⽤
27. © toggle holdings inc. 27
 AI技術の活⽤ • 新しい⾔語を学ぶとき、過去の経験は活きる ◦ ＝TypeScriptを学ぶにあたって、Perlの経験を活かす • 「Perlでならこう書く、ではTypeScriptなら…？」 ◦ →AI（ChatGPT）に聞こう！！！
28. © toggle holdings inc. 28

29. © toggle holdings inc. 29

30. © toggle holdings inc. 30

31. © toggle holdings inc. 31

32. © toggle holdings inc. 32
 AI技術の活⽤ • まずはPerlとTypeScriptの知識を紐づけて、取っ掛かりを作る ◦ 「Perlのアレは、TypeScriptのコレなんだな…」 • 慣れると最初からTypeScriptのことを考えて書けるようになる • Perlでもちゃんと教えてくれるので、「他の⾔語から TypeScriptへの⼊⾨」でも確実に使えるテクニック（？）
33. © toggle holdings inc. 33
 まとめ
34. © toggle holdings inc. 34
 まとめ • フルスタックTypeScriptを⾼速にキャッチアップする施策 ◦ 会社‧チーム: 環境構築の⾼速化‧シンプル化 ◦ 個⼈: AI技術の活⽤ • 感想 ◦ 「フルスタックTypeScript」だったので、新たに学ぶ⾔語 が1つで済んだ、という点もプラスに感じた ◦ 最初の成果に⾄るまでのインプットが最⼩限で済んだ
35. © toggle holdings inc. 35
 ご清聴ありがとうございました！