ベトナム拠点との楽しいフロントエンド開発とそのためにやった事 in Ginza#9

Transcript

1. ベトナム拠点との 楽しいフロントエ ンド開発とそのた めにやった事 @onigiri_ in Ginza.js #9
2. 自己紹介
3. 自己紹介 - 松田 衆治 (@onigiri_) - トライバルメディア ハウス勤務 - ベトナムにも開発拠点があります。 - テックリードやってます。 - 割と好きなのはフロントエンド かな... - 新規事業やってます。 - React(Next) - Go - GCP - (余談)前々職は通信事業者で、前職は某グルメ系メディアでフロントエンド エンジニ ア
4. 今日の発表について
5. 今日の発表について • すいません、技術的に新しい話はほとんど入ってないです。 ◦ 後スライド今日準備しました .... • オフサイトで言語が違う人たちと開発する時って「色々意識して準備した方がいいよ ね」っていうLTです
6. ベトナムについて
7. ベトナムについて • 東南アジアの一国 • 純朴で真面目な方が多い気がする。 ◦ ルールを守る事に特に違和感がない • 憧れの職業１位が医者で２位がエンジニア（らしい） ◦ 優秀な層がエンジニアに集まる ◦ ただしエンジニアコミュニティはほとんどない ▪ 学びは全て仕事から
8. 開発体制
9. ベトナム側 開発者4名 (フロント) ベトナム側 開発者4名 (フロント) 開発体制 • 私がテックリードで ◦ 委託の人にバックエンドをやってもらい ◦ ベトナム側にフロントエンド をやってもらっている。 ▪ 若手多め ▪ 理由は今回説明しません。（長くなるので ◦ インフラはGCPのPaaSやManaged Service使ってます(雰囲気 私 (テックリード) 国内の若手 （フロント・バックエ ンド） 委託の方 (バックエンド) ベトナム側 開発者4名 (フロント) ベトナム側 開発者4名 (フロント)
10. 意識した事
11. 自身の経験と意識した事 • 私自身、オフショア拠点側で開発した事あるので、その経験を元に開発準備段階で 色々考えて実行しました。 • 口頭のコミュニケーションに頼らない開発プロセスを実現する ◦ 英語は通じるが、お互い母国語じゃないので実のところ難しい ◦ コミュニケーションごとに解釈によるエラーが発生するリスクがある • そもそもの自然言語コミュニケーションの必要性を減らす ◦ ドキュメント含む
12. 実際にやった事
13. やった事　Part.1 • まず、フレームワーク選定 ◦ 型と親和性高い方がいいよね ▪ ドメイン的なナレッジを型で共有できるから ◦ 英語のドキュメントが豊富な方がいいよね ◦ →React(Next)かなぁ（個人の判断です ◦ 一応、相手側の何のフレームワークが一番人気か聞いてみたが ▪ 「It’s definitely React」って言ってました（個人の感想です • 環境構築まで日本側でやった ◦ Next + TypeScript + eslint ▪ 文法共有はlinterで ◦ Jestやenzymeなどで参考のためにサンプルテストも書いた後で repository共有した
14. やった事　Part.2 • dev serverからバックエンドの開発環境(GCP)へAPIをproxyする ◦ バックエンド開発者とのコミュニケーションが不要にするため ◦ NextのCustom Serverとhttp-proxy-middlewareを使う ◦ Proxy先は共用の開発環境で GCPのApp Engine上 • APIの仕様書的なものをBackendのrepository上に配置する ◦ 現状はPostmanのcollection ◦ 仕様をわざわざ伝える必要が減る
15. やった事　Part.2 • dev serverからバックエンドの開発環境へAPIをproxyする ◦ バックエンド開発者とのコミュニケーションが不要にするため ◦ NextのCustom Serverとhttp-proxy-middlewareを使う ◦ Proxy先は共用の開発環境で GCPのApp Engine上 • APIの仕様書的なものをBackendのrepository上に配置する ◦ 現状はPostmanのcollection ◦ 仕様をわざわざ伝える必要が減る
16. やった事　Part.3 • valueに対するラベルはenumで事前に定義しておく。 ◦ optionのlabelとかに使えていい感じ ▪ 日本語コピペゲーも避けれる ◦ バックエンドとの区分値とも合わせているので副次的に良い ◦ 区分値変わるたびに依頼するのはとても大変なので、こっちで実装しちゃうのが楽 ◦ 例えばGenderの区分値
17. やった事　Part.3 • valueに対するラベルはenumで事前に定義しておく。 ◦ optionのlabelとかに使えていい感じ ▪ 日本語コピペゲーも避けれる ◦ バックエンドとの区分値とも合わせているので副次的に良い ◦ 区分値変わるたびに依頼するのはとても大変なので、こっちで実装しちゃうのが楽 ◦ 例えばGenderの区分値
18. 結局、ドキュメントで共有したもの • コンポーネント設計 ◦ 仕組みでカバーできない • スタイルガイド • DoDなど、タスクをやる上で必要なルールなど
19. 今後やりたい(やっている)もの • Fetchのbodyやresponseの型を定義する ◦ API仕様より堅めの確認をしたい。 ◦ Fetchのwrapperを作成する ◦ ついでに変更にも強くなる • stylelintをもう少し真面目にやりたい • ベトナムからレイテンシの低いところにAPI proxy先を置きたい ◦ パフォーマンス検証をよりしやすくしたい ◦ 香港だと思う ◦ でも、コストが... (費用と運用)
20. 最後に
21. 最後に • やってみた感想： ◦ ベトナム拠点との開発は色々大変だが、準備しておけば何とかなる。 ◦ 何より吸収が早いので一緒にやっていて楽しい • と言いつつも ◦ 大変なことも多いので、今後もやり方を模索していく • 「私はこうやって海外拠点との開発やってます！」的な情報共有待ってます！