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
130
RPA実行環境のFargateへの移行 / Migrating RPA Infrastructure to Fargate
yuki_ycino
0
6.6k
コンシューマーゲームを操作するプログラマブルコントローラーの作成
yuki_ycino
0
190
Other Decks in Programming
See All in Programming
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.5k
釣り地図SNSにおける有料機能の実装
nokonoko1203
0
200
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
260
React Nativeならぬ"Vue Native"が実現するかも?_新世代マルチプラットフォーム開発フレームワークのLynxとLynxのVue.js対応を追ってみよう_Vue Lynx
yut0naga1_fa
2
380
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
620
チームの境界をブチ抜いていけ
tokai235
0
210
コード生成なしでモック処理を実現!ovechkin-dm/mockioで学ぶメタプログラミング
qualiarts
0
260
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
130
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
310
ALL CODE BASE ARE BELONG TO STUDY
uzulla
27
6.6k
When Dependencies Fail: Building Antifragile Applications in a Fragile World
selcukusta
0
110
GC25 Recap: The Code You Reviewed is Not the Code You Built / #newt_gophercon_tour
mazrean
0
110
Featured
See All Featured
Speed Design
sergeychernyshev
32
1.2k
Building Applications with DynamoDB
mza
96
6.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
130k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
115
20k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Context Engineering - Making Every Token Count
addyosmani
8
300
Building Adaptive Systems
keathley
44
2.8k
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ϥΠϑΛʂ