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
330
チーム開発を円滑に進めるためのOSS / Lightning TechTalks 20231102
https://hireroo.connpass.com/event/297090/
dachi023
November 02, 2023
Tweet
Share
More Decks by dachi023
See All by dachi023
なぜその技術を使うのか? / Connehito marche online 20201112
dachi023
0
740
リモートワークの導入から3ヶ月 / Connehito marche online 20200311
dachi023
2
2.8k
急に大量のHTMLが必要になったこと、ありませんか? / BIT VALLEY INSIDE vol8
dachi023
0
7.8k
ママリのweb技術の今と未来 / mamari's front-end present and future
dachi023
2
1.3k
2年運用したサービスのフロントをReactで書き換えたい話
dachi023
5
2k
beginner_react_flux
dachi023
1
380
エンジニアがUIデザインをしてみた話
dachi023
1
1.2k
Other Decks in Programming
See All in Programming
エラーレスポンス設計から考える、0→1開発におけるGraphQLへの向き合い方
bicstone
5
1.5k
2024 컴포즈 정원사
jisungbin
0
150
GenU導入でCDKに初挑戦し、悪戦苦闘した話
hideg
0
170
React + TextAliveでカッコいいLyric Applicatioinを作ろう!!
tosuri13
0
400
マルチモジュールにおけるテスト最適化
fxwx23
0
210
Kotlin 2.0が与えるAndroid開発の進化
masayukisuda
1
420
What is Parser
yui_knk
9
4.2k
上手に付き合うコンポーネントテスト
quramy
1
310
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
4
90k
『ドメイン駆動設計をはじめよう』中核の業務領域
masuda220
PRO
5
1k
Composing an API the *right* way (Droidcon New York 2024)
zsmb
2
190
API Platform for Laravel
dunglas
1
740
Featured
See All Featured
Ruby is Unlike a Banana
tanoku
96
11k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.4k
What the flash - Photography Introduction
edds
67
11k
No one is an island. Learnings from fostering a developers community.
thoeni
18
2.9k
Building Your Own Lightsaber
phodgson
101
6k
Art, The Web, and Tiny UX
lynnandtonic
294
20k
What's in a price? How to price your products and services
michaelherold
242
11k
Designing for Performance
lara
604
68k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
38
9.2k
Faster Mobile Websites
deanohume
304
30k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
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