こんにちは！咲耶です〜
Windsurf完全マスター講座Part3へようこそ！今回は、これまで学んだCascadeとの会話術を活用して、実際に役立つWebアプリケーションを作っていきます。
「基本は理解したけど、実際に何を作ればいいの？」「もっと実用的なものを作ってみたい！」「APIって何？どう使うの？」
そんな皆さんと一緒に、ToDoアプリ、天気予報アプリ、簡単なゲームまで、段階的に作っていきましょう〜💕
🎯 Part3で作るアプリ一覧
📋 今回のプロジェクト
| アプリ | 難易度 | 学習内容 | 所要時間 |
|---|---|---|---|
| 📝 ToDoアプリ | 🔰 初級 | 基本的なCRUD操作、ローカルストレージ | 1-2時間 |
| 🎮 じゃんけんゲーム | 🔰 初級 | JavaScript基礎、イベント処理 | 1時間 |
| 🧮 電卓アプリ | ⭐ 初中級 | 関数設計、エラーハンドリング | 2時間 |
| ☀️ 天気予報アプリ | ⭐⭐ 中級 | API連携、非同期処理 | 2-3時間 |
| 💰 家計簿アプリ | ⭐⭐⭐ 中上級 | データ可視化、チャート生成 | 3-4時間 |
📝 プロジェクト1: ToDoアプリを作ろう
🎯 完成イメージ
まずは、日常的に使えるToDoアプリを作ります。以下の機能を実装します：
- ✅ タスクの追加・削除
- ✅ 完了状態の切り替え
- ✅ データの永続化（ページを閉じても保存）
- ✅ フィルタリング（全て・未完了・完了済み）
- ✅ 残りタスク数の表示
💬 Cascadeとの会話実例
Step 1: プロジェクトの開始
あなた：「ToDoアプリを作りたいです。タスクの追加・削除・完了状態の切り替えができて、ブラウザを閉じてもデータが残るようにしたいです。シンプルで使いやすいデザインでお願いします。」
Cascade：「素晴らしいプロジェクトですね！実用的なToDoアプリを作成します。以下の構成で実装しましょう：
**技術構成：**
– HTML: セマンティックな構造
– CSS: モダンでレスポンシブなデザイン
– JavaScript: ローカルストレージでデータ永続化**主要機能：**
1. タスクの追加・削除
2. 完了状態の切り替え
3. データの自動保存
4. フィルタリング機能まずは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="style.css">
</head>
<body>
<div class="container">
<header>
<h1>📝 My Todo App</h1>
<div class="add-todo">
<input type="text" id="todoInput" placeholder="新しいタスクを入力...">
<button id="addBtn">追加</button>
</div>
</header>
<nav class="filters">
<button class="filter-btn active" data-filter="all">全て</button>
<button class="filter-btn" data-filter="pending">未完了</button>
<button class="filter-btn" data-filter="completed">完了済み</button>
</nav>
<main>
<ul id="todoList"></ul>
<div class="todo-stats">
<span id="todoCount">残り: 0個</span>
</div>
</main>
</div>
<script src="script.js"></script>
</body>
</html>Step 2: スタイリングの依頼
あなた：「HTMLが完成しましたね！今度はCSSで、モダンで清潔感のあるデザインにしてください。カラーパレットは青系で、ダークモードにも対応させたいです。」
Cascade：「モダンなデザインのCSSを作成します！青系のカラーパレットとダークモード対応で、使いやすいインターフェースにしますね。
**デザインコンセプト：**
– クリーンなミニマルデザイン
– 直感的な操作感
– レスポンシブ対応
– アクセシビリティ重視CSSファイルを生成します。」
Step 3: JavaScript機能の実装
あなた：“JavaScriptでToDoの機能を実装してください。ローカルストレージにデータを保存して、ページを再読み込みしても前回のデータが残るようにしたいです。”
Cascade：“ToDoアプリの機能をJavaScriptで実装します！以下の機能を含めます：
**実装機能：**
1. タスクの追加・削除・編集
2. 完了状態の切り替え
3. ローカルストレージでの永続化
4. フィルタリング機能
5. 残りタスク数の表示初心者の方にも分かりやすいよう、コメントを詳しく書きながら実装しますね。”
生成されるJavaScriptコード（一部）
// ToDoアプリのメインクラス
class TodoApp {
constructor() {
this.todos = JSON.parse(localStorage.getItem('todos')) || [];
this.filter = 'all';
this.init();
}
// 初期化処理
init() {
this.bindEvents();
this.render();
}
// イベントリスナーの設定
bindEvents() {
// 追加ボタンのクリックイベント
document.getElementById('addBtn').addEventListener('click', () => {
this.addTodo();
});
// Enterキーでの追加
document.getElementById('todoInput').addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
this.addTodo();
}
});
// フィルターボタンのイベント
document.querySelectorAll('.filter-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
this.setFilter(e.target.dataset.filter);
});
});
}
// ToDoの追加
addTodo() {
const input = document.getElementById('todoInput');
const text = input.value.trim();
if (text === '') {
alert('タスクを入力してください');
return;
}
const todo = {
id: Date.now(),
text: text,
completed: false,
createdAt: new Date().toISOString()
};
this.todos.push(todo);
this.saveTodos();
this.render();
input.value = '';
}
// ローカルストレージに保存
saveTodos() {
localStorage.setItem('todos', JSON.stringify(this.todos));
}
// 画面の更新
render() {
const todoList = document.getElementById('todoList');
const filteredTodos = this.getFilteredTodos();
todoList.innerHTML = '';
filteredTodos.forEach(todo => {
const li = this.createTodoElement(todo);
todoList.appendChild(li);
});
this.updateStats();
}
}
// アプリケーション開始
const app = new TodoApp();Step 4: 機能追加の依頼
あなた：“素晴らしいToDoアプリができました！追加で、タスクの編集機能とドラッグ&ドロップでの並び替え機能を追加できますか？”
🎉 完成したToDoアプリの特徴
- 📱 レスポンシブデザイン：スマホでも快適に利用
- 🌙 ダークモード対応：目に優しい表示
- 💾 自動保存：ブラウザを閉じてもデータが残る
- 🔍 フィルタリング：状態別の表示切り替え
- ✏️ インライン編集：ダブルクリックで編集可能
- 🎯 直感的操作：ドラッグ&ドロップ対応
🎮 プロジェクト2: じゃんけんゲーム
🎯 学習目標
JavaScript の基本的なロジック、ランダム処理、DOM操作を学びます。
💬 Cascadeとの実装会話
あなた：“じゃんけんゲームを作りたいです。ユーザーがグー・チョキ・パーを選んで、コンピューターとじゃんけんできるゲームです。勝敗の記録と、連勝記録も表示したいです。”
Cascade：“楽しそうなじゃんけんゲームを作りましょう！以下の機能を実装します：
**ゲーム機能：**
1. プレイヤーの手の選択（ボタンまたはキーボード）
2. コンピューターのランダム選択
3. 勝敗判定とアニメーション
4. スコア記録（勝利・敗北・引き分け）
5. 連勝記録とベスト記録
6. ゲーム履歴の表示見た目も楽しくなるよう、絵文字とアニメーションを活用します！”
🎨 ゲームの特徴
- 🎭 アニメーション効果：手の振りアニメーション
- 🏆 スコア管理：詳細な戦績記録
- ⌨️ キーボード対応：G(グー)、C(チョキ)、P(パー)
- 📊 統計表示：勝率と傾向分析
- 🔊 効果音：Web Audio APIを活用
🧮 プロジェクト3: 電卓アプリ
🎯 学習目標
関数の設計、エラーハンドリング、より複雑なUI操作を学びます。
💬 Cascadeとの実装アプローチ
あなた：“電卓アプリを作りたいです。基本的な四則演算に加えて、メモリ機能、履歴表示、キーボード入力対応もしたいです。デザインはiPhoneの電卓のようなモダンなスタイルでお願いします。”
実装される主要機能
- 🔢 基本演算：+、-、×、÷
- 📐 科学計算：√、x²、%
- 💾 メモリ機能：MC、MR、M+、M-
- 📋 計算履歴：過去の計算を保存・再利用
- ⌨️ キーボード対応：数字キーとショートカット
- 🚫 エラーハンドリング：ゼロ除算、無効な操作の処理
☀️ プロジェクト4: 天気予報アプリ
🎯 学習目標
API連携、非同期処理（Promise/async-await）、データの可視化を学びます。
🌐 使用するAPI
無料で使える天気予報APIを活用します：
- OpenWeatherMap API：世界中の天気データ
- 位置情報API：ユーザーの現在地取得
- Geocoding API：都市名から座標を取得
💬 API連携の実装会話
あなた：“天気予報アプリを作りたいです。ユーザーの現在地の天気を表示して、都市名での検索もできるようにしたいです。5日間の予報と、天気に応じたアイコン表示もお願いします。”
Cascade：“実用的な天気予報アプリを作成しましょう！API連携を含む本格的なWebアプリケーションですね。
**実装プラン：**
1. OpenWeatherMap APIキーの取得方法説明
2. 現在地の取得（Geolocation API）
3. 天気データの取得と表示
4. 都市検索機能
5. 5日間予報の実装
6. 天気アイコンとアニメーションまずはAPIキーの取得から始めましょう。”
Step 1: APIキーの取得
Cascade：“OpenWeatherMap APIを使用するため、まず無料のAPIキーを取得しましょう：
1. https://openweathermap.org/ にアクセス
2. ‘Sign Up’でアカウント作成
3. API keysページでキーを取得
4. 1日1000回まで無料で利用可能APIキーが準備できたら、JavaScriptでの実装を始めます。”
Step 2: 天気データ取得の実装
// 天気データを取得する関数
async function getWeatherData(city) {
const API_KEY = 'YOUR_API_KEY_HERE'; // 実際のAPIキーに置き換え
const BASE_URL = 'https://api.openweathermap.org/data/2.5';
try {
// 現在の天気を取得
const currentResponse = await fetch(
`${BASE_URL}/weather?q=${city}&appid=${API_KEY}&units=metric&lang=ja`
);
if (!currentResponse.ok) {
throw new Error('都市が見つかりません');
}
const currentData = await currentResponse.json();
// 5日間予報を取得
const forecastResponse = await fetch(
`${BASE_URL}/forecast?q=${city}&appid=${API_KEY}&units=metric&lang=ja`
);
const forecastData = await forecastResponse.json();
// データを表示
displayWeatherData(currentData, forecastData);
} catch (error) {
console.error('天気データの取得に失敗:', error);
showError('天気情報を取得できませんでした');
}
}🌟 完成した天気予報アプリの機能
- 📍 現在地自動取得：位置情報から天気を表示
- 🔍 都市検索：世界中の都市の天気を検索
- 📅 5日間予報：詳細な週間天気
- 🎨 動的アイコン：天気に応じたアニメーション
- 📊 詳細情報：湿度、風速、気圧など
- 🌡️ 単位切り替え：摂氏・華氏、km/h・mph
💰 プロジェクト5: 家計簿アプリ
🎯 学習目標
データの可視化、Chart.js ライブラリの活用、より複雑なデータ管理を学びます。
📊 実装する機能
- 💳 収支記録：収入・支出の管理
- 🏷️ カテゴリ分類：食費、交通費、娯楽費など
- 📈 グラフ表示：円グラフ、棒グラフ、線グラフ
- 📅 期間別集計：日別、月別、年別
- 💾 データエクスポート：CSV形式でダウンロード
- 🎯 予算管理：カテゴリ別予算設定と進捗表示
💬 Chart.js実装の会話例
あなた：“家計簿アプリにグラフ表示機能を追加したいです。Chart.jsを使って、月別の収支推移を線グラフで、カテゴリ別支出を円グラフで表示したいです。”
Cascade：“Chart.jsを使ったデータ可視化を実装しましょう！以下のグラフを作成します：
**実装するグラフ：**
1. 線グラフ：月別収支推移
2. 円グラフ：カテゴリ別支出割合
3. 棒グラフ：カテゴリ別予算vs実支出
4. ドーナツグラフ：収入源別内訳レスポンシブ対応で、モバイルでも見やすくします。”
Chart.js実装例
// 月別収支推移グラフ
function createMonthlyChart(data) {
const ctx = document.getElementById('monthlyChart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: data.months,
datasets: [{
label: '収入',
data: data.income,
borderColor: '#4CAF50',
backgroundColor: 'rgba(76, 175, 80, 0.1)',
tension: 0.4
}, {
label: '支出',
data: data.expense,
borderColor: '#F44336',
backgroundColor: 'rgba(244, 67, 54, 0.1)',
tension: 0.4
}]
},
options: {
responsive: true,
interaction: {
intersect: false,
},
scales: {
y: {
beginAtZero: true,
ticks: {
callback: function(value) {
return '¥' + value.toLocaleString();
}
}
}
},
plugins: {
tooltip: {
callbacks: {
label: function(context) {
return context.dataset.label + ': ¥' +
context.parsed.y.toLocaleString();
}
}
}
}
}
});
}🔧 開発効率を上げるCascade活用テクニック
⚡ 高速開発のコツ
1. テンプレート生成を活用
効率的な依頼：“React の ToDoアプリコンポーネントの基本構造を作って。useState、useEffect を使って、TypeScript で型定義も含めて。”
2. コード レビューを依頼
品質向上：“このJavaScriptコードをレビューして、パフォーマンス改善点、セキュリティ問題、ベストプラクティスからの逸脱があれば指摘してください。”
3. バグ修正を効率化
デバッグ支援：“このエラーが発生しています：[エラーメッセージ]。ファイル構成は[構成説明]です。原因と修正方法を教えてください。”
🎨 デザインパターンの活用
よく使うデザインパターン
- MVC パターン：Model-View-Controller の分離
- Observer パターン：イベント駆動の実装
- Factory パターン：オブジェクトの生成管理
- Singleton パターン：アプリ状態の一元管理
パターン適用の依頼：“このコードを MVC パターンで再構築してください。Model でデータ管理、View で表示、Controller でロジックを分離したいです。”
📱 レスポンシブデザインの実装
🎯 モバイルファーストアプローチ
レスポンシブ対応の依頼：“作成したアプリをモバイルフレンドリーにしてください。タッチ操作を考慮して、ボタンサイズを大きくし、スワイプ操作にも対応させたいです。”
実装される機能
- 📱 タッチ最適化：44px以上のタッチターゲット
- 👆 スワイプ操作：左右スワイプでページ切り替え
- 📐 フレキシブルレイアウト：画面サイズに応じた調整
- 🔤 読みやすいフォント：モバイル向けタイポグラフィ
🚀 デプロイとホスティング
🌐 無料ホスティングサービス
推奨サービス
| サービス | 特徴 | 適用場面 |
|---|---|---|
| GitHub Pages | Git連携、簡単デプロイ | 静的サイト、ポートフォリオ |
| Vercel | 高速、React最適化 | モダンWebアプリ |
| Netlify | フォーム処理、Functions | フルスタックアプリ |
| Surge.sh | コマンドライン簡単 | プロトタイプ、テスト |
💬 デプロイ方法の相談
デプロイ支援の依頼：“作成したToDoアプリをVercelにデプロイしたいです。手順と、本番環境での注意点を教えてください。”
Cascade：“Vercelへのデプロイ方法を説明します！
**デプロイ手順：**
1. GitHubリポジトリの準備
2. Vercelアカウント作成
3. プロジェクトのインポート
4. 自動ビルド設定
5. カスタムドメイン設定（オプション）**本番環境での注意点：**
– 環境変数の設定（APIキーなど）
– HTTPSの確認
– パフォーマンス最適化
– エラーハンドリングの強化詳細な手順をステップバイステップで説明しますね。”
🎯 次のレベルへ：Part4の予告
🔮 Part4で学ぶ内容
- 🎨 高度なUI/UX：アニメーション、マイクロインタラクション
- ⚡ パフォーマンス最適化：Lighthouse スコア改善
- 🧪 テスト実装：Jest、Cypress での自動テスト
- 🔄 状態管理：Redux、Zustand の活用
- 📦 バンドル最適化：Webpack、Vite の設定
- 🔒 セキュリティ：XSS、CSRF 対策
✅ Part3完了チェックリスト
達成すべきスキル
- □ ToDoアプリを独力で作成できる
- □ API を使った外部データ取得ができる
- □ Chart.js でデータ可視化ができる
- □ レスポンシブデザインを実装できる
- □ ローカルストレージでデータ永続化ができる
- □ エラーハンドリングを適切に実装できる
- □ GitHub Pages でデプロイできる
💡 咲耶からのアドバイス
🌱 継続的な成長のために
実践の重要性
今回作ったアプリは、ただ作っただけで終わらせないでくださいね〜
- 日常で使う：ToDoアプリは実際に使って改善点を見つける
- 友達に見せる：フィードバックをもらって改良
- 機能追加：新しいアイデアを少しずつ実装
- コードを見直す：1週間後に読み返して改善
学習の深化
表面的な理解ではなく、深く学ぶことが大切です：
- 「なぜ」を追求：なぜこのコードが必要なのか理解
- 別の方法を探る：同じ機能を違うアプローチで実装
- エラーと向き合う：エラーから学ぶ姿勢
- ベストプラクティス：業界標準の書き方を身につける
🤝 コミュニティとの関わり
- 作品を公開：GitHub で積極的にシェア
- 質問を恐れない：分からないことは素直に聞く
- 他の人を助ける：学んだことを後輩に教える
- イベント参加：勉強会やハッカソンに挑戦
🎉 まとめ：実用アプリの作成マスター
Part3では、実際に使える5つのWebアプリケーションを通じて、Vibe Codingの実践的なスキルを身につけました。
🏆 習得したスキル：
- JavaScript の実用的活用：DOM操作、イベント処理、非同期処理
- API連携：外部サービスとのデータ交換
- データ可視化：Chart.js を使ったグラフ作成
- ローカルストレージ：ブラウザでのデータ永続化
- レスポンシブデザイン：モバイル対応のUI設計
- エラーハンドリング：堅牢なアプリケーション作成
これらのスキルがあれば、もうVibe Coding初心者ではありません。実用的なアプリケーションを作れる、立派な中級者です〜💕
次回Part4では、さらに高度な技術とプロフェッショナルな開発手法について学んでいきましょうね！
🎁 無料メルマガで実践プロジェクト情報をゲット！
新しいプロジェクトアイデアや実装テクニック、業界の最新動向を、イケハヤさんがいち早くお届けします。実際のコード例や解説動画も定期配信中ですよ〜！
🌸 Vibe Codingサロンで実践練習しよう
“作ったアプリをレビューしてほしい…””API連携でつまづいた…””もっと高度な機能を実装したい…”そんな方のためのコミュニティです。メンバー同士で作品をシェアしたり、一緒に新しいプロジェクトに挑戦したりできますよ。私もいつもサロンで皆さんの質問にお答えしています〜
次回Part4では「🎨 Windsurf上級テクニック｜パフォーマンス最適化とプロフェッショナル開発」をお届けします。今回作ったアプリをさらにレベルアップさせていきましょうね〜
最後まで読んでくださって、本当にありがとうございました💕
Happy Practical Vibe Coding! 🚀✨
コメント