Zenn
Open12

IDE以外でフロントエンド開発したい

editor
frontend
さがワオさがワオ

きっかけ

  • UIがごちゃごちゃしてると気が散る
  • ショートカットを駆使して爆速開発したい
    • 見えている機能はGUI上で触ってしまうので、ショートカットを一向に覚えられない
      • 必要に迫られない限り覚えようとしない、己の怠惰さが原因
  • 道具をカスタマイズして自分の身体に馴染ませる過程を楽しみたい
  • マウス使うのめんどうくさくなってきた

思想

  • 1つのことだけをうまくやる（do one thing, and do it well）
    • 忍び寄る機能主義 (creeping featurism)に抵抗したい
さがワオさがワオ

Vim

どういうエディタ

テキスト入力をするためにモードを切り替える必要があるやつ。
検索・置換などを行うコマンドラインモードや、テキストを選択するだけのビジュアルモードなど、さまざまなモードがあり、やりたいことによって切り替えながら使う。

コマンドが多くて覚えられない問題

vimtutorというチュートリアルが存在している。
Vimがインストールされているのであれば、ターミナル上で vimtutorとコマンドを打つだけで立ち上がるそう。
vimtutorで速習Vim

カスタマイズ方法

Vim scriptという独自のスクリプト言語で行う。JavaScriptっぽい。while文やif文なども使用できる。
後続にVim9 scriptというスクリプト言語がある。Vim scriptよりも分かりやすい構文、処理速度向上を図ったもの。型チェックも存在する。

参考

さがワオさがワオ

Emacs

どういうエディタ

the advanced, extensible, customizable, self-documenting editor（高度で、拡張可能で、カスタマイズ可能で、自己文書化可能なエディタ）[1]

？？

カスタマイズ方法

Emacs Lispで行う。Lispの方言。Elispと書かれたりする。

参考

脚注

  1. https://www.gnu.org/software/emacs/manual/html_node/emacs/index.html ↩︎

さがワオさがワオ

使わないと良さが分からない、スルメみたいなエディタなのでは…という印象。

EmacsよりもOrg-modeについてを熱く語る記事をよく目にした。EmacsってOrg-modeのフロントエンドなのかな、とさえ思えてくる。
LogSeq的なアウトライナーみたい。

さがワオさがワオ

そういえば

定義元へのジャンプや、入力補完ってとっても便利。どんなプログラミング言語でもプラグインさえ入れちゃえば、素敵な感じにやってくれる。
でも、それってどういう仕組で動いているの？

LSP （Language Server Protocol）

昔々、プログラム言語のサポートは各エディタ・IDEごとに実装していた。でも、それってツール開発者が各言語に詳しくなければいけないわけで…とても大変。
そこで、VSCodeの開発元・Microsoftが、Language Serverというプロトコルを定義した。

これにより、IDE・エディタ側は、LSPに対応するクライアントを開発するだけで良くなった。
プログラミング言語側もLanguage Serverを開発すれば、どのIDE・エディタでも便利な機能を提供できる。

あたらしい言語を触ってみよう、と思ったとき、まずVSCodeに言語の名前がついた拡張機能を入れることがある。あれは言語サーバーを導入していたのね。

たとえば、クライアントがエディタ上の変数名にカーソルをホバーしたときの流れ（ざっくり）

  1. エディタが「この変数の定義教えて」と言語サーバーにリクエストする
  2. 言語サーバー側がなんやかんや
  3. 言語サーバーが変数の定義を返す

暇があったら読む、思ったよりも沼深い世界だった。

さがワオさがワオ

とりあえずEmacsで環境整えてみよう

環境

Ubuntu 22.04 (WSL)

ターミナルエミュレータ

Alacritty

さがワオさがワオ

Emacsの環境を整える

インストール

Ubuntu 22.04 (WSL) に Emacs 29.01 をインストール
上記手順でインストール。ちょっと時間がかかる。
apt installだと古いバージョンしか入れられないので、自分でビルドしてインストールするとよいらしい。

起動

emacsで起動。別窓が開くのが嫌な場合は-nwオプションをつければターミナル上で起動してくれる。

さがワオさがワオ

Emacsの気になるところ

  • カーソルの移動がラグいときがある
  • 50000字程度のテキストファイルを開くとちょっと遅い
    • PCのスペックはそんなに悪くないと思うんだけれど…

Emacsのいいところ

  • Org-mode、magitなど、独特なツール群が存在している
さがワオさがワオ

重いの嫌なのと、too muchすぎる気がしたのでEmacsはやめよう。

Neovimの環境を整える

インストール

https://github.com/neovim/neovim/wiki/Installing-Neovim#appimage-universal-linux-package
上記手順でインストール。

起動

nvim

設定ファイル

$HOME/.config/nvim/lua配下にinit.luaを作成すれば読んでくれる。

一応動作確認

init.lua
print('Hello World!')

と書いて保存。次にNeovimを開くとき、下の方に Hello World! と表示されているはず。

さがワオさがワオ

Neovimのプラグインマネージャ

Neovimの標準機能だとプラグインの追加、削除しかできない。
起動タイミングの設定、アップデートなど、そういったことをやるにはプラグインマネージャが必要とのこと。

最初からNeovimを触るのだったら、設定はLuaで書けるといいなあ。なのでlazy.nvimを入れていく。

lazy.nvimのインストール

https://github.com/folke/lazy.nvim#-installation

の手順を実行。

参考

NeovimのLSPクライアント

  • coc.nvim
    • 最初から多機能
  • builtin lsp
    • nvim lsp とも
    • Neovim 0.5から標準で入っている
    • 最初はシンプル、あとで色々足すスタイル

coc.nvimを使うならVSCodeでいいじゃん、という気持ちになったので、builtin lspのほうを使うことにする。