重い腰を上げてようやくnode.jsでのプログラミングを楽しもうという事で、まずは楽しむために準備する愛らしいツール群をまとめる。

Git for Windows

私は元々linuxベースのエンジニアだったが現在はWindowsの世界どっぷりで、手元のPCもWindows、会社のPCもWindows。

だがプログラミングを楽しむためにはshellは欲しい。
Windowsで動作するshellとしてCygwin、MinGW、Git for WindowsがあったがWindowsのディレクトリ構成に自然にマッチした形で利用できたのはGit bash。
使ってみたところ、何もせずに日本語も対応しているし。高度にUnix/Linux環境じゃないとダメという事もなく、普通にお手軽にshellが利用できればよいからこれで確定。

vim（Git for Windowsに標準のツールなのでリンクなし）

エディターはGit bash標準のvimを利用することにした。Git bashインストール時に標準で利用でき、かつデフォルトで日本語にも対応している。最近はVisual Studio Codeなるフリーの高機能エディターが幅を利かせてきており、vimプラグインもいっぱいあり、vimチックに利用できるが私の感覚ではとにかく重い。。。vimプラグインをインストールして様々なvim機能を利用してみたが、かなりモッサリしている事と、たまに「Activating extentions...」的なメッセージが表示され、vimプラグイン（キーバインディング）が有効化されるのが起動後数十秒待たされるのは勘弁ならぬ。

vimを使ってnode.jsプログラムを開発するための準備はいくつかの方が既にアップしてくださっているので参考までにlinkする。（後でしっかり参考にさせて頂きます）

Node.js開発のためのvim設定
 Node.jsをVimで書く時に設定したことメモ
 vimrcをカスタムしてnode.jsの開発環境を作る
 Node.vim

ESLint(npmでインストールするのでリンクなし)

2000年前半で開発環境の知識がストップしている私にとって、「これ何？」って感じのもの。JavaScriptの構文チェック的なものとしか認識していないが、今後徐々に明らかにしていく。
これはnode.jsのパッケージ管理ツールnpmでインストールする。

$npm install -g eslint
C:\Users\satom\AppData\Roaming\npm\eslint -> C:\Users\satom\AppData\Roaming\npm\node_modules\eslint\bin\eslint.js
+ eslint@6.0.1
added 121 packages from 75 contributors in 22.636s

npm自体も慣れないツールで、上記コマンドでインストールしたという事は理解できるが、具体的に何が行われたのか詳細がわからない。
後で確認することにしよう。

node.js

当然node.jsもインストール。
私のポリシーとして、インストールするツール群は常に$home/appsというフォルダーと決めている。今回はGit bashを利用するので、「C:\users\satom\apps」にインストールすればよかったのだが、元々MinGWを利用していたため、c:\mingw\msys\1.0\home\username\appsにしてしまった。。。

とりあえずまずはこれぐらいからスタートしよう。

:g（存在する行）:v（存在しない行）に対してコマンド実行する方法よく忘れる。

コマンドの詳細

Vim日本語ドキュメントの"基本的な編集" - "repeat" - "多重繰り返し"を参照。
:gの詳細

:[range]g[lobal]/{pattern}/[cmd]
:[range]g[lobal]!/{pattern}/[cmd]  <-- :vと同義語

:vの詳細

:[range]v[global]/{pattern}/[cmd]

[range]は検索範囲。未設定はすべての行を対象に。
[pattern]は正規表現で検索対象の文字を設定。
[cmd]はExコマンド（いわゆる":"から始まるコマンド）を設定。

でもここまで書いておいて・・・

実際に使うのって行の削除が主だと思うの。

ある文字を含む行だけ削除

:g/{pattern}/d

ある文字を含む行以外を削除

:v/{pattern}/d

空白の行をすべて削除（使うことが多い）

:v/./d   <--　つまり一文字に一致しない行＝空白行

vim標準のタブ機能

元々vimには１プロセスで複数ファイルをバッファで管理するという機能があります。これをタブで表示するという事も出来ちゃいます。

tabpage - Vim日本語ドキュメント

ですが、help見てもらえれば分かる通り、タブ操作のコマンドが煩わしい。。と感じた方がいて、とても便利なrc scriptを公開してくれている方がいます。

vimのすごい便利なのにあまり使われていない「タブページ」機能

頻繁に使用するであろう以下の機能が簡易キー入力で操作できるようになる。これはいい。

コマンドモードの時に

tc = タブページの追加
tx = タブページの削除
t = 表示するタブの切り替え

タブの表示位置の切り替えとか、他にも機能はありますが、それは正直ほとんど使用しないと思われます、現時点では。

vimでは既に多くのプラグインが存在するのでプラグインを管理するためのプラグインというものを作ってくれた方がいる。私もそのお知恵を拝借することにした。

ネットで検索してみると以下の2つのプラグイン管理が存在する。

多くの記事においてNeoBundleベースで記述されていたので、私もNeoBundleを使用することにした。ところが、Githubサイトを確認したところ、2017年以降はbugfixしかしないのでdeinを使用せよという熱いメッセージが記載されていたため、情報は少ないがそれほど難しくなさそうだったのでdeinで行くことにした。

「a dark powered vim/neovim plugin manager」という事で、めちゃくちゃパワフルなツールなのだろう。フォースを感じる。。

必要条件

vim 8.0以上との事。Git bashに標準のvim（私の環境）は問題なく使える。

$ vim --version
VIM - Vi IMproved 8.1 (2018 May 18, compiled Oct 30 2018 15:10:52)

また、Windows環境の場合はxcopyがpathで通っている必要がある。
githubやvim.orgのプラグインを使いたい場合はgitコマンドもPATHで通っている必要がある。

※後でわかったことだが、dein.vimのインストーラーでgitは必須。これもGit bashなので問題なし。

インストール

ではインストール、、、Windows環境の説明ないな。。Linux/MacOSXの手順しかない。。。Git bashで同じようにインストールできるか確認してみる。
curlも必要みたい。

curl - command line tool and library for transferring data with URLs

※curlは自分でインストールするのだよ。私の場合は以下にインストールしている。

$ which curl
/c/Users/satom/apps/curl-7.64.0-win64-mingw/bin/curl

$ curl --version
curl 7.64.0 (x86_64-pc-win32) libcurl/7.64.0 OpenSSL/1.1.1a (Schannel) zlib/1.2.11 brotli/1.0.7 WinIDN libssh2/1.8.0 nghttp2/1.36.0
Release-Date: 2019-02-06

では、curlを使ってインストーラーをダウンロードする。

$ curl https://raw.githubusercontent.com/Shougo/dein.vim/master/bin/installer.sh > installer.sh
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  2233  100  2233    0     0  25375      0 --:--:-- --:--:-- --:--:-- 25375

続けてインストール。インストール先は「~/.cache/dein」とした。

$ sh ./installer.sh ~/.cache/dein
Install to "/c/Users/satom/.cache/dein/repos/github.com/Shougo/dein.vim"...

git is /mingw64/bin/git

Begin fetching dein...
Cloning into 'C:/Users/satom/.cache/dein/repos/github.com/Shougo/dein.vim'...
remote: Enumerating objects: 26, done.
remote: Counting objects: 100% (26/26), done.
remote: Compressing objects: 100% (20/20), done.
remote: Total 5351 (delta 8), reused 17 (delta 5), pack-reused 5325
Receiving objects: 100% (5351/5351), 1.06 MiB | 1.33 MiB/s, done.
Resolving deltas: 100% (3052/3052), done.
Done.

Please add the following settings for dein to the top of your vimrc (Vim) or init.vim (NeoVim) file:


"dein Scripts-----------------------------
if &compatible
  set nocompatible               " Be iMproved
endif

" Required:
set runtimepath+=/c/Users/satom/.cache/dein/repos/github.com/Shougo/dein.vim

" Required:
if dein#load_state('/c/Users/satom/.cache/dein')
  call dein#begin('/c/Users/satom/.cache/dein')

  " Let dein manage dein
  " Required:
  call dein#add('/c/Users/satom/.cache/dein/repos/github.com/Shougo/dein.vim')

  " Add or remove your plugins here like this:
  "call dein#add('Shougo/neosnippet.vim')
  "call dein#add('Shougo/neosnippet-snippets')

  " Required:
  call dein#end()
  call dein#save_state()
endif

" Required:
filetype plugin indent on
syntax enable

" If you want to install not installed plugins on startup.
"if dein#check_install()
"  call dein#install()
"endif

"End dein Scripts-------------------------


Done.
Complete setup dein!

インストール時のメッセージ曰く、「"deni Scripts---...」から「"End dein Script---...」までを.vimに追加しろと。あと、スタートアップ時にインストールしたい場合は最後のコメントアウトを外す必要があるらしい。
以下、追加したスクリプト。

"------------------------------------------------------------"dein Scriptsif&compatible
  set nocompatible               " Be iMproved
endif" Required:set runtimepath+=/c/Users/satom/.cache/dein/repos/github.com/Shougo/dein.vim" Required:if dein#load_state('/c/Users/satom/.cache/dein')call dein#begin('/c/Users/satom/.cache/dein')" Let dein manage dein" Required:call dein#add('/c/Users/satom/.cache/dein/repos/github.com/Shougo/dein.vim')" Add or remove your plugins here like this:"call dein#add('Shougo/neosnippet.vim')"call dein#add('Shougo/neosnippet-snippets')" Required:call dein#end()call dein#save_state()endif" Required:filetype plugin indent on
syntax enable

" If you want to install not installed plugins on startup.if dein#check_install()call dein#install()endif"---------- End dein Scripts

よし。
次の記事で、node.js開発環境としてvimにディレクトリツリーを表示させるプラグインを入れてみる。
暗黒パワーでガっと動いてくれることを願いつつ。

こんにちわ。
ゴリラ.vimを運営しているゴリラです。

最近Vimのプラグインを作るのにハマっています。先日もdocker.vimというVimからdockerコンテナを操作するプラグインを作りました。
良かった試してみてください。

さて、本題ですがみなさんはBad Apple!!をご存知でしょうか？
多分ニコニコユーザならほぼ知っているのではないかと思います。
そうです。かの有名な動画です。

その動画のAscii版があり、それならVimで再生できるのでは？と思い帰りの電車の中で作ってみました。

どんな感じ？

こんな感じです。
すこしちらつきますが、まぁ見れなくはないかなと言った感じです。

仕組みは？

とっても簡単です。簡潔に言うとテキストファイルを読み込み、フレーム分のテキストを配列に格納して、あとはfor分で回して画面に描写します。

もう少し細かく解説します。

Asciiテキストファイルの読み込み

Bad Apple!のAsciiテキストファイルはこちらにあるので、それを借用しました。

テキストファイル



$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$SPLIT$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$SPLIT$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

見て分かる通り、SPLITで区切っています。なので、SPLITまでを1フレームとしてます。
処理は次になります。

" read file to create framesfunction!s:read_file() abort
    letfile= globpath(&rtp,'resources/badapple.txt')" 全frameを格納let frames =[]" 1frame分のテキストを格納let frame =[]for line in readfile(file)" 現在行に`SPLIT`が含まれていなければframeに追加if line !~# "SPLIT"call add(frame, line)else" frameをframes追加call add(frames, frame)let frame =[]endifendforreturn frames
endfunction

なぜframeを配列にしているかというと、vimではバッファにテキストを書き込むsetline()とpopup windowのバッファに書き込むpopup_settext()という関数がありますが、
引数に配列を渡すと配列の1要素が1行として画面に出力します。そうすることで改行文字をわざわざ追加しなくて済むのでコードがスッキリします。

画面に出力する

フレームを作る関数を用意したので、それを使用してフレーム情報を変数に格納し、forで1frameずつ画面に出力します。

for frame in frames
    " ここで画面にframeを出力するcall popup_settext(winid, frame)" redraw!で画面を再描写する"redraw!" 一瞬で出力が終わってしまうので少し待つ
    sleep 50ms
    " qで終了できるように`getchar()`で入力した文字を取得" キー入力を待たないように、引数に`0`を渡すlet key = getchar(0)if key ==# 113breakendifendfor" for分を抜けたらウィンドウを閉じる"call popup_close(winid)

まとめ

動画をAsciiテキストに変換して、フレームを定義すれば、どんなものでも同じようなロジックでVim再生できます。
興味ある方はぜひチャレンジしてみてください。

TL;DR

格好いいvim使いの決定版 vim-deviconsを紹介
vim-deviconsのスクリーンショット

Nerd Fontをインストール

vim-deviconsはNerd Fontを使う。
使えるFontがないと文字化けになるので、先にインストールしなければならない。

Fontのインストール方法は多数存在する。
詳細が知りたい場合は、次のページを参照しよう。

https://github.com/ryanoasis/nerd-fonts#font-installation

ここでは４と6の方法を使う。どちらか一つだけを選んでFontをインストールしても構わない。
使えるFontの数と種類に少し違いがあるだけだ。

Options 4: Homebrew Fonts

  brew tap homebrew/cask-fonts
  brew cask install font-hack-nerd-font

Options 6: Ad Hoc Curl Download

Linux

mkdir-p ~/.local/share/fonts
  cd ~/.local/share/fonts && curl -fLo"Droid Sans Mono for Powerline Nerd Font Complete.otf" https://github.com/ryanoasis/nerd-fonts/raw/master/patched-fonts/DroidSansMono/complete/Droid%20Sans%20Mono%20Nerd%20Font%20Complete.otf

macOS

cd ~/Library/Fonts && curl -fLo"Droid Sans Mono for Powerline Nerd Font Complete.otf" https://github.com/ryanoasis/nerd-fonts/raw/master/patched-fonts/DroidSansMono/complete/Droid%20Sans%20Mono%20Nerd%20Font%20Complete.otf

コマンドをそのままコピペして実行すればFontのインストールが完了する。

TerminalのFont設定

Fontをインストールしたら、使っているterminalにも適用しなければならない。
文字化けになる。

macOSのterminal

iTerm2の場合は、FontとNon-ASCII Fontの２種類で設定ができるが、macOSデフォルトのterminalはフォントの設定が一か所しかない。
Options 6の方法でFontをインストールした場合は、Droid Sans Nerd Font CompleteというFontが使える。
そのFontで指定して設定しよう。

iTerm2

iTerm2ではFontとNon-ASCII Fontを分けて設定ができる。
Fontでは文字の可読性が優れるRicty for Powerlineを設定して、Non-ASCII FontではDroid Sans Nerd Font Completeを設定する。

Ricty for Powerlineについてはこの記事を参照しよう。

vim-deviconsのインストール

vimrcにplugin追加

  Plug 'ryanoasis/vim-devicons'

追加したpluginをインストール

:so~/.vimrc
  :PlugInstall

vimrcのおすすめ設定

" guifontを設置しないと文字化けになる。terminalで行ったフォントの設定と同様" 公式サイトではLinuxとmacOSの設定が若干異なるが、Linuxの設定でもmacOSで問題なしset guifont=Droid\ Sans\ Mono\ for\ Powerline\ Nerd\ Font\ Complete\ 12set encoding=utf-8" フォルダアイコンを表示letg:WebDevIconsNerdTreeBeforeGlyphPadding=""letg:WebDevIconsUnicodeDecorateFolderNodes=v:true
  " after a re-source, fix syntax matching issues (concealing brackets):if exists('g:loaded_webdevicons')call webdevicons#refresh()endif

はじめに

はじめましてHodaと言います。

都内でフリーのWebエンジニアとして活動、現在はVue.jsとGo言語を使って業務系Webアプリケーションの開発支援に従事しています。

現プロジェクトでは当初VS Codeを使ってコーディングしていたのですが、ひょんなことからVimを使うことになったため、まだ使いはじめて日は浅いですが、その経験で得た情報をシェアしたいと思います。

背景

私が現在参画しているプロジェクトでは、セキュリティを確保するために少し強固なプロキシ環境が敷かれています。

これまでは、このプロキシを突破するための設定を個々の開発者で実施して開発環境を構築していましたが、開発の進捗に影響があるため、対策の一つとしてサンドボックスを構築しました。

しかしせっかく構築したサンドボックスに対してVS Codeのリモート接続の設定がうまくいかず、リモート越しでの開発に難がある状態でした。

立ちはだかるプロキシの壁とVSCodeの設定難易度に悩まされる日々ですが、どうにかしてより円滑に開発を進められないかと思い、Vimを試験的に使ってみようというアイディアに行き着きました。

IntelliJやGolandなど有料の高機能エディタを検討する流れもありますが、手っ取り早く試せるので、実際に2週間ほど試した結果をまとめます。

はじめにやったこと

まずはじめに、知っている人に聞いて基本的な使い方を復習しました。

例えばhやjでカーソルを移動するだとか、テキストオブジェクトで単語ごとまとめて操作する方法などです。

私は以前お世話になったインフラの現場で軽く使用していたため、基本的な操作は知っているつもりだったのですが、聞いてみると「こういう機能もあったのか」という新たな気づきがあり、非常に勉強になりました。

基本的な操作

「h, j , k, l, w, b」でカーソル移動
「yy」でヤンク（コピー）、「p」で貼り付け...など

テキストオブジェクト

単語や文字列をまとめて操作できる
例：「diw」...カーソル位置の単語を削除
　↑「w」を「”」にすると「”」で囲まれた文字列をまとめて削除可能

ビジュアルモード

文字単位、行単位、矩形単位で選択し、操作、編集が可能
例：複数行の行頭や行末に一気に文字をいれる...など

タブ機能

:tabeなどで、複数のファイルをタブとして開ける
タブ間の移動はgtorgTで行う

入力補完

文字を入力している途中でcrtl + pを押すと候補が選択できる
タブを複数開いていると、開いている全てのファイルからも情報を拾ってくれる

数時間ほどコードをいじってみて、基本的な操作とテキストオブジェクト、ビジュアルモードの活用ができるようになると、標準のメモ帳アプリより効率よくコーディングできるレベルになります。

プラグインの導入

ある程度使えるようになってくると、Vimをもっと便利にカスタマイズしたいという欲求が湧いてきます。というわけでプラグインを導入することにしました。

開発用として使うのであれば、少なくとも下記の機能が備わっていると非常に助かります。

カラースキーム
リアルタイム入力補完
フォーマッター
リンター

これらの機能は標準では備わっていませんが、ご存知の通り、Vimには先駆者が開発してくれたたくさんのプラグインがありますので、それを使って様々な機能を実現可能です。

ちなみにVimのプラグインはVim Awesomeというサイトで探せます。

Dockerを利用したVim専用の環境構築

プラグインを導入するにあたり、専用の環境をDockerで構築することにしました。

現場ではサンドボックスを一つのユーザで共有していたため、他の開発者の作業の邪魔にならないよう、環境を分けることが目的です。

下図は本環境のアーキテクト図です。

Go言語で構築されたアプリケーションの開発を想定し、docker composeでGoのコンテナとVimがインストールされたUbuntuのコンテナを用意しました。

Ubuntuを採用した理由は、Go以外の開発でも応用しやすくて、汎用性が高いと思ったからです。

開発対象のコードはサンドボックスのホスト側に配置して、各コンテナへマウントします。

開発者はssh越しにUbuntuのコンテナへアタッチし、コンテナにインストールされたVimでコードを編集します。コードはGoのコンテナにもマウントされているので、編集内容が即座に反映されます。

Docker環境の詳細についてはこちらのリポジトリをご覧ください。

結果

配色、フォーマッター、リンターが使えてそこそこイケてる感じになりました。リアルタイムでの入力補完は実装できておらず、今後の課題です。

まとめ

Vimの導入は簡単ですが、若干学習コストが高いなと感じました。

しかしリモート越しでの開発、かつ高機能エディタが使えない環境ではEmacsと並んでおそらく最適解なのではないかと思います。

先駆者の作成したプラグインが強力なので、使いこなせれば開発もきっと捗ることでしょう！

参考資料

今回の試験で用意したDocker環境の詳細については下記リポジトリをご覧ください。

https://github.com/hodanov/docker-env-for-vim

Vimの勉強と調査にあたり、下記の記事を参考にさせていただきました。情報を公開してくれているみなさま。どうもありがとうございました。

Vimの日本語の自動認識の設定として、fileencodingsを設定するというのが一般的ですが、この自動認識は必ずしもうまく動作しない場合があります。

もう少し賢く自動判別をする設定はないものか探していたところ、fencja.vimというプラグインを入れるだいぶ改善することがっわかりました。

動作確認した環境

GVim 8.1, Windows版

使い方

以下のどれかでOK。

NeoBundleを使っているなら次を vimrcに追加しましょう（作成者の推奨）：
```
NeoBundle 'januswel/fencja.vim'
```

vim-plugを使っているなら vimrcに以下を追加ししたあと PlugInstallを実施：

call plug#begin('~/.vim/plugged')
" ... その他の設定
Plug 'januswel/fencja.vim'
call plug#end()

手動でやるなら vimfiles以下に pluginsというフォルダ以下に fencja.vimをコピーしましょう。

補足

完璧な.vimrcなどの設定をしていれば内容はほぼ同じと思って良い。

めっちゃビール飲みたくなるやん

🍺🍺🍺🍺🍺🍺🍺🍺🍺🍺🍺🍺🍺

#! /usr/local/bin/bashpassion="  \めっちゃ \ビール   \飲みたく \なるやん "function message_sql (){str=$1

sqlite3 <<EOS

  select "${str}" ;

.exit
EOS

}export-f message_sql
echo$passion\
  | xargs -n1-I{} bash -c'message_sql {}'

🍺🍺🍺🍺🍺🍺🍺🍺🍺🍺🍺🍺🍺

# vimrc
# スペース２回押して色付けを切り替える

nnoremap <leader><leader>:call<SID>exchangeshsql()<CR>function!<SID>exchangeshsql() abort
  if&filetype=='sh'setfiletype=sql
  elseif&filetype=='sql'setfiletype=shendifendfunction

🍺🍺🍺🍺🍺🍺🍺🍺🍺🍺🍺🍺🍺

とてもビールが飲みたいわ

🍺🍺🍺🍺🍺🍺🍺🍺🍺🍺🍺🍺🍺

現場からは以上です

Git for Windows, Vim環境でNode.jsプログラムの開発環境を確認してみたが、まずはここに記述するスタイルで開発してみる。

プログラム開発環境

はい、vim。以下のプラグインを利用する。

プラグイン管理：dein
タブ設定にキーマップのカスタマイズ版
JsDocの自動生成プラグイン：heavenshell/vim-jsdoc
自動的に対応する括弧を挿入する：Townk/vim-autoclose
js用インデックスとシンタックスカラー：pangloss/vim-javascript

これだけ。
あまり最初から色々使うと本当に必要だと感じて利用したときのありがたみに欠けるし、使わないプラグインによって重くなる可能性やキーマップのバッティングにより動作に異常をきたすかもしれない。
後は、タブスペース＝４、タブを空白に変換、インデント幅とタブキーで挿入される空白の量は４。
ちなみに、NERDTreeは私にとっては少し使いづらいし、わざわざツリー表示したい場面も今のところないためvim標準の:editコマンドで十分と判断。
正直、タブ表示機能も、画面分割機能があれば不要かもと思ったが、１画面フルでソースが見れる状態が簡単に切り替えられるのは少し魅力があるため使ってみる。

JsDocの利用

関数を記入したらJsDocプラグインでドキュメントを作成する。

関数にカーソルを合わせて:JsDocを実行

編集中のnode.jsの実行

はい、shellの機能を利用する。
具体的にはCtrl-zによりvimプロセスを一旦停止して、shellプロンプトに戻ってからnodeコマンドを使いたいように使う。この時、サーバープログラムを動かす場合はバックグランドでnodeを動かす。

編集中のnode実行のためのshellへの切り替え：Ctrl-z
nodeをバックグランドで実行：node jsプログラム &
nodeプログラムを停止：fgしてからctrl-c、もしくはkill プロセスID
編集へ戻る：fg

これぐらいかなぁ。
あとはvimの標準コマンドとshellの機能を使えばとりあえず十分。

はじめに

プロジェクト内でコードの検索をかけるときに、Ack.vimをよく使っています。その Ack.vim で、ビジュアルモードで選択した部分を直接検索する方法を調べたので、簡単にまとめます。

課題

今まで Ack.vim でコード検索をするときは、以下のような手順を踏んで実行していました。

検索したい文字列をビジュアルモードで選択してヤンク
:Ackと入力した後にヤンクした文字列をペースト
Enter キーを押して実行

しかし上記の手順を何度も繰り返していると、段々と億劫になってくるところがありました。

そのため、以下のような手順で検索をかけられると楽になるなと思い、方法を探していました。

検索したい文字列をビジュアルモードで選択
ショートカットキーで選択した文字列に対して :Ackを実行

tl;dr

Using Ack.vim on visual selection - Stack Overflowにやりたいことそのものが紹介されていました。

以下のコマンドを .vimrcに追記することで実現できました。

vnoremap <Leader>gy:Ack <C-r>=fnameescape(@")<CR><CR>

やっていること

上記についてそれぞれやっていることを記載します。

コマンド	詳細
`vnoremap {lhs} {rhs}`	ビジュアルモードのとき、キー入力 `{lhs}`を `{rhs}`に割り当てる
`<Leader>g`	特殊文字列 `<Leader>`と `g`の組み合わせ。(`mapreader`に何も設定していない場合、`<Leader>`はバックスラッシュが使用される)
`y`	選択文字列をヤンク
`:Ack`	`Ack`コマンド実行
`<C-r>=`	このコマンド以降で実行された式の評価値を利用する
`fnameescape(@")<CR>`	選択した部分をエスケープして Enter
`<CR>`	Enter

こちらによって、検索したい箇所を選択してから<Leader>gを入力するだけで、Ackを実行できるようになりました。

※ @"の部分がビジュアルモードで選択されている部分を表しているようなのですが、なぜこの文字列で表せるのかまでは調べきれませんでした。。

おわりに

普段良く使うコマンドのキー入力を減らすことができると、より負担が軽くなることを感じました。他にも何度も使っているコマンドを見つけたら、より便利になる方法を探してみたいと思います。

参考

NeovimでJSDocを使う

JSやGASでコードを書いていく時に、コメントはどのように書いているだろうか。
手軽に分かりやすく、コードを共有した人が確認しやすいものはないかと調べた結果、JSDocというものを知った。
jsdoc.vimを参考にインストールを行った。

環境

macOS Mojave ver.10.14.5
Neovim
vim-plug（vimプラグインマネージャー）

インストールの仕方と使い方

~/.config/nvim/init.vim

" jsdoc
Plug 'heavenshell/vim-jsdoc'
nnoremap j:JsDoc <Enter>

上記を~/.config/nvim/init.vimに記入した。

nnoremap j :JsDoc

の部分は、マッピングをさせている。
通常は:JsDoc+<Enter>で実行されるので、これをjに置き換えた。

これでビジュアルモード時にobjectやfunction上でjを押すだけでJSDocが作成される。

以下はJSDocに関しての簡単なまとめである。詳しくは参考文献のリンクを参照にしてほしい。

コメントの構文に関して

コメントは適切であるかを確かめる必要がある。

/** 
 * JSDocコメントはスラッシュと2つのアスタリスクから始めます。 
 * インラインタグは {@code this} のように波括弧で囲みます。 
 * @desc ブロックタグは必ず行の先頭から開始します。 
 */

Google JavaScript スタイルガイド - 日本語訳より

JSDocのインデント

ブロックタグ内での改行が必要な場合はスペース４つ分のインデントが必要。

/** 
 * 長いparam/returnアノテーションの説明文の折り返し方を示します。 
 * @param {string} foo これは1行でおさめるには長すぎるパラメータの 
 *     説明文です。 
 * @return {number} この戻り値の説明文は長すぎて、とても1行の中には 
 *     入りきりません。 
 */project.MyClass.prototype.method=function(foo){return5;};

Google JavaScript スタイルガイド - 日本語訳より

ファイルへのコメント

@authorで作成者に関する情報を添付する。

/**
* @fileoverview ファイルの説明を行う。
* 依存関係についての情報
* @author aaa@bbb.com
*/

classへのコメント

/** 
 * Humanクラス 
 * @param {number} height ヒトの身長
 * @param {number} weight ヒトの体重
 * @constructor 
 */classHuman{constructor(height,weight){this.height=height;this.weight=weight;}}

メソッド・関数へのコメント

/** 
 * 日付を処理し、休みの日かどうかでtrueかfaleを返します。 
 * @param {date} date 日付
 * @return {boolean}  
 */functionisSunday(date){//...}

参考文献

Google JavaScript スタイルガイド - 日本語訳
 Jsdoc cheatsheet

はじめに

ヘルプを見ながらFloating Windowを出してみたので残しておきます。
NVIM v0.3.8ではnvim_create_buf()やオプションが存在しないのでnightlyを使用してください。
:h api-floatwinでFloating Windowの項目が開けます。

サンプル解説

ヘルプを開くとサンプルが載っているので１つずつ見ていきます。

let buf = nvim_create_buf(v:false,v:true)call nvim_buf_set_lines(buf,0,-1,v:true,["test","text"])let opts ={'relative':'cursor','width':10,'height':2,'col':0,'row':1,'anchor':'NW','style':'minimal'}letwin= nvim_open_win(buf,0, opts)" optional: change highlight, otherwise Pmenu is usedcall nvim_win_set_option(win,'winhl','Normal:MyHighlight')"ウィンドウを閉じる。サンプルにはない。call nvim_win_close(win,v:true)

`nvim_create_buf({listed}, {scratch})`

空のバッファを作る。

`{listed}`

オンの場合、バッファリストに載るようになる。

`{scratch}`

オンの場合、使い捨て用のスクラッチバッファを作成する。(バッファが変更されたことを意味する'modified'がオンにならない。)

`nvim_buf_set_lines({buffer}, {start}, {end}, {strict_indexing}, {replacement})`

バッファの内容を書き換える。
setline()の豪華版。

`{buffer}`

バッファハンドル。0の場合カレントバッファ。

`{start}{end}`

書き換える行数の始まりと終わり。同じ行を選ぶと、置換ではなく新しい行が作られる。
-1は末尾の下を表す。

`{strict_indexing}`

オンの場合、行数指定がバッファの範囲外のときエラーになる。 ¹

`{replacement}`

バッファに書き込みたいテキストの配列。

`nvim_open_win({buffer}, {enter}, {config})`

`{buffer}`

バッファハンドル。

`{enter}`

オンの場合、開いたウィンドウにフォーカスが行く。

`config`

辞書を渡して設定する。

`relative`

設定するとFloating Winodwになる。
値にeditorwincursorと表示場所の基準を決められる。

`win`

relativeにwinを指定した場合、ウィンドウIDを指定できる。
デフォルトはカレントウィンドウ。

`anchor`

ウィンドウの原点をどこにするか決める。デフォルトは北西（NW）で、右クリックメニューのように左上が角になるように表示される。
値にはNWNESWSEを設定する。

`heightwidth`

ウィンドウの高さと幅。

`rowcol`

基準からの表示位置。

`focusable`

ウィンドウにフォーカスを移すことができるかを決める。
デフォルトはオン。

`external`

GUIのときサポートされていればexternal windowとして表示する（？）。
relativeと同時に設定できない。
neovim-qtではサポートされていなくて詳細不明。

`style`

現在は有効な値はminimalのみ。
'number''relativenumber''cursorline''cursorcolumn''spell''list'が無効になる。

`nvim_win_set_option({window}, {name}, {value})`

windowハンドルを指定してウィンドウオプションを指定できる。
'nil'を渡すとオプションを削除できる。

`{window}`

ウィンドウハンドル

`{name}`

オプション名

`{value}`

オプションの値

`nvim_win_close({window}, {force})`

:closeと同じ。

`{window}`

windowハンドル

`{force}`

オンにすると:close!と同じ。

実際に使ったもの

VimでBad Apple!!のpopup windowをFloating Windowに書き換えてみました。

リポジトリはこちら

E5555: API call: Index out of bounds ↩

_vimrc

set encoding=utf-8set nobackup
set noundofile
setnoswapfilesetnumberset cursorline
set cursorcolumn
set clipboard=unnamed,autoselect
set guifont=Ricty_Diminished:h12
set guifontwide=Ricty_Diminished:h12
set expandtab
set softtabstop=4

はじめに

私は、2019年7月からプログラミングサークル「ゆうとクラブ」に入会し、
フロントエンジニアになるべく修行をしています。
本記事では、ゆうとクラブ入会約一ヵ月目の成果を報告します。

Vim矯正ギブス

今までVimを使ったことがありませんでしたが、最速でVimをマスターするために、次のことを実施しました。

チートシートをパソコンの壁紙に設定
トイレの壁にチートシートを貼る
方向キーでの移動を禁止
効率の良いコマンドを叩かないと、怒られて何度もやり直し

そして結果……

最近なんのソフト使ってても、 :w で保存しようとしている自分がいるwwww#ゆうとクラブ #Vim
— めい@ゆうとクラブ (@mei_9961) July 21, 2019

CUI強制でGit再入門

今まで、Visual StudioのGitで使っていましたが、bashのみに切り替えました。
Gitのことをあまり理解してなかったということが思い知らされました。

しかし、bashでGitを使うようになってから、多くの便利な機能を知りました。

ブランチ
git commit --amend
git add -p

そして適切な粒度でコミットすることとコミットメッセージの重要性を知りました。
最初は、大きなコミットを作ってしまいどこでバグが発生したかわからない事態もありました。

ユニバーサルデザイン

ゆうとクラブはユニバーサルデザインのとっかかりとして、ひらがなルビに対応しました。
まだ対応していませんが、文字のサイズも変更できるようにしたり外国語の対応をしようと思っています。

レイアウトに苦戦

今まで、ゲームのプログラミングをしていたので、絶対位置の指定に慣れていました。
しかし、HTMLのレイアウトは、floatやflexbox、gridを使い分けて、なるべく画面サイズに依存しないことが大事だとわかりました。

めろちゃんからデザイン案をもらいました。
まず、装飾なしで、レイアウトしました。
装飾など、細かい部分を作りこんで完成！

協力者への感謝

同会の会員である、めろちゃんにウェブサイトのデザイン案を作ってもらいました。
彼女もまた、私と同じく初学者ですが、色使いのセンスが良く、一緒に制作していて、やりがいを感じました。

これからやること

来月からは、即戦力を身につけるために下記の事柄に取り組んでいきます。

かんばんを使ったチーム開発
KPTで振り返り
Windowsを捨て、Arch Linux入門
VueJS,NuxtJSを使ってより動的なウェブサイト作り

チーム開発では、まだチームメンバーが足りていません。
興味のある方がいたら、ぜひゆうとクラブの門を叩いてみてください。

vimでRuby on Railsを書くときに重宝するプラグインを紹介します。

NERDTree　　ファイルツリー
vim-rails　　　ファイル移動、Railsコマンド実行
fzf.vim　　　　インクリメンタル検索
vim-endwise　ifや defなどの end補完
coc.nvim　　　補完
ale　　　　　　静的解析
ruby-matchit　%によるdef...end等のキーワードを移動

設定例として、自分の.vimrcに書いている設定を載せてます。

NERDTree

scrooloose/nerdtree
ファイルツリー機能が使えます。ド定番です。

参考
vim-plugin NERDTree で開発効率をアップする！ @zwirky

vim-rails

tpope/vim-rails

railsプロジェクト内のシームレスな移動や、vimからのrailsコマンドの実行が出来るようになります。

GIFでは例として、gfでカーソル化の文字列から該当するファイルを開き、:Aで対応するspecファイルを開いています。

参考
vim-rails よく使いそうなやつ @bibio

fzf.vim

junegunn/fzf.vim

Go言語製の fzfと呼ばれるコマンドラインツールを使用したプラグインで、プロジェクト内のファイル名や、ソースコードの文字列あいまい検索ができます。

.vimrc

letg:fzf_action={  \'ctrl-s':'split'}

nnoremap <C-p>:FZFFileList<CR>
command! FZFFileList call fzf#run(fzf#wrap({            \'source':'find . -type d -name .git -prune -o ! -name .DS_Store',            \'down':'40%'}))

nnoremap <C-b>:Buffers<CR>
nnoremap <C-g>:Ag<CR>
nnoremap <silent><C-]>:call fzf#vim#tags(expand('<cword>'))<CR>letg:fzf_buffers_jump=1

command!-bang -nargs=? -complete=dir Files
            \call fzf#vim#files(<q-args>, fzf#vim#with_preview(),<bang>0)

GIFでは ctrl + pでファイル名検索、ctrl + bでバッファー検索をしています。
ctagsとの連携なんかもできちゃいます。

fzf.vimはプラグイン本体に加えて fzfそのもののインストールも必要になりますが、
fzfは vim抜きにしてもコマンドラインツールとしてとても優秀なのでオススメです。

参考
fzfとvimで少ない労力で作業効率を引き上げた話 @Sa2Knight
さいつよのターミナル環境を構築しよう @b4b4r07

ファイル検索プラグインの別の選択肢としてdenite.nvim(unite.vimのつよいやつ)というプラグインがあります。
もっと複雑な処理を走らせたい方におすすめです。(あんまりわかってない）

vim-endwise

tpope/vim-endwise
def...endや、if...endなどの対応するキーワードを自動補完してくれます。

地味にきいてくる便利さです。

coc.nvim

neoclide/coc.nvim
coc.nvimは TypeScript製の補間プラグインです。LanguageServerProtocol(以下LSP)と呼ばれる、コーディング支援用のプロトコルが使用可能で、強力な補完機能が使えます。
rubyの場合、 solargraphと呼ばれるLSPの gemを使用します。

coc.nvimは、独自の設定ファイルとして .vim/coc-settings.jsonを使用します。

coc-settings.json

{"suggest.enablePreselect":true,"solargraph.commandPath":"solargraphの絶対パス"}

.vimrc

letg:coc_global_extensions=['coc-solargraph']

inoremap <silent><expr><TAB>      \ pumvisible() ? "\<C-n>":      \<SID>check_back_space() ? "\<TAB>":      \ coc#refresh()
inoremap <expr><S-TAB> pumvisible() ? "\<C-p>":"\<C-h>"function!s:check_back_space() abort
  letcol=col('.')-1return!col|| getline('.')[col-1]=~# '\s'endfunction

右に[LS]と表記されている単語が、LSPによる補完候補です。
めっちゃ出ます。

参考
LanguageServerProtocol(LSP)のススメ @himanoa
neovim + coc.nvim で LSP藻ログ

coc.nvimの他にも、asyncomplete + vim-lspや、 deoplete + LanguageClient-neovimの組み合わせでもLSPの補完が使えます。

ale

w0rp/ale

gemのrubocop構文エラーを自動で非同期静的解析してくれるツールです。

.vimrc

letg:ale_fixers={      \'ruby':['rubocop'],      \}

if...endのendを消すと構文エラーを指摘してくれます。

言語ごとにfix, lintツールを指定するとruby以外でも大活躍してくれます。

参考
neovim + 🍻ale + 🚓rubocop hoshinotsuyoshi.com

ruby-matchit

vim-scripts/ruby-matchit
%を拡張して、def...end等のキーワードを移動出来るようになります。

まとめ

他にも良いプラグインがあれば教えてください
それではよい vim, rails ライフを…

NeovimでCoc入れて、PHPの定義元移動試してみたら、下記のようなエラー。

dyld: Library not loaded: /usr/local/opt/icu4c/lib/libicui18n.62.dylib
  Referenced from: /usr/local/bin/php
  Reason: image not found

最初Cocかnodeかで起きてるのかと思ってicu4cをアップデートも考えたんだけど、phpが参照元って書いてあるので、phpを叩いてみると同じエラーが起きる。

$ /usr/local/bin/php
dyld: Library not loaded: /usr/local/opt/icu4c/lib/libicui18n.62.dylib
  Referenced from: /usr/local/bin/php
  Reason: image not found

何だお前、最近使わなかったけど、動いてなかったんだな……。

$ brew upgrade php
php 7.2.12 -> 7.3.7
==> Upgrading php
==> Installing dependencies for php: apr, openssl, argon2, brotli, c-ares, libidn, libmetalink, libssh2, jansson, libev, libevent, nghttp2, openldap, rtmpdump, curl-openssl, freetds, libpng, freetype, pcre, readline, sqlite, python, glib, libpq, libsodium, libzip, libtiff and webp
==> Installing php dependency: apr
・
・
・
$ /usr/local/bin/php --version
PHP 7.3.7 (cli)(built: Jul  5 2019 12:44:05)( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.3.7, Copyright (c) 1998-2018 Zend Technologies
    with Zend OPcache v7.3.7, Copyright (c) 1999-2018, by Zend Technologies

PHP新しくしたら このエラーは起きなくなった。Cocの定義元移動は後編に続く。

https://qiita.com/masakuni-ito/items/d7a6c2de47344f0bbd1cの続き。

NeovimでCoc入れて、PHPの定義元移動試してみたら、PHPでエラーが起きたので、それ解決したら違うエラーが起きた。

PHP Fatal error:  Uncaught Error: Class 'MessagePackUnpacker' not found in /Users/ito_masakuni/.cache/dein/repos/github.com/lvht/phpcd.vim/vendor/lvht/msgpack-rpc/src/MsgpackMessenger.php:18
Stack trace:
#0 /Users/ito_masakuni/.cache/dein/repos/github.com/lvht/phpcd.vim/php/main.php(30): Lvht\MsgpackRpc\MsgpackMessenger->__construct(Object(Lvht\MsgpackRpc\StdIo))#1 {main}
  thrown in /Users/ito_masakuni/.cache/dein/repos/github.com/lvht/phpcd.vim/vendor/lvht/msgpack-rpc/src/MsgpackMessenger.php on line 18

まぁ……たぶん、msgpack、ないんだな……。

入れる。

$ pecl install msgpack
downloading msgpack-2.0.3.tgz ...
Starting to download msgpack-2.0.3.tgz (45,769 bytes)
.............done: 45,769 bytes
20 source files, building
running: phpize
Configuring for:
PHP Api Version:         20180731
Zend Module Api No:      20180731
Zend Extension Api No:   320180731
・
・
・

これでCocの定義元移動ができた。Coc凄まじい。

XCodeにVimのプラグイン（XVim2）を入れようとしたのですが，Eclipseと違ってややこしかったです．

想定する読者

XCodeに初めてXVim2を入れようとしている方．

環境

macOS Mojave 10.14.6
Xcode 10.3

※ XCode 8 かそれ以前のバージョンの方はXVimを使用してください．

手順

1. XCodeのコード署名を作成する

Githubの公式ページはこちらです．

XCodeを終了する．
キーチェーンアクセスのアプリを起動する．
メニューバーの「キーチェーンアクセス」>「証明書アシスタント」>「証明書を作成...」を選択．
証明書を作成する．
4-1. 「名前:」にわかりやすい名前を設定（例: XCodeSigner）．
4-2. 「固有名のタイプ:」に"自己署名ルート"を選択．
4-3. 「証明書のタイプ:」に"コード署名"を選択．
4-4. 右下の「作成」を押す．
ターミナルを開いて以下のコマンドを実行する．

$ sudo codesign -f-s<証明書の名前> <XCodeのパス>
// 例
$ sudo codesign -f-s XcodeSigner /Applications/Xcode.app

2. XVim2をビルドする

リポジトリをクローンします．

$ git clone https://github.com/XVimProject/XVim2.git

xcode-select でデベロッパディレクトリを指定します．

// 確認したいだけなら -p$ xcode-select -s
/Applications/Xcode.app/Contents/Developer

正しいタグにチェックアウトします．
インストールされているXCodeのバージョンに合わせます．

$ git checkout xcode10.3

ビルドします．

$ cd XVim2
$ make

3. XCodeを起動する

起動済みであれば，完全に終了させて再度起動します．
ポップアップが出るので，「Load bundle」を選択します．

メニューバー >「Edit」>「XVim」が表示されれば完了です！

参考

Xcode10.2 で XVimを使う方法

概要

NeoVimを使ってみたので、何回かに分けて設定を残そうと思います！
今回はプラグイン管理のdein.vimを入れるところまでで。

本体のインストール

Macでのインストール

tarminal

$ brew update
$ brew install neovim

インストール後に確認

tarminal

i$ nvim -version
NVIM v0.3.8
Build type: Release
LuaJIT 2.0.5

init.vim を作成する

tarminal

mkdir-p ~/.config/nvim
touch ~/.config/nvim/init.vim

init.vimを編集

init.vimを設定していって使いやすくしていく

tarminal

$ nvim ~/.config/nvim/init.vim

まずは初回のキーバインド設定。
都度都度パス指定してinit.vimを開くのが面倒、それを読み込むのも面倒なのでキーバインドでさくっと出来るように。
あと、InsertModeは移動とmode抜けたら保存したいので以下の設定。

init.vim

" ------------------------------------------------------------"  key bind" ------------------------------------------------------------" Normal Mode
cnoremap init :<C-u>edit $MYVIMRC<CR>                           " init.vim呼び出し
noremap <Space>s :source $MYVIMRC<CR>                           " init.vim読み込み
noremap <Space>w:<C-u>w<CR>                                    " ファイル保存

" Insert Mode
inoremap <silent> jj <ESC>:<C-u>w<CR>::<C-u>source $MYVIMRC<CR> " InsertMode抜けて保存・読み込み
" Insert mode movekey bind
inoremap <C-d><BS>
inoremap <C-h><Left>                                                                                                                 
inoremap <C-l><Right>
inoremap <C-k><Up>                          
inoremap <C-j><Down>

これでInsertModeでsetを入力して、jjコマンドでNormalModeに戻るたびにinit.vimが保存されて、再読み込みされます。
ここからは細かい初期設定

init.vim

" encode setting                                                                                                                                 set encoding=utf-8" edita settingsetnumber                                                      " 行番号表示
set splitbelow                                                  " 水平分割時に下に表示
set noequalalways                                               " 分割時に自動調整を無効化
set wildmenu                                                    " コマンドモードの補完
" cursorl settingset ruler                                                       " カーソルの位置表示
set cursorline                                                  " カーソルハイライト
" tab settingset expandtab                                                   " tabを複数のspaceに置き換え
set tabstop=2                                                   " tabは半角2文字

プラグイン管理

事前準備

tarminal

$ brew install python3
$ pip3 install-U neovim

dein.vimのインストール

プラグイン管理のdein.vimをインストール

tarminal

mkdir ~/.vim/dein
touch ~/.config/nvim/dein.toml
touch ~/.config/nvim/lazy.toml
cd ~/.vim/dein
curl https://raw.githubusercontent.com/Shougo/dein.vim/master/bin/installer.sh > installer.sh
sh ./installer.sh ~/.vim/dein

インストール完了時にinit.vimに追記する以下のコードが表示されるので追記する。
表示されるコードはフルパスなので、以下のコードはフルパスにっているところを~/に置き換えています。

init.vim

" ------------------------------------------------------------" dein.vim set up" ------------------------------------------------------------if&compatible
  set nocompatible               " Be iMproved
endif" Required:set runtimepath+=~/.vim/dein/repos/github.com/Shougo/dein.vim" Required:if dein#load_state('~/.vim/dein')call dein#begin('~/.vim/dein')" Let dein manage dein" Required:call dein#add('~/.vim/dein/repos/github.com/Shougo/dein.vim')" Add or remove your plugins here like this:"call dein#add('Shougo/neosnippet.vim')"call dein#add('Shougo/neosnippet-snippets')" Required:call dein#end()call dein#save_state()endif" Required:filetype plugin indent on
syntax enable

" If you want to install not installed plugins on startup."if dein#check_install()"  call dein#install()"endif

今回はプラグインは別のファイルで管理するので、少し書き換えます。

init.vim

if&compatible    
  set nocompatible               " Be iMproved    
endif" Pluginディレクトリのパス    lets:dein_dir= expand('~/.vim/dein')" dein.vimのパス    lets:dein_repo_dir=s:dein_dir.'/repos/github.com/Shougo/dein.vim'" tomlのディレクトリへのパス    lets:toml_dir= expand('~/.config/nvim')" Required:    
execute 'set runtimepath^='.s:dein_repo_dir" Required:    if dein#load_state(s:dein_dir)call dein#begin(s:dein_dir)" 起動時に読み込むプラグイン群のtoml    call dein#load_toml(s:toml_dir.'/dein.toml',{'lazy':0})" 利用時に読み込むプラグインのtomlcall dein#load_toml(s:toml_dir.'/lazy.toml',{'lazy':1})" Required:               call dein#end()call dein#save_state()endif" Required:                  filetype plugin indent on" If you want to install not installed plugins on startup.    if dein#check_install()call dein#install()endif

次にdein.tomlに追加するプラグインを記入していきます。
今回は全体のColorSchemeをtenderにするため都度読み込みへ、tomlのSyntaxカラーを利用時読み込みで書いときます。

dein.toml

[[plugins]]repo='Shougo/dein.vim'# ------------------------------------                                    # colorscheme tender setting                                    # ------------------------------------[[plugins]]repo='jacoborus/tender.vim'hook_add='''colorschemetendersetbackground=darksyntaxonsett_Co=256let$NVIM_TUI_ENABLE_TRUE_COLOR=1'''

lazy.toml

# ------------------------------------ # toml syntax                          # ------------------------------------           [[plugins]]repo='cespare/vim-toml'on_ft='toml'

まとめ

今回はここまで。
まずはNeoVimの基本設定の一部と、ColorSchemeだけ設定しました。
次回はStatusLineのColorScheme設定をしていきます！