Lecture 02: Development Environment Setup & The Value of Coding in the Generative AI Era
← DRF × Vue.js 実践講座：まとめページに戻る | ← 第一講：フルスタックSPAの全体像
はじめに
第一講では、現代のWeb開発で広く採用されている 「DRF（バックエンド） × Vue.js（フロントエンドSPA）」 の全体アーキテクチャ、Webサーバー（NGINX）やASGIサーバー（Uvicorn）の役割、そしてリクエストから画面描画までの完全な通信フローを学びました。
いよいよ第二講からは実際の開発に入っていきますが、その前に極めて重要で避けて通れないテーマがあります。
それは、「生成AIがコードを自動生成してくれる時代に、なぜ私たちは環境構築の手順やコードの文法・アーキテクチャを基礎から学ぶ必要があるのか？」 という本質的な問いです。
本講の前半では、AI時代におけるエンジニアの価値の変化、直面する「3つの負債」、そして人間が果たすべき設計責任について深掘りします。後半では、フルスタック開発の土台となる 開発環境（Python、Node.js、VS Code） を実際に整えていきます。
- 前半：マインドセット・本質理解（生成AI時代の開発変化、3つの負債、AIを乗りこなすエンジニアの姿）
- 後半：環境構築ハンズオン（Python、Node.js、VS Code の導入と役割の理解）
1. 生成AI時代に「あえてコードと設計を学ぶ」決定的な理由
■ 1-1. AIで開発は速くなる。しかし「レビューと検証」が新たなボトルネックに
GitHub CopilotやChatGPT、Cursorなどの登場により、雛形生成や定型コードの実装スピードは飛躍的に向上しました。
しかし、開発現場ではいま生成されたコードのレビューと検証に膨大な時間が奪われるという新たな壁が出現しています。
実際の調査でも、81%の開発者がレビュー・検証時間が増加したと回答しています。AIが出力したコードは一見それっぽく動いているように見えても、境界値の考慮漏れやセキュリティ上の脆弱性、仕様の微妙なズレが潜んでいることが珍しくありません。
「作る時間が短縮された分、検証と修正に何倍もの時間がかかる」という本末転倒を防ぐためには、AIに指示を出すだけでなく、コードを正確に読む力、仕様と照らし合わせて判断する力、バグを見抜く力、そして自らの手で再設計・修正できる力が不可欠です。AIがコードを書く時代だからこそ、コードを理解できるエンジニアの市場価値が急上昇しています。
■ 1-2. AIに思考を任せきりにすると迫り来る「3つの負債」
仕組みを理解しないまま「動いたからOK」とAIコードを貼り付け続けると、システムと開発組織に深刻な負債が連鎖していきます。
ブラックボックス化したコードを放置すると、以下のような3つの負債となって後から大きなツケを払うことになります。
🚨 放置すると連鎖する「3つの負債」
① 認知負債（Cognitive Debt）: AIに思考を任せすぎた結果、システムの全体像や依存関係を見失い、「このプロジェクト、どう動いていたっけ？」と変更の判断ができなくなる。
② 技術負債（Technical Debt）: その場しのぎのコードが積み重なり、品質が軽視され、1箇所を修正すると 別の場所が壊れるスパゲッティ状態に陥る。
③ 理解負債（Understanding Debt）: ロジックの意図を誰も説明できないため、ドキュメント化も知識の継承もできず、チームでの保守や障害対応が困難になる。
これらの負債を回避し、長く愛される堅牢なプロダクトを作るためには、コードの中身とアーキテクチャ全体を見通す基礎力を自分の中に持っておく必要があります。
■ 1-3. 「AI任せ」vs「自分で理解＋AI活用」で生まれる決定的な差
AIを単なる思考の代行にするか、それとも**思考のブースター（加速装置）**にするかで、日々の開発体験とエンジニアとしての成長速度には決定的な差が生まれます。
-
❌ AI任せにしすぎると:
回答が正しいか判断できず確認に毎回時間がかかります。特にエラーが起きた際、原因が分からずエラーログをAIに再質問してコピペを繰り返し、かえって泥沼化してしまうAI依存に陥ります。 -
⭕ 自分で理解したうえで使うと:
AIの出力を瞬時に評価し、必要な部分だけを安全に取り込めます。誤りや非効率な部分にもすぐ気づいて自力で修正できるため、仕様変更や複雑な要件にも高い応用力を発揮できます。
トラブルが起きたときにAIに振り回される側になるか、AIを意のままに乗りこなす側になるかの分岐点は、フレームワークや基礎知識の理解度にあります。
■ 1-4. AIは「正しいコード」を書けても「正しい設計」は決められない
AIが出力するコードの文法がどれだけ完璧でも、何を作るか・どう設計するかという設計・業務責任は人間にしか担えません。
AIの役割はどう書くかの支援（指示に従ったコード生成や実装パターンの提案）です。一方で、何を作るか・どう設計するか（業務要件の理解、データの扱い、リスク判断）に責任を持つのは人間側の役目です。
例えばDjangoで外部キー（ForeignKey）を定義する際、AIに指示すると以下のようなコードが即座に出力されます。
class Order(models.Model):
user = models.ForeignKey(User, on_delete=models.CASCADE) # 構文としては正しいが業務要件としては危険な例
構文としては100点ですが、実際のビジネスでは「ユーザーが退会したからといって、過去の注文履歴や売上データを物理削除してよいのか？（法務・監査や売上分析のために models.PROTECT や models.SET_NULL で保持すべきではないか？）」という深刻な問題が生じます。
こうしたデータの整合性や将来のリスクを見据えて正しい設計判断を下せるのは、AIではなく人間のエンジニアだけです。
■ 1-5. AIは「自分を映す鏡」：人間に不可欠な役割と組織での取り組み
AIというツールには、使う人間の知識レベル・設計レベル以上のアウトプットは引き出せない（AIは自分を映す鏡である）という本質があります。
AIによってプロトタイピングのハードルが下がり、定型実装のスピードが劇的に向上した現在だからこそ、エンジニア個人には次の3つの役割が求められます。
- コードの中身を理解する: 動作の仕組みやアーキテクチャの意図を完全に把握する
- 品質・安全性を評価する: セキュリティ、パフォーマンス、仕様整合性を正しく判断する
- 責任を持って世に出す: システムの安全性と最終的な成果物に責任を持つ
組織づくり：「動くからOK」を脱却し、コードの中身を見るレビュー文化へ
⚠️ 多くのチームが陥る「AI導入の落とし穴」
単にAIツールを配布して「実装スピードを上げろ」と号令をかけるだけでは、チームは崩壊します。「画面が動いたからLGTM」「テストが通ったからマージ」という表面的な動作チェックだけの浅いレビューが横行し、中身を誰も理解・説明できないブラックボックスコードが急激に蓄積してしまうためです。
真にAIを活用できる強い開発組織を作るためには、機能要件（動くか）だけでなく、コードの中身とアーキテクチャを徹底的に見るレビュー文化への転換が不可欠です。
| 観点 | ❌ 表面的なレビュー（失敗パターン） | ⭕ 中身を見るレビュー（AI時代の新標準） |
|---|---|---|
| レビューの着眼点 | 画面が意図通り動くか、テストが通るか | なぜこの設計なのか、将来の変更や負荷に耐えうるか |
| PR作成者の責任 | 「AIが出力して動いたので出しました」 | 1行1行の処理意図と採用理由を自分の言葉で説明できる |
| セキュリティ・品質 | 動作確認だけで見落とされがち | 境界値の考慮漏れやAI特有の不要な複雑さ・脆弱性を検証する |
| チームの評価基準 | リリース速度やコード生成量のみ | コードの保守性・可読性と、チームへの知識共有 |
💡 組織全体で「中身を見極める目」を育てる両輪
-
トップダウン（会社の支援体制）:
スピードアップだけを求めず、コードレビューや設計議論に十分な時間を投資することを組織として公認・評価する。また、フレームワークの仕組みや基礎技術を体系的に学ぶ機会・研修を支援する。 -
ボトムアップ（エンジニアの探求心）:
「動けばOK」で思考停止せず、「裏側のSQLはどう発行されているか」「通信フローやステート管理のライフサイクルはどう動いているか」という技術の本質・内部構造を自律的に深掘りする。
組織と個人の両輪でコードの中身を見極める目を養ってこそ、AIは負債を生む凶器ではなく、チームを爆速で前進させる最強の武器になります。
■ まとめ：基礎を理解しているからこそ、AIを最強の武器にできる
AIにコードを書かせること自体のコストがゼロに近づいたからこそ、コードの構造全体を正確に読み取り、仕様と照らし合わせて品質を保証できるエンジニアの価値が何倍にも高まっています。
基礎的な文法、フレームワークの仕組み、環境構築の手順をしっかり学ぶことは決して遠回りではありません。
本講座を通じて確固たる基礎知識を身につけ、AIを自由自在に乗りこなすフルスタックエンジニアを目指しましょう！
2. DRF × Vue.js フルスタック開発環境の構築
それでは、ここから実際に手を動かして開発環境を整えていきましょう！
本講座では、バックエンド（Django REST Framework）とフロントエンド（Vue 3 + Vite）を一貫して動かすための基礎ツールをセットアップします。
■ 2-1. 準備するもの（これから導入するツールの全体像）
本章では、DRF × Vue.js のフルスタック開発を始めるために不可欠な環境を整えていきます。
まずは、これから順番にインストール・セットアップしていくツールの全体像（ロードマップ） を確認しておきましょう。すべて無料で揃えることができます。
| ツール | 役割 | 準備方法 |
|---|---|---|
| Python (3.11以上) | バックエンド（DRF）を動かすプログラミング言語 | 公式サイトから無料ダウンロード |
| Node.js (LTS版) | フロントエンド（Vue 3 + Vite）を動かすJavaScript実行基盤 | 公式サイトから無料ダウンロード |
| VS Code | バックエンド・フロントエンドを一括管理する作業用エディタ | 公式サイトから無料ダウンロード |
| Webブラウザ | 作成したAPIや画面の動作確認を行う（Chrome, Edge等） | 普段お使いのものでOK |
| 生成AIツール | 設計の壁打ちやコードレビュー、疑問解決のアシスタント | ChatGPT, Claude, Antigravity など |
💡 すでにインストール済みの方へ
パソコンにすでに Python や Node.js、VS Code が導入されている場合は、各節のバージョン確認コマンド（python --version や node -v）を実行して要件を満たしていれば、該当のインストール作業はスキップして先に進んで問題ありません。
■ 2-2. バックエンド開発環境の準備（Python）
🐍 【解説】Pythonとは？ なぜ現代のWeb開発で選ばれるのか
Python（パイソン） は、コードの読みやすさとシンプルな文法を徹底的に追求した、世界中で圧倒的な人気を誇るプログラミング言語です。
-
世界的大規模サービスを支える堅牢さ:
Pythonを代表するWebフレームワーク「Django」は、InstagramやPinterestなどの大規模Webサービスでも採用されている実績抜群の技術です。データベース操作（ORM）やセキュリティ対策が標準で万全に組み込まれており、堅牢なバックエンドを迅速に構築できます。 -
生成AI時代における「共通言語」:
ChatGPTやClaudeなどのLLMを活用したAPI開発（LangChain、LlamaIndexなど）や機械学習のライブラリは、その大半がPython向けに提供されています。バックエンドをPython（DRF）で構築できるスキルは、将来的にWebアプリへ最先端AI機能を組み込む際の強力な武器となります。 -
本講座での役割:
本講座では、Djangoの拡張パッケージである Django REST Framework (DRF) を使い、フロントエンド（Vue.js）とやり取りするためのRESTful APIサーバーを構築します。
📥 Python のインストール手順
- Python 公式サイト にアクセスします。
- 「Download Python 3.x.x」 の黄色いボタンをクリックしてインストーラーをダウンロードします。
- ダウンロードしたインストーラーを起動します。
⚠️ Windowsユーザーはここに注意！
インストーラー起動画面の最下部にある 「Add python.exe to PATH」 に必ずチェックを入れてから「Install Now」をクリックしてください。チェックを忘れるとコマンドラインから Python を起動できなくなります。
- インストール完了後、ターミナル（PowerShell / ターミナル）でバージョンが表示されるか確認します。
python --version # Mac/Linux の場合: python3 --version
■ 2-3. フロントエンド開発環境の準備（Node.js）
🟢 【解説】Node.jsとは？ なぜフロントエンド開発で必須なのか
Node.js の役割を深く理解するために、まずは JavaScript と他のプログラミング言語（Pythonなど）の決定的な違い から見ていきましょう。
1. 「ブラウザ上」で動く JavaScript vs 「パソコン上」で動く Python
- JavaScript: Google Chrome や Safari といった ブラウザ上 で動作するプログラミング言語です。Webページに動きをつけたり、UIを操作するために生まれました。
-
Python や Ruby: ブラウザではなく、通常 パソコン（OS上） で動作するプログラミング言語です。ターミナルから
python ○○.pyと実行するように、コンピュータ上で直接処理を行います。
2. 最大の違いは「OSの機能（ファイル操作など）にアクセスできるか」
パソコン上で動く Python などのアプリケーションは、ファイルの読み書きやネットワーク通信といった「OSの機能」 を自由自在に扱うことができます。
一方で、もし ブラウザ上で動く JavaScript がパソコンのOS機能（Cドライブのファイル読み書きなど）にアクセスできてしまったらどうなるでしょうか？
悪意あるWebサイトを閲覧しただけで、パソコン内の個人データが盗まれたり消去されたりする重大なセキュリティ被害が発生してしまいます。そのため、JavaScript は安全のために「ブラウザという制限された環境（サンドボックス）」の外には出られない仕組みになっていました。
3. そこで登場したのが「Node.js」
そんな 「ブラウザ上という制限された環境でしか動けなかった JavaScript を、Python や Ruby のようにパソコン上で直接動かせるようにした実行環境」 が Node.js（ノード・ジェイエス） です！
Node.js によって、JavaScript もパソコンのファイル読み書きやネットワーク通信などのOS権限を使えるようになり、現代のWeb開発が一気に進化しました。
-
現代フロントエンド開発のビルドエンジン:
「ブラウザで動く画面を作るだけなのに、なぜPCにNode.jsを入れるの？」という疑問の答えがまさにこれです。Vue 3 や TypeScript で書いたコードを、パソコン上で読み込んで型チェックし、ブラウザが解釈できる軽量なコードへ変換・結合（ビルド）するために Node.js が不可欠なのです。 -
超高速なローカル開発サーバー（Vite）の稼働:
コードを保存した瞬間にブラウザの画面がリアルタイムに更新される「ホットリロード（HMR）」も、Node.js がパソコン上でローカルサーバーを動かしているからこそ実現できています。 -
世界最大のライブラリ管理エコシステム（npm）:
Node.js をインストールすると、パッケージ管理ツール npm が自動的に使えるようになります。Vue 3 本体をはじめ、ルーティング（Vue Router）、状態管理（Pinia）、API通信（Axios）など、世界中の膨大なライブラリをコマンド1行で手元に導入・管理できます。
📥 Node.js のインストール手順
- Node.js 公式サイト にアクセスします。
-
「LTS（推奨版）」 と書かれたボタンをクリックしてインストーラーをダウンロードします。
- ダウンロードしたファイルを開き、基本的にすべて 「Next（次へ）」 をクリックしてインストールを完了させます。
- ターミナルでバージョンを確認します。
node -v npm -v
参考記事: 【初心者向け】Node.jsのインストール手順
■ 2-4. エディタ環境の準備（VS Code）
💻 【解説】VS Codeとは？
Visual Studio Code（VS Code） は、Microsoftが開発した世界で最も利用されている無料のコードエディタです。豊富な拡張機能やターミナルの統合、Git連携などを備えており、バックエンド（Python）とフロントエンド（Vue/TypeScript）を1つのウィンドウで快適に横断して開発できます。
📥 VS Code のインストール手順
-
VS Code 公式サイト にアクセスし、お使いのOSに合ったインストーラーをダウンロードします。
- ダウンロードしたファイルを開き、手順通りにインストールを完了させます。
💡 インストールのワンポイント（おすすめ設定）
-
「Code で開く」を有効化:
インストーラー実行時の「追加タスクの選択」画面で、「Code で開く アクションを追加する」（コンテキストメニューに追加）にチェックを入れておくと、フォルダやファイルを右クリックして一発で VS Code を開けるようになるため大変便利です！ -
エディタへのAI導入（推奨）:
本講座内では個別ツールの詳細な導入手順は案内しませんが、VS Code を使う場合は Claude Code、Codex、Cline、GitHub Copilot などのAI拡張機能を必ず導入（あるいは Cursor などのAI特化エディタを使用）しておくことを強く推奨します。第1章でお伝えした通り、コードの仕組みを自分の手で学びつつ、分からない点やエラーの壁打ち相手としてAIを併用することで、学習スピードと理解度が格段に上がります。
参考記事:
🛠️ DRF × Vue 開発におすすめの VS Code 拡張機能
VS Code を開いたら、画面左側の拡張機能アイコン（四角が4つ並んだマーク）から以下の2つを入れておくと開発効率が劇的に上がります。
- Python（Microsoft公式）: コード補完やシンタックスハイライト、仮想環境（venv）の自動認識
-
Vue - Official（旧Volar）: Vue 3 の
.vueファイルに対する型チェックと強力なハイライト
まとめ
第二講では、生成AI時代におけるエンジニアの設計責任と、フルスタック開発の土台となる開発ツールのセットアップを行いました。
-
生成AI時代の開発の本質:
コード生成が高速化する一方で、81%の開発者がレビューや検証の負担増に直面。単にAIに書かせるだけでなく、コードを正確に読み解き、品質・安全性を評価できるエンジニアの市場価値が急速に高まっている。 -
3つの負債の回避:
「動いたからOK」とブラックボックス化を放置すると、認知負債・技術負債・理解負債が連鎖する。これらを防ぐには、コードの内部構造とアーキテクチャを見通す基礎力を手元に持つことが不可欠。 -
人間の設計責任:
AIは「どう書くか（構文生成）」を支援できても、「何を作るか・どう設計するか（業務要件・データリスク）」に責任を持てるのは人間だけ（Djangoモデルの外部キー設計実例）。 -
中身を見る組織のレビュー文化:
「画面が動いたからOK」という表面的なレビューを脱却し、「なぜこの設計なのか」「PR作成者自身がコードの意図を説明できるか」を見る文化を、トップダウンとボトムアップの両輪で育てることがAI活用の鍵となる。 -
開発基盤ツールのセットアップ完了:
バックエンドを支える Python、現代フロントエンドのビルド基盤である Node.js（OSアクセス権限とセキュリティの役割分担）、そして両者を快適に横断する VS Code（AI拡張機能） の環境準備が完了。
次回予告
次回は 【第三講】プロジェクト初期セットアップとパッケージ導入 に進みます！
-
Django プロジェクトの作成:
仮想環境のセットアップと Django / DRF のインストール、初期プロジェクトの作成 -
Vue 3 (Vite) プロジェクトの立ち上げ:
Vite を使ったフロントエンド環境の生成とローカルサーバーの起動確認 -
フルスタックのディレクトリ構成:
バックエンドとフロントエンドを一元管理するモノレポ構成のフォルダ構造を紹介 -
DRF の全体像とアーキテクチャ:
RESTful API の基本原則と、これから本格的に学んでいく DRF の全体像（Model ➔ Serializer ➔ Views）の整理
いよいよ次回から実際のプロジェクト作成に入っていきます。お楽しみに！