はじめに
こんにちは！ RECJob開発チームの福山(@posion_404)です。 社内ではpoisonって呼ばれております。
今回は、プロダクトを作成している際に共通処理をモジュール化して管理することを実施したのでそのことについて書いていきます！
なぜモジュール化を分けようと思ったのか
今チームで開発している、RECJobというプロダクトはReact/Next.js+TypeScriptをmonorepoで構築されています。
そこで、各アプリにまたがって同じ処理を書くことが増えてきたので、いっそのこと共通ディレクトリを作成してそこで管理しようということになりました。 同じ処理を書く際にアプリをまたぐことで使用面においても管理面においても色々と制御しやすいと考えました。
（monorepoの構築に関してはこちらの記事で紹介しているので一読してみてください！）
実際の作業内容
共通ディレクトリを作成する
私が作った構造としては下記のような形になります！
front ├── app1 ├── app2 ├── app3 ├── modules ⇨ 今回の共通ディレクトリ │ ├── src │ └── utils ⇨ 処理が格納されるディレクトリ │ ├── .eslintrc.json │ ├── package.json │ └── tsconfig.json ├── package.json └── yarn.lock
同じ階層にはeslintrcやpackage.jsonも用意して、testを実施したりplugin等を楽に入れられるようにしました。 これによって、modulesの品質等も担保できるかと思います。
各アプリから呼べるようにする
各アプリの階層には、tsconfigがそれぞれ用意されています。 tsconfigの中でcompilerOptionsのpathsによって、importする際の命名規則を設定できるかと思います。 そこに、今回のmodulesフォルダの階層を設定することで、楽に処理を呼び出せるようにしました。
app1/tsconfig.json
{ "extends": "../../tsconfig.json", "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["./src/*"], "@recjob/modules/*": ["../modules/src/*"] }, }, }
また、next.configに関しても修正します。
app1/next.config.js
const nextConfig = { reactStrictMode: true, experimental: { // trueに設定する externalDir: true, } }
externalDirに関しては、Next側で用意されているもので 外部のディレクトリへアクセスできるようにしてくれる設定となります。 この設定が入ることにより、importを呼べたりすることができるということになります！
導入したことによる効果
導入したことにより、チーム内で高評価を得ることができました！ 実装する際も各アプリでそれぞれ書くのではなくmodulesに格納することでそれを呼び出せばいいということにより、ストレス等も激減されました！
また、今回は他チームのエンジニアさんにもヘルプをもらいながら実施しました。とても感謝しております！
まだ処理についてのtestや共通処理化できていない箇所が残っています。 今後もリファクタリングを進めて、より良い品質を目指していきたいと思います！
また、このやり方以外にも共通処理を作る際のフォルダ設定等があるかもしれないと思いますので コメント等で教えていただけると幸いです！
現在株式会社ROXXは一緒にはたらく仲間を募集中です。 herp.careers
