Lecture 01: Node.js Environment Setup & Mobile Web App with Vue.js

← AI駆動趣味開発講座：まとめページに戻る

はじめに：アプリ開発を、新しい「趣味」にしてみませんか？

日曜大工（DIY）で家具を作ったり、休日に料理を楽しんだりするように、「AIと一緒にオリジナルのスマホアプリを作ること」を気軽な趣味にしてみませんか？

「日々のルーティンや習慣を記録する自分専用ツール」
「家族や友人との思い出を振り返るプライベートアルバム」
「大切な人の誕生日や記念日に贈る、サプライズのメッセージアプリ」

世の中の既存アプリを探すのも良いですが、「自分や身の回りの人のためだけに、あったらいいなを形にする」ものづくりは、とてもワクワクする楽しい時間です。

本連載では、「コードを一切読まない・書かない」 ことを前提に、AIに対話で指示を出して自分だけのスマホアプリを完成させていきます。

【極めて重要な大前提：これは「趣味開発」限定のルールです】
本連載で紹介する「コードを一切読まない・AIに完全丸投げする」アプローチは、あくまで自分や身近な人のためだけに作る個人の趣味開発に限定したものです。
業務・実務の開発現場において、コードの挙動やセキュリティを理解・検証しないままAIに依存することは、極めて不誠実であり、重大な障害や情報漏えいを招く極めて無責任な行為です。業務開発に携わる際は、必ずコードの意味とリスクを理解した上で責任を持って実装してください。

1. 本講座のルール：あなたは「アプリの監督（ディレクター）」

従来のプログラミング学習のように、難しい文法を覚えたりエラーの英語を解読したりする必要はありません。

あなたがすること: 「どんなアプリにしたいか」を日本語でAIに伝える
AIがすること: 必要なコードの作成や、実行するコマンドの案内をすべて担当する

■ 「エージェント形式」ではなく「エディタ形式」で進める理由

最近はAIが裏ですべて自動で完結させてしまう「エージェントツール」も増えていますが、本講座ではあえて エディタ（VS Code）を開いてファイルを見ながら進める「エディタ形式」 を採用します。

コードの細かい中身は読まなくても、「App.vue という画面ファイルを編集しているんだな」「画像はこのフォルダに置くんだな」とプロジェクトの構造を目で見て把握できる方が、将来的にカスタマイズしたくなったときやトラブルが起きた際にも、圧倒的に状況が理解しやすくなるからです。

2. 相棒となる「生成AIツール」の選び方と費用感

コードを読まない開発において、最も重要なのは**「どのAIを相棒にするか」**です。

※なお、Cursorなどの専用AIエディタアプリもありますが、今回は誰もが導入しやすい「VS Code ＋ AI」の組み合わせを前提とするため、エディタアプリ自体の解説は割愛します。

■ 完全無料は正直キツい？（費用のリアル）

「完全に無料だけでやりたい」と思うかもしれませんが、無料枠のAIチャットだけでは質問回数の制限が厳しく、回答精度も落ちるため、エラーが起きた際に挫折しやすいのが現実です。
月数百円〜数千円（API従量課金や月額プラン）の少しの投資をするだけで、開発の快適さと成功率は劇的に上がります。

■ 代表的なツール・モデルの特徴比較

ツール / モデル	分類・利用形態	特徴と強み	費用感	こんな人におすすめ
Cline ＋ DeepSeek	VS Code拡張機能	圧倒的な安さと精度の両立。 VS Code内で直接ファイル作成・編集を行える。DeepSeekのAPIを使うことで激安で動く	従量課金 (月数十円〜数百円程度)	とにかく安く、かつ高精度にVS Code内で完結させたい人
ChatGPT / Codex (OpenAI / GPT-4o)	Web対話 / 拡張機能	抜群の安定感と画像生成の強さ。対話が非常にスムーズ。最近はアプリアイコンやイラストなどの画像生成精度も極めて高い	無料枠あり / Plus 月額$20 (約3,000円)	コード作成だけでなく、アプリ用画像やアイコンも綺麗に作りたい人
Claude / Claude Code (Anthropic / Sonnet)	Web対話 / 拡張機能	とにかく業界最高峰のコード精度。コードの書き味やバグ修正能力がずば抜けており、複雑な指示もほぼ一発で形にする	無料枠あり / Pro 月額$20※ または従量課金	とにかくエラーで詰まりたくない、最高精度を求める人
Antigravity (Google / Gemini Pro)	AI統合開発環境（IDE） ※本表で唯一の開発環境そのもの	それ自体がVS Codeのように使えるAI統合開発環境。 Gemini Proを搭載。大容量ストレージや画像・動画・音声生成といったGoogleの各種AI特典が付帯する中でAntigravityまで使えるため、総合的なコスパがあまりに破格	破格 / Google AIプラン・従量課金	開発環境に加え、ストレージや動画・画像生成も含めた総合的なコスパを求める人

知っておくとお得なポイント（既存契約の活用と実際のコスト感）

すでに ChatGPT Plus や Claude Pro を契約している場合:
Web版の有料プラン（月額$20等）に加入していれば、VS Code の拡張機能や連携ツールでも既存のアカウントでログインしてそのまま利用できるケースが多いです（新しく追加費用を払う必要はありません）。
※ Claude の費用に関する注意点:
表面上の定額料金は月額$20（約3,000円）で ChatGPT と同じですが、コーディング等の長文やり取りを行うと利用枠（メッセージ制限）の消費が非常に速く、すぐに上限に達しやすいため、実質的なコスト感としては高めになります。
Google エコシステム（Antigravity）の破格さ:
大容量ストレージ（2TB等）や、動画生成・音声生成・画像生成などの豊富な特典が付いてくる中で、さらに本格的なAI開発環境である Antigravity まで使えるため、日常のクラウド利用も兼ねるなら圧倒的なコストパフォーマンスを誇ります。
最初は何から始めるべき？:
すでに使っている有料AIプランがあればそれを活用し、完全新規でとにかく安く試したいなら「Cline ＋ DeepSeek（API従量課金で月数十円〜）」、環境ごとまるごと揃えて高コスパを狙うなら「Antigravity」がおすすめです。

3. 準備するもの

必要なツールは以下の4つです。

ツール	役割	準備方法
Node.js	アプリを動かすための土台エンジン	公式サイトから無料ダウンロード
VS Code	ファイルを管理する作業用エディタ	公式サイトから無料ダウンロード
生成AI	あなたの専属プログラマー（上記から選択）	ChatGPT、Claude、Cline、Antigravity など
Webブラウザ	作成したアプリをスマホ画面で確認する	Google Chrome、Edge、Safari など

4. ステップ1：Node.js と VS Code を準備する

① Node.js をインストールする

Vue.js のアプリをパソコン上で動かすために、Node.js（ノード・ジェイエス） をインストールします。

Node.js 公式サイトにアクセスします。
「LTS（推奨版）」 と書かれたボタンをクリックしてインストーラーをダウンロードします。
ダウンロードしたファイルを開き、基本的にすべて 「Next（次へ）」 をクリックしてインストールを完了させます。

参考記事: 【初心者向け】Node.jsのインストール手順

② VS Code をインストールする

ファイルを一覧で確認・管理するためのエディタ Visual Studio Code（VS Code） を準備します。

VS Code 公式サイトにアクセスし、インストーラーをダウンロードします。
ダウンロードしたファイルを開き、手順通りにインストールを完了させます。

インストールのワンポイント（おすすめ設定）
インストーラー実行時のオプションで「Code で開くアクションを追加する」にチェックを入れておくと、フォルダを右クリックして直接 VS Code で開けるようになるため大変便利です！

参考記事: VSCodeのインストール手順とおすすめ設定

③ 入れておくと快適な VS Code 拡張機能

VS Code の左サイドバーにある 「拡張機能アイコン（四角形のマーク）」（またはショートカット Ctrl + Shift + X / Macは Cmd + Shift + X）から、以下の拡張機能を検索して「インストール」ボタンを押しておきましょう。

拡張機能名	役割・メリット
Japanese Language Pack for VS Code	VS Code のメニューや設定画面をすべて日本語化してくれる必須拡張
Vue - Official	Vueファイルを正しく認識し、画面構造を綺麗に色分け表示してくれる公式拡張機能
indent-rainbow（おすすめ）	インデント（字下げ）の深さを虹色に色分けし、ファイルの構造を視覚的に分かりやすくするツール

④ あなたが選んだAIツール（相棒）をセットアップする

前の章で決めた「あなたの相棒AI」に合わせて、セットアップを行います。

パターンA：VS Code の拡張機能を使う場合（Cline / Claude Code / Codex）

VS Code の拡張機能タブを開きます。
自分が選んだツールを検索して 「インストール」 をクリックします。
- Cline: Cline を検索してインストール（DeepSeek等のAPIキーを設定）
- Claude Code: Claude Code を検索してインストール（Claudeアカウント連携）
- Codex / ChatGPT: 関連拡張機能を検索してインストール（OpenAIアカウント連携）
画面の案内に沿ってログインまたはAPIキーを入力すれば、エディタ内でAIが使えるようになります。

参考記事: cline+deepseek環境を構築して、適当なアプリを作らせてみる

パターンB：Antigravity IDE を使う場合

Googleが提供する Antigravity は、拡張機能ではなく 「AI統合開発環境（IDE）そのもの」 です。

【検索時の注意】「antigravity」と「Antigravity IDE」を間違えないように！
単に「antigravity」とだけ検索すると、Pythonのライブラリや別のツールがヒットしてしまいます。必ず Googleが提供する「Antigravity IDE」 であることを確認してダウンロード・導入を進めてください。

以下の解説記事等を参考に、Antigravity IDE をインストールします。
Google アカウントでログインして起動します（画面構成は VS Code とほぼ同じなので直感的に操作できます）。

参考記事: 【初心者向け】Googleの「Antigravity IDE」のインストール方法と初期設定ガイド

5. ステップ2：コマンドを実行してアプリの土台を立ち上げる

■ ターミナル・コマンドプロンプト（cmd）とは？

プログラミングで必ず登場する「ターミナル」や「コマンドプロンプト（cmd）」。「映画に出てくるハッカーの黒い画面みたいで難しそう…」と感じるかもしれませんが、仕組みはとてもシンプルで、怖がる必要はまったくありません！

マウスの代わりに「文字で指示を出す窓口」:
普段私たちは、マウスでフォルダをダブルクリックしたりアイコンを押してアプリを動かしています。ターミナルは、それを文字（コマンド）を使ってパソコンに直接指示を出すための画面です。
あなたがすることは「提示されたコマンドを打つ（コピペする）だけ」:
難しい呪文を覚える必要はありません。提示されたコマンドをコピー＆ペーストして Enter を押すだけで、パソコンが自動的にアプリの準備を完了してくれます。

手順A：作業用フォルダを作ってエディタで開く

まずは、アプリを入れるための作業フォルダを用意してエディタで開きます。

パソコンのエクスプローラー（デスクトップなど好きな場所）で 新しいフォルダー（例: my-hobby-app など）を作成します。
VS Code（または Antigravity） を開き、画面左上の ファイル → フォルダーを開く から、先ほど作成したフォルダを選択して開きます。
（※フォルダを右クリックして「Code で開く」でもOKです！）
エディタ上部のメニューから ターミナル → 新しいターミナル をクリックし、画面下にターミナルを開きます。

手順B：コマンドを実行してアプリを作成＆起動する

ターミナルが開いたら、以下のコマンドを 1行ずつコピーして貼り付け、Enterキー を押して実行していきましょう！

# 1. Vue.js のテンプレートを使ってアプリの土台を生成
npm create vite@latest my-app -- --template vue

# 2. 作成された my-app フォルダの中に移動
cd my-app

# 3. アプリを動かすために必要な部品をインストール
npm install

# 4. アプリを起動！（ローカル開発サーバーの立ち上げ）
npm run dev

ターミナル内に http://localhost:5173/ のようなURLが表示されれば、アプリの起動は大成功です！

■ 実行したコマンドの解説（パソコンの中で何が起きたの？）

コードは読まなくても大丈夫ですが、「今打ったコマンドがパソコンの中で何をしていたのか」 をざっくり知っておくと、今後の開発がグッとわかりやすくなります。

コマンド	パソコンの中で起きていること
`npm create vite@latest ...`	高速ツール「Vite（ヴィート）」を使って、Vueアプリの基本ファイル一式を自動生成している
`cd my-app`	作成された `my-app` フォルダの中に作業場所を移動している（`cd` = Change Directory）
`npm install`	アプリを動かすのに必要な追加パーツ（ライブラリなど）をインターネットからダウンロードして揃えている
`npm run dev`	パソコンの中に「自分専用の開発用サーバー」を立ち上げて、ブラウザからアクセスできるようにしている

【ワンポイント】仕組みがわかったら「エージェントモード」に任せてもOK！
パソコンの中で何が起きているか（コマンドの流れ）を実感するために、初回はぜひ手動でコマンドを実行してみることを強くおすすめします。
一度全体の流れを体験して理解できたら、次回以降は Cline や Antigravity などの「AIが代わりにコマンドを実行してくれるエージェントモード」を使って、アプリの立ち上げを全自動でやってもらっても全く問題ありません！

■ 作成されたプロジェクトの中身を見てみよう（ファイル構成）

コマンドを実行すると、VS Code の左サイドバーにたくさんのファイルが並びます。
細かいコードは読まなくてOKですが、「どのファイルが何を担当しているのか」 だけ把握しておきましょう！

my-app/
├── node_modules/     ← 【触らなくてOK】npm install で集めた大量の部品フォルダ
├── public/           ← アイコンや画像などを置くフォルダ
├── src/              ← 【超重要！】アプリの中身が詰まったメインフォルダ
│   ├── assets/       ← ロゴやCSSデザインが入るフォルダ
│   ├── components/   ← 部品ごとの画面パーツが入るフォルダ
│   ├── App.vue       ← ★【最重要】アプリのメイン画面！
│   └── main.js       ← アプリを起動するスタート地点のファイル
├── index.html        ← アプリの土台となるWebページ全体の枠組み
├── package.json      ← アプリの名前や使っている部品一覧が書かれた設定書
└── vite.config.js    ← Viteの設定ファイル

覚えるべきは src/App.vue ひとつだけ！
次回以降、AIに「こんな画面にしたい」「ボタンを増やして」とお願いして作ってもらったコードは、主にこの src/App.vue に貼り付けていくことになります。

6. ステップ3：「サーバーとは何か？」を本物のスマホで体感してみよう！

① PCのブラウザでスマホ表示にして確認

ブラウザ（Google Chrome等）を開き、http://localhost:5173/ にアクセスします。
画面のどこかを 右クリックして「開発者ツールで調査する」 を選ぶか、キーボードの F12 キーを押します。
開発者ツールの左上にある 「スマホ・タブレットのアイコン」 をクリックします。

ブラウザの画面が縦長のスマートフォン表示に切り替わり、Vueの画面が表示されれば大成功です！

② そもそも「サーバー」とは何か？

ITやプログラミングで必ず聞く「サーバー（Server）」という言葉。
英語の Serve（料理などを提供する・配る） が語源で、要するに 「画面やデータをリクエストされた端末に配るコンピューター」 のことを指します。

npm run dev を実行している間、あなたの手元のパソコン自身が「Webサーバー」に変身して、画面データを配り続けてくれています。

③ AIに頼んでViteを設定し、同じWi-Fiのスマホ実機からアクセス！

「パソコンがサーバーになっている」という事実を、本物のスマホ実機を使って体感してみましょう！

手順1：AIに設定方法を聞く（またはコマンドを実行）

同じWi-Fi（自宅のWi-Fiルーターなど）につながっているスマホからアクセスできるように、AIに質問してみます。

同じWi-Fiにつながっている自分のスマホ実機から、PCで起動しているVite（Vue）アプリを開きたいです。
vite.config.js の設定変更か、起動コマンドのオプションを教えてください。

手順2：AIの案内通りに起動する

AIから vite.config.js の書き換え、または --host オプション付きの起動コマンドが案内されます。

ターミナルで一度 Ctrl + C を押してサーバーを止め、以下のように --host を付けて再起動してみましょう。

npm run dev -- --host

手順3：ターミナルの「Network URL」をスマホで開く

ターミナルに、パソコン用（Local）とは別に 「Network」 というURLが表示されます。

  VITE v6.x.x  ready in 200 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.168.1.15:5173/  ← ★このURLをスマホで開く！

パソコンと同じWi-Fiに繋いだスマホ（iPhoneやAndroid）のブラウザ（SafariやChrome）を開き、この http://192.168.x.x:5173/ を入力してアクセスしてみてください。

なんと、あなたのスマホ実機の画面に、パソコンで作ったアプリがそのまま表示されます！さきほど見たパソコンの検証画面と全く同じですね！

「自分のパソコンがサーバーになって、電波（Wi-Fi）を通じてスマホにアプリを届けているんだ！」という仕組みが、体感として一発で納得できるはずです。

まとめ

第一講では、AI駆動趣味開発の環境準備とアプリの立ち上げを行いました。

Node.js と VS Code の準備: インストーラーで簡単にセットアップ完了
相棒AIのセットアップ: Cline、Claude Code、Codex の拡張機能や Antigravity を導入
エディタ形式で進める: ファイル構造が目に見える状態で作業するため、後々のカスタマイズやトラブル時も安心
コードを読まない開発: 提示されたコマンドをコピペするだけでVueアプリが立ち上がる
サーバーの正体を体感: 自分のPCがサーバーになり、同じWi-Fiを通じてスマホ実機からアプリを開く感動を体験！

次回予告

次回は 【第二講】 に進みます。

AIと対話しながら「どんな画面にしたいか」「どんな機能が欲しいか」を伝え、ボタンの色やレイアウトをカスタマイズして、オリジナルのアプリ画面に仕立てていきましょう！