ポートフォリオ本文を作る
この章でできるようになること
Astroのトップページ、README、学習ログを、自分の成果物として整えられるようになります。
まず知っておくこと
ポートフォリオは、自分をよく見せるためだけのページではありません。
この教材では、次を伝える場所として扱います。
- 何を学んでいるか
- 何を作ったか
- AIをどう使ったか
- 自分が何を確認したか
- 公開してよい範囲で、次に何を学ぶか
AIが作った文章でも、公開するのは自分です。
入れる内容を決める
最初のポートフォリオには、次の程度で十分です。
- ハンドルネーム
- 学習テーマ
- 作った練習成果
- 使った道具
- 学習ログへのリンク
- GitHubに公開してよいリンク
入れないものも決めます。
- 住所
- 電話番号
- 公開したくない本名
- 勤務先や学校名
- APIキー
- トークン
- 秘密鍵
.env
第1部と第3部で扱った秘密情報の考え方をここで使います。
READMEを書く
README.md には、プロジェクトの説明を書きます。
例:
# Vibe Portfolio
Vibe Codingの学習過程をまとめるためのポートフォリオです。
## 内容
- 学習メモ
- 作った小さなツール
- Webページ制作の練習
## 注意
このリポジトリには、APIキー、トークン、秘密鍵、個人情報を含めません。
AIに下書きを頼んでも構いません。 ただし、公開してよい内容かは自分で確認します。 Astroが作ったREADMEがすでにある場合は、いきなり上書きせず、今の内容を読んでから編集します。
学習ログを作る
docs/learning-log.md を作ります。
このコマンドは docs/learning-log.md を上書きします。
すでに同名ファイルがある場合は、中身を確認してから進めます。
mkdir -p docs
cat > docs/learning-log.md <<'EOF'
# 学習ログ
## 第0部から第5部で学んだこと
- AIエージェントを使い始める準備をした
- PC、OS、CLI、PATH、権限を確認した
- 生成AIとコーディングエージェントの違いを学んだ
- Gitでローカルの変更を記録した
- シェルスクリプトとGoで小さな自動化を作った
- HTML、CSS、JavaScriptでローカルページを作った
EOF
Astroページを編集する
src/pages/index.astro を、自分の内容に合わせて編集します。
まずAIには、編集前に計画を出させます。
src/pages/index.astro をポートフォリオ用に編集したいです。
入れたい内容:
- ハンドルネーム
- 学習テーマ
- 作ったもの
- 学習ログへのリンク
公開してはいけない個人情報や秘密情報は入れません。
まず変更計画だけ出してください。
まだファイルは変更しないでください。
計画を見て、問題なければ小さく編集を頼みます。
計画に問題ありません。
まずは src/pages/index.astro だけを編集してください。
条件:
- README.md と docs/learning-log.md は変更しない
- 学習ログへのリンクを入れる
- 公開してはいけない個人情報や秘密情報は入れない
- 変更前に、変更予定ファイルと理由を説明する
- 変更後に、確認すべき点を箇条書きで出す
何が起きたのか
第6部では、成果物として公開できる形に近づいています。
第0部でAIエージェントを導入し、第2部でAIへの頼み方を学び、第3部でGit差分を見る習慣を作りました。 ここでは、その流れを使って、自分のポートフォリオを作っています。
運用者の視点
ポートフォリオで重要なのは、見た目だけではありません。
- 公開してよい情報だけか
- READMEがあるか
- 学習ログがあるか
- AIが作った文章を自分で確認したか
- buildできるか
- Git差分を説明できるか
公開前レビューは、第8部でもう一度行います。
AIに聞いてみよう
私のAstroポートフォリオの本文案をレビューしてください。
確認したい観点:
- 公開してよい情報だけになっているか
- AIに丸投げしたように見えないか
- 何を学んだかが伝わるか
- READMEとトップページの役割が分かれているか
まだファイルは変更しないでください。
commitポイント
変更を確認します。
git status
git diff
問題なければcommitします。
git add README.md docs/learning-log.md src/pages/index.astro
git status
git diff --staged
公開したくない個人情報や秘密情報が入っていないことを確認します。
問題なければcommitします。
git commit -m "Add portfolio content"
次へ
次は、buildして公開前レビューをします。