【登竜門Hack-AI活用講座】初学者はいらない、いない


:::note
[これは何]
登竜門Hack2025 AI活用講座の資料
:::

:::note warn
[外部公開にあたって]
この記事は初学者向けに短時間でツール群や概念を説明するために、意図的に言葉の解像度を落としたり、誇張した表現を行なっている箇所があります
:::

:::note warn
[前置き]
ここでは主にAI（LLM）の活用を中心に話します
30分で話すために、一部のツールに限って説明しています
:::

## 自己紹介

### Yuma Satake

- 名前：佐竹友真
- 所属：名古屋工学院専門学校
- 領域：Web 開発
- 趣味：車・旅行
- Twitter：[Yuma Satake](https://x.com/yuma_satake22)

<img width="200px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2740071/aaf685a0-0af0-5e5b-92e9-a6f0275812fc.jpeg">

- 受賞歴（~~講師なんて、こんなもんなんぼ書いてあってもええですからねぇ~~）
   - 技育CAMP Vol.10（入賞）
   - 技育CAMP Vol.11（入賞）
   - 関西ビギナーズハッカソン（最優秀賞）
   - 技育CAMPアドバンス Vol.1 （大賞）
   - カラビナハッカソン （カラビナ賞受賞）
   - マイナポータルハッカソン （本戦出場）
   - 技育CAMP Vol.5（最優秀賞）
   - 名古屋Web3ハッカソン（4冠）
   - 技育CAMPアドバンス Vol.3（GMO賞）
   - 技育展2023（サイバーエージェント賞受賞）
   - 技育CAMP Vol.5（DeNA賞）
   - etc...

## 初めに
みんな、強く生きてくれ。

### 初学者はいらない

#### 前提

書くまでもないですが、2022年末にOpenAIによってChatGPTがリリースされて以来、ClaudeやGeminiなど多くのLLMが登場し、それはエンジニア業界にも大きく影響を与えています。

2025年6月現在では、Devin・Claude Code・OpenHands などによる人間が一切直接コードに触れないまま開発を行う Video Coding がある程度可能になっています。（実用に足るかはおいておき）

#### 比較

その中でも最初に登場した Devin は月額500$という価格設定がされています。
これは高く感じますが、「海外でジュニア（初学者）のエンジニアを雇うための給料」をベースに設定されています。

ここで初学者の皆さんとAIの比較をしてみましょう

|  | 初学者 | AI |
| --- | --- | --- |
| 労働時間 | 8時間❌ | 24時間✅ |
| コードの質 | 普通 | 普通 |
| 知識量 | 少ない❌ | 多い✅ |
| コードベースの理解 | ゆっくり❌ | 早い✅ |

**もう誰も初学者を採用してくれません😇** 

実際に外資/国内問わず、エンジニアの新卒採用を停止している企業もあります。

### 初学者はいない

じゃぁもう今からエンジニアを目指すのは諦めた方がいいのか？
答えはもちろんNoです。

**皆さんはAIを適切に使い、適切に学ぶことで、初学者ではなく中級者からスタートすることができます**

そのためにこの講座・記事では以下の内容をまとめていきます

1. 今のAIの天井を見てみよう
2. 自分のコードに責任を持てるようになろう
3. そのために開発で何を意識すべきか

## ①今のAIの天井を見てみよう

:::note warn
[注意]
・内容は2025年6月現在のものです
・Claude MAX は高過ぎるので使ってません😇
:::

このセクションでは、講師の直近の個人開発の様子を簡単なTodoアプリの開発で見ていきます

### 使うツール

- ChatGPT：いつもの彼（設計支援に）
- Cursor：VSCode互換のエディター（AIエディターとして使用）

https://chatgpt.com

https://cursor.com


### 0. 諦めて財布を開く😇

残念なお知らせです。お金がかかります。

ChatGPTは基本無料、Cursorは一定期間無料で使うことができますが、それでも課金をお勧めします。
これらのツールは基本的にお金をかければかけるほど、早く・良い結果を得ることができます。

※お勧めしますが、必須ではありません。

#### ChatGPT

ChatGPTでは Plus プランを利用することでコーディングや複雑な問題解決に特化した`o3`というモデルが使えるようになります。
価格は 20$（2024/6/4 のレートで 2,878円）ですが、通常の`4o`の回答速度も上がるので、是非使ってみて下さい。

https://openai.com/ja-JP/chatgpt/pricing/

:::note
[Point]
筆者はChatGPTを推しますが、学生なら1年間無料で使えるGemini ProやClaudeなど他にも候補があるので、是非調べてみて下さい
:::

#### Cursor

CursorはVSCode互換のエディターです。
Githubが提供しているGithub Copilotなどと同様にコードの続きを書いたり、指示からコードを生成したりできます。

▼このようにコードの続きを書いてくれます（灰色の部分がCursorの提案）

![Screenshot 2025-06-04 at 13.42.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2740071/1a7bd40c-d237-46c5-af5c-dd9410f6f8d5.png)

価格はChatGPTのPlusプランと同様に月額20$です。

https://www.cursor.com/ja/pricing

:::note
[Point]
Github Copilot は学生であれば無料で同等の機能を使うことができます。
しかし、変更の適用速度が遅かったり、開発体験ではCursorの方が圧倒的に良いです。
:::

### 1. アプリの要件を決める

まずはアプリの要件をChatGPTと相談しながら決めていきます。

#### モデルについて
コーディングなどでは主に`o3`というモデルを選択します。
先述の通り、o3はChatGPTの中でコーディングや複雑な問題解決に特化したモデルです。

![Screenshot 2025-06-04 at 13.56.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2740071/8c8887e4-874e-4c4c-a42b-71cf226852bf.png)

#### 要件整理

以下のようなプロンプトを投げて、まず頭の中を会話しながら整理していきます。

```
優秀なWebアプリケーションエンジニアとして振る舞って下さい。
メモをもとにWebアプリの要件を整理しまとめて下さい。
シンプルに要件のみを整理します。

不足している情報があれば私にヒアリングして下さい。

"""要件メモ
- TODOアプリ
- 認証は無しで、URLで複数人に同じTODOリストを共有できるように
- 基本的なTODOアプリとしての機能を持つ
- Webアプリケーションとして開発したい
- フロントエンドではReact/TSを使う
- バックエンドにはGoを使う
- フロントはVercelにデプロイ
- バックエンドはGCPの Cloud Runにデプロイ
- DBは使わず、メモリ内のみで動作するように
"""
```

以下のように帰ってきたので、返事をしていきます

> #### 確認したいポイント
>1. **データの揮発性**  
>   - インスタンス再起動・スケール時に TODO が消えても問題ありませんか？  
>2. **複数インスタンス間の同期要件**  
>   - 上記制約を受け入れ、**「同時編集はゆるく同期されればよい」** or **「必ず同じ内容を見られるようにしたい」** のどちらでしょうか？  
>   - 後者の場合、Redis / Firestore など外部 KVS を導入する必要があります。  
>3. **リアルタイム更新**  
>   - WebSocket（Socket.IO など）での即時反映が必要か、ポーリングで十分か？  

返事をする

```
- 揮発して問題なし
- インスタンスは1つしか立たないものとし、同期は無視して
- リアルタイムでなく、ロードした時のみでOK
```

ある程度頭の中と相違がなくなり、整理できたのでmarkdownとしてコピー可能な形式にしてもらいます（以下の通り）

![Screenshot 2025-06-04 at 14.11.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2740071/68e6b55c-17f1-420a-a9f8-b33cb1979757.png)

▼全ての会話ログはこちらをご覧ください

https://chatgpt.com/share/683fd5a9-cc90-800b-a9c4-6b08dd1ed4ca

### 2. 設計をする

API設計を中心にそこから広げていきます

Swaggerと呼ばれるAPIの設計書をCursorを使って作成します

:::note warn
[注意]
ここではSwagger及び周辺ツールの説明は省きます
:::

Cursorを開き`Swagger.yml`と`requirement.md`を作成します。
`requirement.md`には先ほどの要件をコピペします。

![Screenshot 2025-06-04 at 14.23.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2740071/a5ad456a-6a57-425f-aba6-277390b88297.png)


右側のチャットパネルで`Agent`と`claude-4-sonnet`を選択します

- Agent：Cursorの動作モード（基本これを選んでおきます）
- claude-4-sonnet：AIのモデル（o3と同じで、コーディングや複雑な問題解決が得意）

![Screenshot 2025-06-04 at 14.17.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2740071/9d0cc8e9-269d-4b8f-9419-137b73073a8a.png)

このチャット欄で先ほどのChatGPTとまとめた要件をもとに、Swaggerを書いてもらうように依頼します。

![Screenshot 2025-06-04 at 14.25.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2740071/731aa084-6ab3-483b-9642-e24f808c1920.png)

画像の通りSwaggerが生成されるので`Accept`のボタンを押して確定します

![Screenshot 2025-06-04 at 14.27.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2740071/bd73fc2a-3c41-4b7e-9907-f9ca90a68ecc.png)

SwaggerEditorで確認すると、以下のようにAPI定義が作成されていることがわかります

![Screenshot 2025-06-04 at 14.28.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2740071/82ea7f12-ab8c-4f2c-909c-48355dd18ade.png)

### 3. 実装する

APIの設計ができたので、バックエンドとフロントエンドをそれぞれ実装していきます。

実装にあたっては以下の`Git Worktree + cursor Editor`を使っていきます。

https://marketplace.visualstudio.com/items?itemName=RikuOgawa.git-worktree-cursor&ssr=false#review-details


拡張機能を開き、backendとfrontendのディレクトリを作成します。
この作業によって、それぞれの個別のディレクトリとGitのBranchが作成されます

![Screenshot 2025-06-05 at 9.29.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2740071/cdecf08e-cde3-4616-8350-943b3ee6c15c.png)

それぞれのブランチごとにCursorが自動で開かれるので、それぞれに以下の指示を与え、フロントとバックを同時に実装していきます

![Screenshot 2025-06-05 at 9.34.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2740071/a11017d0-e328-4c8e-bd0c-5c94d5211c10.png)


[バックエンド]
```
requirement.mdとswagger.ymlを参照してAPIを実装して下さい。 swagger.ymlに記載されている内容のみを実装し、MVPとして可能な限り軽量に実装して下さい。
テストなどは不要です。
```

[フロントエンド]
```
requirement.mdを参照してTODOアプリを作成して下さい。 swagger.ymlに記載されているAPIを使用して下さい。
要件の内容のみを実装し、MVPとして可能な限り軽量に実装して下さい。
テストなどは不要です。
```

数分で画像のように実装が完了します

![Screenshot 2025-06-05 at 9.46.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2740071/cdf49db7-25cb-4536-8f40-a0b20df9c872.png)

![Screenshot 2025-06-05 at 9.47.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2740071/5d68e973-0005-4cfb-b92e-14519f925ad6.png)


省きますが、`Cloud run`のMCPサーバ（AIが使えるツール）があるので、このままデプロイすることもできます

https://cloud.google.com/run/docs/host-mcp-servers?hl=ja

### 言いたかったこと

講座の構成のために、設計段階である程度技術選定などを与えていますが、実際にはそれさえ与えなくてもある程度自ら技術選定を行い実装してくれます。

その上で伝えたかったことは

- 皆さんがコードを書かなくていい時代は近いということ
- AI活用からは逃げられないということ

## ②自分のコードに責任を持てるようになろう

#### 前提

実際問題、①で実際に見てきたように、2025年6月現在でも Claude 4 と Cursor の組み合わせは、有限な自分の財布を無視すればある程度動作するコードを無限に生成できます

また、実際に数年以内にはAIが完全にコード書いてくれてコードの中身を理解する必要はなくなるかもしれません。

#### 自分のコードに責任を持つとは

その上で、重要なことは最終的な成果物が「あなたの意図した機能/設計であること」だと考えます
※これはあくまで筆者の意見です

**「それは本当にあなたがユーザに提供したい機能ですか？」**
AIに任せてプロダクトの本質を考えることを妥協していませんか？

**「それは本当にユーザやチームに迷惑をかけない設計/実装ですか？」**
大幅な変更や問題が発生した時に「AIがうまくやってくれていなかった」と言うことはできません

### 具体的に

有限な時間の中でAIを使って開発を加速させるのは良いことですが、以下を意識する必要があります

#### AIの得意な**確実性の高い**ところは任せる

- 設計後の実装
- 開発した機能の改修
- etc...

#### AIの苦手な**不確実性の高い**ところは人間が担保する

- 新機能をどんな内容にするのか
- 長期的な技術動向などを見据えた技術選定・設計
- etc...

例えば先に実施した実装では、以下のような流れで実装しています

1. 人間が大まかな案を出す（確実）
2. AIがそれを抜けているところがないか、こんな機能はないかを発散させる（不確実）
3. 人間が判断をして中身を詰める（確実）
4. AIがそれを実装してくれる（不確実）
5. 人間がそれを確認して、必要なら修正をする（確実）

という流れで、人間が確実なところで判断をして、不確実なところはAIに任せることで、高速かつ安定した成果物を得ることができました。


## ③そのために開発で何を意識すべきか

### 考えよう

✅：AIに案を出してもらう
❌：AIの提案を組み合わせて、それなりに良さそうなものにしてしまう

AIはあくまでツールであり、彼らが出してくるアイデアも機能もコードも過去の何かの混ぜ合わせでしかありません。
それらを組み合わせたものはそれなりに良さそうに見えてしまいます。

しかしながら考えるのを止めないようにしましょう。
ユーザのことを考え、迷惑にならない設計かを考えましょう。


### 読もう、分からないなら調べよう

✅：AIにコードや仕様を生成させる
❌：AIが出してきたものを把握しないまま出す

AIにコードを書かせることは、あくまで手段の一つです。
人間がそこから不確実性を取り除き、担保してあげることは義務です。

そのために、コードを読みましょう。分からない箇所については調べましょう。
その理解にAIを活用することはベストな使い方です。

### プログラミングの勉強をしよう😇

君たちはエンジニアである限り、プログラミング言語からも、データベースからも、フレームワークからも、ツールからも、全てから逃げることはできません！！
諦めて学びましょう。

実はプログラミングって楽しいよ。

https://x.com/yuma_satake22/status/1929500240362848558

#### これらを実践すれば、あなたは初学者ではなく、すぐに中級者として活躍できるはずです！

## 最後に

今回は

1. 今のAIの天井を見てみよう
2. 自分のコードに責任を持てるようになろう
3. そのために開発で何を意識すべきか

について見ていきました。
記事中で何度も`内容は2025年6月時点での内容です`としていたのはそれだけ変化が激しいためです。

今回紹介しなかった、ツールやモデルなども多くありますが、ぜひ調べて見て下さい。（メンターがきっと詳しいよ）

### 中級者の皆さんのこれからを応援しています！

ぜひTwitterフォローして下さい👋

https://x.com/yuma_satake22