「JavaScriptで動きをつけられるようになったけど、もう一歩進化させたい」
「他のポートフォリオと差別化したい！」

そんなあなたに最適なのが、API連携（データの自動取得） です。

この記事では、初心者でも理解できるように

  • APIとは何か
  • JavaScriptでAPIを使う方法
  • 実際のポートフォリオ改良例（天気アプリなど）
  • コード例と練習ステップ
    まで、丁寧に解説します。

🌍 第1章｜そもそも「API」って何？

API（Application Programming Interface） とは、
「アプリ同士をつなぐ“データの窓口”」のことです。

💡 たとえば、あなたのポートフォリオで：

  • 天気情報をリアルタイム表示
  • ブログ記事を自動取得
  • SNS投稿を表示
  • 地図を埋め込む

といったことができるのは、API経由で他サービスのデータを呼び出しているから。

🧩 APIのイメージ図

あなたのサイト
   ↓ (データをリクエスト)
APIサーバー
   ↓ (データを返す)
表示画面

つまり、あなたが「欲しい情報」をAPIにリクエストすると、
APIはJSON形式などでデータを返してくれます。

⚙️ 第2章｜JavaScriptでAPIを使う基本：fetch関数

JavaScriptには、外部データを取得するための関数 fetch() が標準で用意されています。

💻 基本構文

fetch('APIのURL')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => console.error('エラー:', error));

fetch() はPromiseを返す非同期処理なので、
.then() で順にデータを扱います。

🌤 第3章｜実践例：天気APIでポートフォリオをアップデート

「ポートフォリオのトップページにリアルタイム天気を表示」してみましょう。

使うのは無料の OpenWeatherMap API。
登録すれば無料でAPIキーを取得できます。

🧾 ステップ1：APIキーを取得

  1. OpenWeatherMap に登録
  2. メールでAPIキーが発行される（英数字の文字列）
  3. そのキーをURLに組み込みます

💻 ステップ2：コード例（JavaScript）

const apiKey = "あなたのAPIキー";
const city = "Tokyo";
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&lang=ja&units=metric`;

fetch(url)
  .then(response => response.json())
  .then(data => {
    const weather = data.weather[0].description;
    const temp = data.main.temp;
    document.getElementById("weather").textContent = 
      `${city} の天気：${weather}（${temp}℃）`;
  })
  .catch(error => console.error("エラー:", error));

💡 HTML部分

<section id="weather-section">
  <h2>現在の天気</h2>
  <p id="weather">読み込み中...</p>
</section>

これを実装するだけで、ポートフォリオが“動的サイト”に変わります！

💬 第4章｜APIを使う上での注意点

注意点内容
APIキーの管理公開リポジトリにキーをそのまま置かない
呼び出し回数制限無料APIは回数制限あり（例：1時間100回）
CORSエラーAPIによってはブラウザから直接アクセス不可
データ形式JSONかXMLかを確認（ほとんどJSON）

💡 ポートフォリオで使う場合は、フロントエンド限定の安全なAPIを選びましょう。

🧠 第5章｜他にも使える！ポートフォリオに最適な無料API一覧

API名機能URL
GitHub API自分のリポジトリ情報を表示https://api.github.com/users/ユーザー名
Unsplash API無料写真素材を自動取得https://unsplash.com/developers
News API最新ニュースを取得https://newsapi.org/
Joke APIジョークを表示（海外向け）https://v2.jokeapi.dev/
Google Maps API地図を埋め込むhttps://developers.google.com/maps

💬 これらを使えば、「作品紹介ページに動き」や「情報性」をプラスできます。

💻 第6章｜ポートフォリオ応用例：作品紹介をAPI連携で自動化

「自分のGitHubリポジトリを自動で表示」してみましょう。

JavaScriptコード例

const username = "あなたのGitHubユーザー名";

fetch(`https://api.github.com/users/${username}/repos`)
  .then(res => res.json())
  .then(data => {
    const list = document.getElementById("repo-list");
    data.slice(0, 5).forEach(repo => {
      const li = document.createElement("li");
      li.innerHTML = `<a href="${repo.html_url}" target="_blank">${repo.name}</a>`;
      list.appendChild(li);
    });
  })
  .catch(err => console.error(err));

HTML

<section id="projects">
  <h2>My GitHub Projects</h2>
  <ul id="repo-list"></ul>
</section>

💡 常に最新の成果物を自動で反映できるので、転職・就職ポートフォリオに最適です！

📋 第7章｜API活用チェックシート

項目状態
APIキーを安全に管理できている□
fetch() の構文を理解している□
JSONデータの中身を読める□
取得データをHTMLに反映できた□
GitHubや天気などでAPI連携を実装した□

✅ 4つ以上チェックがつけば、あなたのポートフォリオは “中級者レベル” に到達しています！

💪 第8章｜よくあるつまずきと解決策

悩み原因解決策
取得できない（エラー404）URLやAPIキーのタイプミス正確にコピーする
CORSエラーが出るAPIがブラウザアクセスを許可していない代わりにNode.js経由で取得 or Proxyを使う
データがうまく表示されないJSONの構造を理解していないconsole.log(data)で中身を確認

💡 「動かない時に調べる癖」＝本当のエンジニア学習です。

🚀 第9章｜ポートフォリオにAPIを導入する効果

効果内容
差別化静的なHTML作品より一歩上の印象
実務アピールAPI理解は現場スキルに直結
成果更新が自動化GitHubやニュースAPIで最新情報を反映
面接評価アップ「技術的好奇心がある」と評価される

💬 面接官や採用担当は「手を動かしている人」を見抜きます。
APIを扱えるだけで、“使える人” という印象を与えられます。

🔧 第10章｜学習を深めるおすすめ教材

リソース内容
MDN fetch() ガイド公式で信頼性が高い
ドットインストール JavaScript API連携編3分動画で実践できる
Udemy：モダンJavaScript講座実務レベルの非同期処理が学べる
YouTube: Web Dev Simplified海外人気チャンネル（fetch解説あり）

💡 第11章｜まとめ：APIを使うと「作品が情報を持つサイト」に変わる

  • APIは「外部データをサイトに取り込む仕組み」
  • fetch()を使えば初心者でも扱える
  • 天気、GitHub、ニュースなどのAPIでサイトを進化できる
  • コード例を真似して、まずは“動く作品”を体験することが大事

💬 静的ポートフォリオから“情報を動かすサイト”へ。
あなたの技術レベルが一段上に進む瞬間です。

Follow me!

PV数: 7