STORES.jp (hey) に入社してちょうど1年経ったので、STORESのフロントエンド開発について書きます
STORESに入社してちょうど1年経ったので、2019年10月現在のSTORESのフロンエンド開発について書こうかなと思います。
↓は入社1ヶ月時点の記事です。
STORESのフロントエンドチーム
私が入社したとき（2018年10月）は 社員1名 + 業務委託2名 の 3名チームでした。しかし 今は 社員5名 + 業務委託4名 の9名です。前年比300% の急成長です。
しかし、STORESのフロントエンドエンジニアは足りてない状態です。
1年前と大きく変わったこととして、Coiney、STORESをまたいだ新規事業の開発が始まっています。詳細は書けないですが、オフラインのお店（Coiney）とオンラインのお店（STORES）をつなぐ何かです。想像を膨らませてください。
また、新規事業だけではなく既存事業も成長させなければなりません。フロントエンドエンジニアへの要望はビジネスサイドからもPMからもデザイナーからもたくさん振ってきます。もちろんフロントエンドチームから自発的に提案していくタスクもあります。
そんな状況なのでめちゃくちゃ人が増えているものの人は足りてないのが実情です。
しかし、ただ闇雲に人を増やしても効率が良くなるわけではないですよね。
なので、本当に一緒に働きたいと思える人しか採用していません。
その結果、とても優秀なメンバーと一緒に仕事ができています。
1年間でどんなものを作った？してきたか？
フロントエンドチームがしてきたことを思いつく限りあげときます。
※太字にしているのがhowdy39が関わったものです。
ストアデザインページ
- フルリニューアル（AngularJS → Nuxt.js）
- アイテム画像の縦横比変更対応
- アイテムピックアップパーツ
- カテゴリ選択パーツ
Storybook を用いた共通コンポーネント開発
CI/CDを用いたプレビュー環境構築
WebPagetestを使ったパフォーマンス計測
Whitegalleryページの作成
GoogleAnalytics（GTM）改善
増税一括設定
割販法クレジットカード申請
新ダッシュボードのベース作成（共通ヘッダーetc）
課金ページ置き換え
リブランディングに伴うサービストップページの改修
サービストップページの静的ファイルのCDN化
ショップページの画像最適化によるパフォーマンス向上
ショップトップページのLazy Load対応
Nuxtバージョンアップ（2.1 -> 2.9）
Storybookバージョンアップ（4.1 -> 5.2）
Nodeバージョンアップ（8.9 -> 10.16）
などです
フロントエンドチームの開発の進め方
フロントエンドチーム主体の仕事もあれば、他チームのフロントエンド部分のお手伝いみたいな仕事もあります。複数案件にまたがっている人もいます。
また、フロントエンドチーム主体で規模が大きい仕事はスクラム開発を取り入れています。※ スクラムの管理にはZenHubを使っています。
毎日、昼会をしています。
リモートの人もいるので昨日やったことや、今日やることをQiita Teamに書いておきます。フロントエンドチーム全体への相談などは昼会やSlack上ですることが多いです。
本番環境へのデプロイは毎日しています。（溜め込むとコンフリクトとかで面倒になるので）
社員は週変わりで運用・改善担当につきます。（運用週と呼んでいる）
運用週では不具合の対応や、改善系のタスクを行っています。
このタイミングでリファクタリングなどを行って、技術的負債を溜め込まないようにしています。
その他、変わったところだと、デプロイ対象の通知、レビュアーのアサイン、レビュー忘れの通知など、多岐にわたってBOTを活用しています。
レビュアーのアサインなどは、Pull Panda と違ってレビュアーのアサイン率を調整できるようにしていて好評です。（たとえば週3勤務の人はその分当たりづらくしたりとか、長期休暇の人はあたらなくしたりとか）
言語・ライブラリ
JavaScriptです。TypeScriptは今のところ使っていません。
新しく作るページはNuxtで作っています。SSRはせずにSPAで作っていてサーバーサイド（Rails）との通信をAPIでゴリゴリやる感じです。また、サービストップなどの静的ページはNuxtのGenerateを使っています。
テスト
Jestで単体テストを書いています。
E2Eは今のとこ入れていません。そのうち入れたいですね。
UIの実装
デザイナーチームが作ったzeplinを見てVueのコンポーネントを書いていきます。共通コンポーネントはStorybookを使っています。
以前その件についてLTしたときのスライドがあるのでよかったら見てください。
エラー監視
Sentryを使ってます。
ドキュメントの作成
入社キット、設計書、議事録などQiita Teamにあげています。
最近入った方はわかりやすい、助かっている。と言っていたので結構充実していると思います。
社内勉強会
やってはいますが、活発かというとそうでもないです。
やりたい人がいればやる感じです。やるととても喜ばれます。
最後に
私が入ったときは、テストも書いてなかったし、Storybookも使ってなかったし、Sentryでエラー通知もしてないし、パフォーマンス計測もしてなかったし、スクラムもしてなくてリスケの嵐だったし、ドキュメントもなくてさっぱりだったし、便利BOTもありませんでした。
1年という間にここまで良い方向に変化したチームはなかなかないんじゃないかなと思います。サービスを作っていくのも面白いですが、今後このチームがどう変化していくのかも楽しみです。
もしSTORESのフロントエンドチームに興味を持った方は howdy39 までDMしてもらってもいいですし、Hello heyという会社紹介 & 社員と交流できるイベントがあります、ぜひ遊びに来てください🙏
直近だとSTORESのフロントエンドについて話す勉強会もやります、ぜひ遊びに来てください。
（おまけ）個人的なこと
フロントエンドスキルだいぶ上がった。
AWSちょっとわかるようになった。
なんだかんだで社内のG Suiteのあれこれを手伝ってる。（私はもともと G Suite アプリケーションを作ってたエンジニア）
仕様の調整やIssueを管理したりとかの仕事が増えた。
↑の作業をしている分、コードを書くのは減ったかな。
※ 補足しておくと、コードを書くことにそこまでこだわりはなかったりするので悪いこととは思っていない。
チームメンバーがとても優秀なので、別に自分がコードを書く必要なくない？もっとやるべきことあるんじゃない？みたいなところは結構感じている。それが何なのかはよくわかってないのだけど。
この記事が気に入ったらサポートをしてみませんか？