チーム開発を円滑に進めるためのOSS / Lightning TechTalks 20231102

https://hireroo.connpass.com/event/297090/

Transcript

1. チーム開発を円滑に進めるためのOSS
2. Ryo Adachi (アダチ リョウ) https://www.dachi.one Mosh Inc. / プロダクティビティチーム https://corp.mosh.jp Web基盤の整備、機能開発など プロフィール dachi023 dachi_023
3. はじめに
4. • ⼿間のかかる作業の⾃動化 • 複雑だったものをシンプルにしていく • 開発者のやりたい事に集中できる チーム開発が円滑に進むとは
5. • API ◦ Python, AWS Lambda, OpenAPI • Client ◦ Angular, TypeScript, TailwindCSS Moshの技術スタック
6. • Prettier plugins • Nx • openapi-generator (OpenAPI) この5分間で紹介したいもの
7. Prettierができることを増やす
8. • フォーマットされる部分を増やしたい ◦ 細かい部分でフォーマットされずモヤモヤする Prettierのまだやれる感
9. • import⽂の⾃動ソート • 元はeslint-plugin-importでやっていた ◦ フォーマッタとしての機能はPrettierに寄せたい • 正規表現でグルーピングなども設定可能 ◦ ^mylib-(.*)$ ◦ ^@mylib/(.*)$ • trivago/prettier-plugin-sort-imports @trivago/prettier-plugin-sort-imports
10. • class名をソートする • tailwind.config.jsの内容を読み込んでくれる • Angular / React / Vueはデフォルトで対応済み ◦ ngClass / className / :class ◦ それ以外の独⾃形式でも設定すれば利⽤可能 • tailwindlabs/prettier-plugin-tailwindcss prettier-plugin-tailwindcss
11. NxでMonorepo管理を楽にする
12. • Monorepo構成管理ツールの1つ ◦ 他にはyarn workspace / lerna / turborepoなど ◦ コンセプトや⽤途が異なるため⽬的に合わせて選ぶと良い • Pluginによる設定の少なさ • Monorepoでもコードキャッシュ‧差分ビルド • エディタ拡張を利⽤してgenerate, runなど • nx.dev nrwl/nx
13. ビルド周りの課題 • 複数あるモジュールの扱いが難しい ◦ 共通の関数‧コンポーネントが切り出されている ▪ core / shared / page など ◦ 開発中のビルド順の制御が難しい ▪ sharedより先にpageがビルドされるとエラーになる ◦ モジュールを跨ぐと差分ビルドできない ▪ 別プロセスでwatchしているので差分検知が難しい
14. Nxで解決できたこと • ビルド順の制御 ◦ 依存関係から順番を制御してくれる ◦ どのタスクで制御する必要があるかも指定可能 • コードキャッシュ ◦ モジュールを跨いでも差分ビルドが効く ◦ ↑とキャッシュの効果でビルド速度が⼤幅に改善
15. openapi-generatorで API周りの簡略化
16. • openapi.ymlからAPIサーバやクライアントを⽣成 • 複数⾔語‧FWに対応 • openapi-generator.tech openapi-generator
17. • APIは既にopenapi.ymlに定義されたI/Fで実装 ◦ フロントエンドのAPIクライアントは⼿動実装 ◦ ⼿動実装ゆえのI/F変更への追従コストが発⽣ • APIのI/Fに対しての関⼼が薄い ◦ 設計フェーズではAPI開発者の中でI/Fが決まる ◦ 画⾯の実装をする⼈が別だった場合にどうしても意識が薄れがち • APIがリリースされないと実装できない ◦ APIよりも先⾏して実装を進めることが難しい API周りの課題
18. OpenAPIによって得られたもの 導⼊したてなので以下希望 (そうなってほしい) • APIへの実装の追従コストの軽減 ◦ APIの追加‧変更に⼿動で対応しなくてよい • フロントエンドとバックエンドの共通の財産 ◦ openapi.ymlを通してAPIのI/Fレビューができる ◦ APIクライアントを⽣成するためのリソースなので関⼼が湧く • APIが組み上がる前にStubで試せる ◦ 事前にI/Fを知り、何か問題があればAPIを実装する前に気付ける
19. OpenAPIによって得られたもの openapi.yml APIクライアント⽣成 TS型定義⽣成 Stub Server起動 スキーマ(I/F)定義 テストケース⽣成
20. さいごに
21. 紹介しきれなかったOSSたち • Storybook (+ Chromatic) ◦ UIカタログとしてもテストツールとしても有能 ◦ Chromaticで共有のホスティング‧テスト環境が作れる • ESLint ◦ 現代のフロントエンド開発では標準装備したいOSS • TypeScript ◦ こちらも標準装備したい ◦ 型によって未然に防げる不具合がたくさんある
22. OSSなしにプロダクト開発は語れない • IssueやPRなどで積極的に貢献していきましょう
23. We’re hiring! careers.mosh.jp