CODE FAMILY — DEV

AI CODE

AIツールを作るならコード進行で
暗記しない。
仕組みを掴んで、AIと弾く。

楽譜を読まずコードで弾くように、構文を丸暗記せずパターンで作る。
AI時代のエンジニアに必要なのは、全部覚えることじゃない。
仕組みを理解して、AIと一緒にモノを作れること。

THE BIG IDEAAIアプリは「4本の柱」でできている

チャットボットも、要約ツールも、翻訳アプリも、結局4つの役割の組み合わせ。AI 自体は API が代わりにやってくれるから、UI と繋ぎ込みだけ作れば動く。

> PROMPT
入力 — 何を聞くか
ユーザーが書く文章を受け取る。「どう聞くか」の設計が9割。プロンプトの型さえ作っておけば、AIから良い答えが返る。
↗ CALL
呼び出し — AIに投げる
fetch で API を叩くだけ。OpenAI/Claude/Gemini どれも同じ。たった4〜5行のコードで、AIに繋がる。難しいのはここじゃない。
{ } PARSE
受け取る — 返事を読む
JSON で返ってくる答えから必要なところだけ取り出す。choices[0].message.content みたいなアレ。AIから人間が読める形へ。
□ SHOW
表示 — 会話として見せる
取り出した答えをチャットの吹き出しとして画面に積む。これがあって初めて「AIアプリ」になる。履歴も残せば本格的。

LIVE BUILD4本の柱で、目の前でチャットボットが完成する

4つのボタンを順にタップ。PROMPT → CALL → PARSE → SHOW と重ねると、何もない画面が動くミニチャットボットに育っていく。完成後はその場で会話できる。

  1. 「▶ BUILD START」を押す
  2. 光ってるボタンをタップ(PROMPT→CALL→PARSE→SHOW の順)
  3. SHOW まで完成したら、プレビューで 実際にメッセージを送って会話できる
カイセイ先生
START
「▶ BUILD START」を押して始めよう
// ここに、押した柱のコードが表示されます
▼ PREVIEW (実際のチャット画面)
ここにチャットボットが組み上がります
完成! 下の入力欄に話しかけてみよう — AI(モック)が返事します

THE PROGRESSIONAIアプリの王道進行 = PROMPT → CALL → PARSE → SHOW

アプリの王道進行が CRUD、ゲームがゲームループ、サイトが HERO→VALUE→TRUST→CTA。AIアプリは「入力 → 投げる → 受け取る → 見せる」のループ。ChatGPT も Claude も中身はみんなコレ。これさえ理解すれば、どんなAIツールも作れる。

>
入力
PROMPT
聞きたいこと
↗
呼出
CALL
APIに送る
{ }
解読
PARSE
返事を整える
□
表示
SHOW
画面に出す

例: 翻訳ツール = ユーザーが文を入力(P)→ "和訳して" のプロンプトをつけて AI に送る(C)→ 返ってきた JSON から訳文を取り出す(Pa)→ 画面に表示(S)。これがAIアプリのカノン進行。

WHY NOW令和は「AIと弾く」エンジニア

昔は全部暗記して、ゼロから何百行も書いた。今は違う。仕組みを掴んだ人がAIに正しく指示して、出てきたコードを読んで・直して・繋げる。これが一番速くて、一番モノになる。

昔のやり方

  • 構文・関数を全部暗記
  • ゼロから手で書く
  • エラーで何時間も詰まる
  • 動くまで何ヶ月もかかる

令和のやり方 (AI CODE)

  • 仕組み・全体像を理解する
  • 「こう作って」とAIに頼む
  • 出たコードを読めて・直せる
  • エラーはAIに見せて即解決
  • 今日のうちに動いて、世に出せる

※ AI に丸投げで「動けばいい」ではなく、中で何が起きてるか分かった上で使うのが AI CODE。だから壊れても直せるし、応用が効く。

LEVEL ROAD6つのAIツールで「作れる人」になる

音楽を1曲ずつ弾けるようにするのと同じ。AIツールを6本作るうちに、自然と4本柱と AI ループが体に入る。

1
テキスト翻訳ツール
入力した日本語をAIで英訳。プロンプトに型を持たせる練習。
PROMPT + CALL
2
文章要約ツール
長い記事を3行に圧縮。"3行で要約して" のシンプルプロンプト力。
+ 整形
3
アイデア出しbot
商品名/タイトル/キャッチコピー候補を10個生成。リスト処理を学ぶ。
+ PARSE 配列
4
キャラチャットbot
"あなたは○○です"のシステムプロンプトで人格を持たせる。N/I ACADEMIA の先生キャラと会話。
+ system prompt
5
マルチモーダル(画像+文章)
画像を投げて説明させる/絵を描かせる。テキストだけじゃない時代へ。
+ 画像API
6
デプロイ + APIキー管理
作ったAIツールに URL を付けて公開。APIキーを安全に扱う実践も。
本番運用
「作れる人」になる第一歩を、今日。
AI CODE は CodePlay の新コース(準備中)。
音楽・英語と同じ「コードで弾く」発想で、Webエンジニアの入口を。
プランを見る
※ AI CODE は現在プロトタイプです。正式リリースまでお待ちください。

先生キャラ: N/I ACADEMIA「カイセイ」 ／ 音声: VOICEVOX:青山龍星