フロントエンドエンジニアが Python エンジニアになって見えた世界！

PyCon JP 2025

概要
TypeScript で培った型安全性への愛着を持つフロントエンドエンジニアが、Python での開発をへて体験した「カルチャーショック」と「新たな発見」を共有します。言語の違いは単なる文法の違いではなく、思考パターンの転換でもありました。本セッションでは、JavaScript/TypeScript の世界から Python の世界へ飛び込んだ際の具体的な戸惑いと、それを乗り越えるための実践的なアプローチを紹介します。

Description:

フロントエンドエンジニアとしての歩み

言語の違いから学ぶ、たくさんのカルチャーショック

TypeScript の型システムで得ていた安心感

コンパイルエラーからランタイムエラーへの心理的な不安
型推論の恩恵を失った時の対処法
Python の動的型付けへの最初の戸惑い

「型がないこと」の自由と責任
ダックタイピングという考え方
TypeScript の == と === の違いと、Python の == と is の理解

値の比較と参照の比較の新しい切り分け
よくある落とし穴と正しい使い分け
undefined と null から None へ：「無」の概念の統一

TypeScript の 2 つの「無」から Python の 1 つの「無」へ
None の扱い方とベストプラクティス
オブジェクトの分割代入から Python アンパックへの適応

const {a, b} = objからa, b = tupleへの思考転換
複数戻り値の扱い方の違い
文字列のテンプレートリテラルから f-string への感動

より直感的になった文字列フォーマット
f-string の隠れた便利機能
camelCase から snake_case へ：命名規則の文化的違い

コミュニティの規約を尊重することの重要性
array.map() からリスト内包表記へ：Python らしい書き方の発見

リスト内包表記の美しさと落とし穴
実践！TypeScript エンジニアからの Python 型安全性戦略

mypy を使った段階的な型チェックの導入
TypeScript ライクな開発体験の構築
実際のコード比較：同じロジックを両言語で実装
まとめ：両方の世界のいいとこ取り

言語の違いを強みに変える方法
フルスタックエンジニアとしての視野の広がり

Transcript

1. フロントエンド エンジニアが Python エンジニアになって見えた世界！ An Okina
2. 自己紹介 ・名前: 翁 安 (オキナ アン) ・企業: Recustomer 株式会社 ・担当: フロントエンド 8割、バックエンド 2割 ・技術: Python, TypeScript (Next.js, React)
3. 本セッションの 想定対象者 • TypeScript から Python を学び始めた方 • フロントエンドの経験を活かしてバックエンドにも挑戦したい方 • 言語の違いを理解してより良いコードを書きたい方 想定対象者
4. 本セッション で話すこと話さないこと • フロントエンド開発で得た知見 • フロントエンドから見た Python の気づき • 両言語の良いところと悪いところ 話すこと 話さないこと • Python の基本的な文法 • Python の詳細な言語仕様 • ライブラリの細かい仕様
5. 本日の発表内容 1. フロントエンドエンジニアとしての歩み 2. 言語の違いから学ぶ、たくさんのカルチャーショック 3. 実践！TypeScript エンジニアからの Python 型安全性戦略 4. まとめ：両方の世界のいいとこ取り
6. 本日の発表内容 1. フロントエンドエンジニアとしての歩み 2. 言語の違いから学ぶ、たくさんのカルチャーショック 3. 実践！TypeScript エンジニアからの Python 型安全性戦略 4. まとめ：両方の世界のいいとこ取り
7. 1. フロントエンドエンジニアとしての歩み 以前の開発では Django テンプレートと Vue でフロントエンドを開発！
8. 1. フロントエンドエンジニアとしての歩み Django も Vue も型がない 保守が大変に ...
9. 1. フロントエンドエンジニアとしての歩み TypeScript（Next.js, React）で 大規模な開発を経験
10. 1. フロントエンドエンジニアとしての歩み Python 開発にアサイン 🔥
11. 1. フロントエンドエンジニアとしての歩み 私 が伝える ！ ✨
12. 本日の発表内容 1. フロントエンドエンジニアとしての歩み 2. 言語の違いから学ぶ、たくさんのカルチャーショック 3. 実践！TypeScript エンジニアからの Python 型安全性戦略 4. まとめ：両方の世界のいいとこ取り
13. 2. 言語の違いから学ぶ、たくさんのカルチャーショック 1. TypeScript の型システムで得ていた安心感 2. Python の動的型付けへの最初の戸惑い 3. TypeScript の == と === の違いと、Python の == と is の理解 4. undefined と null から None へ：「無」の概念の統一 5. オブジェクトの分割代入から Python アンパックへの適応 6. 文字列のテンプレートリテラルから f-string への感動 7. camelCase から snake_case へ：命名規則の文化的違い 8. array.map() からリスト内包表記へ： Python らしい書き方の発見
14. TypeScript の型システムで得ていた安心感 - コンパイルエラーからランタイムエラーへの心理的な不安 - 型推論の恩恵を失った時の対処法
15. TypeScript の型システムで得ていた安心感 TypeScript で得ていた 型推論の恩恵を Python でも受けられる
16. TypeScript の型システムで得ていた安心感 TypeScript では、コードを書いている時 構文エラー があるとすぐに分かる
17. TypeScript の型システムで得ていた安心感 string を期待してるのに number を代入 TypeScript では、コードを書いている時 構文エラー があるとすぐに分かる コンパイルエラー
18. TypeScript の型システムで得ていた安心感 タイポした TypeScript TypeScript では、コードを書いている時 構文エラー があるとすぐに分かる コンパイルエラー
19. TypeScript の型システムで得ていた安心感 Python の場合、実行するまで気付けない！ タイポした Python ランタイムエラー
20. TypeScript の型システムで得ていた安心感 Python でも Type Hints や mypy などの ツールで同じことができる！ Python
21. TypeScript の型システムで得ていた安心感 Type Hints Python Python でも Type Hints や mypy などの ツールで同じことができる！
22. TypeScript の型システムで得ていた安心感 Python でも型の恩恵を受けることができた！ タイポした Python
23. TypeScript の型システムで得ていた安心感 TypeScript で得ていた 型の恩恵を、 Python でも教授することができる 型を常用している身として、心理的安全性が大きい！
24. 2. 言語の違いから学ぶ、たくさんのカルチャーショック 1. TypeScript の型システムで得ていた安心感 2. Python の動的型付けへの最初の戸惑い 3. TypeScript の == と === の違いと、Python の == と is の理解 4. undefined と null から None へ：「無」の概念の統一 5. オブジェクトの分割代入から Python アンパックへの適応 6. 文字列のテンプレートリテラルから f-string への感動 7. camelCase から snake_case へ：命名規則の文化的違い 8. array.map() からリスト内包表記へ： Python らしい書き方の発見
25. Python の動的型付けへの最初の戸惑い - 「型がないこと」の自由と責任 - ダックタイピングという考え方
26. Python の動的型付けへの最初の戸惑い TypeScript の型安全な ダックタイピング が、 Python でもできる！
27. Python の動的型付けへの最初の戸惑い Python でも型の恩恵を受けられることを伝えてきた ただ Python では型付けは自由 型推論の武器が使えるようになったからには 開発者が責任をもって型付けする文化を付ける！
28. Python の動的型付けへの最初の戸惑い 型推論の武器が使えるようになったからには 開発者が責任をもって型付けする文化を付ける！ Python でも型の恩恵を受けられることを伝えてきた ただ Python では型付けは自由
29. Python の動的型付けへの最初の戸惑い ダックタイピング について
30. Python の動的型付けへの最初の戸惑い もしアヒルのように歩き、アヒルのように鳴くなら、それはアヒルだ という考え方です。 ダックタイピング とは？
31. Python の動的型付けへの最初の戸惑い 何言ってるか分からない ...
32. Python の動的型付けへの最初の戸惑い ダックタイピングは特定のクラスに属するかは関係なく、 特定のメソッドやプロパティなどの振る舞いをもっているかで 　型を判 断する。
33. Python の動的型付けへの最初の戸惑い class Inventory: def __init__(self, stocks): self._stocks = stocks def count(self): return len(self._stocks) class Cart: def __init__(self, items): self._items = items def count(self): return len(self._items) Python 型安全ではない Python のダックタイピング
34. Python の動的型付けへの最初の戸惑い class Inventory: def __init__(self, stocks): self._stocks = stocks def count(self): return len(self._stocks) class Cart: def __init__(self, items): self._items = items def count(self): return len(self._items) Python 型安全ではない Python のダックタイピング count メソッドを実装している
35. Python の動的型付けへの最初の戸惑い 型安全ではない Python のダックタイピング def get_count(obj): return obj.count() object を渡せば count を 実行して結果を返す関数 Python class Inventory: def __init__(self, stocks): self._stocks = stocks def count(self): return len(self._stocks) class Cart: def __init__(self, items): self._items = items def count(self): return len(self._items) Python count メソッドを実装している
36. Python の動的型付けへの最初の戸惑い 型安全ではない Python のダックタイピング def get_count(obj): return obj.count() object を渡せば count を 実行して結果を返す関数 Python class Inventory: def __init__(self, stocks): self._stocks = stocks def count(self): return len(self._stocks) class Cart: def __init__(self, items): self._items = items def count(self): return len(self._items) Python count メソッドを実装している 実行エラーに注意
37. Python の動的型付けへの最初の戸惑い interface Inventory { stocks: string[] count(): number } interface Cart { items: string[] count(): number } const inventory: Inventory = { stocks: [], count() { return this.stocks.length }, } const cart: Cart = { items: [], count() { return this.items.length }, } TypeScript count メソッドを実装している interface Countable { count(): number } function getCount(obj: Countable): number { return obj.count() } TypeScript 型安全な TypeScript のダックタイピング
38. Python の動的型付けへの最初の戸惑い interface Countable { count(): number } function getCount(obj: Countable): number { return obj.count() } TypeScript Countable で count があるのと 返り値 number が保証される interface Inventory { stocks: string[] count(): number } interface Cart { items: string[] count(): number } const inventory: Inventory = { stocks: [], count() { return this.stocks.length }, } const cart: Cart = { items: [], count() { return this.items.length }, } TypeScript count メソッドを実装している 型安全な TypeScript のダックタイピング
39. Python の動的型付けへの最初の戸惑い Python で型安全なダックタイピングはどう実装する？ Python の Protocol を使用すれば実装できる。 Protocol を継承させたクラスを型で使用すれば、 mypy で型推論されて安全性が保てる。
40. Python の動的型付けへの最初の戸惑い Python で型安全なダックタイピングはどう実装する？ Python の Protocol を使用すれば実装できる。 Protocol を継承させたクラスを型で使用すれば、 mypy で型推論されて安全性が保てる。
41. Python の動的型付けへの最初の戸惑い 型安全な Python のダックタイピング from typing import Protocol class Countable(Protocol): def count(self) -> int: … def get_count(obj: Countable) -> int: return obj.count() Python class Inventory: def __init__(self, stocks): self._stocks = stocks def count(self): return len(self._stocks) class Cart: def __init__(self, items): self._items = items def count(self): return len(self._items) Python count メソッドを実装している
42. Python の動的型付けへの最初の戸惑い 型安全な Python のダックタイピング from typing import Protocol class Countable(Protocol): def count(self) -> int: … def get_count(obj: Countable) -> int: return obj.count() Protocol でクラスを実装して 型安全になっている Python class Inventory: def __init__(self, stocks): self._stocks = stocks def count(self): return len(self._stocks) class Cart: def __init__(self, items): self._items = items def count(self): return len(self._items) Python count メソッドを実装している
43. Python の動的型付けへの最初の戸惑い Python も型安全にダックタイピングができる TypeScript ライクに、ダックタイピングができて感激！
44. 2. 言語の違いから学ぶ、たくさんのカルチャーショック 1. TypeScript の型システムで得ていた安心感 2. Python の動的型付けへの最初の戸惑い 3. TypeScript の == と === の違いと、Python の == と is の理解 4. undefined と null から None へ：「無」の概念の統一 5. オブジェクトの分割代入から Python アンパックへの適応 6. 文字列のテンプレートリテラルから f-string への感動 7. camelCase から snake_case へ：命名規則の文化的違い 8. array.map() からリスト内包表記へ： Python らしい書き方の発見
45. TypeScript の == と === の違いと、 Python の == と is の理解 - 値の比較と参照の比較の新しい切り分け - よくある落とし穴と正しい使い分け
46. TypeScript の == と === の違いと、 Python の == と is の理解 TypeScript は基本的に === のみ使用する。 Python は == を基本的に使用して、 参照比較は is を使用する。
47. TypeScript の == と === の違いと、 Python の == と is の理解 厳密等価演算 子 === !== 等価演算子 == != TypeScript には等価を表す演算子が２つあります
48. TypeScript の == と === の違いと、 Python の == と is の理解 厳密等価演算 子 === !== 等価演算子 == != 値が同じかを比較して、暗黙的に 型変換する 5 == “5”　=>　 true TypeScript には等価を表す演算子が２つあります 危険 文字列の ”5” を数値に変換
49. TypeScript の == と === の違いと、 Python の == と is の理解 厳密等価演算 子 === !== 等価演算子 == != 型と値が同じかを比較して、 型変換しない 5 === “5”　=>　false 基本的に全てこちらを推奨 TypeScript には等価を表す演算子が２つあります 安全 値が同じかを比較して、暗黙的に 型変換する 5 == “5”　=>　 true 文字列の ”5” を数値に変換 危険
50. TypeScript の == と === の違いと、 Python の == と is の理解 オブジェクトが同値かを比較する演算子 == != オブジェクトの同一性を比較する演算子 is is not Python の等価の比較演算子の場合
51. TypeScript の == と === の違いと、 Python の == と is の理解 オブジェクトの中の値を比較する 基本的にこちらを使用する オブジェクトが同値かを比較する演算子 == != オブジェクトの同一性を比較する演算子 is is not Python の等価の比較演算子の場合
52. TypeScript の == と === の違いと、 Python の == と is の理解 is は参照比較になります None は is を使用する オブジェクトの中の値を比較する 基本的にこちらを使用する オブジェクトが同値かを比較する演算子 == != オブジェクトの同一性を比較する演算子 is is not Python の等価の比較演算子の場合
53. TypeScript の == と === の違いと、 Python の == と is の理解 TypeScript の方がシンプルですが、 イコールが1つ多い分やや冗長 == に統一できたら嬉しい！ TypeScript では基本的に === しか使用しませんが、 Python では == を基本に使い、参照比較の判定だけ is を使う必要ある。
54. TypeScript の == と === の違いと、 Python の == と is の理解 TypeScript の方がシンプルですが、 イコールが1つ多い分やや冗長 == に統一できたら嬉しい！ TypeScript では基本的に === しか使用しませんが、 Python では == を基本に使い、参照比較の判定だけ is を使う必要ある。
55. 2. 言語の違いから学ぶ、たくさんのカルチャーショック 1. TypeScript の型システムで得ていた安心感 2. Python の動的型付けへの最初の戸惑い 3. TypeScript の == と === の違いと、Python の == と is の理解 4. undefined と null から None へ：「無」の概念の統一 5. オブジェクトの分割代入から Python アンパックへの適応 6. 文字列のテンプレートリテラルから f-string への感動 7. camelCase から snake_case へ：命名規則の文化的違い 8. array.map() からリスト内包表記へ： Python らしい書き方の発見
56. undefined と null から None へ：「無」の概念の統一 - TypeScript の 2 つの「無」から Python の 1 つの「無」へ - None の扱い方とベストプラクティス
57. undefined と null から None へ「無」の概念の統一 TypeScript には「無」の概念が２つあります
58. undefined と null から None へ「無」の概念の統一 undefined null
59. undefined と null から None へ「無」の概念の統一 undefined null
60. undefined と null から None へ「無」の概念の統一 // 通常の値を代入 const toiletPaper = "Non Zero Value" // 0 の値を代入 const toiletPaper = 0
61. undefined と null から None へ「無」の概念の統一 // undefined は変数が宣言されたが値が代入されていない let toiletPaper // null は明示的に null を代入する const toiletPaper = null
62. undefined と null から None へ「無」の概念の統一 つまり何が言いたいの？
63. undefined と null から None へ「無」の概念の統一 つまり何が言いたいの？ 「無」の概念が２つあると両方に対してケアする必要がある。
64. undefined と null から None へ「無」の概念の統一 つまり何が言いたいの？ それはとても大変... 「無」の概念が２つあると両方に対してケアする必要がある。
65. undefined と null から None へ「無」の概念の統一 undefined と null 両方をケアする必要がある interface User { name: string started_at?: Date | null } function getStartedAt(user: User): string | undefined { if (user.started_at === undefined || user.started_at === null) { return } return user.started_at.toISOString() } ？ はオプショナルです。実質 Date | undefined | null 両方をケアする
66. undefined と null から None へ「無」の概念の統一 Python の「無」とは？
67. undefined と null から None へ「無」の概念の統一 None
68. undefined と null から None へ「無」の概念の統一 None Python は None だけなので、ケアが簡単
69. undefined と null から None へ「無」の概念の統一 undefined null None TypeScript Python
70. undefined と null から None へ「無」の概念の統一 undefined null None TypeScript Python 無が 1 つの Python はとても良い！
71. 2. 言語の違いから学ぶ、たくさんのカルチャーショック 1. TypeScript の型システムで得ていた安心感 2. Python の動的型付けへの最初の戸惑い 3. TypeScript の == と === の違いと、Python の == と is の理解 4. undefined と null から None へ：「無」の概念の統一 5. オブジェクトの分割代入から Python アンパックへの適応 6. 文字列のテンプレートリテラルから f-string への感動 7. camelCase から snake_case へ：命名規則の文化的違い 8. array.map() からリスト内包表記へ： Python らしい書き方の発見
72. オブジェクトの分割代入から Python アンパックへの適応 - const {a, b} = obj から a, b = tuple への思考転換 - 複数戻り値の扱い方の違い
73. オブジェクトの分割代入から Python アンパックへの適応 TypeScript の分割代入が便利！ Python も同じことができるといいな
74. オブジェクトの分割代入から Python アンパックへの適応 TypeScript のオブジェクトの分割代入 interface User { firstName: string lastName: string age: number } const user: User = { firstName: 'Yamada', lastName: 'Taro', age: 20, } const { firstName, lastName, age } = user // 'Yamada', 'Taro', 20 変数名で直接扱えて便利 TypeScript
75. オブジェクトの分割代入から Python アンパックへの適応 TypeScript のオブジェクトの分割代入 interface User { firstName: string lastName: string age: number } const user: User = { firstName: 'Yamada', lastName: 'Taro', age: 20, } const { firstName, …Other } = user ...変数名をスプレッド構文という firstName 以外の変数をまとめて扱える TypeScript
76. オブジェクトの分割代入から Python アンパックへの適応 const users: User[] = [ { firstName: 'Yamada', lastName: 'Taro', age: 30 }, { firstName: 'Suzuki', lastName: 'Jiro', age: 25 }, { firstName: 'Ssasaki', lastName: 'Saburo', age: 20 }, ] const [user1, user2, user3] = users # user1は{ firstName: 'Yamada', lastName: 'Taro', age: 30 } 配列も分割代入可能 TypeScript の配列の分割代入 TypeScript
77. オブジェクトの分割代入から Python アンパックへの適応 user = ("Yamada", "Taro", "38") last_name, first_name, age = user print(last_name) # Yamada print(first_name) # Taro print(age) # 38 変数に入れると値が取れる Python でのタプルのアンパック Python
78. オブジェクトの分割代入から Python アンパックへの適応 user = { "first_name": 'Yamada', "last_name": 'Taro', "age": 38 } user1, user2, user3 = user print(user1) # first_name print(user2) # last_name print(user3) # age アンパック可能だが取れるのはキー Python での辞書のアンパック Python
79. オブジェクトの分割代入から Python アンパックへの適応 TypeScript の分割代入めっちゃ便利！ 特にスプレッド構文を使うとコードがスッキリ書ける。 Python でも同じ書き方ができるといいなと切に願っております！
80. 2. 言語の違いから学ぶ、たくさんのカルチャーショック 1. TypeScript の型システムで得ていた安心感 2. Python の動的型付けへの最初の戸惑い 3. TypeScript の == と === の違いと、Python の == と is の理解 4. undefined と null から None へ：「無」の概念の統一 5. オブジェクトの分割代入から Python アンパックへの適応 6. 文字列のテンプレートリテラルから f-string への感動 7. camelCase から snake_case へ：命名規則の文化的違い 8. array.map() からリスト内包表記へ： Python らしい書き方の発見
81. 文字列のテンプレートリテラルから f-string への感動 - より直感的になった文字列フォーマット - f-string の隠れた便利機能
82. 文字列のテンプレートリテラルから f-string への感動 TypeScript のテンプレテートリテラル より Python の f-string の方が便利！
83. 文字列のテンプレートリテラルから f-string への感動 TypeScript で文字列に変数を入れたい時は `${hoge}` このような形になります。 バッククォートで囲むことを テンプレートリテラル と言います。 ${} こちらはプレースホルダーといいます。 率直にいうとあまり好きではなく、バッククォートが好みではない ...
84. 文字列のテンプレートリテラルから f-string への感動 テンプレートリテラル のプレースホルダーに は、文字列と数値の代入ができる。 関数などの戻り値も同じである。 改行文字 (\n)がなくても改行可能 interface User { firstName: string lastName: string age: number } const user: User = { firstName: '山田', lastName: '太郎', age: 30, } const now = new Date() const helloPyCon = ` こんにちは${user.firstName}${user.lastName}(${user.age})さん。 本日はPyCon(${now.toLocaleDateString('ja-JP')})ですね。 ` こんにちは山田太郎(30)さん。 本日はPyCon(2025/9/26)ですね。 TypeScript
85. 文字列のテンプレートリテラルから f-string への感動 Python の f-string とは？ ダブルクォーテーションまたはシングルクォーテーションで囲まれた文字列の前に f を書くだけ。変数を入れる時は {} の中にいれる。 かなり直感的で良い！
86. 文字列のテンプレートリテラルから f-string への感動 from datetime import datetime now = datetime.now() user = { "firstName": "山田", "lastName": "太郎", "age": 30, } hello_pycon = f""" こんにちは{user['firstName']}{user['lastName']}({user['age']})さん。 本日はPyCon({now:%Y/%m/%d})ですね。 """ こんにちは山田太郎(30)さん。 本日はPyCon(2025/9/26)ですね。 Python f-string はテンプレートリテラルでできること は殆どできます。 複数行を書く時はクォーテーションを 3つで 囲む必要がある。
87. 文字列のテンプレートリテラルから f-string への感動 hello_pycon = f""" こんにちは {user['firstName']}{user['lastName']}({user['age']})さん。 本日はPyCon({now:%Y/%m/%d})ですね。 """ {now:%Y/%m/%d} このようなフォーマット指定子を使用できる。 いろいろな種類があり詳細は割愛する。 Python
88. 文字列のテンプレートリテラルから f-string への感動 user = { "firstName": "山田", "lastName": "太郎", "age": 20, } print(f"{user['firstName']=}, {user['age']=}") # user['firstName']='山田', user['age']=20 変数の前に = を入れると 値が取れる Python
89. 文字列のテンプレートリテラルから f-string への感動 f-string テンプレートリテラル シンプルかつ直感的 いろいろなフォーマット指定子に対応 テンプレートリテラルできることはほぼ出来る 同じ感じで使用できたら嬉しい
90. 2. 言語の違いから学ぶ、たくさんのカルチャーショック 1. TypeScript の型システムで得ていた安心感 2. Python の動的型付けへの最初の戸惑い 3. JS の == と === の違いと、Python の == と is の理解 4. undefined と null から None へ：「無」の概念の統一 5. オブジェクトの分割代入から Python アンパックへの適応 6. 文字列のテンプレートリテラルから f-string への感動 7. camelCase から snake_case へ：命名規則の文化的違い 8. array.map() からリスト内包表記へ： Python らしい書き方の発見
91. camelCase から snake_case へ：命名規則の文化的違い - コミュニティの規約を尊重することの重要性
92. camelCase から snake_case へ：命名規則の文化的違い TypeScript には TypeScript の Python には Python の 尊重すべき文化があるので、お互いに尊重しよう！
93. camelCase から snake_case へ：命名規則の文化的違い 命名規則に気をつけてますか？ Python は、公式の PEP8 に細かくコーディング規約が記載されいます。 基本的にはそちらに準拠するのが望ましい。 TypeScript には PEP8 のような公式のコミュニティはない。 Google や Airbnb から非公式なガイドラインがでている。 これらを参考に命名規則をチームで決めのが良い！
94. camelCase から snake_case へ：命名規則の文化的違い 命名規則に気をつけてますか？ Python は、公式の PEP8 に細かくコーディング規約が記載されいます。 基本的にはそちらに準拠するのが望ましい。 TypeScript には PEP8 のような公式のコミュニティはない。 Google や Airbnb から非公式なガイドラインがでている。 これらを参考に命名規則をチームで決めのが良い！
95. camelCase から snake_case へ：命名規則の文化的違い 弊社ではフロントエンドを TypeScript(Next.js)、バックエンドを Python で開発している会 社です。 フロントエンドでは基本的に変数には camelCase が使用され、Python は snake_case に なります。api 開発する時にこの文化の違いは大きな課題になります。
96. camelCase から snake_case へ：命名規則の文化的違い camelCase snake_case フロントエンド バックエンド リクエスト レスポンス API 通信
97. camelCase から snake_case へ：命名規則の文化的違い camelCase snake_case フロントエンド バックエンド リクエスト レスポンス API 通信 フロントエンドを汚染 バックエンドを汚染
98. camelCase から snake_case へ：命名規則の文化的違い camelCase snake_case フロントエンド バックエンド リクエスト レスポンス API 通信 camelCase から snake_case に変換 snake_case から camelCase に変換
99. camelCase から snake_case へ：命名規則の文化的違い このようにお互いの 文化を守り尊重することができます。 例えば CSS のクラス名１つとっても snake_case にするか kebab-case する のかで思想が違う！ 言語が違えば尚更なので、お互いの文化圏を守りましょう！
100. 2. 言語の違いから学ぶ、たくさんのカルチャーショック 1. TypeScript の型システムで得ていた安心感 2. Python の動的型付けへの最初の戸惑い 3. TypeScript の == と === の違いと、Python の == と is の理解 4. undefined と null から None へ：「無」の概念の統一 5. オブジェクトの分割代入から Python アンパックへの適応 6. 文字列のテンプレートリテラルから f-string への感動 7. camelCase から snake_case へ：命名規則の文化的違い 8. array.map() からリスト内包表記へ： Python らしい書き方の発見
101. array.map() からリスト内包表記へ： Python らしい書き方の発見 - リスト内包表記の美しさと落とし穴
102. TypeScript の配列メソッドは優秀である。 Python のリスト内包表記も良いが、複雑になると副作用が怖い！ array.map() からリスト内包表記へ： Python らしい書き方の発見
103. array.map() からリスト内包表記へ： Python らしい書き方の発見 map とは? TypeScript の配列のメソッドになります。 既存の配列をループで回して、新規の配列を作成します。 このメソッドは便利でいろいろな箇所で多用されます。
104. array.map() からリスト内包表記へ： Python らしい書き方の発見 interface Variant { id: number label: string value: string } interface Label { id: number name: string } const variants: Variant[] = [ { id: 1, label: '赤', value: 'Red' }, { id: 2, label: '緑', value: 'Green' }, ] const convertLabels: Label[] = variants.map((variant) => { if (variant.value === 'Red') { return { id: variant.id, name: '真紅' } } return { id: variant.id, name: variant.label } }) variants を map メソッドを利用して、 Label 型の配列に 変換しております。条件があっても比較的に読みやす いです。 TypeScript
105. array.map() からリスト内包表記へ： Python らしい書き方の発見 interface Variant { id: number label: string value: string } interface Label { id: number name: string } const variants: Variant[] = [ { id: 1, label: '赤', value: 'Red' }, { id: 2, label: '緑', value: 'Green' }, ] const convertLabels: Label[] = variants .filter((variant) => variant.value === 'Red') .map((variant) => ({ id: variant.id, name: '真紅' })) 配列メソッドには他にも filter など便利なのが多い TypeScript
106. array.map() からリスト内包表記へ： Python らしい書き方の発見 class Variant: def __init__(self, id: int, label: str, value: str): self.id = id self.label = label self.value = value class Label: def __init__(self, id: int, name: str): self.id = id self.name = name variants: list[Variant] = [ Variant(id=1, label="赤", value="Red"), Variant(id=2, label="緑", value="Green"), ] convert_labels: list[Label] = [ Label(id=variant.id, name=variant.label) for variant in variants ] Python Python Python のリスト内包表記 非常にシンプルで美しい
107. array.map() からリスト内包表記へ： Python らしい書き方の発見 convert_labels: list[Label] = [ Label(id=variant.id, name="真紅") if variant.value == "Red" else Label(id=variant.id, name=variant.label) for variant in variants ] 条件が複雑になると一気に可読性が落ちる Python convert_labels: list[Label] = [ Label(id=variant.id, name=variant.label) for variant in variants ] 非常にシンプルで美しい Python のリスト内包表記
108. array.map() からリスト内包表記へ： Python らしい書き方の発見 users = [ {"name": "さくら", "age": 19}, {"name": "たろう", "age": 22}, {"name": "はなこ", "age": 30}, ] adult_users = [ print(user["name"]) for user in users if user["age"] >= 20 ] Python Python のリスト内包表記
109. array.map() からリスト内包表記へ： Python らしい書き方の発見 users = [ {"name": "さくら", "age": 19}, {"name": "たろう", "age": 22}, {"name": "はなこ", "age": 30}, ] adult_users = [ print(user["name"]) for user in users if user["age"] >= 20 ] 20歳以上のユーザーリストを作成してるように見 えるが、 print() が埋め込まれていても気付きづら い... 予期せぬことが起こり得る可能性があるので、 このような場合、通常の for 文にする方が良い場 合も多い。 副作用に気を付ける Python Python のリスト内包表記
110. TypeScript の配列メソッドは非常に優秀だったかと思います。 Python のリスト内包表記も高速ですし使い勝手もいいが、 複雑になると可読性が落ちたり、思わぬ副作用が起こる。 array.map() からリスト内包表記へ： Python らしい書き方の発見
111. 2. 言語の違いから学ぶ、たくさんのカルチャーショック 1. TypeScript の型システムで得ていた安心感 2. Python の動的型付けへの最初の戸惑い 3. TypeScript の == と === の違いと、Python の == と is の理解 4. undefined と null から None へ：「無」の概念の統一 5. オブジェクトの分割代入から Python アンパックへの適応 6. 文字列のテンプレートリテラルから f-string への感動 7. camelCase から snake_case へ：命名規則の文化的違い 8. array.map() からリスト内包表記へ： Python らしい書き方の発見
112. 2. 言語の違いから学ぶ、たくさんのカルチャーショック まとめ コンパイルエラー 型安全なダックタイピング === undefined と null 分割代入 テンプレートリテラル camelCase array.map ランタイムエラー 型安全なダックタイピング == と is None アンパック f-string snake_case リスト内包表記 いろいろ比べてきたが ...
113. 2. 言語の違いから学ぶ、たくさんのカルチャーショック まとめ コンパイルエラー 型安全なダックタイピング === undefined と null 分割代入 テンプレートリテラル camelCase array.map ランタイムエラー 型安全なダックタイピング == と is None アンパック f-string snake_case リスト内包表記 結論どちらの言語も 好 きです！
114. 本日の発表内容 1. フロントエンドエンジニアとしての歩み 2. 言語の違いから学ぶ、たくさんのカルチャーショック 3. 実践！TypeScript エンジニアからの Python 型安全性戦略 4. まとめ：両方の世界のいいとこ取り
115. • mypy などを使った段階的な型チェックの導入 • TypeScript ライクな開発体験の構築 • 実際のコード比較：同じロジックを両言語で実装 3. 実践！TypeScript エンジニアからの Python 型安全性戦略
116. 静的解析ツール やパッケージマネージャー を導入して、 開発環境を良くする。 両言語で同じシナリオのコードを実装して比較する。 3. 実践！TypeScript エンジニアからの Python 型安全性戦略
117. 3. 実践！TypeScript エンジニアからの Python 型安全性戦略 Python にも mypy や uv などを導入することで開発環境が劇的によくなります。 チーム開発でも個人開発でもこの機会にでも是非導入することをオススメします。 開発効率が向上します。 TypeScript との対比表を元におすすめのものを記載します。
118. TypeScript Python npm uv nvm uv tsconfig mypy / pyright eslint ruff prettier ruff / black TypeScript ライクな開発体験の構築 3. 実践！TypeScript エンジニアからの Python 型安全性戦略
119. 3. 実践！TypeScript エンジニアからの Python 型安全性戦略 同じシナリオのロジックで、コードを実装して比較
120. 3. 実践！TypeScript エンジニアからの Python 型安全性戦略 商品名: おしゃれなTシャツ 価格: 3,333円 税率: 10% 数量: 白 - 1000個 / 黒 - 5555個 / 赤 - 7777個 バリエーション: 色（白・黒・赤） ※赤のみセール品 3% OFF 出力内容: セール品と非セール品の小計を表示する。 全ての商品の合計金額を表示する。 シナリオ
121. 3. 実践！TypeScript エンジニアからの Python 型安全性戦略 export interface Variant { key: string value: string type?: string | null } export interface Product { name: string price: number tax: number quantity: number variant: Variant } TypeScript @dataclass(frozen=True) class Variant: key: str value: str type: str | None = None @dataclass(frozen=True) class Product: name: str price: Decimal tax: Decimal quantity: int variant: Variant Python
122. 3. 実践！TypeScript エンジニアからの Python 型安全性戦略 const products: Product[] = [ { name: 'おしゃれなTシャツ', price: 3333, tax: 0.1, quantity: 1000, variant: { key: 'color', value: '白' }, }, { name: 'おしゃれなTシャツ', price: 3333, tax: 0.1, quantity: 5555, variant: { key: 'color', value: '黒' }, }, { name: 'おしゃれなTシャツ', price: 3333, tax: 0.1, quantity: 7777, variant: { key: 'color', value: '赤', type: 'セール' }, }, ] TypeScript products: list[Product] = [ Product( "おしゃれなTシャツ", Decimal("3333"), Decimal("0.1"), 1000, Variant("color", "白") ), Product( "おしゃれなTシャツ", Decimal("3333"), Decimal("0.1"), 5555, Variant("color", "黒") ), Product( "おしゃれなTシャツ", Decimal("3333"), Decimal("0.1"), 7777, Variant("color", "赤", "セール") ), ] Python
123. 3. 実践！TypeScript エンジニアからの Python 型安全性戦略 // セール品と非セール品の小計 const saleSubtotal = products .filter((p) => p.variant.type === 'セール') .map((p) => p.price * (1 + p.tax) * 0.97 * p.quantity) .reduce((acc, subtotal) => acc + subtotal, 0) const normalSubtotal = products .filter((p) => p.variant.type === undefined || p.variant.type === null) .map((p) => p.price * (1 + p.tax) * p.quantity) .reduce((acc, subtotal) => acc + subtotal, 0) // 合計 const total = saleSubtotal + normalSubtotal TypeScript
124. 3. 実践！TypeScript エンジニアからの Python 型安全性戦略 // セール品と非セール品の小計 const saleSubtotal = products .filter((p) => p.variant.type === 'セール') .map((p) => p.price * (1 + p.tax) * 0.97 * p.quantity) .reduce((acc, subtotal) => acc + subtotal, 0) const normalSubtotal = products .filter((p) => p.variant.type === undefined || p.variant.type === null) .map((p) => p.price * (1 + p.tax) * p.quantity) .reduce((acc, subtotal) => acc + subtotal, 0) // 合計 const total = saleSubtotal + normalSubtotal TypeScript 配列のメソッドが多彩で優秀
125. 3. 実践！TypeScript エンジニアからの Python 型安全性戦略 // セール品と非セール品の小計 const saleSubtotal = products .filter((p) => p.variant.type === 'セール') .map((p) => p.price * (1 + p.tax) * 0.97 * p.quantity) .reduce((acc, subtotal) => acc + subtotal, 0) const normalSubtotal = products .filter((p) => p.variant.type === undefined || p.variant.type === null) .map((p) => p.price * (1 + p.tax) * p.quantity) .reduce((acc, subtotal) => acc + subtotal, 0) // 合計 const total = saleSubtotal + normalSubtotal TypeScript 配列のメソッドが多彩で優秀 undefined と null のケアが大変
126. 3. 実践！TypeScript エンジニアからの Python 型安全性戦略 # セール品と非セール品の小計 sale_subtotals = [ (p.price * (1 + p.tax) * Decimal("0.97") * p.quantity).quantize(Decimal("1"), rounding=ROUND_HALF_UP) for p in products if p.variant.type == "セール" ] normal_subtotals = [ (p.price * (1 + p.tax) * p.quantity).quantize(Decimal("1"), rounding=ROUND_HALF_UP) for p in products if p.variant.type is None ] # 合計 total = sum(sale_subtotals) + sum(normal_subtotals) Python
127. 3. 実践！TypeScript エンジニアからの Python 型安全性戦略 # セール品と非セール品の小計 sale_subtotals = [ (p.price * (1 + p.tax) * Decimal("0.97") * p.quantity).quantize(Decimal("1"), rounding=ROUND_HALF_UP) for p in products if p.variant.type == "セール" ] normal_subtotals = [ (p.price * (1 + p.tax) * p.quantity).quantize(Decimal("1"), rounding=ROUND_HALF_UP) for p in products if p.variant.type is None ] # 合計 total = sum(sale_subtotals) + sum(normal_subtotals) Python リスト内包表記
128. 3. 実践！TypeScript エンジニアからの Python 型安全性戦略 # セール品と非セール品の小計 sale_subtotals = [ (p.price * (1 + p.tax) * Decimal("0.97") * p.quantity).quantize(Decimal("1"), rounding=ROUND_HALF_UP) for p in products if p.variant.type == "セール" ] normal_subtotals = [ (p.price * (1 + p.tax) * p.quantity).quantize(Decimal("1"), rounding=ROUND_HALF_UP) for p in products if p.variant.type is None ] # 合計 total = sum(sale_subtotals) + sum(normal_subtotals) Python None のケア1つだから簡単 リスト内包表記
129. 3. 実践！TypeScript エンジニアからの Python 型安全性戦略 // 出力 `セール品小計: ${Math.round(saleSubtotal).toLocaleString()}円` `セール品以外小計: ${Math.round(normalSubtotal).toLocaleString()}円` `合計: ${Math.round(total).toLocaleString()}円` TypeScript セール品小計 : 27,657,431円 セール品以外小計 : 24,032,597円 合計: 51,690,027円 toLocaleString()を使用して、カンマ表示
130. 3. 実践！TypeScript エンジニアからの Python 型安全性戦略 # 出力 f"セール品小計: {sale_subtotal:,}円" f"セール品以外小計: {normal_subtotal:,}円" f"合計: {total:,}円" Python セール品小計 : 27,657,431円 セール品以外小計 : 24,032,597円 合計: 51,690,028円 f-string だとカンマ表示が簡単
131. 3. 実践！TypeScript エンジニアからの Python 型安全性戦略 お気づきだろうか？
132. 3. 実践！TypeScript エンジニアからの Python 型安全性戦略 Python セール品小計: 27,657,431円 セール品以外小計: 24,032,597円 合計: 51,690,028円 TypeScript セール品小計: 27,657,431円 セール品以外小計: 24,032,597円 合計: 51,690,027円 金額が違う！
133. 3. 実践！TypeScript エンジニアからの Python 型安全性戦略 TypeScript の number は 64 ビット浮動小数点 で表現されている。 これは整数と小数が同じ型だからで、 小数点以下が二進法で正確に表せない数字があるため！ 金融の計算は Python の方が得意！
134. 3. 実践！TypeScript エンジニアからの Python 型安全性戦略 両言語の比較はどうだったでしょうか？ 良いところも悪いところもありますが、それを理解した上で実装する と、どちらが優れているかというより、それぞれの特性を理解して使 い分けることが重要です！
135. 本日の発表内容 1. フロントエンドエンジニアとしての歩み 2. 言語の違いから学ぶ、たくさんのカルチャーショック 3. 実践！TypeScript エンジニアからの Python 型安全性戦略 4. まとめ：両方の世界のいいとこ取り
136. まとめ：両方の世界のいいとこ取り • 言語の違いを強みに変える方法 • フルスタックエンジニアとしての視野の広がり
137. まとめ：両方の世界のいいとこ取り 言語の基本的な文法を学ぶ！
138. まとめ：両方の世界のいいとこ取り 言語の基本的な文法を学ぶ！ 言語独自の 特徴を学ぶ！
139. まとめ：両方の世界のいいとこ取り 言語の基本的な文法を学ぶ！ 言語独自の 特徴を学ぶ！ 違い知って、強みに変える！
140. TypeScript Python 型 を活用して安全に開発できる！ まとめ：両方の世界のいいとこ取り
141. フロント エンド バック エンド まとめ：両方の世界のいいとこ取り 双方で学ぶ フロントエンド だけ、バックエンド だけは勿体無い！
142. フロント エンド バック エンド フル スタック まとめ：両方の世界のいいとこ取り より高みへ
144. 参考資料 用語 リンク mypy https://mypy.readthedocs.io/en/stable/ f-string https://note.nkmk.me/python-f-strings/ PEP8 https://pep8-ja.readthedocs.io/ja/latest/ uv https://github.com/astral-sh/uv Airbnb JavaScript Style Guide https://github.com/airbnb/javascript Google Java Style Guide https://google.github.io/styleguide/javaguide.html
145. 質問系 ruffの質問とかきそうruffを導入するとeslintのような静的 解析ができるのでより、TSの使用感に近づける。 requirements環境からからuvの環境への移行の質問とか されるかも 比較系の具体的な違いについて質問されるかも なぜこの題材を選んだかなど ABC型と何が違うか？ABCでクラスを定義して、さらにその クラスを継承させないと使用できない。 最後の比較で金額がずれてたが Number 型じゃなくて、 BigIntにすればずれないんじゃない？ A. BigIntだと整数なので小数点を扱えないので、 decimal.jsを使用すればほぼ同じことができる。
146. Python の動的型付けへの最初の戸惑い Python でも型安全にダックタイピングができた TypeScript ライクに、ダックタイピングが実装できて感激！ abc型でダックタイピングしてたが、 Python3.8 から protocol で、静的ダックタイピングが可能に！