Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Perl歴約10年のエンジニアがフルスタックTypeScriptに出会ってみた
Search
papix
April 22, 2025
Technology
1
640
Perl歴約10年のエンジニアがフルスタックTypeScriptに出会ってみた
papix
April 22, 2025
Tweet
Share
More Decks by papix
See All by papix
Houtou.pm #1
papix
0
1.4k
YAPC::Kyotoの「全て」 / All of "YAPC::Kyoto"
papix
0
1.6k
イベントの中の人 / Inside the Events
papix
0
300
2022年に始めるPerlでWebサービス開発(趣味)
papix
0
560
ワーケーションに関する考察
papix
3
2.2k
(今更)Amplifyさっくり体験
papix
0
880
はてなにおけるGitHub Actions活用事例 / GitHub Actions in Hatena
papix
0
2.5k
ミススペルを発見するmisspellのご紹介 / Introduce misspell
papix
0
1.2k
「知らなかった」を聞きに行く 〜海外カンファレンス参加のススメ〜 / builderscon 2019
papix
0
350
Other Decks in Technology
See All in Technology
AI時代、“平均値”ではいられない
uhyo
8
2.2k
OpenTelemetry が拡げる Gemini CLI の可観測性
phaya72
2
1.9k
アウトプットから始めるOSSコントリビューション 〜eslint-plugin-vueの場合〜 #vuefes
bengo4com
3
410
「魔法少女まどか☆マギカ Magia Exedra」におけるバックエンドの技術選定
gree_tech
PRO
0
110
Azureコストと向き合った、4年半のリアル / Four and a half years of dealing with Azure costs
aeonpeople
1
250
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
14k
Introduction to Bill One Development Engineer
sansan33
PRO
0
300
難しいセキュリティ用語をわかりやすくしてみた
yuta3110
0
370
だいたい分かった気になる 『SREの知識地図』 / introduction-to-sre-knowledge-map-book
katsuhisa91
PRO
3
1.3k
From Natural Language to K8s Operations: The MCP Architecture and Practice of kubectl-ai
appleboy
0
110
SCONE - 動画配信の帯域を最適化する新プロトコル
kazuho
1
320
映像エッジAIにおけるNode-RED活用事例
emirmatsui
0
140
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
Product Roadmaps are Hard
iamctodd
PRO
55
11k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
Being A Developer After 40
akosma
91
590k
Rails Girls Zürich Keynote
gr2m
95
14k
Side Projects
sachag
455
43k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
Transcript
本資料は、トグルホールディングス株式会社に許可なく複製・転載をしないようお願いします。 Perl歴約10年のエンジニアが フルスタック TypeScriptに 出会ってみた
© toggle holdings inc. 2 papix(パピックス) 所属 2025/01〜 トグルホールディングス株式会社 出⾝
Perl界隈 - (⼀社)JPA理事 - 湘南.pm / 湘.なんか ⾸魁 趣味 旅⾏、料理 SNS X: @__papix__ / id:papix
© toggle holdings inc. 3 本⽇の式次第 • ⼆部構成です • 第⼀部:
papix(10分) ◦ トグルホールディングスのご紹介 ◦ Perl歴約10年のエンジニアが フルスタックTypeScriptに出会ってみた • 第⼆部: ⽊下(10分) ◦ TS未経験から3ヶ⽉で新機能開発した話
© toggle holdings inc. 4 トグルホールディングスの ご紹介
© toggle holdings inc. 5 わたしたちのパーパス 新しい何かをつくる。 そこに宿る喜びを、わたしたちは愛しています。 新しい何かによって、 古い産業を、硬直化した社会を、
そして、人々の生活をかえられる。 その可能性を、わたしたちは信じています。 この愛と可能性を体現する中で、わたしたち自身もかわっていく。 そしてまた、つくって、かえて、かわっていく。 わたしたちは、この挑戦を不断に続けていきます。 つくる・かえる・かわる PURPOSE
不動産開発に、⾰新的な業務インフラを 1. 開発余地のある⼟地探索 2. ⼟地‧道路測量 3. 建物企画 4. 相場分析‧投資シミュレーション 5.
販促資料 (BIM) 6. 詳細設計‧建築確認
© toggle holdings inc. 7 デベNAVI • https://tsukuru-ai.co.jp/deve-navi
© toggle holdings inc. 8
© toggle holdings inc. 9 デベNAVIの構成 デベNAVI Frontend デベNAVI Backend
PlanetScaleなどSaaS 各種API 他チームが開発
© toggle holdings inc. 10 https://engineer.toggle.co.jp/
© toggle holdings inc. 11 Perl歴約10年のエンジニアが フルスタックTypeScriptに出会ってみた
© toggle holdings inc. 12 これまでのあらすじ • ⼤学に⼊ってC⾔語、Javaなどを学ぶ • 研究室でPerlに出会う(出会ってしまう)
• 以後、2社で約10年Perl主体でWebサービス開発 ◦ フロントエンド(TypeScript)は⽚⼿間程度 • 2025年1⽉、トグルホールディングス⼊社 ◦ 突如「フルスタックTypeScript」の世界へ…
© toggle holdings inc. 13 Perl? • 動的型付け⾔語 ◦ =型がない!!!!!!!!
◦ 数値や⽂字列は「よしな」に扱われる • 内部的に型はあるが、ユーザーは意識せずに使える my $number = 1; my $string = $number . " + 1 = 2"; print $string; # => "1 + 1 = 2"
© toggle holdings inc. 14 Perl? • 「classないんでしょ」、「try/catchないんでしょ」… ◦ 着実に進化しているんですよ!
▪ 5.38.0でclass構⽂が追加 ▪ 5.40.0でtry/catch構⽂が安定版に • 「スイスアーミーナイフ」を作る道具としてのPerlは令和に なっても以前便利と思います
© toggle holdings inc. 15 閑話休題
© toggle holdings inc. 16 フルスタックTypeScriptに出会ってみた • 「型がない」世界から「型がある」世界へ… ◦ まさに「異世界転⽣」
• しかし、⾼速にキャッチアップして成果を出せた ◦ その理由は…? ▪ 会社‧チーム: 環境構築の⾼速化‧シンプル化 ▪ 個⼈: AI技術の活⽤
© toggle holdings inc. 17 環境構築の⾼速化‧シンプル化
© toggle holdings inc. 18 環境構築の⾼速化‧シンプル化 • ⼊社して最初の壁が「環境構築」 ◦ 必須ツールの導⼊、ライブラリのインストール、データ
ベースの初期化‧初期データ投⼊… ◦ ⼿順書があっても、誤っていたり古かったりすることも… • ここを短縮できれば、⾼速にプロダクト開発に参加できる ◦ より素早くドメインの理解に進める ◦ より素早くコードを書いて、成果を出せる
© toggle holdings inc. 19 環境構築の⾼速化‧シンプル化 • 環境構築の⾼速化‧シンプル化の鍵 ◦ GitHub
Codespaces ◦ PlanetScale
© toggle holdings inc. 20 GitHub Codespaces • GitHubが提供する開発環境 ◦
GitHubからボタンをポチるだけで、即座に開発環境が⽴ち 上がり、VSCodeから操作できる • → 必須ツールの導⼊が不要になる! ◦ ⼿順もシンプルになる(ボタンを押すだけ) • GitHub Codespacesでしか開発できない、ということはない ◦ 従来通り、⾃分のマシンに開発環境を構築することも可能
© toggle holdings inc. 21 PlanetScale • フルマネージドMySQL • ブランチ機能がある!
◦ 例: mainからdevelを⽤意する ▪ develはmainから独⽴していて、schemaの変更やデー タの追加‧削除ができる ▪ 作ったdevelブランチは、作った時点のmainブランチ のレコードが格納されている
© toggle holdings inc. 22
© toggle holdings inc. 23 PlanetScale • 更に、schemaのマージも可能! ◦ develの変更をmainに取り込む、など
© toggle holdings inc. 24
© toggle holdings inc. 25 PlanetScale • GitHubのブランチごとにPlanetScaleのブランチを作る • →
データベースの初期化‧初期データ投⼊を任せられる ◦ ⼿順もシンプルになる(コマンドを⼊⼒するだけ) • 万が⼀、データベースの中⾝がおかしくなっても、削除して作 り直せばOK!というのも嬉しいポイント
© toggle holdings inc. 26 AI技術の活⽤
© toggle holdings inc. 27 AI技術の活⽤ • 新しい⾔語を学ぶとき、過去の経験は活きる ◦ =TypeScriptを学ぶにあたって、Perlの経験を活かす
• 「Perlでならこう書く、ではTypeScriptなら…?」 ◦ →AI(ChatGPT)に聞こう!!!
© toggle holdings inc. 28
© toggle holdings inc. 29
© toggle holdings inc. 30
© toggle holdings inc. 31
© toggle holdings inc. 32 AI技術の活⽤ • まずはPerlとTypeScriptの知識を紐づけて、取っ掛かりを作る ◦ 「Perlのアレは、TypeScriptのコレなんだな…」
• 慣れると最初からTypeScriptのことを考えて書けるようになる • Perlでもちゃんと教えてくれるので、「他の⾔語から TypeScriptへの⼊⾨」でも確実に使えるテクニック(?)
© toggle holdings inc. 33 まとめ
© toggle holdings inc. 34 まとめ • フルスタックTypeScriptを⾼速にキャッチアップする施策 ◦ 会社‧チーム:
環境構築の⾼速化‧シンプル化 ◦ 個⼈: AI技術の活⽤ • 感想 ◦ 「フルスタックTypeScript」だったので、新たに学ぶ⾔語 が1つで済んだ、という点もプラスに感じた ◦ 最初の成果に⾄るまでのインプットが最⼩限で済んだ
© toggle holdings inc. 35 ご清聴ありがとうございました!