はじめに 初めまして！ 株式会社おてつたびでフルスタックエンジニアをしているぶりぼんと申します。主にフロントエンド領域を開拓しており、ReactやTypeScriptが最も得意です。また、最近ではPdM業やユーザーの問い合わせ対応もやっています。 おてつたびの開発チームは、よりスピーディにPDCAサイクルを回すために、内部品質の改善、つまりリファクタリングのプロジェクトを開始しました。また、リファクタリングするにあたってディレクトリ設計を大きく変更することにも決定しました。 今回は、ディレクトリ設計に至った経緯とディレクトリ設計に関してお話しします。 コーディング規約に関しては、以前記事にまとめましたので、気になる方はご参照いただけると嬉しいです！ ディレクトリ設計に至った経緯 おてつたびは、BtoCのマッチングプラットフォームを運営しており、2022年7月より第5期目を迎えました。そのタ

はじめに 初めまして！ 株式会社おてつたびでフルスタックエンジニアをしているぶりぼんと申します。主にフロントエンド領域を開拓しており、ReactやTypeScriptが最も得意です。 おてつたびでは、フロントエンドのライブラリにReactを、ルーティングにはreact-router-domを使用しています。 今回は、react-router-domのバージョン5でNested Routeを行う際に、はまったポイントを解説していきます。 本題 実装したかったこと おてつたびでは、Webプロダクト開発と一緒に、iOSアプリ開発も行っております。 iOSアプリを開発する中で、時間やコストの関係上、WebView対応せざるを得ないページが出てきます。 WebView対応するページは、独自のプレフィックス（本記事ではサンプルとして/native_appとしています）をつけることで、WebView時に

はじめに 初めまして！ 株式会社おてつたびでフルスタックエンジニアをしているぶりぼんと申します。主にフロントエンド領域を開拓しており、ReactやTypeScriptが最も得意です。 今回は、おてつたびの自動テストとの向き合い方に関してお話しします。 フロントエンドのテスト環境はまだ準備中であるので、バックエンドの自動テストに関して言及します。 テストコードの書き方というより、テストコードを書いた結果としてどのような恩恵があったか、といった趣旨の記事になっております。 自動テストの導入 導入前のテストとの向き合い方と課題 テストコードを最初に書き始めたのは、2021年の夏頃です。 それまでは、一切テストコードがない状態であり、実装しながら前のコードとの差分を確認しつつ、実装後はローカル環境で想定ケースを手動でテストを行なっている状態でした。 2021年の春以降に開発メンバーが増えたこともあ