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
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
3
170
あなたの知らない「動画広告」の世界 - iOSDC Japan 2025
ukitaka
0
370
Breaking Up with Big ViewModels — Without Breaking Your Architecture (droidcon Berlin 2025)
steliosf
PRO
1
300
麻雀点数計算問題生成タスクから学ぶ Single Agentの限界と Agentic Workflowの底力
po3rin
5
2.1k
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
150
PostgreSQLで手軽にDuckDBを使う!DuckDB&pg_duckdb入門/osk2025-duckdb
takahashiikki
1
240
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1k
XP, Testing and ninja testing ZOZ5
m_seki
2
270
iOSDC.pdf
chronos2500
2
660
開発生産性を上げるための生成AI活用術
starfish719
1
150
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
140
AIで開発生産性を上げる個人とチームの取り組み
taniigo
0
130
Featured
See All Featured
How to Ace a Technical Interview
jacobian
280
23k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Why Our Code Smells
bkeepers
PRO
339
57k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
GraphQLとの向き合い方2022年版
quramy
49
14k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
4 Signs Your Business is Dying
shpigford
185
22k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
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