HoshCode

HoshMe

このアプリについて

HoshCodeは、視覚を重視したソフトウェア開発学習プラットフォームです。複雑な技術概念を、受動的な動画やテキストではなく、インタラクティブなアニメーション、アニメーション図、実践的なラボを通して学習します。

🎨 ビジュアル学習エンジン
チュートリアルを見る代わりに、アニメーションによる視覚化を体験できます。
• JavaScriptループビジュアライザー — ループの実行に合わせて変数がリアルタイムで更新される様子を視覚化できます。
• HTTPリクエストライフサイクル — アプリ、バックエンド、データベースを通過するリクエストの流れを視覚化できます。
• Reactコンポーネントツリー — コンポーネントをタップしてプロパティを調べ、状態の伝播を確認できます。
• データベースリレーションシップ — インタラクティブなテーブル検査でER図を探索できます。
• CI/CDパイプライン — デプロイプロセス全体をステップバイステップで視覚化できます。

⏯️ インタラクティブなコントロール
すべてのレッスンには以下が含まれます。
• 再生/一時停止/ステップ操作で、より詳細な探索が可能です。
• 速度調整（0.5倍～2倍）で、自分のペースで学習できます。
• リセットで、どの視覚化も再開できます。
• コードスニペット付きのアニメーション解説
📚 包括的なコース
HoshCodeは、2つの体系的な学習パスを提供しています。

1. AIを活用したモバイルアプリ開発（12週間）

JavaScript → TypeScript → Reactネイティブ → Expo → ナビゲーション → 状態管理 → API → 認証 → デバイス機能 → テスト → Playストアへのデプロイ → AIツール → キャップストーンプロジェクト

2. AIを活用したフルスタック開発（16週間）

フロントエンド：HTML → CSS → JavaScript → TypeScript → React

バックエンド：Python → Django → PostgreSQL → REST API

DevOps：Docker → クラウドデプロイ → CI/CD → セキュリティ

さらに：AIツール統合 → キャップストーンプロジェクト

🔒 安全でパーソナライズされた学習
• JWTトークンによる安全な認証
• すべてのレッスンの進捗状況を追跡
• パーソナライズされた学習ダッシュボード
• ダウンロードしたレッスンへのオフラインアクセス
• ダークテーマとライトテーマに対応

💡 なぜビジュアルラーニングなのか？

研究によると、ビジュアルラーニングは記憶定着率を65%向上させます。HoshCodeは抽象的なプログラミング概念を具体的かつ探求可能なものにすることで、コードの動作だけでなく、その仕組みも理解できるようにします。



こんな方に最適：
✓ プログラミング学習を始めたばかりの初心者
✓ テクノロジー分野への転職を考えている方
✓ 実践的な練習をしたい学生
✓ 最新のフレームワークでスキルアップを目指すプロフェッショナル

今すぐ視覚的に学習を始めましょう。HoshCodeを今すぐダウンロード！

新機能

Five fully interactive lessons are implemented in `src/engine/visualizers/`:
1. JavaScript Loop Visualizer
- Animates array elements as a `for` loop iterates
- Shows index, sum, and condition variables updating in real time
- Color-coded loop phases: init, check, body, increment, done
- SVG loop flow diagram with animated active phase
2. HTTP Request Lifecycle
- Sequence diagram: Mobile App → Django → PostgreSQL → response
- Animated message arrows between actors