FE_BEをTypeScriptに寄せた結果

FE/BEをTypeScriptに寄せた結果 締めの言葉などが入ります。 本文などが入ります。

自己紹介 佐伯 星 株式会社スペースマーケット テックリード 2021年に入社。主にフロントエンド領域が得意、最近は RSCとGraphqlの 組み合わせに頭を悩ましています。 仕事ではTSメイン、あとは Rails, Pythonなど触ってます。 @wado_63 @wado_63 Slackアイコン画像 （Slackで画像をコピー 押してペーストで貼れ ます!）

Confidential 約36,000 © Spacemarket, Inc. All Rights Reserved. 3

Confidential © Spacemarket, Inc. All Rights Reserved. 4

Confidential 目次 1. アーキテクチャの推移 2. TypeScriptに注力した理由 3. FE〜BEで言語が揃ったよるメリット 4. その他気づいたこと © Spacemarket, Inc. All Rights Reserved. 5

技術スタックの推移

❌ ❌

TypeScriptに注力した理由

Confidential TypeScriptに注力した理由 1. コンテキストスイッチを減らし開発効率の向上 2. 型による開発体験の向上 3. （TypeScriptではないが）パフォーマンスの向上 © Spacemarket, Inc. All Rights Reserved. 9

FE〜BEで言語が揃ったよるメリット

Confidential メリット 職能の壁を超えて開発するメンバーの増加 FEエンジニアがバックエンド開発、BEエンジニアがフロントエンド開発するなど増えた。 ● 言語の学習コストがかからない ● コンテキストスイッチが不要 ● デバッグの容易さ ● 環境構築がしやすい ● ツール類の知見が流用できる © Spacemarket, Inc. All Rights Reserved. 11

Confidential メリット 言語の学習コスト 構文やメソッドなどはそのまま利用できるため、 promise / async / await ロジックに集中することができる。 try ~ catch / if ~ else Array.map, filter, forEach, reduce…. const / let class / set / map template literal © Spacemarket, Inc. All Rights Reserved. 12

Confidential メリット コンテキストスイッチが不要 学習コストだけではなく同じ言語なので、 Javascript コードを書く時に書き方を切り替える必要もない Ruby © Spacemarket, Inc. All Rights Reserved. 13

Confidential メリット デバッグの容易さ デバッグもVSCodeのJavaScript Debug Terminalなどから行える © Spacemarket, Inc. All Rights Reserved. 14

Confidential メリット 環境構築がしやすい ● Node.jsとPackage Managerが共通 ● （設計次第な面もあるが）.envなどの環境変数の管理も同じ © Spacemarket, Inc. All Rights Reserved. 15

Confidential メリット ツール類の知見が流用できる ● Jest、Vitestなどのテストランナー ● Sentryなどのエラー監視ツール ● ESlint, Pretter ● TypeScriptのconfigなど © Spacemarket, Inc. All Rights Reserved. 16

Confidential メリット 型による開発体験の向上 ● 言わずもがなですが ● 静的型検査による素早いフィードバック © Spacemarket, Inc. All Rights Reserved. 17

Confidential メリット パフォーマンスの向上 (当時のRailsに比べてではありますが) ● Blocking I/Oから非同期 I/Oに変わったことによりスループットの向上 ● コンテナ化でスケーリングも容易に © Spacemarket, Inc. All Rights Reserved. 18

FE〜BE統一で気づいたこと

Confidential 気づいたこと フレームワーク・思想の差異 (BE) useStateとは？ Returnの中にテンプレートが入っている © Spacemarket, Inc. All Rights Reserved. (FE) @って書かれているのはなに？ classが多いコード見慣れない 20

Confidential 気づいたこと フレームワーク・思想の差異 フロントエンド バックエンド ● リソースを表示したい ● ドメインをモデリングする ● 関数型中心 ● オブジェクト指向中心 ● フレームワーク毎に独自の書き方が多い ● フレームワーク毎に書き方は違うが、クリーンアー キテクチャなど一般的なBEの思想が入る © Spacemarket, Inc. All Rights Reserved. 21

Confidential 気づいたこと ● 書き方・思想は揃えきれないものとする ○ ● フレームワーク・思想の差異 足りない部分は組織やチームで補う 覚えるフレームワークは減らすにこしたことはない ○ BEのNode.jsに関しては、これを覚えておけば間違いないというものはない？ © Spacemarket, Inc. All Rights Reserved. 22

Confidential 気づいたこと フレームワーク・思想の差異（を超えるために） 現在は得意不得意あっても全員で機能を作っていくようなフューチャーチームとなっています。 © Spacemarket, Inc. All Rights Reserved. チーム A チーム B [FE] A さん [FE] B さん [FE] α さん [FE] β さん [BE] C さん [BE] D さん [BE] E さん [BE] γ さん [BE] Δ さん [BE] ε さん 23

Confidential 気づいたこと フレームワーク・思想の差異（を超えるために） 現在は得意不得意あっても全員で機能を作っていくようなフューチャーチームとなっています。 過去、職能でチームが分かれていた時期もあったためFE/BEがTypeScriptで開発できるのにも関わらず、 １年前までは越境するということは少なかった。 © Spacemarket, Inc. All Rights Reserved. チーム A チーム B [FE] A さん [FE] B さん [FE] α さん [FE] β さん [BE] C さん [BE] D さん [BE] E さん [BE] γ さん [BE] Δ さん [BE] ε さん 24

Confidential 気づいたこと フレームワーク・思想の差異（を超えるために） スペースマーケットでは去年よりLeSSを導入（Large-Scale-Scrum） 事業責任者とPOと対話を繰り返し一つの目標に向かうことで プロダクト指向の考え方が根付いた。 結果、プロダクトのゴールを達成するために、 職能にとらわれずやれることを遂行するという価値観に。 © Spacemarket, Inc. All Rights Reserved. 25

Confidential 気づいたこと フレームワーク・思想の差異（を超えるために） テックサロンという１０％ルールを活かした学習時間を確保する制度を導入。 職能問わないメンバーで週１でモブプロする機会があり、 他領域に挑戦する機会が増加。 https://zenn.dev/spacemarket/articles/spm-tech-salon © Spacemarket, Inc. All Rights Reserved. 26

• https://zenn.dev/spacemarket/articles/spm-tech-salon

Confidential 気づいたこと フロントエンドとバックエンド間の型共有の壁 ● フロントエンドとバックエンドはアプリケーションが別 ● RestやGraphQL、gRPCなどネットワークの境界がある ● リリースなどのサイクルを考えると、型が揃っていてもランタイムエラーは起こりえてしまう ● OpenAPIやGraphQLなどのSchema定義を元に型を生成するで現状満足 © Spacemarket, Inc. All Rights Reserved. 27

Confidential 気づいたこと TypeScriptの自由度の高さ ● 型パズルと言われているぐらいTypeScriptでは型を自由に作れる ● 部分一致すればTypeScript的にはエラーは出ない ● Branded Typesなどで対応できるが、実装パターンで標準ではない ● 自由度が高い反面、実装者の嗜好が色濃くでる可能性がある © Spacemarket, Inc. All Rights Reserved. 28

Confidential まとめ ● TypeScriptによる開発生産性の向上は間違いない ● FE/BE領域は異なるが言語が同じであれば学習しやすい ● 言語が統一されてもフレームワーク・思想は異なるということを認識する ● TypeScriptも万能ではないので、適切に評価する必要がある © Spacemarket, Inc. All Rights Reserved. 29

Confidential お知らせ © Spacemarket, Inc. All Rights Reserved. 30

Confidential お知らせ ・採用情報はこちらから ・Webエンジニア ・バックエンドエンジニア（EM候補） ・アプリシニアエンジニア（EM候補） ・など、積極採用中です。 https://spacemarket.co.jp/recruit/ © Spacemarket, Inc. All Rights Reserved. 31

• https://spacemarket.co.jp/recruit/