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
290
チーム開発を円滑に進めるための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
730
リモートワークの導入から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
CSC307 Lecture 05
javiergs
PRO
0
210
Trial
cairolibrary720
1
130
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
140
Clean Architecture by TypeScript & NestJS
ryounasso
0
150
CSC307 Lecture 14
javiergs
PRO
0
220
Android開発者のための Kotlin Multiplatform入門
ntaro
0
190
OpenAI/Gemini APIを使って EPUBを翻訳するCLIツールをつくってみた
tomiyan
0
790
Namespace on read
tagomoris
2
370
MIERUNE BBQにおけるユーザー中心設計()
mierune
PRO
1
110
ドメイン駆動設計の実践
masuda220
PRO
19
5.2k
初心者がおさえておきたいAWS CDKのベストプラクティス 2024
konokenj
15
7.3k
最古の関数型言語「Lisp」ことはじめ / lisp_in_kamiyama
uhooi
1
190
Featured
See All Featured
Being A Developer After 40
akosma
72
580k
A Tale of Four Properties
chriscoyier
155
22k
Making Projects Easy
brettharned
111
5.7k
Building Flexible Design Systems
yeseniaperezcruz
323
37k
10 Git Anti Patterns You Should be Aware of
lemiorhan
652
58k
Design by the Numbers
sachag
277
18k
How to Ace a Technical Interview
jacobian
274
23k
Side Projects
sachag
451
42k
Building a Modern Day E-commerce SEO Strategy
aleyda
25
6.7k
The World Runs on Bad Software
bkeepers
PRO
63
11k
Code Review Best Practice
trishagee
58
16k
Clear Off the Table
cherdarchuk
89
320k
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