初心者が覚えるターミナルの使い方クイズ集『TERMINAL-Q』　 : KNN KandaNewsNetwork 4knn.tv

ターミナル初心者が覚えることをクイズ形式で学べるアプリ

『TERMINAL-Q』

https://claude.ai/public/artifacts/e2ee05b0-b6f2-4b7a-ad8a-040887a1d248

まずは、ClaudeCodeでつくってみた…要件定義しないで作ると…ああ、こっちじゃないんだなぁ的なものに…。

そこで、　Google AI studio　で無料で使えるAIでアプリの要件をべらべらと音声入力…。

ターミナルを使い始めた初心者プログラマーなんですが、ターミナルのコマンドを覚えたいのと、後はターミナルのコマンドの意味語源も含めて勉強をするための教科書ではつまらないのでクイズアプリを作りたいと考えています。例えばPWこれを僕はパスワードと覚えているんですが、本来の意味とは違うんですが、これによって自分のパスいるところがわかるようになりました。基本的にMacOSで使っているので、MacOSを限定としてターミナルの使い方をクイズ形式で学べるようにしたいと思います。4択だと迷うのが大きすぎるので、3択で1問選びそれぞれの間違いの意味も解説できればと思います。基本的なLSコマンドもしくはコマンドとかターミナルでフラン使うコピーだったりとかメイクディレクトリー後は何かなぁCA TキャットだったりとかVSコードを立ち上げるコードであったり、コピーコマンドとメイクディレクトリーのコマンドまずはコマンドのあたりをクイズで説明していく。そして空白がとても大事なのと日本語を打つ場合はダブルで区切らないとダメとかそんな感じですね。後はターミナルから抜け出すためのコマンドもしくはこれは僕が知らなかったんですが、ターミナルって同時にいくつも開くことができるのを知らなくて、知ったときにはすごいショックを衝撃を受けました。まずこういうティップスも含めてティップスシュも欲しいですね。ターミナルは1個しか開くことができないイエスのみたいなものもありですし、ターミナルのコマンドを打って作業すると、ずらずらと行がたくさん出てくるので、それをリスト表示で見せたりとか、Macだとコマンド印の上で先程のコマンドに戻ることができたりとか、矢印の上だけで直前の打ったコマンドを参照することができたとか、こういうちっちゃなティップスなんですが、知らないことがたくさんまだまだありそうなので、それらを調べてもらってクイズのアプリにしてもらいたいです。アプリ形式は独自のダウンロードが必要なアプリではなく、誰もがウェブサイトにアクセスすると、URLだけですぐに確かめられるアプリにしたいです。そしてデザインはピンクを基調としたCNのデザインでモダンな現代的なウェブアプリにしてください。一旦これをYAML形式で要件定義にしてください。

するとこのように…

application:
  name: "macOS Terminal Explorer Quiz"
  description: "初心者プログラマー向けのmacOSターミナルコマンド学習用Webクイズアプリ。コマンドの基本的な使い方、語源、そして便利なTIPSを3択形式で楽しく学べます。ピンクを基調としたモダンなデザインで、画面のゆらぎやグリッチ効果もあり、　URLアクセスのみで利用可能です。"
  type: "Web Application"
  access_method: "URLベースでのアクセス、ダウンロード不要"

design:
  theme: "Modern Web Application"
  color_palette: "ピンクを基調としたKNN風デザイン" # KNNデザインとは、モダンで洗練されたシンプルなデザインを指すと解釈します。
  ui_principles: "直感的、クリーン、レスポンシブ"

user_roles:
  - role: "Beginner Programmer"
    description: "ターミナルコマンドの学習を始めたばかりのユーザー、特にmacOS環境のユーザー。"

features:
  - feature: "クイズモジュール"
    description: "インタラクティブなコマンド学習クイズ。"
    details:
      - item: "出題形式"
        spec: "3択問題"
      - item: "解説"
        spec: "正解の選択肢だけでなく、不正解の選択肢についてもその間違いの理由や補足説明を提示。"
      - item: "学習内容"
        spec: "基本的なmacOSターミナルコマンドとその使い方、コマンドの語源や本来の意味。"
      - item: "主要コマンド例"
        spec: "ls, cd, cp, mkdir, cat, code (VS Code起動), exit"
      - item: "概念問題"
        spec: "コマンドにおける空白の重要性、日本語（マルチバイト文字）入力時のダブルクォート利用ルールなど。"
      - item: "例題のコンセプト"
        spec: "例: `pwd`コマンドの語源は'Print Working Directory'であり、'password'ではないことを解説。"

  - feature: "ターミナルTIPS集モジュール"
    description: "ターミナルをより効果的に使うためのヒントや豆知識を提供。"
    details:
      - item: "複数ターミナルウィンドウ"
        spec: "同時に複数のターミナルウィンドウ（タブ）を開いて作業できることの紹介。"
      - item: "コマンド履歴"
        spec: "上下矢印キーで過去に実行したコマンドを参照・再利用する方法。"
      - item: "長い出力の表示"
        spec: "大量の出力結果をページ単位で表示する方法 (例: `| less` の利用など、具体的なコマンド操作はクイズ内またはTIPSで紹介)。"
      - item: "一般的な誤解の解消"
        spec: "例: 'ターミナルは1つしか開けない'といった誤解を問う形式。"

technical_requirements:
  - requirement: "フロントエンド技術"
    spec: "HTML5, CSS3, JavaScript (モダンなフレームワーク/ライブラリの使用を推奨、例: React, Vue, Svelteなど)"
  - requirement: "バックエンド技術"
    spec: "不要（完全にクライアントサイドで動作するSPA形式）。"
  - requirement: "デプロイメント"
    spec: "静的ホスティングサービス (例: GitHub Pages, Netlify, Vercel) によるURLベースでの提供。"
  - requirement: "プラットフォーム限定"
    spec: "macOSターミナルに特化した内容。"
  - requirement: "レスポンシブデザイン"
    spec: "様々なデバイス（デスクトップ、タブレット、スマートフォン）で適切に表示されること。"

development_notes:
  - note: "クイズコンテンツはJSONなどのデータ形式で管理し、追加・編集が容易な構造とする。"
  - note: "ユーザーが誤解しやすいポイント（例: `pwd`と`password`）を積極的に問題に組み込む。"
  - note: "「空白がとても大事」「日本語を打つ場合はダブルで区切らないとダメ」といった具体的なユーザーの要望をTIPSやクイズ問題に反映させる。"

これをAnthoropic Claude.appにペーストする…。

最初は、こんなシンプルな画面をだしてきてくれました。

そこで、Claudeコードが最初に提案してくれたレトロモダンなデザインを添付してデザインをし直しをリクエスト。しかしClaudeのメッセージ文字制限にかかりそうです。

毎日毎日おびただしい文字数の音声入力をしているため、毎日利用期限に達している状態ですｗ

https://claude.ai/public/artifacts/e2ee05b0-b6f2-4b7a-ad8a-040887a1d248

関連