【個人開発】チーム開発して最新技術に乗り換えた話【Next.js Rails】

## 目次

1. 結論
2. ターゲット
3. 筆者経験
4. 個人開発 vs チーム開発
5. どう変わったか
6. 技術アップデートの背景
7. アップデートのpros & cons
8. 技術に興味がある人向け
9. 結論

## 結論

:::note info
力を付けて結果出すなら**チーム開発**！
:::


## ターゲット

- 個人開発に興味があるエンジニア
- 新しい技術を学びたい人

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498701/014ea758-a4d0-1a6f-cca9-62f0e434ac61.png" width="400px">


## 筆者経験

<details open><summary>個人開発特化Webアプリ ideee（アイディー）の制作者</summary>


```
アイデアのブラッシュアップができる
面白いアイデアに出会える
```
</details>

https://ideee.tech/about?utm_source=qiita&utm_medium=article&utm_id=renewal_post

- 個人開発とチーム開発の両方の経験あり
- 技術乗り換えを行なった経験


### 🎊祝🎊新基盤デプロイ

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498701/4ce7d94f-4e70-ad81-767f-e80d29f6a763.png" width="600px">


## どう変わったか(Before & After)


#### アプリ構成（Before）

<img src="https://camo.qiitausercontent.com/a3c9b49b868150bffac3dab5be0a21a814cd4d29/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3439383730312f66306331643435372d383862662d626662622d363261332d3633663538363664353839372e706e67" width="600px">


#### アプリ構成（After）

<img 
src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498701/ebea61c7-ed2e-c781-a376-a8adf9f9ee2c.png" width="600px">

### 以前のスタック

- Rails 6系
- jQuery
- Materialize


### 更新後スタック

- Rails 7.1
- Next.js(TypeScript)
- GraphQL(Apollo + Codegen)
- Mantine


## 技術アップデートの背景

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498701/6369c2d2-4b31-95da-c64e-5250d18c83b4.png" width="400px">

<details open><summary>開発スピードの向上</summary>

```
Cursor(AIエディター)やCopilot、CodeRabbit（AIレビュワー）を利用
AI開発時代に合わせて、コメントやTypeScript（型付）を増強
→ AIを使いこなすためのスタックに変わってきた
```
</details>


<details open><summary>パフォーマンスの向上</summary>

```
- Next.jsのプリフェッチ、SPAで圧倒的な速度向上
- GraphQLのApolloキャッシュにより毎回のリクエストを大幅カット
```
</details>


<details open><summary>技術力の向上</summary>

```
Rails ✖️ React or Next.jsのスタックで求人数は増加
（海外でもRailsの人気が再熱してるらしい。。）
GraphQLも人気があり求められるエンジニアに
```
</details>


## アップデートのpros & cons

### メリット

<details open><summary>技術が変わるだけで人が集まる</summary>


```
Railsのみの募集：2名〜5名の応募
新基盤での募集：3名〜16名の応募
```
</details>

https://x.com/1026NT/status/1748173961467433252

<details open><summary>圧倒的に楽しい</summary>


```
新技術導入でコミットパフォーマンスが上がる
→　より少ない時間で大きな結果が出る
→　開発体験が良くなる
→　コミットパフォーマンスが上がる
```
</details>


### デメリット

<details open><summary>移行の難易度</summary>


```
新技術導入のハードル
GraphQLとdevise・画像アップロードなどの想定外ケースがあった
```
</details>


<details open><summary>学習コスト & 時間がかかる</summary>

```
新基盤開発期間は既存の開発がストップ
→アプリの盛り上がりに伸び悩み
```
</details>

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498701/7935a95a-fc89-9c35-4f11-250170b0e3b8.png" width="400px">


## 個人開発 vs チーム開発


### 個人開発

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498701/6bb5c9d5-8f3b-46c2-e2e5-f02954244774.png" width="400px">



- 自由度高い 🚀
- 迅速な決定 💨


### チーム開発

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498701/a623aaf7-2fc3-1d4b-b437-741f64802bf1.png" width="400px">


<details open><summary>品質とスキルの向上</summary>


```
- 強みを活かした開発
  - フロントやバック専門の補完的開発
- PR確認でメンバーの知見がチームの知見になる！
- 転職に成功　
　- ５人のメンバーがチーム開発を活かして転職に成功🚀🚀🚀
```
</details>


<details open><summary>多様性とモチベーションの維持</summary>


```
- 個人開発だとモチベが下がりがちになる
  - 毎週のチームMTGでもワイワイ
- デザイナーやPMの視点を追加

- ペルソナがエンジニア
→ メンバーの声 ≒ ユーザーの声 を反映
```
</details>

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498701/0cb856ab-3dd5-ef8c-b668-1eee869fb1f7.png" width="400px">


## つまずきポイント
（技術興味が高い人向け）

<details open><summary>やりたいベースで走る危なさ</summary>


```
GraphQLのCodegenが開発体験良すぎてなんとしても使いたかったw
→　結果、GraphQLに引っ張られて開発の時間が大幅に増加💀💀💀

（GraphQL使いたかった理由）
Rails側でのコード定義からReactにHooksと型、設計書ドキュメントを自動生成！
→ Open APIを作成・メンテしたり、Hooksを自分で作成する手間がゼロ
```
</details>


deviseで時間溶かした話

https://zenn.dev/naruhiro/scraps/2ec7510690e274


## 結論

:::note info
- 個人は早さ、チームは成果に強み
- チーム開発の方が仕事に対しての再現性が高く、転職の成功に繋がりやすい！
:::

---

## 自己紹介

個人開発について発信しています！
Twitterもフォローください👏
[@1026NT](https://twitter.com/1026NT)
なる

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498701/3db40e7d-3213-be1f-8650-c6ad5dff69c9.jpeg" width="300px">