見出し画像

Web注文機能を作ったエンジニアsuzukenzさんに、Frontendの話をいろいろ聞いてみた！

Chompy

※この記事はPodcastで2022年06月29日に公開したSpotifyの内容をまとめて編集しています。音声で聴きたい方などはこちらも併せてご利用ください。

はじめに

みなさまこんにちは、エンジニア兼、技術広報を担当している佐藤です。

この記事は4月末にリリースしたWeb注文機能のフロントエンドの技術選定などに関する記事です。フロントエンドのリードエンジニアとして技術選定を行ったsuzukenzさんに対話形式で技術選定に関する質問をいくつかしてみました。

このWeb注文機能は簡単にいうと、入店後に店内からWebブラウザを通して料理を注文するための機能です。Chompyのプロダクトは、ネイティブアプリが多くtoC向けのWebアプリは今回が初めてとなります。そして最終的には以下の技術を利用しました。

  • 言語：TypeScript

  • ライブラリ：React

  • フレームワーク：Next.js

  • コンポーネントライブラリ：Chakra UI

  • GraphQLクライアント：urql

  • Testingライブラリ：Vitest


本編

Q1.「開発期間はどのくらいでしたか？」

技術選定も含めて1ヶ月くらいですかね。


Q2.「なぜ既存のVueではなくReactを選択したのですか？」

（これは自分が決めたわけではないけど）Reactの方が、社内で使っているFlutterと書き味が似ていて統一的なところで良さそうというところが1点と、採用観点でも、VueよりReactをやっている/やりたいという人が観測してる中では多かったため将来を見据えてReactにしました。


Q3.「なぜchakra UIを選択したのですか？

Reactをあまり書いたことがないメンバーもいる中で、ComponentのpropsでUIを構築でき直感的に実装ができそうだったため選択しました。bundle size的な観点でTailwind CSS を使おうとも考えたのですが、Frontendに慣れてない人だとユーティリティclassを学習してcssで記述していくあの形式だと最初に抵抗が大きそうだったのでやめました。


Q4.「なぜGraphQL Clientにurqlを選択したのですか？」

これは割とエイヤで、urqlがシンプルなのに良さそうという記事を何個か見たため。 実際に、特にキャッシュ更新のところはルールを覚えてしまえば考えることが少なくてよかったです。


Q5.「なぜGlobal State管理を導入しなかったのですか？」

Global State管理を導入 = RecoilやReduxの導入のことを指してるのだと思いますが、あれらのライブラリは局所的にGlobal Stateを更新しても、Globalに再レンダリングしたりせずレンダリングが最適化されるところが大きいメリットの一つだと考えています。ですが、今回自分達が開発したアプリケーションではGlobalなStateの動的な更新が不要かつState自体も少なかったため、ReactのContextを使いました。もしも状況が変われば後からでも導入すると思います。


Q6.「新しくプロジェクトを立ち上げる上でこだわったところや気をつけたことなどありますか？」

実装観点だとコーディングガイドラインや技術選定の経緯などドキュメンテーションを最初にちゃんとやったところですかね。


Q7.「なぜコーディング規約を最初に定義したのですか？」

コーディング規約というと語弊がありそうで、ただ「こういう思想でディレクトリを切ったり、書き方をしています」というのを言語化しただけです。
理由としてはReactおよびFrontendにあまり慣れてないメンバーが実装する時に、悩むポイントが少なくて済むようにというところが大きいです。あとは、将来後から参画したメンバーへのオンボーディング資料にもなればいいなという気持ちでした。


Q8.「参考にした記事などありますか？」

ありすぎて忘れてしまったw 特にGraphQLは素人だったので、Apollo、Relay、urqlそれぞれの公式ドキュメントを漁りました。
あとはReact Componentのディレクトリ構成なんかは、いろんな人がいろんな記事をzennなどに書いてるので参考にしました。これが１００％正解というのはないと思っているので、参考にしつつ自分達がやりやすそうなものにした感じです。


Q9.「プロジェクトを無事リリーし終えて、現状の課題などありますか？」

とりあえず動くものを　実装してリリースした感じなので、モニタリングやCIなどがまだまだです。あと、TODOコメントやIssueも複数残っているのでその辺りが課題です。

おわりに

今回の情報が少しでも参考になれば幸いです。Chompyではエンジニアを募集しています。もしChompyに興味がある方などいらっしゃいましたらこちらの採用ページ、もしくはMeetyなどからご連絡いただけると嬉しいです！


この記事が気に入ったらサポートをしてみませんか？