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
260
チーム開発を円滑に進めるための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
690
リモートワークの導入から3ヶ月 / Connehito marche online 20200311
dachi023
2
2.7k
急に大量のHTMLが必要になったこと、ありませんか? / BIT VALLEY INSIDE vol8
dachi023
0
7.7k
ママリのweb技術の今と未来 / mamari's front-end present and future
dachi023
2
1.3k
2年運用したサービスのフロントをReactで書き換えたい話
dachi023
5
1.9k
beginner_react_flux
dachi023
1
370
エンジニアがUIデザインをしてみた話
dachi023
1
1.2k
Other Decks in Programming
See All in Programming
Site Reliability Engineering for GMO
pyama86
8
1.1k
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
170
新宿ダンジョンを可視化してみた
satoshi7190
3
390
Java 22 Overview
kishida
1
190
Milestoner
bkuhlmann
1
410
VS Code をプロダクトにどう取り込むか
onomax
1
680
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
140
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
900
ServerAction で Progressive Enhancement はどこまで頑張れるか? / progressive-enhancement-with-server-action
takefumiyoshii
6
420
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
120
Git Lint
bkuhlmann
4
760
Goのエラースタックトレースの歴史と今後
sonatard
10
1.8k
Featured
See All Featured
Bash Introduction
62gerente
605
210k
Fireside Chat
paigeccino
22
2.6k
How to Ace a Technical Interview
jacobian
273
22k
Rebuilding a faster, lazier Slack
samanthasiow
74
8.2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Rails Girls Zürich Keynote
gr2m
91
13k
Fantastic passwords and where to find them - at NoRuKo
philnash
39
2.5k
BBQ
matthewcrist
80
8.8k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
20
1.6k
Agile that works and the tools we love
rasmusluckow
325
20k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
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