Mac で Vim ベースの JavaScript 開発環境を整える (その 1)

冬休みに入ったので、やろうやろうと思って放置してた、アプリ作りをしようと思い、結局、開発環境を新たに整えるのに時間を割いてて、アプリ作りをしていない今日この頃。
年取るにつれ、色々覚えが悪くなっているので、設定した内容をメモ。

# きっかけ: Expo でアプリ開発を試したい
[React Native](https://facebook.github.io/react-native/) でも手軽にアプリ開発感があったんですが、さらに手軽さが増しそうな、[Expo](https://expo.io/) を勉強しようと思い、Node JS の開発環境を、ちゃんとしようと思い立ったのがきっかけ。
[Atom](https://atom.io/) + [Nuclide](https://nuclide.io/) を試してましたが、Vim バインディングの完成度に満足できず、やめました。他も、Vim 使ってた便利さに勝るメリットは得られなさそう。
Expo は、`expo init` でプロジェクトを作成して `expo start` すると QR コードが出てきて、Expo のアプリで QR コードを読み込めば、すぐに iPhone 上でアプリを実行しながら、コード編集、リロードの流れで開発できる感じ。スタンドアロンのアプリとしてパブリッシュも可能。Expo 用の API があるが、ほば React Native の開発的な感じ。[ドキュメント](https://docs.expo.io/versions/latest/index.html)も丁寧。
**何より XCode、Android Studio を使わなくても、アプリを作れそうな感じが素敵。**XCode を使うためには、Mac 一択だった縛りがなくなるの
ただ、現状、バックグラウンドの処理実行など、色々[制約](https://docs.expo.io/versions/latest/introduction/why-not-expo.html)があるので注意。ただ、開発は活発そうだから、制約も、時が経てば減っていきそう。

![exp start を実行した時に表示される QR コード](https://qiita-image-store.s3.amazonaws.com/0/8895/0ef25c50-e711-336b-f0ee-84e099045428.png)

JS の Vim 開発環境は、[こちら](https://medium.com/@alexlafroscia/writing-js-in-vim-4c971a95fd49)の記事の内容を試してみることに。

# エディタ (Neovim、VimR)
[Neovim](https://neovim.io/) を使うことに決めた。Neovim は、今では使わなくなった機能を消したり、今まで、ごく限られた人しか Vim のコードを把握できてなかったのを、いろんな人で開発できるようにソースコードをリファクタリングしてる Vim といった感じみたい。また、プラグインを、いろんな言語で作れるみたい。標準で、`:terminal` で Vim ないでターミナルエミュレータを開けるのも良さそう。
`:terminal` があるので、GUI の Vim を使おうと思い、[VimR](http://vimr.org/) をインストール。Swift を中心に使ってる OSX 用の Vim GUI で、元は MacVim を使ってたけど、今は、NeoVim を使ってるとのこと。

## Neovim のインストール
Homebrew で入れるだけ。

```
brew install neovim
```
https://github.com/neovim/neovim/wiki/Installing-Neovim

## VimR
ダウンロードして、解凍するだけ。
http://vimr.org/

## :terminal の設定
ターミナルエミュレータ操作後は、そのままだと、Esc でコマンドモードに戻れない。戻れるようにするために、`~/.config/nvim/init.vim` に、以下を追加 ([参考](http://tsub.hatenablog.com/entry/2016/07/02/220823))。

``` vim
tnoremap <silent> <ESC> <C-\><C-n>
```

あと、ターミナルエミュレーターでは、行数表示は消したいので、以下を追加 ([参考](https://github.com/neovim/neovim/issues/6832))。

``` vim
au TermOpen * setlocal nonumber norelativenumber
```

## 色変え
MacVim を使ってる時は、そのまま使ってたんですが、せっかく GUI を使うので、少しオシャレ感がでる colorscheme を使うことに。background が dark の時の色が良さそうだったので、[SOLARIZED](http://ethanschoonover.com/solarized) を使うことにしました。以下の画像は、SOLARIZED の GitHub より拝借。

![SOLARIZED の GitHub より拝借](https://github.com/altercation/solarized/raw/master/img/solarized-vim.png)

ただ、そのまま [altercation/vim-colors-solarized](https://github.com/altercation/vim-colors-solarized) を使うと Neovim では動かないので、注意が必要。

[frankier/neovim-colors-solarized-truecolor-only](https://github.com/frankier/neovim-colors-solarized-truecolor-only) を使えば大丈夫。詳細は、[こちら](https://github.com/qvacua/vimr/issues/311)に書いてる。

## vim-plug

Medium の記事に沿って、[vim-plug](https://github.com/junegunn/vim-plug) をインストール。インストールは、`curl` でレポジトリのデータを落としてくるだけで簡単。
プラグインのインストールは、init.vim に、いれたいプラグインの GitHub のレポジトリ名を書いて、`:PulgInstall` するだけ。チュートリアルは、[こちら](https://github.com/junegunn/vim-plug/wiki/tutorial)。

```vim
call plug#begin()
Plug 'w0rp/ale'
call plug#end()
```

## init.vim
とりあえず設定した init.vim。プラグインは、設定途中。

```vim:~/.config/nvim/init.vim
set incsearch
set hlsearch
set ts=4
set et

syntax enable

set termguicolors
set background=dark
colorscheme solarized

set backspace=indent,eol,start
set clipboard+=unnamedplus
set number

set encoding=utf-8
set fencs=utf-8,iso-2022-jp,sjis,euc-jp

au TermOpen * setlocal nonumber norelativenumber
tnoremap <silent> <ESC> <C-\><C-n>

call plug#begin()
Plug 'w0rp/ale'
call plug#end()
```

# やりのこし

JS 開発用の、プラグインの設定。