企业官网建设流程全解析

• 教程
• 文档

本記事は、Datawhale のオープンソースプロジェクトEasy-Vibe（ゼロから AI コーディングを学ぶプロジェクト型教材）の「付録」知識ベースに収録された《フルスタック開発序論》を基に、Vibe Coding 時代に必要なコンピュータ領域の全体像、フロントエンド／バックエンド／AI エンジニアの役割、プログラミング言語の選定基準、0 から 3〜5 年経験エンジニアまでの成長ロードマップを体系的に解説します。読み終えると、フロントエンド・バックエンド・AI・運用など各領域が「何をするのか」を俯瞰でき、「どの言語／フレームワークを学ぶべきか」を合理的に判断できるようになります。

この章で学べること

この章を学び終えると、次の 4 つの力を獲得できます。

• 領域全体の俯瞰的認知：フロントエンド、バックエンド、AI アルゴリズムなどの各方向性がそれぞれ何をするのかを知る
• 技術選定能力：「どの言語／フレームワークを学ぶべきか」に直面したときに、合理的な判断ができる
• 成長パスの明確化：ゼロベースから 3〜5 年経験のエンジニアまでのスキル進化を理解する
• Vibe Coding 思考：AI 支援時代において、どの能力がより重要になるかを理解する

Easy-Vibe の付録知識ベースは「9 つの知識領域・80 以上のインタラクティブトピック」をカバーしており、本記事はその中の「コンピュータ基礎」領域に属します。全体の目次は 付録トップ から確認できます。

0. Vibe Coding：ソフトウェア開発の新しいパラダイム

0.1 Vibe Coding の概要

Vibe Coding とは？簡単に言えば「自然言語でコードを書く」ことです。あなたが日本語や英語で欲しいものを説明すると、AI がコードを生成してくれます。これはソフトウェア開発のゲームルールを根本から変えました。

以前のソフトウェア開発を想像してみてください。従来のフローは次のような繰り返しでした。

あなた → 文法を学ぶ → コードを書く → デバッグ → ドキュメントを調べる → 修正 → 実行 ↑ ─────────────────────── 繰り返し ─────────────────────── ↓

これに対し、Vibe Coding のフローは次のように変わりました。

あなた → 自然言語で要件を記述 → AI がコードを生成 → あなたがレビューして調整 → 実行 ↑ ─────────────────── 高速イテレーション ─────────────────── ↓

核心的変化：「コードの書き方」から「要件の記述方法」へ。

Easy-Vibe のドキュメントでは、この新旧フローはインタラクティブなデモコンポーネント<VibeCodingFlowDemo />として実装されており、ページ上でクリックしながら従来フローと Vibe Coding フローの違いを確認できます。このコンポーネントは docs/.vitepress/theme/components/appendix/computer-fundamentals/VibeCodingFlowDemo.vue に、その表示データ（従来 7 ステップ vs Vibe 5 ステップ）は 多言語ロケールデータ に定義されています。

0.2 Vibe Coding 時代に重要な能力

AI 時代には、重要度が「入れ替わる」能力があります。ロケールデータに定義された能力スコア（100 点満点）を見ると、傾向が一目瞭然です。

従来時代により重要だった能力：

AI 時代により重要になった能力：

::: tip 💡 重要な洞察 AI はコードを書くのを手伝えますが、以下の能力は AI で代替できません：

• 判断力：AI が生成したコードが正しいか、優れているかを知る
• アーキテクチャ思考：システムをどう設計し、モジュールをどう分割するかを知る
• ドメイン知識：ビジネスロジックを理解し「何をすべきか」を知る
• デバッグ能力：問題が発生したときにどこから調査すべきかを知る :::

1. コンピュータ領域の全体像

各方向性に深く入る前に、まず全体像を把握しましょう。Easy-Vibe では<ComputerFieldMapDemo />（ComputerFieldMapDemo.vue）というクリック式のデモで、6 つの主要領域をインタラクティブに確認できます。

1.1 各領域の役割分担：レストランモデル

ソフトウェアシステムを一つのレストランとして想像してみてください。各領域はレストランの異なる部門に対応します。

1.2 各領域の技術スタック速覧

これらの用語に怖がらないでください。ここでは単に「見たことがある」状態になることが目的です。

デモデータでは、各領域の技術例として「フロントエンド＝HTML/CSS・JavaScript・React/Vue」「バックエンド＝Node.js・Go・Java・Python」「AI＝PyTorch・TensorFlow・機械学習」「DevOps＝Docker・K8s・CI/CD」「データエンジニアリング＝SQL・Spark・データウェアハウス」が定義されています（ロケールデータ）。

::: tip 💡 初心者へのアドバイス 一度にすべてを学ぼうとしないでください。まず一つの方向性を選んで深く掘り下げ、「拠点」を築いてから、横方向に拡張してください。フルスタックとは「すべてを少しずつ知っている」ことではなく、「一つのコアな強みを持ち、他の方向性も使える」ことです。 :::

2. フロントエンドの概要

2.1 フロントエンドの定義

フロントエンド = ユーザーが直接見て、クリックして、操作できる部分。

あなたが Web ページを開いたとき：

• ページのレイアウト、色、フォント → フロントエンド
• ボタンをクリックした後のアニメーション効果 → フロントエンド
• フォーム入力、データ表示 → フロントエンド
• ページのスマホ画面への適応 → フロントエンド

2.2 フロントエンド三種の神器

フロントエンドはHTML・CSS・JavaScriptの三本柱で構成されます。Easy-Vibe では<FrontendTriadDemo />として三者の関係を可視化しています。「家のリフォーム」で例えると：

三者の関係は「HTML が骨組みを作り、CSS が服を着せ、JavaScript が動かす。三者は欠かせない」とデモデータにも明記されています。

2.3 フロントエンドフレームワーク：なぜ使うのか

ネイティブの HTML/CSS/JS でも Web ページは作れますが、なぜ React や Vue などのフレームワークを学ぶ必要があるのでしょうか？

核心的理由：ページが複雑になったとき（淘宝や微信の Web 版など）、コードで一つひとつページ要素を操作するのは非常に混乱します。フレームワークは「複雑さの管理」を助けてくれます。

フレームワークの本質は「データが変わった後に、いかに効率的に UI を更新するか」という問題を解決することです。現代のフレームワークは「データが何か」に集中させ、フレームワークが「UI がどう変わるか」を自動処理します。<FrontendFrameworkDemo />ではフレームワークの進化史を 5 つの時代に整理しています：

2.4 フロントエンドエンジニアの一日

9:00 デザインカンプを確認し、実装する機能を理解する 10:00 React/Vue でコンポーネントコードを書く 12:00 昼休み 14:00 バックエンドと API を連携し、データ表示をデバッグする 16:00 バグを修正し、ページパフォーマンスを最適化する 18:00 コードレビュー、チームで技術方案を議論する

3. バックエンドの概要

3.1 バックエンドの定義

バックエンド = ユーザーには見えないが、システム全体の動作を支えるロジック。

あなたがネットショッピングで注文するとき：

• アカウントとパスワードの検証 → バックエンド
• 商品在庫の確認 → バックエンド
• 割引価格の計算 → バックエンド
• 注文生成、決済 → バックエンド
• 倉庫への出荷通知 → バックエンド

3.2 バックエンドの核心的責務

「レストランの厨房」で例えると：

バックエンドのコアバリューは「コードを書くことではなく、システムを設計すること」です。システムを安定・安全・高効率・拡張可能にするのが、本当のバックエンドエンジニアリング能力です。<BackendCoreDemo />ではリクエスト処理フロー「リクエスト受信 → ルート解決 → ビジネスロジック実行 → データ操作 → レスポンス返却」も可視化されています。

3.3 バックエンド言語の選定基準

::: tip 💡 初心者へのアドバイス すでに JavaScript（フロントエンドの基礎）を理解しているなら、Node.js が最も自然なバックエンド入門の選択肢です。一つの言語でフロントエンドもバックエンドも書けます。 :::

3.4 バックエンドエンジニアの一日

9:00 API 要件ドキュメントを確認する 10:00 データベースのテーブル構造を設計する 11:00 API インターフェースコードを書く 14:00 フロントエンドと結合テストし、インターフェースの問題を修正する 16:00 遅いクエリを最適化し、オンラインの問題を処理する 18:00 コードレビュー、技術ドキュメントを書く

バックエンドの詳細は、付録の バックエンドプログラミング言語 や API入門、データベース原理 でさらに掘り下げられます。

4. プログラミング言語の分類

4.1 プログラミング言語の概要

プログラミング言語 = 人間とコンピュータをつなぐ架け橋。

コンピュータは 0 と 1 しか理解できず、人間は自然言語で話すことに慣れています。プログラミング言語は中間層です：

• 人間はプログラミング言語でコードを書く（0/1 より理解しやすい）
• コンピュータはプログラミング言語を機械命令に翻訳する

4.2 言語の分類

<ProgrammingLanguageMapDemo />は「型システム」「抽象度」「パラダイム」の 3 つの軸で言語を分類できます。まず本文書の 2 つの軸から見てみましょう。

実行方式による分類：

型システムによる分類：

抽象度による分類（デモデータより）：

パラダイムによる分類（デモデータより）：

補足として、型チェックの厳格さで見る「強型付け／弱型付け」の視点もあります。強型付け（Python, Java）は型チェックが厳格で自動変換しませんが、弱型付け（JavaScript, PHP）は型チェックが寛容で自動変換します。

4.3 どの言語を学ぶべきか

<LanguageSelectionDemo />では「目的 → 推奨言語」の対応表が定義されています。

::: tip 💡 選択の原則 「最高の言語」はなく、「シーンに最も適した言語」だけがあります。初心者へのアドバイス：

1. まず一つの言語を深く学ぶ：プログラミング思考を確立する
2. 次に二つ目の言語を学び、比較する：言語設計の違いを理解する
3. 必要に応じて学ぶ：プロジェクトの要件に基づいて選択する :::

5. フルスタックエンジニアの概要

5.1 フルスタックの概要

フルスタックエンジニア = フロントエンド + バックエンド開発を独立して完遂できるエンジニア。

<FullstackSkillDemo />ではフルスタックのスキルツリーが「フロントエンドスキル」「バックエンドスキル」「フルスタックコア（橋渡し）」の 3 層で示されています：

フルスタックの本質は「すべてに精通すること」ではなく、「フロントエンドとバックエンドをつなぎ、完全な機能を独立してデリバリーすること」です。すべての領域で専門家レベルの深さは不要だと、デモデータにも明記されています。

5.2 フルスタックの強み

5.3 フルスタックの課題

5.4 フルスタック成長のアドバイス

第 1 段階：拠点を築く └── 一つの方向性を選んで深く掘り下げる（フロントエンドかバックエンドから始めることを推奨） └── プロジェクトを独立して完遂できるレベルに達する 第 2 段階：横方向に拡張する └── もう一つの方向性の基礎を学ぶ └── 簡単なフルスタックプロジェクトを完遂できる 第 3 段階：融合して理解を深める └── フロントエンドとバックエンドがどのように連携するかを理解する └── 完全な技術アーキテクチャを設計できる 第 4 段階：継続的に研鑽する └── ある領域で深さを維持する └── 他の領域は「使える」レベルを維持する

Easy-Vibe では、この成長ロジックに沿って Stage 2（初中級開発） でフロントエンドのコンポーネント化、データベース設計、バックエンド API 開発、デプロイまでを実践的に学べます。特に「大規模課題」ではログイン・生成・決済・管理画面を一通り備えた SaaS プロトタイプをゼロから完成させるため、フルスタックの「独立完遂」を体験できます。

6. AI アルゴリズムエンジニアの概要

6.1 AI エンジニアと従来開発の比較

<AIvsTraditionalDemo />はさらに「コーディング時間と思考時間の割合」の変化やスキルシフト（構文記憶 → 要件記述、手書き速度 → コードレビュー、ドキュメント検索 → アーキテクチャ設計、デバッグテクニック → 問題診断）を可視化します。

6.2 AI エンジニアのスキルツリー

AI エンジニア（2025） │ ├── 基礎能力 │ ├── Python（メイン言語） │ ├── データ処理（Pandas, NumPy） │ └── 基本的な数学的直感（線形代数、確率統計） │ ├── 大規模モデル応用（最も注目されている方向性） │ ├── Prompt Engineering（プロンプトエンジニアリング） │ ├── RAG（検索拡張生成） │ ├── AI Agent（エージェント、AI に自律的にタスクを完了させる） │ ├── Function Calling / MCP（AI に外部ツールを呼び出させる） │ └── ファインチューニングとデプロイ（LoRA, vLLM） │ ├── 生成 AI（GenAI） │ ├── テキスト生成（GPT, Claude, Gemini） │ ├── 画像生成（Stable Diffusion, Midjourney, FLUX） │ ├── 動画生成（Sora, Kling） │ └── マルチモーダル（テキスト + 画像 + 音声） │ └── 従来の機械学習（依然として重要） ├── 教師あり学習（分類、回帰） ├── ディープラーニングフレームワーク（PyTorch） └── モデル評価と最適化

6.3 AI エンジニアの一日

9:00 モデルの訓練結果を確認し、指標を分析する 10:00 データの前処理、訓練データのクレンジング 12:00 昼休み 14:00 モデル構造を調整し、新しい方案を試す 16:00 実験を実行し、異なる方案の効果を比較する 18:00 実験レポートを書き、チームと次のステップを議論する

6.4 Vibe Coding 時代の AI エンジニア

AI 支援開発が AI エンジニアに与える影響：

AI 時代の核心的な競争力は「コードを書けること」ではなく「要件を記述し、正しさを判断し、解決策を設計できること」です。AI はあなたのプログラミングアシスタントであり、意思決定者はあくまであなた自身です。

7. 成長パス：入門から熟達まで

7.1 3〜5 年成長ロードマップ

<CareerPathDemo />では、入門から熟達までの 5 段階（0〜1 年 → 1〜2 年 → 2〜3 年 → 3〜5 年 → 5 年以上）のスキル進化を可視化しています。成長のカギは「最初の 1〜2 年で基礎と独立遂行力を固め、2〜3 年で方向性を選んで深さを磨き、3〜5 年で横に広げてアーキテクチャ思考を構築し、5 年以上は技術判断とチームへの影響力に注力する」ことです。

7.2 各段階の能力要件

デモデータではさらに細かく、各段階のスキルと成果物が定義されています。例えば入門期（0〜1 年）は「一つの言語の基礎、Git の使用、デバッグ、ドキュメント読解」が求められ、応用期（1〜2 年）は「フレームワーク習熟、コーディング規約、ユニットテスト、API 設計」、上級期（2〜3 年）は「ドメインの深さ、パフォーマンス最適化、アーキテクチャ設計、技術選定」、熟達期（3〜5 年）は「フルスタック能力、チームコラボレーション、技術共有、プロジェクト管理」へと進化します。

7.3 Vibe Coding 時代の学習戦略

<LearningStrategyDemo />では、AI 時代の効率的な学習戦略が 5 つ示されています。

1. まず理解し、それから AI に書かせる：いきなり AI にコードを頼むのではなく、問題と解決策を先に理解し、AI で実装を加速する
2. AI をペアプログラミングのパートナーとして扱う：馴染みのない概念は AI に説明させ、複雑な解決策を AI と議論する
3. AI の出力をレビューする方法を学ぶ：AI が生成したコードが常に正しいとは限らない。ロジック、セキュリティリスク、パフォーマンスを判断する必要がある
4. 自分自身の知識体系を構築する：AI はギャップを埋められるが、核となるメンタルモデルはあなた自身のもの
5. 実践を通じて学ぶ：実際のプロジェクトを構築して現実の問題を解決する。AI に構文の摩擦を取り除かせ、ビジネス問題に集中する

::: tip 💡 核心的アドバイス

1. 基礎はツールより重要：言語特性、データ構造、アルゴリズム思考が土台
2. 実践は理論より重要：プロジェクトをこなすことが最良の学習方法
3. 思考は記憶より重要：「なぜ」を理解することが「どうやるか」を覚えるより価値がある
4. AI はツールであり松葉杖ではない：AI で学習を加速するが、AI に思考を代替させない :::

8. まとめ：Vibe Coding 時代のコアコンピタンス

本章を振り返り、私たちはコンピュータ領域の全体像を築きました：

1. 領域区分：フロントエンド、バックエンド、モバイル、AI、運用保守、データ——それぞれ重点が異なる
2. 技術選定：最高の技術はなく、シーンに最も適した技術だけがある
3. 成長パス：先に深く、後に広く、拠点を築いてから横方向に拡張する
4. AI 時代：AI はコードを書くのを手伝えるが、あなたの代わりに考えることはできない

Vibe Coding 時代の三層の能力

┌─────────────────────────────────────────┐ │ 第 3 層：判断力（AI で代替できない） │ │ - 何が正しいかを知る │ │ - 何が優れているかを知る │ │ - どの方向に進むべきかを知る │ ├─────────────────────────────────────────┤ │ 第 2 層：アーキテクチャ思考（AI が補助） │ │ - システム設計能力 │ │ - モジュール分割能力 │ │ - 技術選定能力 │ ├─────────────────────────────────────────┤ │ 第 1 層：コード実装（AI が得意） │ │ - 文法の記述 │ │ - API 呼び出し │ │ - 一般的なパターンの実装 │ └─────────────────────────────────────────┘

付録：Easy-Vibe でさらに学ぶためのロードマップ

本記事は Easy-Vibe の 付録（付録トップ） における「コンピュータ基礎」の一章です。ここで得た全体像を、以下の教材と組み合わせると効果的です。

概念を深掘りする：

• フロントエンド基礎：HTML/CSS/JS基礎、フロントエンド進化史、フロントエンドパフォーマンス最適化
• バックエンド基礎：バックエンドプログラミング言語、API入門、認証原理と実践
• AI 基礎：プロンプトエンジニアリング、大規模言語モデル

実践で手を動かす：

• Stage 1（学習マップ）：AI ツールでプロトタイプを作る第一歩
• Stage 2（初中級開発）：フロントエンド・バックエンド・データベース・デプロイを一気通貫で学び、SaaS フルスタックアプリを完成させる
• Stage 3（上級開発）：Claude Code、MCP、クロスプラットフォーム開発

本記事のインタラクティブデモを見る：本記事で紹介した 12 のデモコンポーネント（VibeCodingFlowDemo、DeveloperSkillShiftDemo、ComputerFieldMapDemo、FrontendTriadDemo、FrontendFrameworkDemo、BackendCoreDemo、ProgrammingLanguageMapDemo、LanguageSelectionDemo、FullstackSkillDemo、AIvsTraditionalDemo、CareerPathDemo、LearningStrategyDemo）は、テーマエントリ に登録され、コンポーネントディレクトリ に実装されています。ドキュメントサイト上ではクリック操作で内容を確認できます。

ドキュメントサイトをローカルで動かす：このリポジトリは VitePress ベースです（package.json のdevスクリプトを参照）。ローカルで閲覧する場合はnpm installの後にnpm run devを実行し、ブラウザでhttp://localhost:3000を開きます。プロジェクト全体の構成と学習パスは README にまとめられています。

• 教程
• 文档