新規プロジェクト本格的に始動
どうも、フロントエンドチームの藤井です。
いよいよ、ANDPAD施工管理開発チームの目玉の一つである、「横断工程表」というサービス開発が始まりました。3月にリリースした、案件ごとに作れる「工程表」というサービスをより使いやすく改良したものになります。また、もともとANDPAD本体に入っている「横断工程表」というサービスを作り直すものでもあります。
この横断工程表では、案件や担当者、現場などを横断で同じ工程表上で見れることを機能として入れていきます。いわゆるガントチャートのようなサービスですね。
Nuxtを採用する理由
旧横断工程表はRails + Angular、工程表はRails + Vueという構成でしたが、今回はフロント側はNuxtで一から作り込むことにしました。
理由としては、以下のようなものがあります。
- バックエンド、フロントのそれぞれの責務がはっきり別れていないのでキャッチアップにも時間がかかる
- モノリシックな構成のため影響範囲がわかりづらく、毎回リリース前の調査やテストに時間がかかる
- 本体サービスの週一リリースに合わせるため、ちょっとしたフロント側改修も待たなければならない
- etc...
新工程表プロジェクトからの反省点
また「新工程表」サービス開発からの反省点もあります。
- なぜこのようなストア設計になっているのかわからない
- なぜ動いているのかわかりにくいコードがある
- コンポーネント化を適宜行っていないので、ファイルが肥大化してメンテしにくい
- グローバルスタイルシートへの依存が多く、まさかのスタイルシートとvueファイルの密結合状態
- APIエンドポイントがいたるところに転がっている
- Lintがかかっておらず、無秩序なコードがある
- etc....
新プロジェクトでの設定
以上のことを踏まえて、今回のプロジェクトでは環境設定から気をつけました。
- axios-moduleではなく、axiosを使い、APIエンドポイントを`network/apiClient`に集約
- assets/cssに最低限のスタイルシート(reset.cssやbase.scss)を先に用意し、新規で作ることを禁止
- constantsやutils、modelsやdirectivesディレクトリを先に作って、ディレクトリ構成で迷わないように準備
- Atomic Designを採用し、コンポーネントの管理
- Lintを導入し、さらにhookを使ってcommit時に自動でlintが走るよう設定
- TypeScriptを導入し、型を意識した設計にしていく
- READMEにディレクトリ構成や注意点などを明記しておく
- etc....
様々な人が開発に携わるからこそ、様々なことを明示的に残しておく必要があると感じました。
このサービスが日の目を見るのは、7月末ごろでしょうか。これからガンガン開発を行っていきます！
最後に
一緒に横断工程表を作ってくれる人を募集しています。こちらに弊社の技術スタックなど載っていますので、ぜひ見てみてください！
