トレタ開発者ブログ

飲食店向け予約/顧客台帳サービス「トレタ」、モバイルオーダー「トレタO/X」などを運営するトレタの開発メンバーによるブログです。

奥野さんと社員のリファクタリング部屋 -ディレクトリの名付け方つづき

「奥野さんと社員のリファクタリング部屋」は、リファクタリングに励むトレタの社員と技術顧問の奥野さん ( @okunokentaro ) の間で実際に行われた会話を切り取った開発現場実録コンテンツです。

技術顧問: 奥野さん
三度の飯よりリファクタリングが好き
今回の質問者: 武市さん
トレタ在籍2年。沖縄在住のフロントエンジニア

PR

こちらに登場している2人が登壇するイベント・TORETA TECH UDATEが2024/08/28に開催予定! リファクタリングやリアーキテクトなど、サービスを提供させながらプロダクトの新陳代謝をいかにして行なってきたかを開発現場の実例と合わせて紹介します! toreta.connpass.com


今回の質問💬

前回に引き続き、Webアプリケーション (Next.js) のプロダクトのリファクタリングを進めている武市さんから、ディレクトリ名についての質問です。

repositories」というディレクトリ名が、特定の意味やイメージが強く付いているため避けるべき、という前回の指摘をうけて別のディレクトリ名を考えてきました。 「repositories」という言葉の代わりに「データアクセスを抽象化し、データベースや外部システムとのやり取りを行う処理」として以下の3つのディレクトリ名を考えましたが、いかがでしょうか?

  • connectors
  • effects
  • interfaces

誤解を生む名前は避ける

奥野 正直なところ、ディレクトリ名をそこまでこだわらなくていいと思っていて、それは前回の「repositories」って名前を避けたらっていうところからも続いている話題ですが、ディレクトリ名は他の人がそれを見てわかればいい、伝わればいいと思っています。 危険な橋を渡って「repositories」って名前をつけることも別に誰も止めないし、みんなが納得してみんなが分かる名前だったら別に何でもいい。

それを踏まえて、一つちょっと注目しておくと、「interfaces」はちょっと危ないかもしれない。 なぜかというと、TypeScriptで開発している前提があるので、TypeScriptのinterface宣言を想起する部分が大きい。どうしても「types」とか「interfaces」みたいな言葉を使うと、Typescriptのinterface宣言をまとめたファイルを配置するディレクトリの印象になってしまう。

例えばReactの場合だったら「components」や「hooks」とか、Reduxだったら「redeuers」とか、ディレクトリ名の中に特定のもの・同種のものを詰めていくというのは、ディレクトリの戦略としてよく見かけるので、「interfaces」という名前をパッと見たらTypeScriptのinterfaceばっかりが入ってるように見えてしまって、データアクセスを行うものが入っているようにはちょっと見えないですね。

なので、どんな名前つけてもいいよっとは言ったものの、誤解を与える名前を避けたほうがよくて、自分なら選ばないですね。 前回の「repositories」と理由は似てますけど、やはりみんなが連想するものが偏りがちな言葉は、それを違う用途として使うのはあまり向いてないと思うし、今回の「interfaces」も多くの人が想起する内容とは違うから誤解されてしまうと思います。

武市 そうですね。おっしゃる通りです。

語彙の引き出しを広げる

奥野 「effect」と「connectors」は、自分がとやかくつっこむほどではないですけど、自分は「connectors」という言葉をここで使う例は、実はあんま見たことないのですが、どこかからの引用ですか?

武市 いえ、このディレクトリに置くファイルは「何をやっているのか」が一つの単語で分かる言葉というのを色々と考えて、「database」や「repositories」みたいな言葉ではなく、ちゃんと意味の伝わる単語を色々探してみました。

奥野 英単語として適切な言葉、ということですね?

武市 そうです。何かとコネクトするものの集合体として、「connectors」を選択しました。それも皆を納得させやすい言葉のほうがいいなと思って、「ここは別のものとコネクトしているものなんです」という自分の中で先に納得させる理由を探してからみたいなところがあったかもしれないです。

奥野 あまり深く考えすぎると使える語彙が減っていくというのがあるから、リポジトリっていう言葉は避けようみたいにして、あれも避けよう、これも避けようってすると、どんどん自分の納得できる言葉が減っていくから、「connectors」でしっくり来るならいいんじゃないとは思います。

一方でJavaでは「Connectuor Architecture」って名前のアクテクチャーがあって、オラクルとかでもそういう「Connectuor Architecture」ってのが紹介されてはいます。それが前例としてあるなら「connectors」って言葉も避けようみたいにしていくと、どんどんと使える言葉が減っていってしまい、最終的に「functions」とか「domeins」とか「processes」とか、あまりにも抽象にもほどがあるだろうっていうぐらいの言葉になり果ててしまいます。

どこかで線は引いてもいいと思うし、「repositories」で線を引くのか、「connectors」で線を引くのかは自由だけど、最終的には誤解を生まなかったらいいと思う。だから、どんな言葉を使っても極端な話をすれば、「effect」って言葉だったり、「functions」だったり、「processes」と呼んでも、誤解を抱く人間は抱くから、うちではこれのことをこう読んでるんですよっていう説明すればいい。

こういう時に本を読んでるっていうのが大きく役立ちます。本だけではなく他社の勉強会のスライドで、うちではこういうふうにやってますとか、アトミックデザインを採用してますとか、クリーンアーキテクチャーをやってますとか、ドメイン駆動を設計に取り組んでますとか、いろんな会社のいろんなエンジニアが、いろんなLT、カンファレンスで発表をしてますよね。だから、トレタで奥野さんがどうしてるとかだけじゃなくて、あの会社ではあのようにしてるって発表してたなとか、あっちの会社はトレタとやっているビジネスや作ってるアプリケーションも似てるけどこうしているんだな、ということは探すことができます。

例えば、ここの会社ではJavaを使っているからそういう言葉を使うんだなみたいな知識や経験を積めば積むほど、どういう文化圏から来た言葉だなというのもなんとなくわかってきます。なんかJavaっぽい、Goっぽい、TypeScriptっぽいなとかあるわけですよ。

知識量っていうのはこういうところの取りまとめにすごく役立つので、語彙はたくさん持ったほうがいいし、語彙を集める方法は本だけじゃなくて、SpeakerDeckとかにアップされてるLTでもいいから、とにかく他人のLT、他人の技術ブログ、他人の他社の開発者ブログを読みまくる、というのがおすすめです。

トレタでもこのリファクタリング部屋というコンテンツでブログ公開してるわけですから、読者はトレタさんではこうやってんだって伝わります。全世界にブログとして公開することで、また新たなコミュニケーションとか新たな方法の行き来が生まれていくわけです。だからここで「connectors」を使うっていうことは全くおかしいなことではないと思います。

武市 はい、ありがとうございます!自分なりには、まず名前は何にせよ、シンプルでルールを伝えやすくできたなと思ってます。これをどう保守していくかはまた宿題として考えていこうと思います。

一旦これで進めてみて、またトライアンドエラーで、ダメだった時はまた修正しながらプロジェクトを進めていきたいと思います。

奥野 はい。いいと思います。この言葉ちょっと分かりにくいなとか、いう場面が出るようであれば見直したらいいし、特に誰も気にしてないようであればそのまま使い続けていけばいいので。

武市 はい!ありがとうございます!

トレタのエンジニアイベント TORETA TECH UPDATE 2024/08/28開催予定!

こんにちは、トレタ VPoEの北川です。

来る8/28(水)にトレタ主催でエンジニアイベントを開催します。 タイトルは、TORETA TECH UPDATE #1 -飲食を支えるフロントエンドです。

toreta.connpass.com

このイベントでは、トレタで日々行っている開発業務の中での事例紹介を行います。今回はフロントエンドにフォーカスして、特にトレタでの現在の注力事業であるモバイルオーダー「トレタO/X」の開発話を中心に、現場感あふれる内容をお届けします。

開催のきっかけ

トレタで主催するエンジニアのイベントは久しぶりで約5年前になります。 以前は社外向けのイベントを活発に行っていましたが、コロナ禍がありめっきりと活動は少なくなっていました。

toreta.connpass.com

今回のきっかけは技術顧問の奥野さんと雑談している中で生まれました。 5月ごろに奥野さんからフロントエンドカンファレンス北海道2024でトレタでの開発事例を使ってトークしたい、との相談を受けました。 もちろん承諾して、当選したらトレタからもスポンサーブース出して自分も北海道に行くか、なんて考えていたらまさかの落選… 定員に対して数倍の応募があったとのことで、北海道の力恐るべし。 せっかく用意いただいたトーク内容は別の機会で、と話してましたがどうせならトレタで主催するか!と一念発起。 そんな流れで発足したのが今回のイベントです。

このイベントはできれば今後も定期的に続けていきたいと思い、タイトルにはシリーズの名前をつけました。 以前の「TORETA TECH TALK」からなぞらえたのと、トレタのビジョンでもある「飲食店の未来を、アップデートする」から文字をとり 「TORETA TECH UPDATE」と名付けてました。飲食店のテクノロジーをアップデートさせながら、その共有を広く行える場としていければと考えています。

イベントの内容

そういったきっかけで立ち上げたイベントなので、今回のスピーカーの1人は奥野(@okunokenato)さんです。 今回はトレタの事業の一つであるモバイルオーダーの「トレタO/X」のフロントエンド開発の内容を話していただきます。

奥野さんはこのプロダクトの初期から現在まで約2年ほど携わっていただいているので、その間にあったプロダクトの成長や事業戦略にあわせた内部のダイナミックなリアーキテクトの話をしていただきます。 Next.jsのAppRouter化やバックエンドの差し替えなど、サービスを提供しながらいかに内部の開発環境を改善したり途中で増えた概念とどう適合していくか、設計の技が垣間見れると思います。 奥野さんは過去にも大規模開発や開発環境改善など現場でのノウハウについて多く登壇されているので、今回もすぐに実践で使える内容が盛りだくさんです。

speakerdeck.com

2人目のスピーカーはトレタでフロントエンドエンジニアをやっている武市さん(@kazuya_dev)です。 武市さんはこの開発ブログでもリファクタリング部屋の記事に登場していただいています。 まだ若手ですが、同じくトレタO/Xの開発現場でもがきながらも培った知見をたくさんご紹介いただけると思います。

tech.toreta.in

tech.toreta.in

参加者募集中!

今回の会場はClassiさんに提供いただきました。 Classiさんのブログにて技術コミュニティに対して会場提供を行っているのを拝見して相談させていただいたところ快諾いただきました。ありがとうございます!! 新宿駅から近くアクセスがとても良い場所です。

tech.classi.jp

参加者は現在募集中なので、ご興味あればぜひご参加ください! トークの後はQ&Aや懇親会の時間も設けていますので、登壇者に直接質問するチャンスです!

アジャイルorウォーターフォール?トレタの開発プロセスは?

こんにちは、トレタ VPoEの北川です。

カジュアル面談など面談の中の応募者からの質問で、トレタの開発プロセスはどういったものですか?というのはよく受ける質問です。今回は現在のトレタの開発プロセスが日々どう行われているかについて紹介したいと思います。

アジャイル vs ウォーターフォール

開発プロセスにおいうてアジャイル vs ウォーターフォールの論争は令和の時代になっても今だに行われていますが、トレタの開発はどっち、という前にそれぞれの定義を整理しておきましょう。

出典: martinFowloer.com WaterProcessから抜粋

まず、「ウォーターフォール」の明確な定義はないようですが、一般的にはプロダクトの開発工程を段階的に行なっていく手法を指して呼ばれています。主に開発スコープと納期がロックされた環境で使われています。

対して、開発スコープを分割して開発サイクルを回していく反復型(Iterative)プロセスがあります。ウォーターフォールでは各開発工程の期間が長いため、前工程への差し戻しがプロジェクト全体に大きな遅延をもたらすため、反復型では開発スコープを小さくすることで大幅な遅延リスクを小さく抑えています。

出典: martinFowloer.com WaterProcessから抜粋

最初に定めたスコープを分割した反復型の中には、それら分割したスコープを随時入れ替えたり途中で新しい機能を追加するなどして、開発スコープを柔軟に扱う適用型プロセス(AdaptivePlanning)があります。プロジェクトの状況やデリバリーした機能のフィードバックを受けて計画を更新していくことで開発状況の変化に応じたより柔軟に対応ができます。

さらにその中でも開発サイクル(スプリント)ごとに開発スコープを都度決めていくのがアジャイルとなります。

まとめると、以下のようになります。

計画の変更 開発サイクル
ウォーターフォール なし 1
予測反復型 なし n
適用型 あり n
アジャイル あり(スプリント毎) n

トレタでの開発プロセス

上記の整理をしたところでトレタでの開発プロセスはどれかというと、予測反復型と適用型の混合です。

機能を検討する際にはまずは予測型のように最終的な理想系のUXの計画と、システムとしてどう実装していくかを設計を行い、おおよその開発工数の全体感を作ります。

次にユーザーに価値のある単位でフェーズを分割します。反復型にしてユーザーになるべく早く価値を届けるようにするためです。ここで分割したフェーズは大体1〜2ヶ月の大きさになります。機能の大きさにも寄りますが、影響範囲が大きく工数がかかる機能だと3~4フェーズになることがあります。

分割したフェーズでスケジュールを立てて行きますが、3~4フェーズ目になるとスケジュール上には置かずにバックログに積む場合があります。適用型のように途中で他に優先度の高い機能開発が入るなど状況の変化に対応するためです。 このやり方はいわゆる「ローリング・ウェーブ計画法」と呼ばれている手法で、将来の不確実性が高いのでおおまかな設計や方針は立てつつ、直近の詳細のみを詰める、というやり方です。

先行フェーズのフィードバックを受けてから後続フェーズの仕様を決めていく場面もあります。こちらはより適応型に近いプロセスです。 トレタのプロダクトは飲食店SaaSとして提供しているため、規模や業態が様々なすべての飲食店のニーズをSaaSという形で一つの仕様にするのはなかなか難しいです。最初から多様な導入店舗にヒアリングをして最大公約数を求めようとすると、かなり複雑な仕様となってしまうことがあります。

そこで、よりニーズが顕在化していてその機能ができることで明確な店内オペレーションのイメージ(利用イメージ)ができている一部の店舗のニーズに応える形で初期開発(Phase1)の仕様を設計するケースがあります。要望としては上がっているが明確な利用イメージができていない店舗にあててみても、実際に提供した時にはやはりフィットしなかったということが往々にして起きるためです。より利用イメージが固まっている店舗の場合は、こちらが想定した提案に対してオペレーションにフィットしないと感じたら明確に「NO」と言っていただけます。そのように一定数の明確なニーズに応えた初期仕様(プロトタイプ)をまずは作成します。

初期仕様が定まったらそれをベースとして他の複数の導入店舗に対してヒアリングを重ねます。最初のヒアリング時点に比べ機能仕様が定まっているため、より解像度の高い状態で各店舗へのヒアリングが行えます。そこから得られたフィードバックをもとに、複数の店舗でも満足して利用いただける汎用版として次フェーズ(Phase2〜)の仕様やスコープを策定していきます。

さいごに

冒頭にある面談などでトレタでの開発プロセスはどういったものか、という質問に対して、アジャイル的なプラクティス(かんばん、ストーリーポイント、スタンドアップなど)は取り入れているがウォーターフォールとアジャイルの中間くらい、と今まで説明していましたこの記事を書いていくなかで自分でも整理ができました。

ウォーターフォールとアジャイルのどちらが良いかという論争に対して自分は優劣をつける必要はないと思っていますが、自社の開発チームや状況、対象の開発内容に応じて開発プロセスの適した箇所を部分的に取り入れていくのがよいと思います。

© Toreta, Inc.

Powered by Hatena Blog