小規模なテキストエディタを実装しながらプログラミングとUnit testを学んでみよう
kilo-editorとは
これはなに
これは、kiloをベースにして
非常に小規模なテキストエディタを実装しながら、個人的にテキストエディタの実装を学んだり、
jestを使ったテスト駆動開発の勉強のために作りました。
また、本家はc言語で開発されていましたが、私が慣れているnodejsで実装しました。
なんでこんなものをつくったの
きっかけとしては Build Your Own Text Editorというサイトを
たまたま見つけ
プログラミングを始めようと思ってJavaScriptの本を読んだり、
私のようにテスト駆動開発を学ぼうとしている人には十分に理解できるサイズでかつ面白い題材だと思ったからです。
みなさんも普段テキストエディタを使ってプログラミングしていると思いますが、
実際に実装してみると裏でこんな苦労があるのかと発見もあり面白いですよ
インストール方法
npm -g i kilo-editor
使い方は？
もともとのkilo.cとは少しアレンジを加えています
少しでもvimっぽい動きをさせようと頑張りましたが、実装できたのは下記です。
画面移動
h j k l
vimのキーバインドに似せようと実現しました。
- h: 左
- j: 下
- k: 上
- l: 右
0 ^ $
ホームやエンドボタンでも同じ挙動になりますが、行の先頭/行の終わりにジャンプします。
hjklで移動するよりも早く移動できます。
G
ファイルの最後に直接ジャンプ
ｇｇ
ファイルの先頭に直接ジャンプ
編集モード
kilo-editorでは、カーソル移動用の「NORMAL」モードと
テキストを追加したり変更したりする「INSERT」モードがあります。
i/a
INSERTモード（カーソルで挿入/カーソルの後に追加）に遷移します、Esc キーを押すとINSERTモードを終了し、NORMALモードに戻ります。
o/O
ラインブレイク（現在のラインより下/現在のラインより上）挿入します。
dd
行を削除します。行を削除して新しい場所に移動し、後述する「p」と組み合わせてで貼り付けができます。
yy
行をコピーします。"y "は "yank(やんちゃ)"という意味らしいですよ。
p
カーソルの行に最後に削除またはコピーしたテキストを貼り付けます。
u
一つ元に戻します undoの意味
SEARCH モード
"/"を押すと検索モードになります。
最初に見つかった単語に移動します。
次の検索結果に移動するには、<-または->を使って移動できます
COMMAND
コマンドモードに遷移するには ":" を使用します。
- w -> 保存
- q -> 保存せずに終了
- wq -> 保存して終了
テストの走らせ方
npm t
サポート環境
os
ノードのバージョン
- 12.x
- 14.x
下記はkilo-editorの開発者用の情報です
テスト情報
class document
最後に
本来なら本家同様に
チュートリアルにしてもいいかなと思ったのですが
結構これまでで、体力を使い切ってしまい、とても手が出せませんでした。
こんな素晴らしいコンテンツを提供してくれたBuild Your Own Text Editor はとてもありがたいですね
でわでわ
Discussion