JS Fundamentals CLI / JS基礎コース

English | 日本語

📚 Interactive command-line tool to learn JavaScript fundamentals through hands-on coding challenges

Features • Installation • Usage • Course Structure • Contributing

English

🎯 Features

• 📝 15 Comprehensive Lessons - From variables to advanced array methods and objects
• 💻 Editor Integration - Write code in your favorite editor (Neovim/Vim/VS Code)
• ✅ Auto-graded Challenges - Get instant feedback with our sophisticated test runner
• 🌐 Bilingual Support - Full English and Japanese language support
• 📊 Progress Tracking - Your progress is automatically saved
• 🎨 Beautiful CLI Interface - Colorful and engaging terminal experience
• 🚀 Professional UX - Intuitive navigation and clear feedback

📦 Installation

Quick Start

# Clone the repository
git clone https://github.com/a-lost-social-misfit/js-fundamentals-cli
cd js-fundamentals-cli

# Install dependencies
npm install

# Run the application
npm start

Global Installation

# Install globally
npm install -g .

# Run from anywhere
js-fundamentals

🛠 Requirements

• Node.js 14 or higher
• Terminal - WezTerm, iTerm2, Terminal.app, or any modern terminal
• Text Editor - Set your $EDITOR environment variable

Editor Setup

The app uses your system's default editor. To set it to Neovim:

# Temporary (current session)
export EDITOR=nvim

# Permanent (add to ~/.zshrc or ~/.bashrc)
echo 'export EDITOR=nvim' >> ~/.zshrc
source ~/.zshrc

📚 Course Structure

Episode 1: Fundamentals ✅ (Complete)

| Lesson | Topic | Challenges | |--------|-------|-----------| | 1 | Variables & Declarations | 3 | | 2 | Data Types | 4 | | 3 | Operators | 4 | | 4 | Strings & Template Literals | 4 | | 5 | Conditionals (if/else) | 4 | | 6 | Loops Part 1 (for & while) | 4 | | 7 | Loops Part 2 (for...of, break, continue) | 4 | | 8 | Functions Part 1 (Declarations & Expressions) | 4 | | 9 | Functions Part 2 (Arrow Functions & Scope) | 4 | | 10 | Arrays Part 1 (Basics & Methods) | 4 | | 11 | Arrays Part 2 (map, filter, reduce) | 4 | | 12 | Objects Part 1 (Basics) | 4 | | 13 | Objects Part 2 (Methods & Destructuring) | 4 | | 14 | Switch Statements | 4 | | 15 | Final Challenge | 5 |

Total: 15 lessons, 60 challenges

🚧 Coming Soon

• Episode 2: DOM Manipulation & Events
• Episode 3: Async JavaScript, Promises & APIs
• Episode 4: Modern JavaScript (ES6+)

🎮 How to Use

1. Start the App

   npm start

2. Choose Your Language

   • English or 日本語 (Japanese)

3. Select a Lesson

   • Continue from where you left off
   • Or choose any lesson from the menu

4. Learn & Practice

   • Read lesson content and examples
   • Start coding challenges
   • Write code in your editor
   • Get instant feedback

5. Track Progress

   • View your completion status
   • See scores and achievements

🏗 Project Structure

js-fundamentals-cli/
├── data/
│   └── user-progress.json      # Your progress data
├── lessons/
│   ├── 01-variables-i18n.js    # Lesson files
│   ├── 02-data-types-i18n.js
│   └── ...
├── locales/
│   ├── en.json                 # English translations
│   └── ja.json                 # Japanese translations
├── utils/
│   ├── i18n.js                 # Internationalization
│   ├── progress.js             # Progress tracking
│   ├── runner.js               # Code execution & testing
│   └── ui.js                   # UI components
├── index.js                    # Main application
├── package.json
└── README.md

🔧 Technology Stack

• Node.js - Runtime environment
• inquirer - Interactive CLI prompts
• chalk - Terminal colors and styling
• boxen - Beautiful boxes in terminal
• figlet - ASCII art for titles
• vm - Safe code execution sandbox

🎓 Key Features Explained

🔒 Safe Code Execution

Your code runs in a secure sandbox using Node.js's vm module. We transform const/let declarations to ensure proper variable access during testing.

✅ Intelligent Test Runner

• Automatic code evaluation
• Detailed error messages
• Multiple test cases per challenge
• Instant feedback

💾 Progress Tracking

Your progress is automatically saved to data/user-progress.json:

• Completed lessons
• Challenge scores
• Last accessed lesson
• Timestamps

🌐 Bilingual Support

Complete English and Japanese support:

• UI messages
• Lesson content
• Challenge descriptions
• Error messages
• Test feedback

🎨 Screenshots

    ╦╔═╗  ╔═╗╦ ╦╔╗╔╔╦╗╔═╗╔╦╗╔═╗╔╗╔╔╦╗╔═╗╦  ╔═╗
    ║╚═╗  ╠╣ ║ ║║║║ ║║╠═╣║║║║╣ ║║║ ║ ╠═╣║  ╚═╗
   ╚╝╚═╝  ╚  ╚═╝╝╚╝═╩╝╩ ╩╩ ╩╚═╝╝╚╝ ╩ ╩ ╩╩═╝╚═╝
   
   📚 Learn JavaScript fundamentals through interactive lessons
   Built for developers who love the terminalWhat would you like to do?


❯ 📚 Continue Learning
  🎯 Select a Lesson
  📊 View Progress
  🌍 Change Language (English)
  ❌ Exits

🤝 Contributing

Contributions are welcome! Here's how you can help:

Adding a New Lesson

1. Create a new file in lessons/:

   const lesson = {
     id: 16,
     title: {
       en: "Your Lesson Title",
       ja: "レッスンタイトル"
     },
     description: {
       en: "Lesson description...",
       ja: "レッスンの説明..."
     },
     // ... examples and challenges
   };
      
   module.exports = lesson;

2. Add translations to locales/en.json and locales/ja.json

3. Update the lessons array in index.js

4. Test your lesson:

   npm start

Improving Existing Content

• Fix typos or grammar
• Improve explanations
• Add more examples
• Enhance challenge descriptions
• Add better error messages

Technical Improvements

• Bug fixes
• Performance optimizations
• UI/UX enhancements
• New features

Translation

• Add support for new languages
• Improve existing translations

📖 Development

# Install dependencies
npm install

# Run in development
npm start

# Run with debug output
DEBUG=* npm start

# Lint code (if configured)
npm run lint

🐛 Known Issues & Solutions

Issue: Editor doesn't open

Solution: Set your $EDITOR environment variable:

export EDITOR=nvim  # or vim, code, etc.

Issue: Tests always fail

Solution: Make sure you're using const or let for variable declarations (not var).

Issue: Progress not saving

Solution: Check that the data/ directory exists and is writable.

📝 License

MIT License - see LICENSE file for details

🙏 Acknowledgments

• Inspired by interactive learning platforms like freeCodeCamp
• Built with modern Node.js tools and best practices
• Community contributions and feedback

📮 Contact & Support

• 🐛 Bug Reports: Open an issue
• 💡 Feature Requests: Start a discussion
• 📧 Email: [email protected]

日本語

🎯 特徴

• 📝 15の包括的なレッスン - 変数から高度な配列メソッドとオブジェクトまで
• 💻 エディタ統合 - お気に入りのエディタでコードを書ける（Neovim/Vim/VS Code）
• ✅ 自動採点チャレンジ - 洗練されたテストランナーで即座にフィードバック
• 🌐 バイリンガル対応 - 完全な英語と日本語のサポート
• 📊 進捗管理 - 進捗は自動的に保存されます
• 🎨 美しいCLIインターフェース - カラフルで魅力的なターミナル体験
• 🚀 プロフェッショナルなUX - 直感的なナビゲーションと明確なフィードバック

📦 インストール

クイックスタート

# リポジトリをクローン
git clone https://github.com/a-lost-social-misfit/js-fundamentals-cli
cd js-fundamentals-cli

# 依存関係をインストール
npm install

# アプリケーションを実行
npm start

グローバルインストール

# グローバルにインストール
npm install -g .

# どこからでも実行可能
js-fundamentals

🛠 必要要件

• Node.js 14以上
• ターミナル - WezTerm、iTerm2、Terminal.app、または任意のモダンなターミナル
• テキストエディタ - $EDITOR環境変数を設定

エディタの設定

アプリはシステムのデフォルトエディタを使用します。Neovimに設定するには：

# 一時的（現在のセッション）
export EDITOR=nvim

# 永続的（~/.zshrcまたは~/.bashrcに追加）
echo 'export EDITOR=nvim' >> ~/.zshrc
source ~/.zshrc

📚 コース構成

エピソード1：基礎編 ✅（完成）

| レッスン | トピック | チャレンジ数 | |---------|---------|------------| | 1 | 変数と宣言 | 3 | | 2 | データ型 | 4 | | 3 | 演算子 | 4 | | 4 | 文字列とテンプレートリテラル | 4 | | 5 | 条件分岐（if/else） | 4 | | 6 | ループ Part 1（for & while） | 4 | | 7 | ループ Part 2（for...of、break、continue） | 4 | | 8 | 関数 Part 1（宣言と式） | 4 | | 9 | 関数 Part 2（アロー関数とスコープ） | 4 | | 10 | 配列 Part 1（基礎とメソッド） | 4 | | 11 | 配列 Part 2（map、filter、reduce） | 4 | | 12 | オブジェクト Part 1（基礎） | 4 | | 13 | オブジェクト Part 2（メソッドと分割代入） | 4 | | 14 | Switch文 | 4 | | 15 | 最終チャレンジ | 5 |

合計： 15レッスン、60チャレンジ

🚧 近日公開

• エピソード2： DOM操作とイベント
• エピソード3： 非同期JavaScript、PromiseとAPI
• エピソード4： モダンJavaScript（ES6+）

🎮 使い方

1. アプリを起動

   npm start

2. 言語を選択

   • English または 日本語

3. レッスンを選択

   • 前回の続きから始める
   • またはメニューから任意のレッスンを選択

4. 学習と実践

   • レッスン内容と例を読む
   • コーディングチャレンジを開始
   • エディタでコードを書く
   • 即座にフィードバックを受け取る

5. 進捗を追跡

   • 完了状況を確認
   • スコアと達成度を見る

🏗 プロジェクト構成

js-fundamentals-cli/
├── data/
│   └── user-progress.json      # 進捗データ
├── lessons/
│   ├── 01-variables-i18n.js    # レッスンファイル
│   ├── 02-data-types-i18n.js
│   └── ...
├── locales/
│   ├── en.json                 # 英語翻訳
│   └── ja.json                 # 日本語翻訳
├── utils/
│   ├── i18n.js                 # 国際化
│   ├── progress.js             # 進捗管理
│   ├── runner.js               # コード実行とテスト
│   └── ui.js                   # UIコンポーネント
├── index.js                    # メインアプリケーション
├── package.json
└── README.md

🔧 技術スタック

• Node.js - ランタイム環境
• inquirer - インタラクティブなCLIプロンプト
• chalk - ターミナルの色とスタイリング
• boxen - ターミナル内の美しいボックス
• figlet - タイトル用のASCIIアート
• vm - 安全なコード実行サンドボックス

🎓 主要機能の説明

🔒 安全なコード実行

コードはNode.jsのvmモジュールを使用した安全なサンドボックスで実行されます。テスト中の適切な変数アクセスを保証するため、const/let宣言を変換します。

✅ インテリジェントなテストランナー

• 自動コード評価
• 詳細なエラーメッセージ
• チャレンジごとの複数のテストケース
• 即座のフィードバック

💾 進捗管理

進捗はdata/user-progress.jsonに自動的に保存されます：

• 完了したレッスン
• チャレンジのスコア
• 最後にアクセスしたレッスン
• タイムスタンプ

🌐 バイリンガルサポート

完全な英語と日本語のサポート：

• UIメッセージ
• レッスン内容
• チャレンジの説明
• エラーメッセージ
• テストのフィードバック

🤝 コントリビューション

コントリビューションを歓迎します！協力方法：

新しいレッスンの追加

1. lessons/に新しいファイルを作成：

   const lesson = {
     id: 16,
     title: {
       en: "Your Lesson Title",
       ja: "レッスンタイトル"
     },
     description: {
       en: "Lesson description...",
       ja: "レッスンの説明..."
     },
     // ... 例とチャレンジ
   };
      
   module.exports = lesson;

2. locales/en.jsonとlocales/ja.jsonに翻訳を追加

3. index.jsのlessons配列を更新

4. レッスンをテスト：

   npm start

既存コンテンツの改善

• タイポや文法の修正
• 説明の改善
• 例の追加
• チャレンジの説明の改善
• より良いエラーメッセージの追加

技術的改善

• バグ修正
• パフォーマンスの最適化
• UI/UXの改善
• 新機能の追加

翻訳

• 新しい言語のサポート追加
• 既存の翻訳の改善

📖 開発

# 依存関係をインストール
npm install

# 開発モードで実行
npm start

# デバッグ出力付きで実行
DEBUG=* npm start

🐛 既知の問題と解決策

問題：エディタが開かない

解決策： $EDITOR環境変数を設定：

export EDITOR=nvim  # または vim、code など

問題：テストが常に失敗する

解決策： 変数宣言にconstまたはletを使用していることを確認（varではなく）。

問題：進捗が保存されない

解決策： data/ディレクトリが存在し、書き込み可能であることを確認。

📝 ライセンス

MIT License - 詳細はLICENSEファイルを参照

🙏 謝辞

• freeCodeCampのようなインタラクティブ学習プラットフォームからインスピレーション
• モダンなNode.jsツールとベストプラクティスで構築
• コミュニティのコントリビューションとフィードバック

📮 連絡先とサポート

• 🐛 バグ報告： Issueを開く
• 💡 機能リクエスト： ディスカッションを始める
• 📧 Email： [email protected]

Happy Learning! / 楽しく学習しましょう！ 🚀

Made with ❤️ by the JavaScript Community

⬆ Back to Top