🦕

DenoとVimで簡単ローカルPlayground

2021/12/04に公開

JavaScript

先日、以下の記事を公開しました。

こちらで紹介したのがdexというツールです。これを利用したVim(Neovim)用のDexというコマンドも併せて紹介しています。

このコマンドを使って、以下の記事で紹介されているローカルPlaygroundを作ってみようと思います。

`playjs`コマンド

こちらのスクリプトに実行権限をつけ、パスの通ったディレクトリに配置してください。

playjs

#!/bin/bash

# 開発用設定の整っているディレクトリへ移動
# cd ~/ghq/github.com/kawarimidoll/deno-dev-template/

# JSファイル名
filename="playground.js"

# ファイル作成
echo 'console.log("Playground start");' > "$filename"

# 作ったファイルを開き、:Dexコマンドで自動実行をスタート
# 最初に入力されている内容を消去し、インサートモードに遷移
nvim "$filename" \
  -c 'Dex' \
  -c 'delete _' \
  -c 'startinsert'

# 終了後、入力内容をコピー（pbcopyはmacOS用）
# cat "$filename" | pbcopy

# 終了後、ファイルを削除
rm -f "$filename"

playjsを実行すれば、いつでもPlayground環境に入ることができます。

Denoで動いているので、標準のJSの機能だけでなく、Deno向けライブラリの利用も可能です。
このデモでは https://deno.land/std/collections/sample.ts を読み込んで使用しています。

Dexのおかげで自動リロードが動くので、パッと思いついたコードがどんな結果になるか、簡単に試すことができます。
他にもサクッとfetchしてみたり、正規表現を検証してみたり…いろいろな利用方法が考えられるのではないでしょうか。

調整案

以下のような点はお好みで調整してください。

実行前に開発用の設定が入ったディレクトリへ移動する
nvimの実行時引数のコマンドをDex!に変更して、リロード時に画面をクリアする
nvimの実行時引数のコマンドを追加する
- autocmd CursorHold <buffer> write：入力を止めるだけで自動で保存・再実行する
- nnoremap :q <cmd>qa!<CR>：（使い捨てのファイルなので）保存を確認せず終了する
- set autowriteall：保存を確認せず自動保存して終了する(結局終了後に削除される)
終了後にファイルを削除せず、過去のPlaygroundを見られるようにする
終了時にplayground.jsの内容をクリップボードに保存する

特に設定の整ったディレクトリへ移動するのはおすすめです。
筆者は自作テンプレートリポジトリをローカルにクローン（ghq使用）しておき、そこに移動するようにしています。

おわりに

「Denoで簡単ローカルPlayground」の記事を見たときに、「ターミナルからPlayground状態でVimを立ち上げる」というのをやりたい！と思ったのですが、実装までに紆余曲折あり、結果的に専用のCLIツール(deno-dex)まで作ってしまいました。
楽しい経験ができてよかったです。

小さなコードを試すのが非常に楽になると思うので、Vim/NeovimユーザーでJSを書く方はぜひお試しください。
また、「ターミナルからPlayground状態で立ち上げる」という観点であれば、Vim以外でも同様のものが作れるのではないかと思っています。「別のエディタでやってみた」というコメントもお待ちしています。

playjsコマンド

調整案

おわりに

Discussion

`playjs`コマンド