ハクソク

世界を動かす技術を、日本語で。

VIMマスター

271日前原文(github.com)

概要

VIM Master は、ブラウザ上で Vim操作 を学べる軽量ゲーム。 インストール不要で、 index.html を開くだけで即プレイ可能。 主要な Vimコマンドやモーション を短いレベルで習得。 チャレンジモード でスピードと正確性も鍛錬可能。 ローカル実行やコントリビュートも簡単。

VIM Masterの特徴

  • Vim操作習得用ブラウザゲーム

    • index.htmlを開くだけで利用開始
    • デスクトップ推奨（フルキーボード対応）

  • 主要なVimモード・コマンド対応

    • ノーマル/インサートモード切替
    • ステータスバー・コマンドログ表示
    • レベルごとに目標達成で進行
    • サポートコマンド：
      • 移動： h j k l, w b e, gg G, 0 $
      • 削除・コピー・貼り付け： x, dd, dw, yy, p
      • 挿入・追加： i, a, o, O
      • 変更・置換： cw, D, r
      • exコマンド： :q, :wq
      • 数値指定： 3w, 2dd, 5x, 5G など
      • アンドゥ・リドゥ： u, Ctrl+r

  • レベル設計・バリデーション

    • 各レベルでカーソル位置やテキスト内容の目標設定
    • 余分な空白や行末は柔軟に判定
    • キーストロークそのものは厳密に問わない

基本操作一覧

  • 移動系コマンド

    • h：左、j：下、k：上、l：右
    • w：次の単語、b：前の単語、e：単語の末尾
    • 0：行頭、$：行末、gg：最初の行、G：最後の行、nG：n行目へ

  • 挿入・追加・新規行

    • i：カーソル位置に挿入、a：後ろに追加
    • o：下に新規行、O：上に新規行

  • 削除・コピー・貼り付け

    • x：文字削除、dd：行削除、dw：単語削除
    • yy：行コピー、p：貼り付け

  • 変更・置換

    • cw：単語変更（削除→インサート）
    • D：行末まで削除
    • r＋任意文字：1文字置換

  • 数値指定

    • 例：3w（3単語進む）、2dd（2行削除）、5x（5文字削除）、5G（5行目へ）

  • アンドゥ/リドゥ

    • u：アンドゥ（元に戻す）、Ctrl+r：リドゥ（やり直し）

  • 挿入モード終了

    • Escキー

チャレンジモード

  • スピード＆正確性重視のゲームモード
    • 指定されたコマンド課題を連続で実行
    • 正解ごとにスコア加算、速さと正確さで最終スコア決定
    • リアルタイムフィードバックで学習効率UP
    • ハイスコア更新を目指す楽しみ

ローカルでの実行方法

  • ビルド不要・即実行

    • リポジトリをクローン後、index.htmlを直接開く

      git clone https://github.com/<your-username>/vimmaster.git
cd vimmaster
# Windows
start index.html
# macOS
open index.html
# Linux
xdg-open index.html

    • ローカルファイルアクセス制限時は静的サーバー利用例

      • npx serve . で起動、表示されたURLにアクセス

技術スタック

  • HTML/CSS/JavaScriptのみ
  • スタイリングはTailwind CDN
  • 依存パッケージやフレームワークなし
  • すべてのロジックとレベル定義はindex.html内

コントリビュートガイド

  • イシュー・PR歓迎
  • コードは可読性重視、軽量な実装を推奨
  • 1レベル1コンセプトの小規模設計を推奨

ライセンス・謝辞

  • MITライセンス
  • Vimのモーダル編集・モーション/オペレーター設計にインスパイア
  • ページ内にASCIIロゴ表示
  • BMAB（Beer and cigs）利用宣言

Hackerたちの意見

こういうちょっとしたチュートリアルやゲーム、めっちゃいいね。VIM Adventuresをやってみたけど、効率的に何かをするタイミングを学ぶのがほんとに苦手なんだ。マーカーとか、デフォルトのレジスタやコマンド以外はほとんど使わないし。システムの授業のためにNeovimを試してみてるけど、こういうゲームがもっと上級者向けのテクニックを学ぶきっかけになればいいなって思ってる。

└

あー、俺はマーカーをめっちゃ使ってるよ。maでマークをつけて、その後にその行まで全部ヤンクしたり削除したりするのが楽だし。13yyとか、何行ヤンクするか考えるよりずっと正確にできるからね。

└

ViMの「今日のメッセージ」スクリプトを作って、シェルに追加したんだ。新しいシェルを開くたびにプロンプトが出るようにしてる（ViMとTmuxでリーダーキーのショートカットを作ったから、頻繁に新しいシェルを開くんだ）。https://github.com/cboppert/motd ちょっといじる必要があるかもしれないけど、その後に他の機能も追加したと思う（複数の設定を一度にダークモードやライトモードに切り替えるトグルスクリプトが好きなんだけど、完全に自動化できたことがないから、状況に応じてgoDarkかgoLightを手動で打たなきゃいけない。面倒くさい！）でも、これは一度に一つのヒントやコマンドをくれるから、あんまり時間をかけずに少しずつ成長できるのがいいよね。

└

vim golfをチェックしてみて。楽しいパズルだけど、普段の使い方に取り入れられる小さな最適化に気づくこともあるよ。

└

効率的に何かをする方法を学ぶことは、hardtime.nvim[1]（古いスタイルならvim-hardtime[2]）がまさにこれを編集セッション内で実現してくれるよ。ワークフローの選択肢の背後にある理由を説明したブログ記事[3]もあるし、自分のやり方を持ち込むこともできるよ。[1]: https://github.com/m4xshen/hardtime.nvim [2]: https://github.com/takac/vim-hardtime [3]: https://m4xshen.dev/posts/vim-command-workflow

vimtutorのこと、全然触れてないのが意外だね。俺の知る限り、vimが入ってるマシンにはプリインストールされてるし。これはクールなプロジェクトだけど、元のコンセプトにも一言触れてほしいな。

└

vimtutorはBabbelに対して、これがduolingoみたいなもんだね。ゲームを通じて学ぶのが好きな人もいれば、教科書的なアプローチを好む人もいるから。正直、vimやemacsをもっと多くの人に使ってもらえるなら、どんな方法でもいいと思ってるよ！

└

実は、これがvimtutorの代わりになることを期待して開いたんだけど、経験者や中級者向けのものってあるのかな？誰かがそういうのを作った気がするんだ。少しずつvimの複雑な機能を学べるようなやつ。オンラインのブログやvimのドキュメントを読んで、いくつかの素晴らしい情報を見つけたよ。おすすめのリポジトリがあったら、ぜひ試してみたいな！

これも始めるのにいいよね：https://www.vim-hero.com/

すごくクールなサイトだね！俺も似たようなプロジェクトを進めてるんだ：https://vimgolf.ai 新しいvimの動きを学ぶために。最近は生活に気を取られちゃってるけど、ちゃんと完成させないと。

└

いいアイデアだね！ちょっと気になるのは、最初の数回のエクササイズをログインなしでできるようにしてくれたら、サインアップする前に試せるからいいなと思った。

└

必要なログインやサインアップ、プライバシーポリシー、オープンソースの欠如は、普通のLinuxユーザーには逆行してる感じがするね。ニッチの中のニッチを狙ってるみたいで、大変そうだな（笑）。

あのスクリーンキャストが流行ってた頃の話だね。http://vimcasts.org/episodes/

面白いアイデアだけど、最初のレベルで挫折したわ。:qaって打つと挿入モードに入っちゃって、コマンド入力をバックスペースで消せないのがつらい。なんとか簡単に直せるといいな。

一般的には、:xa（すべて保存して終了）か、:qa!（すべて破棄して終了）で退出することをおすすめするよ。それぞれZZやZAにバインドしてる。:qや:wqで退出すると、現在のバッファが閉じるだけで、次のバッファに移動しちゃうからね。例えば、エディタと一緒にneotreeを開いてる時に:wqって打つと、エディタのバッファが閉じてファイルツリーに移動しちゃうから、初心者にはすごく混乱すると思う。

└

ただ: wq :wq :wq :wqって打てばいいよね :P

└

Neotreeのclose_if_last_window設定は、このケースに役立つよ。

こんなゲームでvimを学んだんだ。VSCodeの拡張だったけど、名前は忘れちゃった。とにかく、今までの時間投資の中で一番良かったと思う。数日いじってれば、モーダル編集を手放すことはほぼないよ！本当に良い。まだvimマスターにはなれてないけど、基本的な動きやコマンドだけでも手放したくない。マクロやレジスタを追加したら…最高だよ。vimがなかったら、helixを試すこともなかっただろうし、あれは本当にスムーズで摩擦のない編集ができる。セットアップも超簡単だし。

└

俺はまだvimの達人じゃないけど、何十年もvimを使ってる人が知らなかったことができることもあるんだ。まだまだ達人には程遠いけど、TPopeみたいなレベルにどうやって上がるんだろう？冗談はさておき、vimのいいところは、常に学ぶことがあるってことだよね。何かを見逃してるって意味じゃなくて、どんなプログラミング言語にも当てはまることだと思う。これらのツールがすごく柔軟だから、ほとんど何でもできるんだ。

└

"vim game"で検索したら、これしか見つからなかったよ：Vscode Vim Academy https://marketplace.visualstudio.com/items?itemName=kaisun.v... これ、君が使ったやつに似てる？

https://vimsnake.com/で遊んでたら、hjklの筋肉記憶ができたよ。

Vimが何十年も議論されているってことは、それが最高のソフトウェアの一つである証拠だね。