Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Neovimのリモートプラグインとはなんなのか、あるいはTypeScriptでのNeov...
Search
yuki-yano
July 10, 2020
Programming
1
1.7k
Neovimのリモートプラグインとはなんなのか、あるいはTypeScriptでのNeovimプラグイン実装について / Developing Remote Plugin in TypeScript
yuki-yano
July 10, 2020
Tweet
Share
More Decks by yuki-yano
See All by yuki-yano
docker-machineで簡単にデモ環境を構築する、あるいはローカルのリソースを消費しない開発環境について / Easily build an environment with docker-machine
yuki_ycino
0
120
RPA実行環境のFargateへの移行 / Migrating RPA Infrastructure to Fargate
yuki_ycino
0
6.6k
コンシューマーゲームを操作するプログラマブルコントローラーの作成
yuki_ycino
0
180
Other Decks in Programming
See All in Programming
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
440
Deep Dive into ~/.claude/projects
hiragram
14
14k
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
200
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.5k
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
930
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
870
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
390
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
7k
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
3
960
効率的な開発手段として VRTを活用する
ishkawa
0
160
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
660
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
99
37k
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Embracing the Ebb and Flow
colly
86
4.8k
How STYLIGHT went responsive
nonsquared
100
5.6k
Bash Introduction
62gerente
613
210k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
282
13k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
Statistics for Hackers
jakevdp
799
220k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Transcript
NeovimͷRemote PluginͱͳΜͳͷ͔ɺ ͋Δ͍TypeScriptͰͷNeovimͷϓϥάΠϯ ࣮ʹ͍ͭͯ Yuki Yano @yuki_ycino gorilla.vim#13 2020/07/10
Who is me • yuki-ycino (Yuki Yano) • WebΤϯδχΞʢओʹTypeScriptɾRailsɾͦͷଞϑϧελοΫؾຯʣ •
Vimྺ7͘Β͍ • झຯ • ओʹϑϩϯτΤϯυͷαʔϏε։ൃ • VimϓϥάΠϯͷ։ൃ • ࠷ۙେ͕fzfΛͬͨϓϥάΠϯ
Output • DXΛେ෯ʹԼͤ͞ΔDocker for MacΛࣺͯͯ Mac࠷ͷDockerڥΛखʹೖΕΔ https://qiita.com/yuki_ycino/items/cb21cf91a39ddd61f484 • tmuxΛޮΑͬͯ͘։ൃΛരʹ͢Δ࠷ߴͷઃఆ https://qiita.com/yuki_ycino/items/ef5e6b63c8f9af2f03c0
• Electron + Vue + flowtypeͰ࠷ߴͷը૾Λऩू͢ΔͨΊͷ TwitterΫϥΠΞϯτΛ࡞ͬͨ https://qiita.com/yuki_ycino/items/9a2f7feef947c4c258ac • Dockerʹ͍ͭͯجຊ͔Β࠷ۙՃ͞Εͨػೳ·Ͱ·ͱΊ https://qiita.com/yuki_ycino/items/b94ae2bf7d78685cd6f5
Agenda • Remote Pluginͱ • ࣮ࡍʹ։ൃͨ͠ϓϥάΠϯʹ͍ͭͯ(fzf-preview.vim) • TypeScriptͰRemote PluginΛ։ൃ͢Δ •
ࠓޙʹ͍ͭͯ
Remote PluginΛͬͨ͜ͱ͋Γ·͔͢ʁ
Remote Pluginͱ • Provider͕ఏڙ͞Ε͍ͯΔҙͷݴޠͰNeovimͷϓϥάΠϯ͕ ։ൃͰ͖Δ • PythonɾNodeɾRuby… • pip install
neovim • npm install -—global neovim • Dark powered plugin…
Pros • Vim scriptͱൺͯϞμϯͳݴޠͰϓϥάΠϯ։ൃ͕Ͱ͖Δ • ྫ͑NodeͰnpmύοέʔδ͕͑ΔͳͲɺݴޠͷΤίγες Ϝ͕ڧྗ • ଟ͘ͷ߹ɺ࣮ߦ͕Vim scriptͱൺֱͯ͠ͷ͘͢͝ૣ͍
• ݴޠͷαϙʔτ͕ڧྗʢVim script͕͋·Γڧ͘ͳ͍ɾɾɾʣ • ಛʹTypeScriptͰcoc.nvimͳͲͰͷ։ൃମݧ͕͘͢͝Α͍
Cons • VimͰ͏͜ͱ͕Ͱ͖ͳ͍ • ใ͕গͳ͘ϋϚΓͲ͜Ζ͕ଟ͍ • Vim scriptͱͷ࿈ܞͰऑ͍෦͕͋Δ • ར༻͢ΔࡍʹPythonNodeͷϥϯλΠϜ͕ඞཁ
• :UpdateRemotePluginsͷਏ͞
࣮ͨ͠ϓϥάΠϯʹ͍ͭͯ • fzf-preview.vim • Pure Vim script͔ΒRemote PluginͷҠߦ • ࠓिv2ͱͯ͠Remote
PluginΛϦϦʔε͠·ͨ͠ • https://github.com/yuki-ycino/fzf-preview.vim • Scrapboxʢ։ൃϝϞʣ • https://scrapbox.io/fzf-preview/ • Vim script 1500ߦ → TypeScript 3500ߦ + Vim script 500ߦ
ϓϥάΠϯ(fzf-preview.vim)ͷએ • fzf.vim͕ʢಛʹ࡞Γ࢝Ίͨ࣌ʣ৭ʑͱඍົͩͬͨ • ྫ͑devicons͚Δ͚ͩͰ͍͢͝ফ͢ΔʢϢʔβຖʹ.vimrcʹൿͷઃఆ͕ॻ͔Ε ͍ͯΔʣ • ѻ͏࣌ͷΠϯλʔϑΣΠεʢఏڙ͞ΕͯΔϢʔςΟϦςΟʣඍົ͚ͩͲFuzzy Finderͱ ͯ͠ͱͯ༏ल
• ಛʹpreviewػೳ͕ศརɺ։ൃମݧര্͕Γ • wrap͔ͯ͠Γ͘͢֎෦͔Βศརʹ͑ΔΑ͏ʹ͔ͨͬͨ͠ • deviconsɾcolorizeɾΩʔίϯϑΟάɾcallbackͷઃఆ…
࣮ԋ
TypeScriptͰͷRemote Plugin։ൃ • TypeScriptͰRemote PluginΛ࣮͠ɺJavaScriptτϥϯεύΠϧ͢Δ • webpack + commonjs •
NodeͷProvider͔ΒNeovimͷܕఆ͕ٛఏڙ͞Ε͍ͯΔ
Example • ࠓճ࡞ͨ͠ϘΠϥʔϓϨʔτ • https://github.com/yuki-ycino/nvim-remote-plugin-with-typescript-example/ • TypeScript։ൃͰΑ͘ΘΕΔπʔϧઃఆશ෦Γ • TypeScript, webpack,
eslint, prettier, jest, huskey, lint-staged, github actions
TypeScript։ൃͷϝϦοτ 1/2 • ࠷ۙΘΕ͍ͯΔݴޠͰτοϓΫϥεʹ։ൃڥΤίγεςϜ͕ڧྗ • npm package • tsserver, eslint,
prettier, jest… • coc.nvim • ڧྗͳܕγεςϜͱLinterͰόάͷࠞೖΛࣄલʹ͛Δ • ۃྗTypeScriptͷੈքͰ࣮Λ݁ͤ͞Δ
TypeScript։ൃͷϝϦοτ 2/2 • Functionalʹॻ͍ͯॊೈͳઃܭ͕Մೳ • ScrapboxͷʮProcesses, ProcessͷొʯʮProcessʯࢀর • Nodeͷ࣮ߦͷ͞ •
50000ߦʹରͯ͠deviconsͷ༩ʹ͔͔Δ͕࣌ؒ800ms → 2-5ms
࣮ࡍʹ༻ͨ͠ύοέʔδ • Redux • State container • yargs • Args
parser • lodash • Modern utility library • Jest • Testing framework
࣮ԋ
TypeScript։ൃͷσϝϦοτ • FuncRef͕͑ͳ͍ • Vim script͔ΒFuncRef͕ड͚औΕͳ͍ • ࡞ͨؔ͠ͷFuncRef͕ੜͰ͖ͳ͍ • ݺͼग़͠ຖʹঢ়ଶ͕ॳظԽ͞ΕΔ
• fzfͷίʔϧόοΫʹొͨ͠Οϯυੜ͕࣮ؔߦ࣌ʹԿނ͔Τϥʔ ʹͳΔʢNeovimຊମͰൃੜɺݪҼෆ໌ʣ
TypeScriptͰͷRemote Plugin։ൃ͍͍ͧ
ࠓޙʹ͍ͭͯ • fzf.vimͱͷࠩผԽͷͨΊʹ͑ΔศརϦιʔεΛ૿͍ͯ͘͠ • TypeScriptͰ։ൃͨ͜͠ͱͰVim script͔Βͷ֦ுੑ͕མͪͯ͠·͍ͬͯΔ ͷͰɺϢʔβ͕֦ு͍͢͠APIΛఏڙ͢ΔखஈΛߟ͑Δ • TypeScript͔ΒܕఆٛΛఏڙ͢ΔͳͲͯ͠ɺʢྫ͑DeniteͷΑ͏ʹʣ fzf-preview.vimΛ֦ு͢ΔRemote
Plugin͕։ൃͰ͖ΔΑ͏ʹ͢Δ
ࠓޙʹ͍ͭͯ • coc.nvimͷΤίγεςϜʢcoc extensionsʣʹΔ͜ͱͰvimͰTypeScriptΛ ಈ͔͢͜ͱ͕Ͱ͖ͦ͏ͳͷͰݕূத • coc.nvimಠࣗʹrpcΛ࣮͍ͯ͠Δʢͣʣ • Remote Pluginͱฒߦͯ͠coc-fzf-previewͱͯ͠ͷఏڙ
• Neovim or cocڥͰಈ࡞͢Δ • :CocInstall coc-fzf-preview • cocͰ:UpdateRemotePluginsͳͲ͕ෆཁ
Remote Plugin (+ fzf-preview.vim)Ͱ շదͳvimϥΠϑΛʂ