フロントエンドチームの紹介
スタッドです。
ジールです。
スティーブです。TimeTree Tech Talk始まりました。よろしくお願いします。
よろしくお願いします。
今日はスタッドをお呼びしておりまして、スタッドは役割とかを説明すると結構いろいろついちゃうんですけど、基本的には中心IOSのエンジニア、フロントエンドのエンジニアもやっていたり。
そうですね。IOSをメインでやっている時期もあれば、スタッドをメインでやっている時期もあり、それと全然関係ないことをやっている時期もあり、いろいろやっております。
これもちょっと後で話が出ると思って、今日はスタッドをお呼びして、紹介するのはフロントエンドチームについてです。
はい。
よろしくお願いします。
よろしくお願いします。
TBSのラジオを聞いてたんですけど、ちょうどやってた話はスーパー総選挙っていうのをやっていて、うちがよく言ってるライフスーパーなんですけど、ライフが3位だったんですよ。
ライフ推しのいろんな熱い人のコメントとか聞いて、うんうんってうなずいたりしてました。
なるほど。ライフ推しなんですね。
1位どこだと思いますか?
僕はOKなんでOKです。
目が高いですね。
OKじゃないですか?
1位OKなんですよ。
あ、そうなんですね。
スーパー総選挙って4回ぐらいやってて、毎年1位なんですよ、OKが。
あ、そうか。そうなんですね。
強いんですよ、OK。
あ、そうですね。強いですよね。
でも僕んちの近くにOKもライフもあって、ライフはライフの良さがあるなってすごい感じますね。
わかりますわかります。
ライフね、お魚おいしいんで。
はいはいはい。
店内の雰囲気とかね、ライフのほうがいいなって思ったりするんですけど。
あ、そうなんだ。
なんか違いますよね、確かに。
えー、そういうのあるんですね。
僕大関好きですけどね。
大関って近くにないかも。
小田急系かな。変わった魚とか置いてたりするんですよ。
あ、そうなんですね。
あ、練馬店あるな。
だいたいでも家の近くの派閥になりますよね。
まあまあそうですね。
そうですね。
ちょっと変わったとこだとあの美容セボンとか大好きです。
全然僕わかんないです。
全然聞いたことない。
全然わかんないですね。
聞いたこともこなかったんですね。
なんかすごい、自然食品系のすごい高い薬ばっかある。
はいはいはいはい。
バカバカ買えないんですけど。
さてさて、そしたら冒頭にもちょっとあったフロントエンドチームの、
今日ちょっとチーム紹介ということでいろいろ聞いていきたいと思うんですが、
ついさっきまで事前の打ち合わせをしていたので、
ちょっとその流れで話していきますか。
フロントエンドチームってことで、
一応そのフロントエンドチームでどういうところを担当しているかみたいなのを簡単に教えてもらっていいですか。
うちのプロダクト、フロントエンドエンジニアが関わるプロダクト結構いっぱいあるんですけど、
それを全部わかる範囲で言っておくと、
例えばまずはタイムツリーのウェブ版ですね。
これは結構前からサービス提供していて、
リリースしたのが2016年だったと思うんですけど、
そこからずっと運用しているサービスです。
基本的にはサービスの内容はタイムツリーのアプリ版と同じ。
一部使えない機能とかがあって、
随時機能を追いかけてアプリ版に追いつけ追いつけという感じで開発はしているんですけど、
そういうのを適用しています。
あとは2年前ぐらいにリリースしたトカリっていうサービスがあって、
日程調整を円滑にするためのサービスですね。
このトカリは自分もプロジェクトメンバーとして入ってたんですけど、
タイムツリーのウェブ版を最初に作った時から年数がだいぶ経ってたので、
技術スタックを完全に新しくして、
新しい技術を使いながらプロダクト作りができたのが楽しかったですね。
あとはコーポレートサイトとか、タイムツリーの紹介ページとかも社内で内製していて、
これもフロントエンドエンジニアが作っています。
あとはですね、一般に公開してないんですけど、
広告をタイムツリーで出しているので、
広告主向けの管理画面っていうのをタイムツリーで内製していて、
それもフロントエンドエンジニアが開発しています。
あとはタイムツリーは外部から使えるパブリックAPIを提供しているんですけど、
それの開発者向けのドキュメントページとか、
あとはそのAPIを使ったサービスの一つであるGoogleホーム、
Googleアシスタントの対応とかAlexaとか、
あとスラックからも使えるんですけど、
その辺のサービス、これ実はJavaScriptで書かれているので、
採用技術の特徴
それを触れるフロントエンドエンジニアが作っているというような感じで、
多岐にわたって対応しているプロダクトがありますね。
担当しているプロダクトがあります。
一番古くはそういうWeb版。
Web版使ったことない方とかもいらっしゃるりそうですけど、
実際あるんですよね。ログインできるボタンがあって、
ウェブサイトからね。
そちらからやるやつが一番古くはあって、
最近そういうとかりであるとか、
コーポレートサイトのリニューアルであるとかして、
今日増えてきたというのがありますね。
確かにすごい領域が広い。
なるほどですね。
昔、タイムツリーの紹介ページとかコーポレートサイトは、
一番初期は、
自分はiOSやってたんですけど、
作る人がいないってことで、
うちの社長フレットが作ってた時期があって。
すごいですよね。
フレットは別にエンジニアじゃないですもんね、もともとが。
エンジニアじゃないですね。
それを公開したら、
アクセス数が結構あって、
Twitterとかで紹介されて結構アクセスがあったんですけど、
無駄なアクセスが大量に飛ぶような実装になっちゃってて、
このままだとお金がやばいぞみたいになって、
慌てて直したっていうエピソードがありますね。
面白いですね。
iOS3の料金めっちゃ上がってるぞみたいな。
なるほど、通信料でかかったりしますね。
今、いろいろ担当領域あるよっていうお話だったんですけど、
トカリとか新しめのこと結構できましたっていう話だったんですけど、
どういう採用技術というか、
どんな言語でやってるかみたいなのも、
ちょっとお話聞けるといいなと思うんですが、
どういったところがありますか?
そうですね、うちの採用技術の特徴としては、
ほぼ全プロダクトでリアクトを使ってるっていうのが大きいかなと思います。
これはTime TreeのWeb版の初期からずっとリアクトでやっていて、
2016年、まだリアクトがバージョン0.いくつとかだったときですね。
からリアクトを採用して、
最初リアクトって何?みたいな感じで触り始めたんですけど、
今ではリアクト以外で作りたくないみたいな感じになってます。
リアクトは、いつぐらいだったかな?
タイプスクリプトを使い始めた時期が2018年ぐらいですね。
フロントエンドチームのプロダクト
そこからもう社内で作るプロダクトは全部タイプスクリプトで作られています。
さっき話したサービス、プロダクト全てタイプスクリプトで書かれてて、
Time TreeのWeb版がほんと一部分だけですね。
JavaScriptが残ってるんですけど、
新しく機能を作ったり、リファクタリングするときにはタイプスクリプトに置き換えてるっていう状況ですね。
なるほど。じゃあタイプスクリプトほぼディファクトというか、
もう全部使うみたいな感じですね。
基本的にこのリアクトとタイプスクリプトができれば、
うちのフロントエンジニアになれるという感じだと思います。
ここは必修技術みたいな感じですね。
ここ分かる人はぜひ来てほしいって感じですね。
なるほど。最近のモダンな開発技術だったりしますね。
あとは、これがリアクトタイプスクリプトというのがベースにあって、
それを取り巻く周辺技術で、これの上に乗っかってるNext.jsとかフレームワークですね。
あとは、この辺は最近使いだしたんですけど、
グラフQLとかオープンAPIからコード生成したりとか、
あとUIの表示確認とかデザインレビューとかで、
ストーリーブックっていうツールを使っていて、
まだロジックとか組まない状況で、デザイナーにレビューもらうために使ったりしてます。
なるほど。
あとはCI周りもフロントエンドのメンバーがメンテしてることが多くて、
よく使ってるのがGitHub Actionsですね。
あと書いてないですけど、メモに書いてないんですけど、
ESLintとかWikiaとかその辺のLinterも、
結構社内のデファクトな設定みたいなのがあって、
これ公開してるコンフィグファイルがあるんですよ。
一般に公開してるんですけど。
このESLintのコンフィグ、社内のプロジェクト全部、
とりあえず始めるときにこれ入れとけば、
社内のプロジェクトの補佐法にだいたい揃うっていうのがあるんで、
そういう感じで作り始めたりしてます。
ESLintコンフィグタイムツリーっていうやつですね。
なるほど。うちのポリシーで書いてみた人はそれを使ってみてくださいって感じですね。
そうです。これ一般に公開してるんで、読み上げる方は全然見れます。
さっきトカリで、特に新しい技術いっぱい使えたよってことですけど、
それがNext.jsとかですか?
そうですね。Next.jsをプロダクションで使ったのがトカリからで、
フロントエンドの開発スタイル
その後いろいろ新しく作ったプロダクトでは、
Next.jsも次々と採用してるんですけど、
Next.jsが出る前までは、リアクトとTypeScriptを直接使って、
ビルドツールも自分でコンフィグ書いて、
ルーターのライブラリとか自分で入れて、
丁寧に作って、手作業で作ってたっていう。
それがなかなか結構、知識としてはすごい。
Next.jsが全部やってくれてることを全部手でやってるんで、
すごい知識としては勉強になりますけど、
いかんせんめんどくさいっていうのがありますね。
なるほど。
Webpackとか触ってるんですけど、バージョン上げるのも、
なんでここいじんなきゃいけないんだろうみたいなのを、
調べながらやってるんで結構大変なんですね。
そのあたりのミドルウェアの操作というか、
処理みたいなのが結構大変なんですね。
そうですね。初期の開発では結構その辺をずっと触ってる。
その辺で1週間時間が溶けちゃうみたいなのがいたらありました。
なるほど。
そこはじゃあそういうNext.jsとか使ってうまくやってると。
最近はそう。
あとトカリで使いだしたのが、
バックエンドは主にRailsで書かれてるんですけど、
弊社のバッツリのバックエンド。
バックエンドとフロントエンドの共通の使用書みたいなものに、
オープンAPIを使っていて、
オープンAPIからTypeScriptのコードを生成して、
バックエンドとフロントエンドで通信をするときの
コミュニケーションのコストを減らすっていうのが、
トカリからやりだしたやつで、
開発体験がすごい良かったっぽいところですね。
そうですね。このあたりいいですよね。
クライアント側の負荷が下がったりとかもしますしね。
そうですね。
いちいちAPIドキュメント見なくても、
コードが手元にあるので、
それを実行するだけでいいっていうようなのができるようになるので、
よかったですね。
今チームのメンバーがどんな感じの人たちがいるのかとか、
それぞれどんな感じの働き方するか、
雰囲気とかそのあたり聞きできればなと思うんですか。
どんな感じの人たちですか。
そうですね。
今ですね、一応フロントエンドという役割の人が8人いるんですが、
そのうち何人かが兼務だったり、別の役割も兼ねてたりするんですよね。
フロントエンドチームの人材と役割
フロントエンドなんですけど、
例えば、アンドロイドエンジニアが兼務で入ってたり、
自分がiOSの兼務で入ってたりとか、
あとはプロジェクトの運営、プロジェクト管理みたいなので、
うちではいくつかのプロジェクトでスクラム開発、
アジャイル開発を取り入れてるんですけど、
そのスクラムの管理者、スクラムマスターみたいなのをやってる人もいますと。
だから純粋にフロントエンドだけをやってる人っていうと、5人ぐらいなのかな。
でもフロントエンドと言いつつ、
さっき言ったGoogleフォームとか、
フロントエンドとちょっと違うけど、
JavaScriptだからやってるみたいな。
バックエンドとかもですね。
JavaScriptで書かれてるバックエンドをやってる人もいたりとか、
そういう意味で言うと、
いろんなことをやってる人がいるかなと思いますね。
なるほど。
結構、タイムツリーってちょっと変わった組織だったりするから、
個人個人がいろんなことをやるっていうのは全然推奨というか、
オッケーな会社なので、
特にフロントエンドチームは多分、
いろんなところにまたがってかをしようとされてる方が結構多いってことなんですよね。
そうですね。
何でもみんなやってみたい人が多い。
そうですよね。
好奇心結構多い方、多い気がしますね。
自分でフロントに関わらずのみやることはどんどん手出してる。
例えば、アプリ興味ある人もいるし、
人は自分とかもそうですけど、
アプリやりながらフロントに見ていったりとかしてますね。
みんなの働く時間とか、どういう感じでプライベートと両立してるとか、
それぞれのスタイルみたいなのありそうですけど、その辺はどうですか?
そうですね。
朝方が多いですね、フロントエンドチームは。
なるほど、なるほど。
朝方が多いっていうのの一つに、
育児メンバーも多くて、育児をされてるメンバー。
朝、保育園に送ってから、開発を仕事を始めて、
送る人もいれば、お迎えに行く人もいて、
お迎えに行く人がいたら、
その人はだいたい5時ぐらいで上がって、
朝早めに8時、9時ぐらいから始めて、
5時、6時ぐらいに終わるみたいな人が多いかなと思いますね。
なるほど、なるほど。
フロントエンドの人たち、育児されてるのは自分も含めてですけど、
4人ぐらいいるのかな。
半分ぐらいなのか。
自分もですけど、もう2人、3人は育休もしていて、
1人は女性なんですけど、3休、育休を経て復帰された方で、
復帰されてからバリバリと開発をされているので、
頼りになっております。
情報共有とプロジェクトの開発手法
あとそうだな、さっきスクラムをやっているプロジェクトもあるよ、
みたいな話もありましたけど、
いくつかのところではチームで開発するときにスクラムをやったりしますけど、
他のいろんなやり方も試されたりとかしてきたんですか。
そうですね、過去にWeb版のタイムツリーを2016年ぐらいから作ってて、
プロジェクトメンバーがほとんどいない時期があったんですね。
自分が1人でたまにライブラリーのアップデートしていくみたいな時期があって、
その辺を経てから、新しくフロントエンドの人が必要だねってなって採用して入って、
それを皮切りに何人も入るようになったんですけど、
結構古くから開発しているので、古い技術が使われてたりとか、
JavaScriptが凝ってたりとか、なんでこここんな実装なのみたいなことが結構あったんですよ。
これをリファクタリングとかしないと新しい機能も追加しづらいし、
パフォーマンス改善もできない、テストもあまり書かれていないみたいなことがあったんで、
この古い技術をしているのは自分だけだったんですけど、
その技術を適切に共有しながら、
みんなでうまくキャッチアップできるやり方はないかなって相談して、
それでMOVプロっていうのをやってみたんですね。
MOVプロをやりだしたのはコロナ前ですけど、
みんなで会議室にとって毎週、毎週というかほぼ毎日ですね。
週3日くらいだったかな。
2時間くらい使って、
タイムツリーのウェブ版の古い部分を新しいアーキテクチャに書き直していくっていう。
なんでこうなってるのっていうのは自分がこういう背景があってっていうのを説明しながら、
直していくっていう。
そういうのをやってた時期があって、
それはすごい良かったですね。
みんなが新しい、
そのみんなの開発スタイルとかをキャッチアップできるし、
テスト駆動でやってみようとかいろんなやり方を試せたので、話しながら。
なるほど。
すごい自分の勉強になりました。
なるほどね。
確かに何かこう進捗のパフォーマンスを出すっていう、
というよりもチームの中で上手く情報を行き渡らせるとか、
そういうのを目的にやってたって感じなんですね。
そうですね。情報の共有もあるし、
あとは何でしょうね。
みんなでやるから、
リソース取られるんですけど、
着実に開発が進むっていう。
なるほどね。
例えば1人くらい休んでも、
みんなオブプロで見てるので、
分かるんですよ。
今までどこやってて、
次何やればいいか、
みんなが分かるので。
なるほど。
例えば1人が風邪ひいて3日休みましたってなっても、
開発が止まらないで進められるんですね。
そういうので言うと、
ユーザーに早く価値を届けられるっていう面では、
すごい良いやり方だったかなと思ってます。
コロナになったら、
オブプロみたいなのがやりづらくなって、
あとは新しいプロジェクトとかも始まって、
最近はあんまりやってはないんですけど、
ちょっと難しい、
実装しなきゃいけないってなったときは、
ペアプロとかオブプロをその場でサッと、
その時のやり方をみんな覚えてるので、
サッとやって、
難しいとこはサクッとクリアして、
で、ここの、
こんな感じで、
このモブプロやったのも、
フロントエンドチームが初めて、
社内でも初めてなんですけど、
いろんな新しいやり方をどんどん試していこうっていうのを、
やる雰囲気、
文化、
結構根付いてて、
スクラム開発もそうですね、
フロントエンドの、
スクラム開発の、
スクラム開発の、
フロントエンドの、
スクラム開発もそうですね、
フロントエンドの人たちが中心で、
こういう開発手法があって、
ボトムアップで、
プロダクトの、
スケジュールと品質を担保しながら、
開発進めていくのは、
には良さそうっていう、
プロジェクトに導入、
支援というか、
率先して、
プロジェクトの引っ張る立場によって、
いるっていう人が結構、
何人かいますね。
そうですね、結構チームで、
いろんなこと試して、
それが広がっていくみたいなのを、
フロントエンドチームの課題
結構見る気がしますね、
フロントエンドチームが中心に。
そこで得た知見を、
他のプロジェクトにも共有して、
最近はいろんなプロジェクトで、
スクラムやってみようとか、
MobProとかも、
フロントエンドチームでやりだした以降に、
他のチームでも、
例えばバックエンドでもやりだしたりとか。
今、フロントエンドチームで、
やられている、
いろんなプロダクトあると思うんですけど、
それの何ていうんでしょうね、
主に抱えている、
課題みたいなところ、
特に多分、
Web版タイムツリーとかね、
昔からやってますからね、
結構その課題とか多いのかなと思うんですけど、
どんな課題があったりしますか?
そうですね、まずは、
タイムツリーの社内で、
フロントエンドの開発の需要が、
めちゃくちゃ増えていて、
いろんなプロジェクトで、
フロントエンドのリソースが欲しいっていう話が、
いっぱい出てるんですよ。
例えば、
なんかキャンペーンで、
キャンペーンのページ作りたいとか、
から始め、
新しいサービス立ち上げたい人、
これやっぱりフロントエンドが必要みたいな。
で、
そういうので、
フロントエンドチームで、
フロントエンドエンジニアみんな、
何らかのプロジェクトに、
結構新規プロジェクトですね。
つきっきりで、
既存のタイムツリーの、
ウェブ版にあんまり、
リソースが避けてない状況、
っていうのが、
正直ある感じですね。
で、
そのウェブ版のタイムツリーは、
2016年から開発してるので、
結構技術塞が溜まっていて、
それでもね、
なんとか、
ここまで頑張って、
舞台を返却してきてると思ってるんですけど、
例えば、
全部JavaScriptだった時代から、
どのタイムスクリプトにも、
90%くらいタイムスクリプトになってますし、
なるほど。
あとは、
いろんな新しいツール導入して、
ストーリーブックとか、
表示確認をよりやりやすくしたりとか、
テストを、
いろんな新しいツールを導入して、
何とかテストを、
しやすくしたりとか、
そういうのをどんどんやってますし、
ただ、
いかんせん、
リソースがそこに、
なかなか当てられないっていうのもあって、
塞がまだまだ取り切れてないっていう状態ですね。
本当は、
Next.jsとかに乗せ替えたいんですけど、
そういうのも、
まだできてないので、
古き良きウェブパックを、
手でメンテしてるっていうのも、
あったりします。
だから、
ウェブパック後にやってあげたのかな、
3ヶ月前に。
出てから2年ぐらい経つんですけど、
なかなかあげられないので。
なるほど。
はい。
あとは、
ですね、
Googleアシスタントとか、
Alexaとか、
この辺のJavaScriptで作られてる、
社内サービス、
プロペルとは言えないけど、
みたいなサービスがいくつか立っていて、
そういうのがあるんですけど、
なかなかそれが、
手が回りきってないっていう感じですね。
うんうんうん。
なるほどね。
ユーザーさんからお問い合わせがあって、
バグっぽいぞって時だけ、
なんとかリソースを演出して直してるっていう、
心苦しいんですけどね。
機能追加とかができなくて。
なるほど。
結構、
全体としては、
新しい技術を採用するみたいな機会は、
新しい技術のキャッチアップ
新しいプロジェクトがね、
立ち上がったりするから、
そういうとこでうまく入れていきつつなんだけど、
古いサービスというか、
プロダクトのほうを、
それに合わせていくみたいなところは、
ちょっとなかなかやりきれない、
みたいなのが、
ちょっと課題って感じですね。
はい。
新しい技術は、
結構触る機会があって、
新しいサービスを、
新規で開発するって機会があって、
そこそこ。
そうですね。
それは、
新しいものを触れるっていう楽しさはあるんですけど、
そうですね。
そこで出た、
すごい開発体験が良くて、
これを他のプロジェクトでも使いたいってときに、
ウェブ版のタイムツリーを、
メンテナンスすると、
すごい、
なんでしょう、
まだこんなの使ってるのか、
みたいな気持ちになるっていう。
そうですね。
移行するのも大変ですよね。
時間もかかる、
コードベースも多いだろうからね。
はい。
ここはやっぱり、
アソコンで色々文章を書いてるのに、
急にワープロを使ってるような、
伝わるのかな?
ワープロを使ってた人が、
聞いてくれてるかな?
例えがね、
それは結構宿命ですよね。
かつフロントエンドって、
一番早そうな気がする、
その実サイクルが。
早いしね。
あっという間に古くなりそうなんで。
そういう意味で言うと、
技術のキャッチアップはかなり、
みんな率先してやっていて。
確かに確かに。
はい。
週に1回、
フロントエンドの共有会っていうのを
やってるんですよ。
今、
フロントエンドチームのプロジェクト、
ほとんどみんなバラバラの
プロジェクトにいるので、
それぞれが何やってるかって、
本当に共有できてなかった状態が
続いていて、
これももったいないよね、
ってなって、
それぞれで共有して、
いろんなフロントエンドの知見を
その場で伝え合うっていうのをやってて、
それのトピックの1つとして、
新しい技術のキャッチアップ会っていうのを
やってます。
うん。
で、
いろいろ日々、
本当に毎週の夜に新しい技術が
出てくる。
ライブラリーとか、
アキテキャチャとか、
言語とか、
何でしょう、
そういうのがいっぱい出てきて、
それをキャッチアップして
紹介するっていう。
で、その中、
例えばCSSのこんなプロパティが出たぞ、
みたいな。
紹介して、
そういうのを見て、
自分のプロジェクトに
それを使ってみたりとか、
そういうのを
やりたいって思うんですけど、
今回は今回は
こんなところで、
フロントエンドチームのスタッフとして、
今回スタッフに参加してもらって、
いろいろ紹介してもらいました。
放送にはたぶん載せないとは思うんですけど、
今裏でスタッフが、
今回、笑いどころが
1個もなかったかもしれないので、
判定をしてます。
それ言うんだね。
もうタイムツリーのエンジニアは、
笑いどころを大事にし過ぎてて、
ちょっとプロ意識にびっくりしましたけど。
そうですね。そういうのが強い人を次ゲストで呼んで、笑いどころを作っていきたいと思います。
非常にいろいろ具体的に参考になる回でした。
ハードルが上がっちゃって。
ありがとうございます。
ありがとうございました。
