Phase 2初日、自己紹介ページを公開した後、いくつかの疑問が浮かびました。AIエージェントに質問して学んだことをまとめます。
※この記事はAIエージェント（Claude）が執筆した内容をもとに構成しています。
質問1: AIを使わずにHTML/CSSを書くにはどうするのか？
質問の背景
今回、自己紹介ページのHTML/CSSは全てAIが生成しました。でも、実際の開発現場では、AIを使わずに自分でコードを書くこともあるはずです。
疑問: メモ帳で書くのでしょうか？
回答：コードエディタを使う
メモ帳でも書けますが、実務では「コードエディタ」を使います。
代表的なコードエディタ
Visual Studio Code（VS Code）- 最も人気
- 開発元: Microsoft
- 特徴: 無料、軽量、拡張機能が豊富
- ダウンロード: https://code.visualstudio.com/
その他：
- Sublime Text（高速、シンプル）
- Atom（カスタマイズ性が高い）
VS Codeが人気の理由
1. シンタックスハイライト（色分け）
メモ帳では全部黒文字ですが、VS Codeではタグが色分けされて読みやすくなります。
<!-- タグは青、テキストは黒、属性は赤など -->
<h1 class="title">見出し</h1>
2. 自動補完機能
<hと打つと<h1>の候補が表示される- 閉じタグも自動で入力される
- タイプミスが減る
3. エラーチェック
- タグの閉じ忘れを警告
- スペルミスを指摘
4. プレビュー機能（拡張機能）
- VS Code内でブラウザプレビューが見られる
- コードを書きながら、すぐに結果を確認できる
5. Git連携
- GitHubへのアップロードが簡単
- ボタン1つでコミット・プッシュできる
メモ帳との比較
| 項目 | メモ帳 | VS Code |
|---|---|---|
| 色分け | なし | ✅ あり |
| 自動補完 | なし | ✅ あり |
| エラー検出 | なし | ✅ あり |
| 拡張機能 | なし | ✅ 豊富 |
| Git連携 | なし | ✅ あり |
結論: メモ帳でも書けるが、VS Codeを使うのが標準。
実際の開発の流れ（AIなし）
1. VS Codeを開く
2. 新しいファイルを作成（index.html）
3. コードを書く
4. ブラウザで開いて確認
5. 修正が必要なら、VS Codeに戻って修正
6. 保存してブラウザを更新
7. 完成したらGitHubにアップロード
今後の学習
私もVS Codeをインストール済みなので、次回からはVS Codeでコードの新規作成や修正を学んでいく予定です。
質問2: リポジトリとは何をしているのか？
質問の背景
GitHub Pagesで公開する際に「リポジトリを作成」しました。でも、リポジトリが何をしているのか理解していませんでした。
回答：プロジェクトの保管庫
**リポジトリ（repository）**は、プロジェクトのファイルをまとめて保管する場所です。
例え話：プロジェクト専用のフォルダ
あなたのGitHub
├── profile（リポジトリ1）
│ ├── index.html
│ └── style.css
│
├── calculator（リポジトリ2）← 今後作るかも
│ ├── index.html
│ ├── style.css
│ └── script.js
│
└── game（リポジトリ3）← 今後作るかも
├── index.html
└── game.js
リポジトリに保存される情報
1. ファイル
- HTMLファイル
- CSSファイル
- JavaScriptファイル
- 画像ファイル
2. 変更履歴（バージョン管理）
- いつ、誰が、何を変更したか
- 過去のバージョンに戻せる
3. 説明（README）
- このプロジェクトが何か
- 使い方の説明
リポジトリの種類
| 種類 | 説明 | 用途 |
|---|---|---|
| Public | 誰でも見られる | ポートフォリオ、オープンソース |
| Private | 自分だけ見られる | 個人プロジェクト、仕事 |
今回作ったprofileリポジトリはPublicなので、誰でも見られます。
リポジトリの役割
バックアップ
- PCが壊れてもGitHubに残っている
- いつでもダウンロードできる
共同作業
- 複数人で同じプロジェクトを編集できる
- 誰がどこを変更したか記録される
公開
- GitHub Pagesで簡単にWebサイトとして公開できる
質問3: GitHubとは何か？
質問の背景
GitHubを使って公開しましたが、そもそもGitHubが何なのか、どんな会社が運営しているのか、なぜ無料で使えるのか疑問に思いました。
回答：コードのSNS + バージョン管理 + 公開プラットフォーム
基本情報
- 正式名称: GitHub, Inc.
- 運営会社: Microsoft（2018年に買収）
- 設立: 2008年
- 本社: アメリカ・サンフランシスコ
GitHubの主な機能
1. バージョン管理（Git）
- コードの変更履歴を保存
- 過去のバージョンに戻せる
- 複数人での共同開発ができる
2. コードの保管・共有
- プロジェクトをオンラインで保管
- 他の人と共有できる
- オープンソースプロジェクトの公開
3. GitHub Pages（Webサイト公開）
- 無料でWebサイトを公開できる
- 今回使った機能
4. コラボレーション機能
- Issue（問題・課題の管理）
- Pull Request（コードレビュー）
- プロジェクト管理
どんな目的で用意されているのか
元々の目的: オープンソースソフトウェアの開発を支援
現在の用途:
- 個人開発者：ポートフォリオ公開、個人プロジェクト
- 企業：チームでの開発、コード管理
- オープンソース：世界中の開発者が協力してソフトウェアを開発
GitHubの収益構造
無料プラン
- Publicリポジトリ：無制限
- GitHub Pages：使える
- 基本機能：ほぼ全て使える
疑問: これで収益は？ → 無料プランでは収益なし（広告もなし）
有料プラン
| プラン | 価格 | 対象 |
|---|---|---|
| GitHub Pro | $4/月（約600円） | 個人向け |
| GitHub Team | $4/ユーザー/月 | チーム向け |
| GitHub Enterprise | $21/ユーザー/月 | 企業向け |
収益の仕組み：フリーミアムモデル
無料ユーザー（大多数）
↓
GitHubを使う習慣がつく
↓
企業で働くようになる
↓
企業が有料プランを契約 ← ここで収益
個人は無料、企業から稼ぐ
なぜMicrosoftが買収したのか
買収額: 約75億ドル（約8,000億円）
理由:
- 世界中の開発者が使っている
- 開発者コミュニティを取り込める
- クラウドサービス（Azure）との連携
GitHubの影響力
数字で見るGitHub:
- ユーザー数: 1億人以上
- リポジトリ数: 3億以上
有名なオープンソースプロジェクト:
- Linux（OS）
- React（JavaScriptライブラリ）
- TensorFlow（機械学習）
これらは全てGitHubで開発されています。
エンジニア就職でのGitHub
ポートフォリオとして重視される:
- どんなコードを書いているか
- どんなプロジェクトに参加しているか
- どれくらいアクティブか
採用担当者は、応募者のGitHubを見て技術力を判断します。
今日学んだこと
Phase 2初日、自己紹介ページを公開した後、疑問に思ったことを質問しました。
質問1の学び
- VS Codeがコードエディタの標準
- メモ帳でも書けるが、VS Codeの方が圧倒的に便利
- 色分け、自動補完、エラー検出がある
質問2の学び
- リポジトリ = プロジェクト専用のフォルダ
- ファイル + 変更履歴 + 説明を保存
- バックアップ、共同作業、公開ができる
質問3の学び
- GitHub = コードのSNS + バージョン管理 + 公開プラットフォーム
- 運営: Microsoft
- 収益: フリーミアムモデル（個人無料、企業有料）
- 用途: 個人開発、チーム開発、オープンソース
次のステップ
今後はVS Codeを使って、自分でコードを書く練習をしていきます。
AIに頼るだけでなく、自分の手でコードを書く経験を積んでいきたいと思います。
※この記事の内容は、AIエージェント（Claude）との対話をもとに構成しています。技術的な説明や情報はAIが提供したものです。
コメント