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
ベトナム拠点との楽しいフロントエンド開発とそのためにやった事 in Ginza#9
Search
Shuji Matsuda
February 05, 2020
Programming
0
56
ベトナム拠点との楽しいフロントエンド開発とそのためにやった事 in Ginza#9
Shuji Matsuda
February 05, 2020
Tweet
Share
More Decks by Shuji Matsuda
See All by Shuji Matsuda
[Sponsor LT] Tribal Media Houseのご紹介
smatsudatbh
0
43
Other Decks in Programming
See All in Programming
GitHub Actionsの痒いところを埋めるサードパーティーランナー
dora1998
2
270
TypeScriptのパフォーマンス改善
yajihum
14
5.1k
Slackワークフローで感謝を伝える機能/WiFi 自動接続/Figma to React Component/障害レポート君 Team3@NOT A HOTEL
nakaohiroshi
0
110
TSKaigi 2024 - 新サービス Progate Path の演習で TypeScript を採用して見えた教材観点からの利点と課題
makotoshimazu
1
220
GNU Makeの使い方 / How to use GNU Make
kaityo256
PRO
13
4.4k
The test code generator using static analysis and LLM
mikik0
1
170
Implementing Design Systems in Swift
seyfoyun
2
530
RubyGems on ruby.wasm
kateinoigakukun
0
130
slow types ってなんだろう?
karad
0
210
Next.js App Router
quramy
14
2.3k
mb_trim関数を作りました
youkidearitai
PRO
1
230
Embedding it into Ruby code
soutaro
2
340
Featured
See All Featured
What the flash - Photography Introduction
edds
64
11k
In The Pink: A Labor of Love
frogandcode
138
21k
Happy Clients
brianwarren
92
6.4k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
[RailsConf 2023] Rails as a piece of cake
palkan
29
4.1k
Facilitating Awesome Meetings
lara
43
5.6k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
26
2.3k
For a Future-Friendly Web
brad_frost
172
9k
KATA
mclloyd
16
12k
Building Effective Engineering Teams - LeadDev
addyosmani
33
1.9k
Creatively Recalculating Your Daily Design Routine
revolveconf
211
11k
Transcript
ベトナム拠点との 楽しいフロントエ ンド開発とそのた めにやった事 @onigiri_ in Ginza.js #9
自己紹介
自己紹介 - 松田 衆治 (@onigiri_) - トライバルメディア ハウス勤務 - ベトナムにも開発拠点があります。
- テックリードやってます。 - 割と好きなのはフロントエンド かな... - 新規事業やってます。 - React(Next) - Go - GCP - (余談)前々職は通信事業者で、前職は某グルメ系メディアでフロントエンド エンジニ ア
今日の発表について
今日の発表について • すいません、技術的に新しい話はほとんど入ってないです。 ◦ 後スライド今日準備しました .... • オフサイトで言語が違う人たちと開発する時って「色々意識して準備した方がいいよ ね」っていうLTです
ベトナムについて
ベトナムについて • 東南アジアの一国 • 純朴で真面目な方が多い気がする。 ◦ ルールを守る事に特に違和感がない • 憧れの職業1位が医者で2位がエンジニア(らしい) ◦
優秀な層がエンジニアに集まる ◦ ただしエンジニアコミュニティはほとんどない ▪ 学びは全て仕事から
開発体制
ベトナム側 開発者4名 (フロント) ベトナム側 開発者4名 (フロント) 開発体制 • 私がテックリードで ◦
委託の人にバックエンドをやってもらい ◦ ベトナム側にフロントエンド をやってもらっている。 ▪ 若手多め ▪ 理由は今回説明しません。(長くなるので ◦ インフラはGCPのPaaSやManaged Service使ってます(雰囲気 私 (テックリード) 国内の若手 (フロント・バックエ ンド) 委託の方 (バックエンド) ベトナム側 開発者4名 (フロント) ベトナム側 開発者4名 (フロント)
意識した事
自身の経験と意識した事 • 私自身、オフショア拠点側で開発した事あるので、その経験を元に開発準備段階で 色々考えて実行しました。 • 口頭のコミュニケーションに頼らない開発プロセスを実現する ◦ 英語は通じるが、お互い母国語じゃないので実のところ難しい ◦ コミュニケーションごとに解釈によるエラーが発生するリスクがある
• そもそもの自然言語コミュニケーションの必要性を減らす ◦ ドキュメント含む
実際にやった事
やった事 Part.1 • まず、フレームワーク選定 ◦ 型と親和性高い方がいいよね ▪ ドメイン的なナレッジを型で共有できるから ◦ 英語のドキュメントが豊富な方がいいよね ◦
→React(Next)かなぁ(個人の判断です ◦ 一応、相手側の何のフレームワークが一番人気か聞いてみたが ▪ 「It’s definitely React」って言ってました(個人の感想です • 環境構築まで日本側でやった ◦ Next + TypeScript + eslint ▪ 文法共有はlinterで ◦ Jestやenzymeなどで参考のためにサンプルテストも書いた後で repository共有した
やった事 Part.2 • dev serverからバックエンドの開発環境(GCP)へAPIをproxyする ◦ バックエンド開発者とのコミュニケーションが不要にするため ◦ NextのCustom Serverとhttp-proxy-middlewareを使う ◦
Proxy先は共用の開発環境で GCPのApp Engine上 • APIの仕様書的なものをBackendのrepository上に配置する ◦ 現状はPostmanのcollection ◦ 仕様をわざわざ伝える必要が減る
やった事 Part.2 • dev serverからバックエンドの開発環境へAPIをproxyする ◦ バックエンド開発者とのコミュニケーションが不要にするため ◦ NextのCustom Serverとhttp-proxy-middlewareを使う ◦
Proxy先は共用の開発環境で GCPのApp Engine上 • APIの仕様書的なものをBackendのrepository上に配置する ◦ 現状はPostmanのcollection ◦ 仕様をわざわざ伝える必要が減る
やった事 Part.3 • valueに対するラベルはenumで事前に定義しておく。 ◦ optionのlabelとかに使えていい感じ ▪ 日本語コピペゲーも避けれる ◦ バックエンドとの区分値とも合わせているので副次的に良い ◦
区分値変わるたびに依頼するのはとても大変なので、こっちで実装しちゃうのが楽 ◦ 例えばGenderの区分値
やった事 Part.3 • valueに対するラベルはenumで事前に定義しておく。 ◦ optionのlabelとかに使えていい感じ ▪ 日本語コピペゲーも避けれる ◦ バックエンドとの区分値とも合わせているので副次的に良い ◦
区分値変わるたびに依頼するのはとても大変なので、こっちで実装しちゃうのが楽 ◦ 例えばGenderの区分値
結局、ドキュメントで共有したもの • コンポーネント設計 ◦ 仕組みでカバーできない • スタイルガイド • DoDなど、タスクをやる上で必要なルールなど
今後やりたい(やっている)もの • Fetchのbodyやresponseの型を定義する ◦ API仕様より堅めの確認をしたい。 ◦ Fetchのwrapperを作成する ◦ ついでに変更にも強くなる •
stylelintをもう少し真面目にやりたい • ベトナムからレイテンシの低いところにAPI proxy先を置きたい ◦ パフォーマンス検証をよりしやすくしたい ◦ 香港だと思う ◦ でも、コストが... (費用と運用)
最後に
最後に • やってみた感想: ◦ ベトナム拠点との開発は色々大変だが、準備しておけば何とかなる。 ◦ 何より吸収が早いので一緒にやっていて楽しい • と言いつつも ◦
大変なことも多いので、今後もやり方を模索していく • 「私はこうやって海外拠点との開発やってます!」的な情報共有待ってます!