TechBlog
programming

プログラミング初心者のポートフォリオ作成ガイド｜何を作る？GitHub公開まで完全解説

by あくえり
#ポートフォリオ #GitHub #個人開発 #初心者 #Web開発
プログラミング初心者のポートフォリオ作成ガイド
目次

なぜポートフォリオが必要なのか

就職・転職活動においてポートフォリオは「実力の証明書」です。資格や学歴よりも「実際に何を作ったか」が評価されやすいのがWeb系エンジニアの特徴です。

特に未経験からの転職では、採用担当者は以下の点を見ています。

  • コードが実際に動くか（動作するプロダクトがあるか）
  • GitHubのコミット履歴（継続的に学習しているか）
  • READMEの丁寧さ（説明能力・コミュニケーション力）
  • 技術選定の理由（なぜその技術を選んだか説明できるか）

ポートフォリオがなければ、どれだけ勉強していても「証明できない」状態になります。学習と並行して、早い段階から制作物を作り始めることを強くおすすめします。

初心者におすすめの制作物5選

1. 自己紹介サイト（難易度: 低）

最初の一歩として最適です。HTML・CSS・JavaScriptだけで作れるシンプルなものでOKです。

技術スタック例: HTML / CSS / JavaScript（またはAstro・Next.js）

含めるべき内容:

  • 名前・プロフィール
  • スキルセット（使える言語・フレームワーク）
  • 制作物一覧へのリンク
  • 連絡先（GitHub・X（Twitter）など）

自己紹介サイト自体がポートフォリオの「玄関」になります。他の制作物へのリンクをまとめるハブページとして機能させましょう。

2. Todoアプリ（難易度: 低〜中）

プログラミング学習の定番ですが、シンプルに見えて実装できる機能が多く、技術力のアピールに使えます。

技術スタック例: React + TypeScript / Vue.js / Svelte

アピールできる機能:

  • タスクの追加・削除・完了チェック
  • localStorageを使ったデータ永続化
  • フィルタリング機能（全件 / 未完了 / 完了済み）
  • ドラッグ&ドロップによる並び替え

「ただのTodoアプリ」で終わらせず、TypeScriptで型を定義したり、カスタムフックで状態管理を分離したりすることで差別化できます。

3. 天気アプリ（API連携）（難易度: 中）

外部APIと連携するアプリは「実践的な開発経験」としてアピール度が高いです。

技術スタック例: React / Vue.js + OpenWeatherMap API

OpenWeatherMap APIの無料枠を使えば、現在地または任意の都市の天気情報を取得できます。APIキーの取得は公式サイト（openweathermap.org）から無料登録するだけです。

// OpenWeatherMap APIで天気を取得する例
const API_KEY = 'your_api_key_here';
const city = 'Tokyo';

const response = await fetch(
  `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric&lang=ja`
);
const data = await response.json();

console.log(data.weather[0].description); // 例: "晴れ"
console.log(data.main.temp);              // 例: 22.5 (℃)

APIキーは.envファイルで管理し、GitHubに公開しないよう.gitignoreに追加することも忘れずに。

4. ブログサイト（難易度: 中）

Markdownでコンテンツを管理するブログサイトは、静的サイトジェネレーターの学習にもなります。

技術スタック例: Astro / Next.js (App Router) / Hugo

Astroを使えば、Markdownファイルをsrc/content/blog/に置くだけで自動的にページが生成されます。実際に技術記事を書いて公開すれば、アウトプットの習慣も身につきます。

5. ECサイト風UI（難易度: 高）

商品一覧・カート機能・決済フロー（決済は実装不要）を持つECサイト風UIは、高難度ながら評価が高いです。

技術スタック例: React + Redux Toolkit / Next.js + Zustand

状態管理ライブラリを使ったカート機能の実装は、実務に近いスキルのアピールになります。

GitHub Pagesでの公開手順

ステップ1: GitHubリポジトリの作成

GitHubにサインインし、右上の「+」→「New repository」からリポジトリを作成します。リポジトリ名をyour-username.github.ioにすると、ユーザーサイトとして公開できます（1アカウントに1つ）。

プロジェクト単位で公開する場合は任意の名前でOKです。

ステップ2: コードをプッシュ

# ローカルのプロジェクトをGitHubに接続
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/your-username/your-repo.git
git push -u origin main

ステップ3: GitHub Pagesの設定

リポジトリの「Settings」→「Pages」→「Branch」でmainブランチを選択して「Save」をクリックします。数分後、https://your-username.github.io/your-repo/でサイトが公開されます。

React・Vueなどのフレームワークを使っている場合はビルド後のdistまたはbuildフォルダを公開する必要があります。GitHub Actionsを使った自動デプロイの設定も覚えておくと便利です。

READMEの書き方

採用担当者はREADMEを必ず確認します。以下の項目を含めましょう。

# プロジェクト名

## 概要
このアプリは〇〇するためのWebアプリケーションです。

## デモ
[ライブデモリンク](https://your-demo-url.com)

## 使用技術
- React 18
- TypeScript 5
- Vite
- Tailwind CSS

## 機能
- [ ] タスクの追加・削除
- [ ] 完了チェック
- [ ] localStorageによる永続化

## セットアップ
```bash
npm install
npm run dev

こだわりポイント

  • カスタムフックでロジックを分離し、テスタブルな設計にしました
  • TypeScriptの型定義を徹底し、型安全なコードを実現しました

「なぜこの技術を選んだか」「どんな工夫をしたか」を言語化する習慣が、面接でも役立ちます。

## 採用担当者が見ているポイント

1. **コードの読みやすさ:** 変数名・関数名が適切か、コメントがあるか
2. **コミット粒度:** 1コミット1変更になっているか、コミットメッセージが説明的か
3. **エラーハンドリング:** API失敗時などの異常系を考慮しているか
4. **レスポンシブ対応:** スマートフォンでも正しく表示されるか
5. **継続的な更新:** 最終コミットが古すぎないか

<AffiliateLink
  title="エンジニアのためのポートフォリオ術"
  url="https://www.amazon.co.jp/dp/4815626707?tag=gokiwebsite-22"
  description="未経験からエンジニア転職を成功させたポートフォリオの作り方を解説。採用担当者の視点から評価されるポイントを具体的に紹介。"
  price="¥1,980"
  store="Amazon"
/>

<AffiliateLink
  title="Udemy — Web Developer Bootcamp 2024"
  url="https://www.udemy.com/course/the-web-developer-bootcamp/?referralCode=EXAMPLE"
  description="HTML/CSS/JavaScriptからNode.jsまで網羅したフルスタック講座。ポートフォリオに使えるプロジェクトを多数実装できます。"
  price="¥1,800〜"
  store="Udemy"
/>

## まとめ

ポートフォリオ作成のポイントをまとめます。

- **まずは動くものを作る**（完璧を目指して止まらない）
- **GitHubで公開する**（コミット履歴が学習の証になる）
- **READMEを丁寧に書く**（説明できることが大事）
- **少しずつ機能を追加する**（継続的な改善が評価される）

最初から完成度の高いものを作ろうとすると挫折します。まずはシンプルなものを動かして公開し、そこから少しずつ改善していく姿勢が重要です。
共有: