2019/06/08 (若手)エンジニアもくもく会 vol.13 @CUEBiC で登壇した発表資料

1. サービスリリースから安定軌道に乗せる
までに行った開発施策
2019/06/08
(若手)エンジニアもくもく会 vol.13 @CUEBiC
Keiichi Hagiwara

2. 自己紹介
萩原圭市（Keiichi Hagiwara) GVA TECH株式会社 Webエンジニア
リーガルテックサービスの開発
サーバーサイド：PHP7.2（CakePHP3系),MySQL5.6
フロントエンド：HTML,CSS,JavaScript(Vue2系)
インフラ：AWS (EC2,VPC,Route53,S3,RDS,Aurora),Docker

3. - サービスのリリースから安定稼働させるために行ってきた施策、これから行
う施策を知ってもらい持ち帰って頂く
- 発表を通して「もっとこういうやり方もあるよ」を逆に教えて頂く
- 「こういう場合のこと考慮されてない？」を指摘して頂く
本発表の目的

4. DockerとMakefileで環境構築自動化
メリット
・コンテナ上で動かすのでOS依存にならない
・設定さえできれば環境構築が待っているだけでできる
デメリット
・WindowsだとDockerの設定が難しい

5. メリット
・ブレークポイントの置いた時点での配列の中身確認できる
・ステップ実行していくことでデータの変遷が追える
・もっと高度な使い方ができると特定の条件下でブレークしたり（for分が何回回
ったら止めるなど）
デメリット
・ローカルのオーバーヘッドが高くなる
Xdebugを入れる

6. メリット
・プロジェクトの見える化ができる
・情報の集約化が出来る
・ビジネスサイドも使いやすい
デメリット
・費用がかかる
・慣れたツールから変えることに抵抗のある人やUIUXが好きじゃない人が一定数
いる
Backlogの導入

7. プランニングポーカーを使う
メリット
・新人とベテランで開発見積もりの認識を埋められる
・より正確な工数を割り出せる
デメリット
・参加する人の経験によって結果が偏る

8. ステージング環境 x バージョン管理
・masterからフィーチャーブランチを切って確認もそこそこにmasterにすぐ反映
という運用をやめることができた
・バージョンタグを付けておくことで不具合が発生したときにいつから発生して
いるのか追える
・バージョンブランチはステージングにデプロイしておいてリリースするまでの
一定期間ビジネスサイドに常に確認してもらい、不具合や差し戻しをリリース前
に検知できる
・ステージングで様子見期間を持つので思い切ったリファクタに取り組みやすい

9. それまで
・ひとつのmain.jsの中に全てが入っていた
・コンポーネントの切り分けなどされていない
・Vueを使っているのにDOMを直接操作してしまっている
Vue.jsの設計をきれいに作り直し中

10. Vue.jsの設計をきれいに作り直し中
改善後
・Vueの設計をAtomic Designにしてコンポーネントを粒度ごとにパーツ分けして
設計した
・Domは操作しないように書き直した
・Fluxの設計に従いながらVuexでコンポーネント間の共通処理などをまとめた
・StoryBookを入れてパーツのUIの見える化をしたい
・CircleCIの中でコンパイルなどを行いたい

11. ・DockerとMakefileで環境構築を自動化した
・Xdebugを入れて開発効率化
・Backlogを入れてプロジェクトの見える化
・プランニングポーカーを使って工数の明確化
・ステージング環境を作り、バージョン管理と組み合わせてバグの出にくい仕組
みに
・VueをアトミックデザインとVuexできれいに書き直し
まとめ