JavaScript初心者でもできるポートフォリオの作り方|採用担当に刺さる作品を3週間で完成させる方法

僕が未経験からエンジニアに転職したとき、一番悩んだのがポートフォリオの作り方だったんだよね。何を作ればいいか分からなくて、2週間くらいウンウン唸ってたんだ。

ナビ助

「JavaScriptを勉強してるけど、転職やフリーランスで何を見せればいいの?」って悩んでる人、めちゃくちゃ多いよね！その答えが「ポートフォリオ」だよ！

ポートフォリオとは、あなたのスキルを証明する作品集のこと。企業の採用担当者やクライアントは、あなたのコードを実際に見て「本当に実務レベルのスキルがあるか」を判断するんだ。

この記事では、JavaScript初心者が「採用担当者に好まれるポートフォリオ」を3週間で完成させるための完全ステップバイステップガイドをお届けするよ。コードの実装方法だけでなく、「どんなプロジェクトを選ぶべきか」「どうすればアピール力が高まるか」まで解説するね。

🤖 ナビ助のおすすめ！

プログラミング学習サービスおすすめ7選｜独学で使える学習サイト・講座を徹底比較

詳しくはこちら →

ポートフォリオ作成の全体像を理解する
初心者向けのポートフォリオテーマ選び
1. 避けるべきテーマ
2. 初心者におすすめのテーマ5選
STEP1: 開発環境構築（所要時間：30分）
STEP2: HTMLの基本構造を作成（所要時間：15分）
STEP3: CSSでUIをデザイン（所要時間：1時間）
STEP4: JavaScriptで機能を実装（所要時間：2〜3時間）
STEP5: GitHubにアップロード（所要時間：20分）
1. 基本手順
2. README.mdは超重要
STEP6: 次のプロジェクトで非同期処理を学ぶ（1〜2週間）
1. 天気予報アプリの実装例
ポートフォリオを採用担当者に見せるコツ
よくある質問（FAQ）
まとめ

ポートフォリオ作成の全体像を理解する

正直に言うと、ポートフォリオは「動く作品を作ればOK」ではないんだよ。僕の経験上、採用担当者やクライアントが見ているポイントは以下の5つなんだよね。

コードの読みやすさ・保守性
実装したい機能がちゃんと実現できているか
JavaScriptの基礎を理解しているか
UIの使いやすさ（ユーザー体験）
ドキュメント（READMEなど）が充実しているか

「そんなに見られるの?」と不安になるかもしれないけど、安心してね。初心者なら「小さくても完成度が高い作品」の方が「大きくてバグだらけの作品」より圧倒的に評価されるんだ。僕も最初のポートフォリオはシンプルなTODOアプリだったけど、それで面接を突破できたよ。

初心者向けのポートフォリオテーマ選び

僕の経験上、テーマ選びで失敗すると制作が途中で頓挫するんだよね。まずは避けるべきテーマから押さえておこう。

避けるべきテーマ

SNSアプリ全体：データベース、認証、サーバーなど学ぶことが多すぎる
本格的なゲーム開発：ゲームエンジン（Unity等）を使った方が効率的
高難度のUI：3D処理やリアルタイム動画処理などは初心者には早い

初心者におすすめのテーマ5選

テーマ	学べる技術	難易度	制作期間
TODO管理アプリ	DOM操作、イベント処理、LocalStorage	★★☆☆☆	3〜5日
天気予報アプリ	非同期処理（fetch）、API連携	★★★☆☆	1〜2週間
家計簿アプリ	データ管理、グラフ表示（Chart.js）	★★★☆☆	1〜2週間
個人ポートフォリオサイト	HTML/CSS統合、レスポンシブデザイン	★★☆☆☆	1週間
Webゲーム（迷路やシューティング）	Canvas API、ゲームループ、衝突判定	★★★★☆	2〜3週間

ナビ助

初心者なら「TODO管理アプリ」→「天気予報アプリ」の順に作るのがベストだよ！TODO管理でDOM操作とイベント処理を学び、天気予報で非同期処理を習得する流れがおすすめなんだ！

STEP1: 開発環境構築（所要時間：30分）

必須ツールのインストール

1. Node.js
公式サイト（nodejs.org）からLTS版をダウンロードしてインストールしよう。ターミナルで確認するよ。

node --version
npm --version

2. Visual Studio Code（VS Code）
業界標準の無料エディタだよ。拡張機能「JavaScript (ES6) code snippets」「Prettier」を入れると便利だよ。

3. Git
GitHubにコードをアップロードするために必要だよ。git-scm.comからインストールしてね。

プロジェクトの初期化

mkdir my-todo-app
cd my-todo-app
npm init -y

推奨フォルダ構成

my-todo-app/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── main.js
├── README.md
└── .gitignore

最小限だけど、これで十分。正直に言うと、フォルダ構成がきちんとしているだけで「この人ちゃんとしてるな」って印象になるんだよね。

STEP2: HTMLの基本構造を作成（所要時間：15分）

TODO管理アプリのHTML例だよ。初心者がやりがちな「過度に複雑なHTML」は避けて、シンプルに保とう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My TODO App</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="container">
    <h1>My TODO App</h1>
    <div class="input-section">
      <input type="text" id="todoInput" placeholder="新しいタスクを入力...">
      <button id="addBtn">追加</button>
    </div>
    <ul id="todoList" class="todo-list"></ul>
  </div>
  <script src="js/main.js"></script>
</body>
</html>

ポイントは、id属性をつけてJavaScriptからDOM要素を取得しやすくすること。スクリプトは<body>の最後に配置するのがパフォーマンス面でのベストプラクティスだよ。

🤖 ナビ助のおすすめ！

プログラミング学習サービスおすすめ7選｜独学で使える学習サイト・講座を徹底比較

詳しくはこちら →

STEP3: CSSでUIをデザイン（所要時間：1時間）

JavaScriptスキルをアピールする記事だけど、見た目が悪いと評価が下がるんだ。僕の経験上、CSSに時間をかけすぎるのも本末転倒なんだよね。モダンで見やすいCSSを効率的に書こう。

/* css/style.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  background: white;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  padding: 30px;
  width: 90%;
  max-width: 500px;
}

h1 {
  color: #333;
  text-align: center;
  margin-bottom: 30px;
}

.input-section {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

#todoInput {
  flex: 1;
  padding: 12px;
  border: 2px solid #ddd;
  border-radius: 5px;
  font-size: 16px;
  transition: border-color 0.3s;
}

#todoInput:focus {
  outline: none;
  border-color: #667eea;
}

#addBtn {
  padding: 12px 20px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.3s;
}

#addBtn:hover {
  background: #764ba2;
}

.todo-list { list-style: none; }

.todo-item {
  display: flex;
  align-items: center;
  padding: 15px;
  background: #f9f9f9;
  border-radius: 5px;
  margin-bottom: 10px;
  gap: 10px;
}

.todo-item.completed { opacity: 0.6; }
.todo-item.completed .todo-text {
  text-decoration: line-through;
  color: #999;
}

.delete-btn {
  background: #ff6b6b;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s;
}

.delete-btn:hover { background: #ff5252; }

モダンなグラデーション背景、ホバーエフェクト、レスポンシブ対応で、少ないコードでもプロっぽい見た目になるよ。

STEP4: JavaScriptで機能を実装（所要時間：2〜3時間）

いよいよメインのJavaScript実装だよ。正直に言うと、初心者が陥りやすい罠は「すべてをグローバルスコープに書く」ことなんだよね。関数を適切に分けて、保守性を意識しよう。

// js/main.js
const todoInput = document.getElementById('todoInput');
const addBtn = document.getElementById('addBtn');
const todoList = document.getElementById('todoList');

let todos = JSON.parse(localStorage.getItem('todos')) || [];

document.addEventListener('DOMContentLoaded', () => {
  renderTodos();
});

addBtn.addEventListener('click', addTodo);
todoInput.addEventListener('keypress', (e) => {
  if (e.key === 'Enter') addTodo();
});

function addTodo() {
  const text = todoInput.value.trim();
  if (text === '') {
    alert('タスクを入力してください');
    return;
  }
  const newTodo = {
    id: Date.now(),
    text: text,
    completed: false
  };
  todos.push(newTodo);
  saveTodos();
  renderTodos();
  todoInput.value = '';
  todoInput.focus();
}

function deleteTodo(id) {
  todos = todos.filter(todo => todo.id !== id);
  saveTodos();
  renderTodos();
}

function toggleTodo(id) {
  const todo = todos.find(todo => todo.id === id);
  if (todo) {
    todo.completed = !todo.completed;
    saveTodos();
    renderTodos();
  }
}

function saveTodos() {
  localStorage.setItem('todos', JSON.stringify(todos));
}

function renderTodos() {
  todoList.innerHTML = '';
  todos.forEach(todo => {
    const li = document.createElement('li');
    li.className = `todo-item ${todo.completed ? 'completed' : ''}`;
    li.innerHTML = `
      <input type="checkbox" class="todo-checkbox"
        ${todo.completed ? 'checked' : ''}
        onchange="toggleTodo(${todo.id})">
      <span class="todo-text">${escapeHtml(todo.text)}</span>
      <button class="delete-btn" onclick="deleteTodo(${todo.id})">削除</button>
    `;
    todoList.appendChild(li);
  });
}

function escapeHtml(text) {
  const div = document.createElement('div');
  div.textContent = text;
  return div.innerHTML;
}

採用担当者が注目するポイント：

LocalStorage活用：ページリロードしてもデータが残る
XSS対策：escapeHtml関数でセキュリティリスクに対応
バリデーション：空入力を防止
Enterキー対応：ボタンクリックだけでなくキー入力にも対応
関数の分離：各機能が独立した関数で実装されている

僕の経験上、このレベルのセキュリティ対策ができているだけで、採用担当者からの信頼度が格段に上がるんだよね。

STEP5: GitHubにアップロード（所要時間：20分）

コードをGitHubに上げるのは必須だよ。2026年時点で、企業の採用担当者が「GitHubに実績があるか」を確認するのは標準的なプロセスになっているんだ。

アカウント作成と基本操作はGitHub公式ドキュメントを参照してね。

基本操作はPro Git（日本語版）で体系的に学べるよ。

基本手順

# .gitignoreを作成
echo "node_modules/" > .gitignore

# Git初期化&コミット
git init
git add .
git commit -m "Initial commit: TODO app"

# GitHubにリモート接続してプッシュ
git remote add origin https://github.com/YOUR_USERNAME/my-todo-app.git
git branch -M main
git push -u origin main

README.mdは超重要

ナビ助

正直に言うと、採用担当者が最初に見るファイルがREADMEなんだよね。以下の要素を必ず含めようね！

アプリの概要と機能一覧
使用技術のリスト
インストール・使い方の手順
「実装で工夫した点」（ここがアピールポイント！）
今後の改善案（学習意欲の証明になる）

STEP6: 次のプロジェクトで非同期処理を学ぶ（1〜2週間）

TODO管理アプリが完成したら、次は「外部APIと連携する」プロジェクトに取り組もう。僕の経験上、これが初心者脱却の重要なステップなんだよね。

天気予報アプリの実装例

async function getWeather(city) {
  const apiKey = 'YOUR_API_KEY';
  const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric&lang=ja`;

  try {
    const response = await fetch(url);
    if (!response.ok) throw new Error('都市が見つかりません');
    const data = await response.json();
    displayWeather(data);
  } catch (error) {
    alert(error.message);
    console.error('エラー:', error);
  }
}

このコードで学べる技術は実務で毎日使うものばかりだよ。

fetch APIによる非同期処理
async/awaitの文法
エラーハンドリング
外部APIドキュメントの読み方

ポートフォリオを採用担当者に見せるコツ

作品は最低2〜3個用意する

異なるテーマ・技術を使った作品を複数持つことで「多角的なスキル」をアピールできるよ。僕のおすすめの組み合わせは以下の通りだよ。

作品1：DOM操作メイン（TODO管理アプリ）
作品2：非同期処理メイン（天気予報アプリ）
作品3：個人ポートフォリオサイト（HTML/CSS/JSの統合）

デプロイして動く状態で見せる

GitHubのコードだけでなく、実際に動いているサイトのURLを見せることが重要だよ。2026年の推奨デプロイ先はこちら。

Vercel（最もおすすめ）：GitHubと連携するだけで自動デプロイ。数秒でURLが発行される
Netlify：UIが優秀。フォーム機能も充実
GitHub Pages：無料で静的サイトをホスティング可能

職務経歴書に含める

転職活動時には、ポートフォリオのGitHubリンクとデプロイURLを履歴書に記載しよう。「実装期間」「工夫した点」を簡潔に添えると、採用担当者の印象に残りやすくなるよ。

よくある質問（FAQ）

Q1：ポートフォリオは何作品くらい必要ですか?

A：最低2作品、できれば3作品あると良いよ。1つだけだと「たまたまできた」と思われがちだけど、3つあれば「体系的にスキルがある」と判断されるんだ。TODO管理アプリ+天気予報アプリ+個人サイトの3点セットが僕のおすすめだよ。

Q2：デザインセンスがなくても大丈夫ですか?

A：大丈夫だよ。この記事で紹介したCSS程度で十分。採用担当者はデザインよりも「JavaScriptのロジック」「コードの読みやすさ」を重視しているんだ。ただし、最低限の見やすさは確保しようね。

Q3：フレームワーク（React等）を使った方がいいですか?

A：初心者の最初のポートフォリオは素のJavaScript（Vanilla JS）で十分だよ。基礎ができていることの方が評価されるんだ。2作品目以降でReactやVue.jsを使うと、成長の過程もアピールできるよ。

Q4：ポートフォリオ制作にどのくらい時間がかかりますか?

A：TODO管理アプリなら3〜5日、天気予報アプリなら1〜2週間が目安だよ。完璧を目指さず、まず動くものを作って、後から改善していくのがコツだよ。

Q5：GitHubのプロフィールは何を書けばいいですか?

A：「学習中の言語・フレームワーク」「興味のある分野」「連絡先」を簡潔に書こう。GitHubのプロフィールREADME機能を使って、自己紹介ページを作るのも効果的だよ。

Q6：未経験でポートフォリオだけで転職できますか?

A：ポートフォリオは必要条件だけど、十分条件ではないんだ。企業はポートフォリオに加えて「学習意欲」「コミュニケーション力」「問題解決能力」も見ているよ。ポートフォリオは「入り口のドア」で、面接でその先を見せる必要があるんだ。

まとめ

JavaScript初心者のポートフォリオ作成のポイントを僕なりにおさらいするね。

テーマ選び：TODO管理アプリ→天気予報アプリの順番がベスト
品質重視：大きくてバグだらけより、小さくて完成度の高い作品を
セキュリティ意識：XSS対策やバリデーションなど、細部へのこだわりが評価される
GitHubにアップ：README.mdを充実させて、実装の工夫をアピール
デプロイ：Vercelなどで実際に動く状態で公開する
複数作品：2〜3作品で多角的なスキルを証明する

ナビ助

ポートフォリオ作成は大変に感じるかもしれないけど、この過程自体が最高の学習機会なんだよ。僕も最初のポートフォリオを完成させたとき、「自分でもちゃんとしたものが作れるんだ」って自信がついたんだ。ぜひこの記事を参考に、あなただけのポートフォリオを作ってみてね！

※記事執筆時点での情報です。最新の情報は各公式サイトでご確認ください。

🤖 ナビ助のおすすめ！

プログラミング学習サービスおすすめ7選｜独学で使える学習サイト・講座を徹底比較

詳しくはこちら →