ターミナル厨がお届けする、NeoVim入門|チュートリアルと設定方法|東京のWEB制作会社・ホームページ制作会社|株式会社GIG

ターミナル厨がお届けする、NeoVim入門|チュートリアルと設定方法

2024-02-29 制作・開発

はじめまして!株式会社GIGのサービス開発事業部でアプリケーションエンジニアとして働くちいかた(片田)です!

Web領域に限らず、エンジニアなら誰しも一度はVimを使ったことがありますよね。

なんだか小難しそうだし、特殊なキーバインドを覚えなきゃいけないというイメージがあるVimですが、一度慣れてしまえば某VSCodeよりも使いやすく快適で、何よりも見て触ってかっこいい開発環境が手に入ってしまう……かもしれません。

またVimをモダンに改良して作られたNeoVimなら、設定の書き方もとっつきやすくておすすめです。

今回はNeoVim歴1年 + GIGのターミナル厨を自称している私が、NeoVimをラフに始める方法と最低限必要な設定を紹介しつつ、NeoVimに入門した後どのようにカスタマイズしていくといいかの一例をお伝えできればと思います!

NeoVimとは

Vimは聞いたことがあっても、NeoVimは初めて聞いた……という方もいらっしゃるかもしれません。

NeoVimとは、Vimをより使いやすく、より拡張性を持たせるために作られたVim派生のテキストエディタです。

基本的な操作はVimと同じですが、設定をLuaというスクリプト言語で記述できたり、モダンなプラグインが多数開発され続けていたりと、いまから始めるならVimよりもNeoVimの方がとっつきやすく始めやすいのではと思っています。

NeoVimをラフに始める

早速NeoVimをセットアップしていきましょう!

M2チップのMacBookProに環境を構築していきます。

インストール手順は2024年2月現在の公式ドキュメントに沿って解説しますが、内容に変更があるかもしれないのでNeoVimの公式ドキュメントをご確認いただくのがいいかと思います!

我らがMacOSでは偉大なるhomebrewが使えるので、サクッとインストールしましょう。

brew install neovim


正常にインストールが完了していれば、以下のコマンドでNeoVimが起動するはずです。

nvim


neovimじゃなくてnvimです。

手癖になるまでタイピングし続けましょう。

筆者はNeoVim過激派なので、vimコマンドにNeoVimの起動コマンドをalias設定してます。

ちいかた式NeoVimチュートリアル

NeoVimやVimを始めるにあたって最初の壁となるのが、Vimの特殊操作です。

VSCodeや他のテキストエディタを使う場合はマウスやトラックパッドを使ってカーソル移動してテキストを入力するのが普通なんですが、NeoVimやVimの場合だとキーボードだけを使って、以下のようにテキスト入力、ファイルの保存を行います。

1. h, j, k, lキーでカーソルを移動 
2. iキーでインサートモードに切り替え、テキスト入力 
3. Escキーでノーマルモードに切り替え 
4. :wコマンドでファイルを保存

文字に起こすと手順が多いですし、最初は直感的でないかもしれません。

ですが2, 3週間もすると九九を唱えながらでも操作できるようになりますよ。

ほかにもいろんな操作やコマンド、ショートカットが存在しますが、ちいかた式NeoVimチュートリアルではいかにラフにNeoVimに入門するかを重視しています。そのため、上記のカーソル移動とテキストの入力、そしてファイルの保存だけ覚えておけばOKです。

最初からいろんなコマンドやショートカットを覚えるのもアリですが、まずはミニマルに始めてみることをおすすめします。

もし、もっといろんな操作やコマンドが知りたい!という方は、実際にVimを使って学べる公式チュートリアルがあるので試してみてください!

以下のコマンドでターミナルからチュートリアルが起動します。

vimtutor

最低限必要な設定

この時点では、PCにNeoVimがインストールされており、カーソル移動やインサートモードへの切り替え、ファイルの保存といった簡単な操作ができるようになっているかと思います。

早速コードを書くぞ!とNeoVimでファイルを開くと、あまりのUIのシンプルさに驚くかもしれません。

質素すぎてコードを書くモチベが下がってしまうかもしれませんが、安心してください。

ここから好きなプラグインやテーマを入れ、好きな設定を施していくことで見た目も操作性も自分に最適化されたテキストエディタになっていくのです。

今回は私が最低限必要だと思う設定を紹介していきます!

NeoVimの設定はデフォルトで ~/.config/nvim/init.lua を参照するので、ファイルを作成して直接設定を書いていきましょう。

設定が増えてきたらファイルを分割したりなんやかんやしたりすればいいです。

■文字コードをUTF-8にする設定 

ファイルを開いたとき文字化けしないよう、UTF-8を指定しておきましょう。

vim.scriptencoding = 'utf-8'
vim.opt.encoding = 'utf-8'
vim.opt.fileencoding = 'utf-8'


■編集中のファイルに行番号を表示する設定

ファイルの行数がわからないと何かと困るので、行番号は表示するようにしましょう。 上記では説明していませんでしたが、NeoVimでは行番号を指定して一気にカーソル移動することができます。

vim.wo.number = true


■不必要なswapファイルを作成しないようにする設定

NeoVimでファイルを開いた時、開いたファイルと同じパスにswapファイルと呼ばれるファイルが生成されます。

swapファイルとは、NeoVimやVimでのファイル編集中にエラーが発生した場合でも編集内容を復元できるようにするためのファイルらしいのですが、私は1年間NeoVimを使ってきてswapファイルがないことで困ったことはなく、毎回ファイルが生成されるのも邪魔なため、設定で無効にしています。

vim.opt.swapfile = false

NeoVimに入門したあとやること

実際にNeoVimを業務レベルで使えるようになるために、もう少しだけ操作の練習や設定・プラグインが必要です。

操作に関しては、以下のステップで習得していくのがおすすめです!

1. 平日の業務時間外にNeoVimで書き捨てのプログラムを書いてみる 
2. 週末の個人開発からNeoVimに置き換える 
3. 業務で使うエディタを他のエディタとNeoVimを併用する 
4. 業務で使うエディタを完全にNeoVimに移行する

開発速度の向上のためにNeoVimを使いたいのに、NeoVimを使っていることが原因で生産性を落としてしまっては元も子もありません。

ですので先ほどご紹介したVimチュートリアルをやりつつ、設定を煮詰めつつ、徐々に移行していくのが大切だと思います。

最後に私のdotfilesをご紹介します!

設定や、実際に使用しているプラグインなど、もしよければ参考にしてみてください。

https://github.com/aiirononeko/dotfiles/tree/main/nvim

まとめ

この記事では超シンプルに、ラフに、NeoVimに入門する方法をご紹介しました。

やたらハードルが高いと思われがちなVim, NeoVimですが、一度使い始めてしまえば意外となんとかなるものです。

ターミナル1つあれば開発できる環境が整うのは操作性としてもい良いと思いますし、設定を煮詰めていくことで自分の自分による自分のための開発環境が出来上がるのも楽しみの一つかと思います。

皆さんもぜひ、素敵なNeoVimライフを送ってください!

株式会社GIGは、ナショナルクライアントからスタートアップまで、Webコンサルティング、UI/UXデザイン、システム開発など、DX支援をおこなうデジタルコンサルティング企業です。また、50,000人以上が登録するフリーランス・副業向けマッチングサービス『Workship』や、7,000人以上が登録するデザイナー特化エージェントサービス『クロスデザイナー』、リード獲得に必要な機能を備えたCMS『LeadGrid』、UXコンサルティングサービス『UX Design Lab』などを展開しています。

WebやDX支援のご相談はいつでもご連絡ください。

Web制作/Webマーケティングに関するご相談・ご依頼はこちら
会社紹介資料のダウンロードはこちら

また、株式会社GIGでは一緒に働くメンバーも募集中です!少しでもご興味を持っていただいた方は、ぜひカジュアル面談でお話しましょう。

採用応募はこちら(GIG採用サイト)
採用応募はこちら(Wantedly)

WebやDXの課題、お気軽にご相談ください。

片田 凌太

1997年10月生まれ。自動車のコネクティッドサービス開発や日本最大のコーヒーサブスクリプションサービス開発などの経験を経て2023年10月に株式会社GIGに入社。現在は、Webサイト制作からコンテンツSEO、問い合わせ管理、LP制作などWebマーケティングに必要な機能をもったCMS『LeadGrid』の開発チームに所属。