JavaScriptで動きをつける！初心者ポートフォリオ改良ステップ｜現役エンジニアが解説

「HTMLとCSSでポートフォリオを作れたけど、何か物足りない…」
「もっと“動きのあるサイト”にしたい！」

そんなあなたに必要なのが JavaScript（ジャバスクリプト） です。

JavaScriptを使うと、ボタンを押したり、スクロールしたり、画像が切り替わったりと、
ユーザーが触って楽しめる“動的なWebサイト” に進化させることができます。

この記事では、初心者でもHTML/CSSポートフォリオに簡単な動きを追加できるよう、
「3つのステップ＋実践サンプルコード付き」 でわかりやすく解説します。

1 🧭 第1章｜JavaScriptを使うと何ができるのか？
- 1.1 💡 JavaScriptでできること一例：
2 🧱 第2章｜JavaScriptを導入する基本ステップ
3 ✨ 第3章｜初心者でもできる！動きをつける3ステップ
4 🧠 第4章｜JavaScriptを学ぶ時に意識すべき3つのコツ
5 🧰 第5章｜おすすめの無料学習リソース
6 🧾 第6章｜完成度チェックリスト
7 🚀 第7章｜JavaScriptでポートフォリオを“作品化”しよう
- 7.1 💡 応用アイデア例
8 🧭 第8章｜まとめ：動きをつけることで学びが深まる

🧭 第1章｜JavaScriptを使うと何ができるのか？

まずはイメージを掴みましょう。
JavaScriptは、ブラウザ上で動作する“動きを司る言語”です。

💡 JavaScriptでできること一例：

機能	例
モーダル表示	「詳細を見る」をクリックでウィンドウ表示
画像スライダー	写真が自動で切り替わる
スクロールアニメーション	スクロールに合わせて要素がフェードイン
メニュー開閉	スマホナビが開いたり閉じたり
フォームチェック	未入力項目を警告表示

💬 つまり、HTMLが“構造”、CSSが“デザイン”、JavaScriptが“動き”です。
この3つを組み合わせることで、ポートフォリオの完成度が一気に上がります。

🧱 第2章｜JavaScriptを導入する基本ステップ

HTMLファイルにJavaScriptを読み込むのはとても簡単です。
次のように <script> タグでファイルをリンクするだけ。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>My Portfolio</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>My Portfolio</h1>
  <button id="hello-btn">クリックして挨拶</button>

  <script src="script.js"></script>
</body>
</html>

そして script.js に次のように記述します。

document.getElementById("hello-btn").addEventListener("click", function() {
  alert("こんにちは！私のポートフォリオへようこそ！");
});

✅ これで、ボタンをクリックするとポップアップが表示されます。
このように、HTML要素に対して「動作（イベント）」を追加するのがJavaScriptの基本です。

✨ 第3章｜初心者でもできる！動きをつける3ステップ

🥇 ステップ1：ハンバーガーメニューを作る

スマホサイトに欠かせない定番アニメーションです。

HTML

<header>
  <div class="menu-btn" id="menu-btn">☰</div>
  <nav id="nav">
    <ul>
      <li><a href="#about">About</a></li>
      <li><a href="#works">Works</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>

CSS

#nav {
  display: none;
  background: #333;
  color: #fff;
  text-align: center;
}
#nav ul {
  list-style: none;
  padding: 0;
}
#nav a {
  color: #fff;
  display: block;
  padding: 10px;
}
.menu-btn {
  font-size: 24px;
  cursor: pointer;
  padding: 10px;
}

JavaScript

const menuBtn = document.getElementById("menu-btn");
const nav = document.getElementById("nav");

menuBtn.addEventListener("click", () => {
  nav.style.display = (nav.style.display === "block") ? "none" : "block";
});

💬 効果：
クリックするとメニューが開閉する、スマホ対応ナビが完成。

🥈 ステップ2：スクロールアニメーションで印象アップ

ページをスクロールしたとき、要素がふわっと出てくるだけで印象が変わります。

HTML

<section class="fadein">
  <h2>My Skills</h2>
  <p>HTML / CSS / JavaScript / React</p>
</section>

CSS

.fadein {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease;
}
.fadein.show {
  opacity: 1;
  transform: translateY(0);
}

JavaScript

const fadeElems = document.querySelectorAll('.fadein');
window.addEventListener('scroll', () => {
  fadeElems.forEach(elem => {
    const rect = elem.getBoundingClientRect();
    if (rect.top < window.innerHeight - 100) {
      elem.classList.add('show');
    }
  });
});

💡 スクロールすると段階的に表示される“動的サイト”感が出ます！

🥉 ステップ3：トップに戻るボタンを設置

長いページに便利な機能。クリックでスムーズに上へ戻れます。

HTML

<button id="to-top">▲ TOP</button>

CSS

#to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px 15px;
  border: none;
  background: #3498db;
  color: white;
  border-radius: 50%;
  cursor: pointer;
  display: none;
}

JavaScript

const toTop = document.getElementById("to-top");
window.addEventListener("scroll", () => {
  if (window.scrollY > 300) {
    toTop.style.display = "block";
  } else {
    toTop.style.display = "none";
  }
});

toTop.addEventListener("click", () => {
  window.scrollTo({ top: 0, behavior: "smooth" });
});

💬 ユーザー体験（UX）が格段に良くなる機能です。

🧠 第4章｜JavaScriptを学ぶ時に意識すべき3つのコツ

“理解よりも触る”が最優先
　→ 小さくても「動いた！」を積み重ねること。
console.log()で動きを確認
　→ デバッグ癖をつけるとエラーに強くなる。
既存サイトの真似をする
　→ アニメーションを分解して自分で再現する練習が最強。

💡 JavaScriptは“体で覚える言語”。
書けば書くほど「動きの設計力」が身につきます。

🧰 第5章｜おすすめの無料学習リソース

サイト	特徴
Progate	JavaScript入門を図解で学べる
ドットインストール	3分動画で動作確認しながら学習
MDN Web Docs	正確なリファレンス
CodePen	ブラウザで即試せる実験環境
YouTube: Traversy Media	英語だけど実践的で分かりやすい

🧾 第6章｜完成度チェックリスト

項目	状態
HTMLとCSSで基本構成ができている	□
JavaScriptを読み込める	□
ハンバーガーメニューが動作する	□
スクロールアニメーションが機能する	□
トップに戻るボタンが動く	□
スマホでも問題なく表示できる	□

✅ 5つ以上チェックできれば、
あなたのポートフォリオは「初心者レベルを脱出」しています！

🚀 第7章｜JavaScriptでポートフォリオを“作品化”しよう

ここまでできたら、次のステップは “オリジナル要素を加えること”。

💡 応用アイデア例

スライドショーを自動で切り替える
ページ読み込み時にアニメーションを追加
作品紹介をクリックで詳細表示にする
お問い合わせフォームをバリデーション付きに

💬 小さな動きの積み重ねで「プロっぽさ」が出ます。
JavaScriptは、あなたの作品を“魅せるサイト”に変える魔法のスキルです。

🧭 第8章｜まとめ：動きをつけることで学びが深まる

JavaScriptを使うと、サイトが「動く・反応する」ようになる
小さな動きを積み重ねることでスキルが定着する
ポートフォリオに動きを加えることで、面接官の印象もアップ

💬 「動かせる＝理解している」証拠。
HTMLとCSSの知識が、“本物のWebスキル”へと進化します。

Follow me!

PV数: 9