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
チーム開発を円滑に進めるためのOSS / Lightning TechTalks 20231102
Search
dachi023
November 02, 2023
Programming
0
430
チーム開発を円滑に進めるためのOSS / Lightning TechTalks 20231102
https://hireroo.connpass.com/event/297090/
dachi023
November 02, 2023
Tweet
Share
More Decks by dachi023
See All by dachi023
AI時代のリアーキテクチャ戦略 / Re-architecture Strategy in the AI Era
dachi023
0
250
なぜその技術を使うのか? / Connehito marche online 20201112
dachi023
0
820
リモートワークの導入から3ヶ月 / Connehito marche online 20200311
dachi023
2
3k
急に大量のHTMLが必要になったこと、ありませんか? / BIT VALLEY INSIDE vol8
dachi023
0
8k
ママリのweb技術の今と未来 / mamari's front-end present and future
dachi023
2
1.4k
2年運用したサービスのフロントをReactで書き換えたい話
dachi023
5
2.1k
beginner_react_flux
dachi023
1
450
エンジニアがUIデザインをしてみた話
dachi023
1
1.3k
Other Decks in Programming
See All in Programming
EMこそClaude Codeでコード調査しよう
shibayu36
0
230
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
130
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
350
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
170
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
1
320
技術的負債の正体を知って向き合う
irof
0
200
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
290
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
270
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
240
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
15
6.1k
オープンソースソフトウェアへの解像度🔬
utam0k
16
3.1k
One Enishi After Another
snoozer05
PRO
0
130
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
Docker and Python
trallard
46
3.6k
BBQ
matthewcrist
89
9.8k
Why Our Code Smells
bkeepers
PRO
340
57k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
The Cost Of JavaScript in 2023
addyosmani
55
9k
RailsConf 2023
tenderlove
30
1.3k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
The Cult of Friendly URLs
andyhume
79
6.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
For a Future-Friendly Web
brad_frost
180
10k
Transcript
チーム開発を円滑に進めるための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