Atrae Tech Blog

People Tech Companyの株式会社アトラエのテックブログです。

「作って学ぶ」エンジニアの技術習得

f:id:atrae_tech:20211029113556j:plain

こんにちは。Wevoxのエンジニアをしています、タガミショウゴ(@HOWABOUTUP)です。普段はWevoxのフロントを主に書いています。

今回はアトラエのエンジニアの組織文化である「作って学ぶ」について紹介します。

一般的なエンジニア組織の場合、輪読会や勉強会などで学習する機会があると思います。アトラエにおいても、興味ある人が本やテーマを持ち寄って不定期で開催される学習会があります。これに加えて、新しい技術やチームに必要なものを自分たちで作るという文化があります。

文化といっても、特に会社が設けた制度やルールがあるわけではありません。自発的にエンジニアやデザイナーが自分たち、ユーザーのため、会社のためにプロダクトを作っています。それを業務時間内外でつくって、そこから多くのことを学ぶというのが当たり前になっています。

f:id:atrae_tech:20211028101417p:plain

この「作って学ぶ」という文化の例として、"Session"というアプリケーションがあります。このアプリケーションは、特定のメンバーで同じYouTubeの動画を見ながらコメントで盛り上がるというものです。ただそれだけを見ればよくあるアプリケーションですが、これを題材として個々人が試したい技術を盛り込んでいて、またそれを業務にも活かしています。

今回はその"Session"を作ったメンバーへのインタビューというかたちで、なぜこれを作ったのか、またそこからチーム・個人としてどんなことを学んだのか?について紹介します。

インタビューメンバー

  • タガミ:聞くひと
  • seiya:Sessionをはじめに作った
  • takuto:Flutterでアプリを一緒に作り始めた

はじめは個人のReact勉強のために始まった

タガミ:まずはじめに、Sessionってなにができるアプリケーションなんですか?

seiya:簡単に言えば、離れている人とYouTubeを同時視聴できるものです。例えば僕とタガミさんがリモートワークしながら、同じYouTubeの動画を見て、アプリケーション上のコメントで雑談するみたいことができます。これ元々は5年前くらいに僕がReactを勉強しなきゃ、という思いから生まれたものなんですよね。

タガミ:結構前からあるんですね!しかも勉強のために作り始めていたとは。

seiya:そうなんですよ。当時も似たようなアプリケーションはあったのですが、使い勝手が合わなかったり、社内のひととのチャットにに知らない人が入ってきたらちょっと嫌だなというのがあって。「なら自分で作っちゃおう」となりました。Wevoxの開発当初Reactを採用しようとなった時に、技術のキャッチアップのために作り始めました。最初は一人で作っていて、最後デザイナーの方に調整をお願いしたりしました。デプロイはHeroku(無料枠)にあげていました。

タガミ:現在ではスマホアプリでも使えるようになっていますが、どうやってアプリを作ろうっとなったのですか?

seiya:Web版をリリースしてから、4年くらいはずっと放置してましたね。takutoくんが入社してきて、GreenのスマホアプリをFlutterで作るという話を聞いたときに「一緒にFlutterでSession作ろうよ」という感じで誘いました。

参考 note.com

takuto:個人開発や前職でもFlutter触っていたというのもあって、抵抗はなかったですね。むしろアトラエは全社的にFlutterを採用するという雰囲気もあったので、技術キャッチアップのためにネイティブではなくFlutterを使ってみるのには賛成でした。

タガミ:ガワはFlutterで、バックエンドは元々Web版が参照していたところを引き継いだ感じですか?

seiya:Web版はほとんどサーバレスで動いていて、Flutterでもそれを踏襲しました。DBはFirebaseのRealtime Databaseを使っていたのですが、これをFirestoreに移行しましたね。YouTube APIだけアプリから叩いています。

takuto:ユーザー情報や、オンライン/オフライン状態など一部はCloud Functionを使ってたりします。

seiya:takutoくんはFirebase周りの経験があったのですが、僕はFirestoreなどは未経験で、ほぼゼロからキャッチアップした感じですね。

Flutterのアーキテクチャは一緒に作ってみて、勉強になることが多かった

タガミ:seiyaさんは元々Flutterの経験がないなかで、ゼロからスマホアプリを作るのは大変じゃなかったですか?

seiya:元々個人開発でFlutterのデモアプリは作ったことがありました。いわゆるToDoアプリみたいなものです。また宣言的UIフレームワークはReactで慣れていたのでFlutterだから辛いということはあまりなかったですね。一方で、takutoくんと一緒に作って勉強になったのは、FlutterでのDAOだったり、デザインパターンです。

atraetech.hatenablog.com

seiya:でも、Flutterに限らず、Webと勝手が違うのはアプリ上の状態管理は手こずりました。ToDoアプリみたいな1画面だけでは気付かなかったユースケースを、どうコードで表せばいいのか?みたいなのは作ってみて初めて気付いたことですね。状態管理だったり、DB/サーバーとの疎通をどこで、どう行えばいいのか。

タガミ:実際にユーザーに使ってもらって気付くことありますよね。

takuto:自分で使うのもそうですし、人に使ってもらうなかで、もっとこうすべきみたいなのは見えてきましたね。きっと座学では気付かなかったことだと思います。例えば、アプリ起動時が遅いな、とか画面遷移時に状態はこうあるべきだよな、とか。

seiya:Sessionというアプリの特性上、複数人で同時視聴できるというものなので、複雑な操作が絡む場合にどうするか?みたいなのは勉強になりましたよね。開発時は2人で作っているのですが、これが3人、4人と人が増えると、非同期のアクションパターンが増えますよね。これが実際にチームで使ってみると「う〜ん」ということがあって。そういう意味でも「作ってみて、使ってもらう」という体験で得られるものは多かったです。

タガミ:スマホアプリはリリースしたんでしたっけ?

seiya:いや、スマホアプリは社内メンバーにクローズドで配布していますね...。ただ、Web版はアルティーリ(*)の天皇杯に間に合うように急ピッチで作り直しました。Next.js、Material UIを使って、デプロイはVercelを選びました。Next.jsのアプリケーションの立ち上げからリリースは初めてでした。ただ、そのタイミングでFirestoreとMaterial UIがメジャーアップデートしてて、めちゃくちゃ辛い思いしました...。

japan.cnet.com

タガミ:社内のチーム活性化にも役立つものを作って、またそこからいろんな知見や経験を得られたというのはすごいですね!作ったお二人もすごいですし、そこに参加してくれるメンバーが多いこともアトラエならでは、という感じがしますね。

「作ってみる」から事業成長を後押ししたケースも

Sessionに限らず、アトラエでは「作ってみる」から生まれたアプリケーションが、いまではプロダクトの成長に寄与しているものもあります。

f:id:atrae_tech:20211027185813p:plain
https://wevox.io/valuescard

Wevox Values Cardは元々ボードゲームとして誕生し、その後社内の有志がオンライン上でプレイできるWebアプリケーションを作成しました。それが今では様々な企業・チームで利用され、チーム作りの役に立っています。Wevoxというサービスをここから知ったという方もいるそうです。

prtimes.jp

作りたいひとが手を挙げて、オーナーシップをもってプロダクトを作ることができることは、アトラエのエンジニアチームの文化です。Sessionのように技術習得のためだったり、プロダクトの成長にコミットしたい場合など様々なWillをもってものづくりに参加できる環境です。プロダクト作り、企画などに興味のある方はカジュアル面談でお話ししましょう!

speakerdeck.com

atrae.co.jp