チーム開発を円滑に進めるためのOSS 

Ryo Adachi (アダチ リョウ) https://www.dachi.one Mosh Inc. / プロダクティビティチーム https://corp.mosh.jp Web基盤の整備、機能開発など プロフィール dachi023 dachi_023 

はじめに 

● ⼿間のかかる作業の⾃動化 ● 複雑だったものをシンプルにしていく ● 開発者のやりたい事に集中できる チーム開発が円滑に進むとは 

● API ○ Python, AWS Lambda, OpenAPI ● Client ○ Angular, TypeScript, TailwindCSS Moshの技術スタック 

● Prettier plugins ● Nx ● openapi-generator (OpenAPI) この5分間で紹介したいもの 

Prettierができることを増やす 

● フォーマットされる部分を増やしたい ○ 細かい部分でフォーマットされずモヤモヤする Prettierのまだやれる感 

● import⽂の⾃動ソート ● 元はeslint-plugin-importでやっていた ○ フォーマッタとしての機能はPrettierに寄せたい ● 正規表現でグルーピングなども設定可能 ○ ^mylib-(.*)$ ○ ^@mylib/(.*)$ ● trivago/prettier-plugin-sort-imports @trivago/prettier-plugin-sort-imports 

● class名をソートする ● tailwind.config.jsの内容を読み込んでくれる ● Angular / React / Vueはデフォルトで対応済み ○ ngClass / className / :class ○ それ以外の独⾃形式でも設定すれば利⽤可能 ● tailwindlabs/prettier-plugin-tailwindcss prettier-plugin-tailwindcss 

NxでMonorepo管理を楽にする 

● Monorepo構成管理ツールの1つ ○ 他にはyarn workspace / lerna / turborepoなど ○ コンセプトや⽤途が異なるため⽬的に合わせて選ぶと良い ● Pluginによる設定の少なさ ● Monorepoでもコードキャッシュ‧差分ビルド ● エディタ拡張を利⽤してgenerate, runなど ● nx.dev nrwl/nx 

ビルド周りの課題 ● 複数あるモジュールの扱いが難しい ○ 共通の関数‧コンポーネントが切り出されている ■ core / shared / page など ○ 開発中のビルド順の制御が難しい ■ sharedより先にpageがビルドされるとエラーになる ○ モジュールを跨ぐと差分ビルドできない ■ 別プロセスでwatchしているので差分検知が難しい 

Nxで解決できたこと ● ビルド順の制御 ○ 依存関係から順番を制御してくれる ○ どのタスクで制御する必要があるかも指定可能 ● コードキャッシュ ○ モジュールを跨いでも差分ビルドが効く ○ ↑とキャッシュの効果でビルド速度が⼤幅に改善 

openapi-generatorで API周りの簡略化 

● openapi.ymlからAPIサーバやクライアントを⽣成 ● 複数⾔語‧FWに対応 ● openapi-generator.tech openapi-generator 

● APIは既にopenapi.ymlに定義されたI/Fで実装 ○ フロントエンドのAPIクライアントは⼿動実装 ○ ⼿動実装ゆえのI/F変更への追従コストが発⽣ ● APIのI/Fに対しての関⼼が薄い ○ 設計フェーズではAPI開発者の中でI/Fが決まる ○ 画⾯の実装をする⼈が別だった場合にどうしても意識が薄れがち ● APIがリリースされないと実装できない ○ APIよりも先⾏して実装を進めることが難しい API周りの課題 

OpenAPIによって得られたもの 導⼊したてなので以下希望 (そうなってほしい) ● APIへの実装の追従コストの軽減 ○ APIの追加‧変更に⼿動で対応しなくてよい ● フロントエンドとバックエンドの共通の財産 ○ openapi.ymlを通してAPIのI/Fレビューができる ○ APIクライアントを⽣成するためのリソースなので関⼼が湧く ● APIが組み上がる前にStubで試せる ○ 事前にI/Fを知り、何か問題があればAPIを実装する前に気付ける 

OpenAPIによって得られたもの openapi.yml APIクライアント⽣成 TS型定義⽣成 Stub Server起動 スキーマ(I/F)定義 テストケース⽣成 

さいごに 

紹介しきれなかったOSSたち ● Storybook (+ Chromatic) ○ UIカタログとしてもテストツールとしても有能 ○ Chromaticで共有のホスティング‧テスト環境が作れる ● ESLint ○ 現代のフロントエンド開発では標準装備したいOSS ● TypeScript ○ こちらも標準装備したい ○ 型によって未然に防げる不具合がたくさんある 

OSSなしにプロダクト開発は語れない ● IssueやPRなどで積極的に貢献していきましょう 

We’re hiring! careers.mosh.jp