▍AI Dev Lab
CmdDojo

CmdDojo ができるまで — ブラウザで動く Linux コマンド練習

インストール不要のLinuxコマンド練習サービス。不変FSと純粋関数コマンドエンジンの設計、HackSimとの技術的差別化、詰まったバグを全公開。

·decision改善·stage検証中

#title: "CmdDojo 開発ログ: Linux コマンド入門をブラウザだけで練習できる形へ" description: "CmdDojo を、Linux コマンドを記事で読むだけで終わらせない学習サービスとして改善した記録。入門コース、ファイル操作コース、設計意図、SEO の考え方まで整理します。" publishedAt: "2026-05-01"

#実行結果と途中再開を一致させる

全9レッスン・32課題の採点を、入力文字列だけでなく実コマンドの成否・対象パス・必要なオプション・作成や削除後の状態に結び付けました。コピー元が消えていたり、違う場所を一覧にしたり、検索結果がなかったりする実行を正解にしません。引用符付きの名前、同じ対象の相対・絶対パス、head -n 5 と head -n5 を扱います。絶対パスを求める課題はその指定も確認します。

理解度クイズの最後に、コマンド演習の得点画面へ戻って結果が消えていた遷移も修正しました。クイズの正解数を独立して表示し、演習の保存得点とは混ぜません。

#クイズの回答を、レッスンごとに持ち帰る

点数だけでは、どの理解が不足していたかを後から確認できません。完了画面に全問題の「自分の回答・正答・解説」を追加し、間違えた問題だけにも絞れるようにしました。問題番号は教材の順番のまま、表示件数と誤答件数を区別します。満点なら誤答一覧は空であることを伝え、全問題に戻って復習できます。色だけで正誤を示さず「正解・不正解」の文字を添えています。

復習は今回の保存済み回答から表示し、過去の最高得点の回答を推測しません。再読み込み後も同じ回答・正答・解説を確認できます。絞り込みは表示だけの操作で、採点や保存を書き換えません。再挑戦すると今回の回答は置き換わるため、過去の全挑戦履歴を残す機能ではありません。既存の暗い問題カードと緑・青の色を維持し、回答は折り返してスマートフォンでも読めるようにしています。

クイズ回答・問題位置・表示画面・確定結果を専用の端末保存に追加しました。選んだ直後の回答と解説も、次の問題へ進んだ状態も再開できます。回答後は変更できず、結果確定後も今回の正解数を固定します。再挑戦の結果が低くても過去の最高正解数は下げず、演習の得点とは混ぜません。演習結果へ戻ってから再びクイズを開くこともできます。

教材の問題・選択肢・正解が変わっていれば古い回答を別の問題に流用しません。不正な問題位置、飛ばした回答、未知の問題、範囲外の選択肢も復元を拒否し、元データを勝手に上書きしません。読み込みの再試行と確認付き初期化を用意し、全体が壊れている場合は他レッスンのクイズ記録も消えることを明示します。演習の保存は別のため変更しません。容量不足では、状態は画面内だけに残っていて保存できていないことを知らせ、保存を再試行できます。

既存の教材コンソールに合わせ、暗い背景・緑と青のアクセント・等幅表示を維持し、保存案内は小さな状態パネルにまとめています。複数端末への同期、複数タブの同時編集、学習成果の認証ではありません。

レッスンごとに作業中のファイル、現在位置、入力履歴、ログを進捗と一緒に端末へ保存します。以前の保存には教材そのものが含まれていないため、達成済み課題の基準操作から教材を再構築し、その旨を知らせます。過去の自由操作やログの復元、過去成績の再認証ではありません。不正な新形式の教材は復元したふりをせず操作を止め、明示的にやり直せます。教材を初期化すると今回の進捗だけを戻し、他のレッスンと最高得点は保持します。

これは限定された仮想教材で、実際のLinuxシェルではありません。find は現在地以下の名前部分一致という教材独自の簡略構文です。正規表現、パイプ、変数展開、リダイレクトや複数ファイル引数には対応しません。未対応の入力はエラーとして知らせ、黙って一部だけを実行しません。

#Linuxコマンドを覚えたいけど、環境構築で止まりやすい

Linux コマンドは学習需要がずっとあります。 ただ、最初の壁は意外とコマンドそのものではありません。

  • 何をどの順番で覚えればいいか分からない
  • WSL や VM の準備で止まる
  • 記事を読んでも、手を動かさないまま終わる
  • 実際に打ってみる場がない

CmdDojo は、この「読むだけで終わる」状態を減らすために作っています。

ブラウザだけで Linux コマンドを入力し、その場で正誤と進捗が返ってくる。 まずはそこまでを最短で用意する、というのが今回の改善テーマでした。

#いま公開しているコース

#1. Linuxコマンド入門

最初の公開コースです。

  • pwd
  • ls
  • cd
  • cat
  • grep

「今どこにいるか」「何があるか」「どう移動するか」「どう読むか」「どう探すか」という、最初に必要になりやすい流れを 5 レッスンに分けています。

#2. ファイル探索と整理

2本目として追加したコースです。

  • find
  • head
  • cp
  • mv
  • rm

こちらは、基礎の次に必要になりやすいファイル操作へ寄せています。 実務では「場所を探す」「中身を少しだけ見る」「複製する」「移動する」「不要なものを消す」が頻繁に出るので、検索意図にも合いやすい内容です。

#記事ではなく、入力までつなぐ

CmdDojo の狙いは、単なるコマンド一覧を増やすことではありません。

一般的な入門記事は、理解のきっかけとしては強いです。 ただ、そのまま「分かった気がする」で終わることも多いです。

このサービスでは、

  • 1レッスンを短く切る
  • その場で入力させる
  • 正解を返す
  • クイズで確認する
  • 次レッスンへつなぐ

という流れを入れています。

つまり、読むコンテンツではなく、小さく入力して覚える学習ツールとして設計しています。

#今回の改善ポイント

今回の改善では、見た目だけではなく公開価値に直結する部分を優先しました。

#公開面の修正

  • cmd-dojo のランディングを、用途が分かる説明に変更
  • コースページとレッスンページの文言を正常化
  • 完了後にクイズ、次レッスン、コース一覧、開発ログへ戻れる導線を追加
  • サービス一覧や内部導線で見ても意味が通る文言に整理

#教材データの修正

  • 入門コースの 5 レッスンを clean な日本語に修正
  • 2本目の公開コースとして「ファイル探索と整理」を追加
  • find / head / cp / mv / rm の練習課題とクイズを実装

#実装面の修正

  • find のパス計算バグを修正
  • ターミナル入力欄や完了画面の文字化けを修正
  • E2E テストに 2 本目の公開コース確認を追加

#SEO の考え方

CmdDojo は共有よりも検索で伸ばす前提が強いサービスです。

狙っているのは、たとえば次のような意図です。

  • Linux コマンド 練習
  • Linux コマンド 初心者
  • Linux コマンド 入門
  • LPIC 勉強前 コマンド
  • ブラウザ Linux 学習

この手の検索は、記事単体でも取れます。 ただ、記事だけだと学習が終わらず、サービスの再訪にもつながりにくいです。

だからこそ、

  • 記事からサービスへ戻す
  • サービスから次のコースへ進ませる
  • レッスン完了後にクイズと次の導線を置く

という回遊を重視しています。

#まだ足りないこと

まだ完成ではありません。今後は次を優先します。

  1. コース数を増やす
  2. 難易度の見せ方を強くする
  3. LPIC / LinuC 手前の検索意図に合わせた記事を増やす
  4. 入門後にどこへ進むべきかの道筋をもっと分かりやすくする

特に、学習系サービスは「最初の数ページだけある」状態だと弱いです。 このまま教材の厚みと検索導線を増やして、主力候補まで持っていけるかを見ます。

#まとめ

CmdDojo は、Linux コマンドを記事で読むだけで終わらせないための学習サービスです。

今回の改善で、

  • 文字化けしていた公開面を正常化
  • 入門コースを整理
  • 2 本目の公開コースを追加
  • クイズと回遊導線を強化

まで進めました。

まだ「改善枠」ではありますが、検索流入と継続利用の両面で伸ばせる余地はあります。 この先は、教材の厚みと記事導線を積み上げながら、主力に上げる価値があるかを見ていきます。

[ ./next_action ]

読んだら、 CmdDojo を実際に動かす。

この開発ログは CmdDojo をどう作ったかの記録です。 読み終わったらそのままサービス本体へ戻って、 実物で価値を確かめてください。

[ ./related_logs ]

関連する開発ログ

all logs →
ShadowTwin

立体パズルの別解を作る:同じ影と最少の積み木

ShadowTwinの開発記録。3方向の図から別々の最少配置を2つ探す仕組み、5問の独立全探索、スマホの横並び比較、保存・再編集と入力検査を解説します。実照明の計算や能力診断ではありません。

read log →
SlitCard

スリットアニメーションを作る:4コマの合成と透明原稿の設計

SlitCardの開発記録。4コマの帯を交互に合成し、すき間と黒帯で別のコマを見せる仕組みを解説。同縮尺の台紙・透明シートSVG、50mm確認線、手動プレビュー・初期非表示、再編集と実出力検査を整理します。

read log →
WindowLight

日当たりシミュレーションを作る:窓の光を床へ投影する幾何モデル

WindowLightの開発記録。太陽位置近似から窓の4隅を床へ投影し、凸多角形を部屋で切り取る設計を解説。国立天文台の16時刻との限定照合、大気差・低高度・実際の採光との違い、SVGと設定の再編集を整理します。

read log →
GridLights

電源構成の比較を作る:割合と実量を100個の電球で読み解く

電源構成比較GridLightsの開発記録。12か国の年次発電データを最大剰余法で100個の電球に変換し、割合とTWhを比較する設計を解説。欠損を0補完しない7分類、予想と実値、出典付きSVGと実データ検証を整理します。

read log →
SoundLoom

音のお絵かきを作る:実WAVから絵を測り直す設計

音のお絵かきの開発記録。描画を正弦波のPCMとWAVへ変換し、保存音声の周波数をGoertzel法で測って比較する仕組みを解説。音量・測定窓・量子化の限界と、編集・離脱時の古い結果を抑止する検証を整理します。

read log →
MazeLoom

宝探し迷路を作る:寄り道まで含めた最短ルートの探索

宝探し迷路の開発記録。通路を木として生成し、現在地と3つの宝の取得状態を組み合わせて最短ルートを探す仕組みを解説。問題コードの版固定、画面と解答付きPDFの一致、手数と印刷の検証を整理します。

read log →