8月よりChatworkのフロントエンド開発部にジョインさせて頂いた、石山(@NaReto1125_)です！
皆さんはChatworkやChatworkフロントエンドにどんなイメージをお持ちですか？
入社前、僕がChatworkフロントエンドに持っていたイメージはこれらのようなものでした。
- なんかReact使ってる
- Scalaのイメージが強くて、フロントエンドはあまりイメージがない
- そもそもどんな人がフロントエンドにいるのかわからない
ざっくり「React使ってるな〜」ぐらいでした。
いざ入社してみると、以前持っていた僕のイメージと現場とでは良い意味で全く違ったものでした。
そのため、この記事でChatworkフロントエンドのやっていることや雰囲気を少しでも多くの人に知っていただけたらと思います！
フロントエンド開発部のやっていること
フロントエンド開発部では、大きく3つやっていることがあります。
- Web版Chatworkの保守・運用・ロードマップ案件
- Desktop版Chatworkの保守・運用
- Chatwork Liveの保守・運用
Chatwork・Chatwork Liveではこれらの言語/ライブラリ・ツールを使用しています。
| ライブラリ/言語 | 公式ドキュメント |
|---|---|
 |
TypeScript |
 |
React |
 |
ESLint |
 |
Jest |
 |
Storybook |
 |
Prettier |
 |
Scala.js (Chatwork Liveのみで使用) |
 |
sass |
 |
webpack |
 |
styled-components |
 |
Babel |
個人的にですが、最近Next.js + prismaが気になっています・・・
(気になっているだけでまだ手は出していない)
Chatworkの保守・運用(Web,Desktop)
Chatworkはリリースから息の長いプロダクトなので、時代の流れによってできた技術的負債があります。 (2011年3月1日リリース)
しかもデカい。(約12万行)
技術的負債の返却として、jQueryやReact + DDDをベースにした自前アーキテクチャから、React/Reduxへの移行中です。
一気にjQuery&自前アーキテクチャからReact/Reduxへ移行するのではなく、下記2フェーズに分けて移行しています。
- jQuery -> React移行フェーズ
- 自前アーキテクチャ -> Redux移行フェーズ
それぞれのフェーズを少し噛み砕いて見てみます。
jQuery -> React移行フェーズ
サービス開始時に書かれたjQuery部分をDDDベースのアーキテクチャに移行します。
詳しくは昨日投稿された弊社西口のブログ記事を参照してください。
自前アーキテクチャ -> Redux移行フェーズ
自前アーキテクチャからReduxにすることで、新入社員の学習コストが下がる、propsが更新されない問題やレンダリングコストの削減を行えます。
Chatwork Liveの保守・運用
Chatwork LiveはWebRTCを用いて作成されています。
Chatwork規模のプロダクトでWebRTCを触れるのは、とても貴重な経験です。
ここが最高だよChatworkフロントエンド!!
僕がChatworkに入社して驚いたこと、良いなと思ったことを紹介します。
いつでも相談できる環境
モブプロ
アプリケーションの属人化を防ぐため、モブプロ・モブワークを行っています。
長くChatworkのフロントエンド開発を行っているエンジニアからドメイン知識やアーキテクチャの思想を共有できています。
否定する人がいない
わからない箇所や、間違っていることを発言しても頭ごなしに「何言ってるの？」などマウントを取る人がいません。 何なら、わかるように寄り添って説明して頂けます。
これはすごい重要なことだと思っています。
10人近くのフロントエンドメンバーがいるのにも関わらず発言を否定する人がいないので、経験の長さに関係なく朝会やモブプロ時に相談・議論ができます。
繰り返しになりますが、わからないことを「わからない」と言える環境が揃っていることは本当に素晴らしいと思います。
【重要】下記で雰囲気は伝わると思いますが、フロントエンドメンバー以外の方もマウントを取る人なんていませんよ！
オーナーシップとユーモア
この記事のタイトルに迷っていることをホウレンソウチャットに呟いたところ、フロントエンド以外の皆さんが反応してくれました。 (ホウレンソウチャットは、社員個人が持つチャットの部屋です。)
僕 < ブログのタイトルちょっと尖らせたいなぁ・・・
僕 < 「指導されて」かぁ・・・
僕 < 「卍最強卍」かぁ・・・まぁまぁ尖ってるなぁ
僕 < (´･ω･｀)
他にもレビューが追いついていない時は他の人が代わりにレビューするなど、些細なこともカバーして頂いています。
困っていることに対して自分ごとのように対応してくれるオーナーシップと、笑わせてくれるユーモアを持ったメンバーに毎日助けられています！！！
勉強会が盛ん
冒頭に書いたようにフロントエンド開発部に所属していますが、毎週Scala初心者のための勉強会が開催されているので参加しています。 リモート入社だった僕にとって他部署の方達とワイワイできる場所にもなっているので、言語の習得とコミュニケーションが取れる貴重な時間になっています。
Scala初心者のための勉強会以外に、圏論・アルゴリズムの勉強会もあるようです。
(主催者はフロントエンド開発部所属)
入社後、Chatworkフロントエンドへのイメージは変わった？
入社前、謎が多いChatworkフロントエンドでしたが、自分のことだけを考えるのではなく、チームみんなでカバーし合う素敵なチームだと思いました。
また、アーキテクチャやパフォーマンス・型などを高いレベルで実装されており、学びがたくさんあって刺激的な環境でした。
自己研鑽を深め、もっとフロントエンドを活性化させて、さらに多くの人にChatworkフロントエンドを知って頂けるようにしたいと思います！
さいごに
レガシーなコードや、終わりが見えないような大規模プロダクトの改修は簡単ではありません。 社会的インフラプロダクトのフロントエンドを開発するプレッシャーも大きいです。
ですが、僕はチーム開発において「何をやるか」がもちろん重要ですが、「誰とやるか」がもっと重要だと思っています。
最高のチームがある、メンバーがいるChatworkで世界と戦えるプロダクト開発をしてみませんか？
