タイムリープ TypeScript ~ TypeScript を始めたてのあの頃に知っておきたかったこと ~
アドベントカレンダーの 19 日目の記事です
TypeScript に限らずですが、新しいものを導入する時に一番大変なのは何でしょうか？
僕は**"環境構築"**ではないかと思います。
特に Web 業界は自由な JavaScript のおかげか検索すると多くの情報が出てきて
何が正しいのかよくわからず、ESLint や Webpack の設定を意識せずスタートし、
後で見返すと頭が痛くなる瞬間を経験したことがある人も多いかと思います。
そこで、今、僕が新しい TypeScript プロジェクトを立ち上げるならこんな環境構築をしますと言う話をします
前提
- Node.js が導入されている
Node.js の導入はそこまで難しくないので、導入済みであるとします。
Docker ではなく、ローカルに NVM などバージョン管理ツールを用いてインストールすることをお勧めします
Nx を導入しプロジェクトを作る
React が使いたければ、Next.js や Gatsby、Node サーバーであれば Nest.js など
フレームワークやライブラリを導入したくなるかと思いますが、
公式 HP で入れることを踏みとどまり、大規模プロジェクトになった場合を想定しておきます。
多くのプロジェクトは真剣に作り出すとどんどん規模が大きくなってきます。
ユーザー側と管理画面側で linter の設定が違う、ライブラリのバージョンが違う
となってくると、継続的にコストがかかり続けます。
おすすめは Nx によるモノレポ構成です
モノレポとは？
複数のプロジェクトを一つのリポジトリで管理する構成です。
おすすめ理由
- TypeScript は標準サポート
- Next.js でも Nest.js でも Gatsby でも Angular でも自由に作成可能
- ESLint や Prettier なども標準サポート
- Webpack の設定なども標準サポート
- Cypress や Jest なども TypeScript で書ける
- 大規模になった時にプロジェクトを同じリポジトリで分割し、Linter やライブラリのバージョンは同じものが使える
構築手順
npx コマンドを通して作ることができます。
試しに、Next.js × TypeScript の環境を作ってみようと思います
スケールした時のことも考慮し、ユーザーと管理画面両方のアプリケーションを作ることとします
- 空の Nx プロジェクトを作成します
npx create-nx-workspace sample --preset=empty
- Next.js の cli を追加
yarn add @nrwl/next
- Next.js の user 用アプリケーション作成
yarn nx g @nrwl/next:app user
これだけで TypeScript サポートされた Next.js 環境が出来上がります
apps/
└ user/ ← Next.js × TypeScript
libs/
アプリケーションがスケールし、管理画面も必要になった時は
- Next.js の admin 用アプリケーション作成
yarn nx g @nrwl/next:app admin
apps/
└ user/ ← Next.js × TypeScript
└ admin/ ← Next.js × TypeScript
libs/
user と admin で共通のコンポーネントが欲しくなった時は
- React の shared-components ライブラリを作成
yarn nx g @nrwl/react:lib shared-components
apps/
└ user/ ← Next.js × TypeScript
└ admin/ ← Next.js × TypeScript
libs/
└ shared-components ← React × TypeScript
といった形にコマンド一つでどんどんアプリケーションをスケールさせていくことができ、
package.json や eslint、jest の設定などは一つにまとめていくことができるため、
管理しやすい ts 環境を作っていくことができます
まとめ
今、僕が新しい TypeScript プロジェクトを立ち上げるならこんな環境構築をします
ということで
Nx というビルドシステムを導入することで、TypeScript 環境を構築すると
ゆくゆく救われるよと言う話をしました。
現状、Vue.js はサポートされてないですが、React や Nest などの環境を作るのであれば
問題なく開発をスタートしていけると思います。
難点はバージョン追従が Nx に依存してしまうことですが、
新しいバージョンが出てから一ヶ月以内ぐらいには追従されていくので、多くの場合では問題なく運用していけるかと思います。