はじめに
こんにちは！menuフロントエンドエンジニアの林です。 好きな卍解は黄煌厳霊離宮です。五等分の花嫁だと二乃が好きです。よろしくお願いします。
最近、フロントエンドの候補者の方とお話する中で、弊社での開発環境や利用している技術についての質問をよくいただきます。
なので今回はこの場をお借りして、menuフロントエンドでの開発環境や利用している技術についてご紹介します！
言語・FWなど
React Nativeでアプリケーションを作成しています。開発の初期からTypeScriptを導入しているため、型のある世界での実装をお楽しみいただけます。
React Nativeでの開発（の大部分）はWebのReactでの開発と近い感覚で進めることが出来、またWebでのReact開発経験のある方にはお馴染みのReact Developer Toolsも使うことができます。
状態管理にはReduxを主に使用しており、Reduxで扱うほどでもない場合などは必要に応じてContext APIを使用する箇所もあります。非同期処理などの副作用を伴う処理を実装する手段としてはRedux-sagaを使用しています。
また、React Nativeでの開発をより効率よく行うため、Expoも導入しています。
ExpoをejectしてBare workflowで運用しているため、OTAアップデートやExpo Goアプリでの簡易な動作確認などの恩恵を受けつつ、ネイティブ部分の機能にも手を入れられるようになっております。
エディタ・IDE
好きなものを使ってOKです！
ちなみにメンバーの9割以上はVisual Studio Code(VSCode)を利用しておりますが、WebStorm派もいます。
自動テスト
jestを用いた単体テストを中心にただいま絶賛導入中です！！ビジネス上重要なところ（決済関連機能など）や特に処理が複雑になってしまっている箇所を中心に既に導入されている箇所もあります。
より安定的に、効率よく開発を続けるために引き続きここは重点的に取り組みます！
Lint・フォーマット
ESLint、Prettierを使用しています。
また、Git hooksを用いており、コミットメッセージのルールやLintなどが守られていることがコミット前に自動で確認されるようになっています。
この辺りに関して以前記事を書いているので、ご興味ある方はこちらもぜひご覧ください！
監視・データ集計
エラーログの集計などにSentryを利用しています。アプリ上での各種イベント計測などにFirebase Analyticsを使用しています。
CI/CD
CircleCIやGitHub Actionsを使用しています！
具体的には以下のようなシーンで活用しています。今後も自動化できる箇所は積極的に活用していきたいと思っています！
PRがマージされた時にCircleCIでフックし、ステージング環境に自動反映される
Gitでタグを設定するだけで、本番アプリの自動ビルドやOTAアップデートが走る
ブランチをコミットする際に自動テストやTypescriptの構文チェックをする
また、ホールディングス内の複数のプロジェクトを横断的にサポートするwarthogというプロジェクトもあり、iOSの本番用証明書の管理やエンタープライズビルドなどネイティブアプリ開発に必要な作業がそのプロジェクトにより自動化されています。
終わりに
2021秋時点でのmenuフロントエンドの開発環境についてご説明しました！
浅く広くフロントエンドチームの現状をお伝えしてきましたが、この記事がmenuフロントエンドチームの現状について少しでも理解を深める一助となれば嬉しいです。
そして、そのmenuフロントエンドチームでは一緒にmenuをより良くする仲間を募集しています！
弊社での開発にご興味お持ちいただけた方はぜひ下記リンクからご応募お願いします！
