#JTF2021W_D VimiumではじめるよちよちVimmerライフ / Vimmer beginners start with Vimium

Vimmerへの憧れを抱く私がどうやってVimを使いこなせるようにトレーニングしているか、そのために使っているVimiumの使い方、魅力について、Vim初心者の私がお話しできればと思います。

Transcript

1. Vimiumではじめる よちよちVimmerライフ July Tech Festa 2021 Winter 2021/01/24(Sun) 玉木　岳爾 (Gakuji Tamaki) #JTF2021W #JTF2021W_D 1 資料のQRコード
2. 2 【いきなりチャレンジ企画】 本日の発表を1分でご紹介
3. 3 https://www.independentlab.net/ppt-starwars/
4. 4 はい。アップ完了です。これより20分で本日の発表をします。 p.s. #ゆるぼ ↓ #JTF2021W #JTF2021W_D でTweetしていただけると泣いて喜 びます。 ❏ ブラウザハック術 ❏ Vimのおすすめキーバインド
5. 自己紹介 ❏ 名前：玉木　岳爾 (Gakuji Tamaki) ❏ Twitter/ @gkzvoice ❏ Github / @gkzz, Speakerdeck / @gkzz , Medium / @gkzz, Qiita/ @gkzz ❏ Zenn/ @gkz ❏ July Tech Festa 2021 Winterのボランティアスタッフ ❏ ハッシュタグは #JTF2021W #JTF2021W_D ❏ 所属：株式会社エーピーコミュニケーションズ ❏ お仕事：Djangoアプリケーション開発エンジニア (2020/07-現在) ❏ GKEにてCI/CD環境構築(2020/11-現在) ❏ StackStorm Custom Pack開発(2018/12-2020/06) ❏ 読書会：#技術書を英語で読む会 #JTF2021W #JTF2021W_D 5
6. ❏ Vimのキーバインドに慣れたい方 ❏ 他のエディターと二股している方 ❏ ネットサーフィン好きな方 どんな人に聞いてほしいか #JTF2021W #JTF2021W_D 6
7. キーバインド (key bind)とは｜「分かりそう」で「分か らない」でも「分かった」気になれるIT用語辞典 https://wa3.i-3-i.info/word12450.html #JTF2021W #JTF2021W_D 語句確認)キーバインド 7
8. Vimのキーバインド Vimのキーに対する機能の割り当て 語句確認)キーバインド 8 #JTF2021W #JTF2021W_D
9. お話したいこと #JTF2021W #JTF2021W_D 9 ❏ なぜVimに惹かれたか？ ❏ Vimの操作に慣れていくために ❏ そしてその先に見えた景色とは。。。 ❏ これがよちよちVimmer三種の神器だ
10. お話したいこと #JTF2021W #JTF2021W_D 10 ❏ なぜVimに惹かれたか？ ❏ Vimの操作に慣れていくために ❏ そしてその先に見えた景色とは。。。 ❏ これがよちよちVimmer三種の神器だ
11. なぜVimに惹かれたか？ ❏ はやい ❏ @2,3年前のギークハウスのゆるのみ ❏ 開発ライブ実況 #1 Vim編 (メルペイ Architectチーム Backendエンジニア ❏ しかも、いつでもどこでもはやい ❏ 最近リモートサーバー上の 数千行単位のmanifestファイルを編集 ❏ e.g. https://github.com/argoproj/argo-cd/blob/master/manifests/install.yaml ❏ VS Codeで開こうとしたら開けず、落ちた ❏ っていうか、そんなファイルなんであるの？ #JTF2021W #JTF2021W_D 11
12. お話したいこと #JTF2021W #JTF2021W_D 12 ❏ なぜVimに惹かれたか？ ❏ Vimの操作に慣れていくために Vimium使いましたということなのですが、、。 ❏ そしてその先に見えた景色とは。。。 ❏ これがよちよちVimmer三種の神器だ
13. Vimiumってなんなの？ ❏ 読み方は「ヴィミィユム」、「ヴィミィウム」？ ❏ Vimumではないです！Vimiumです！ ❏ 「それまちがってね？」とTwitterでご指摘されて気がつく、、 ❏ Chrome/Firefoxの拡張機能 ❏ Vimライクなキーバインドでブラウザを操作できる ❏ jは下、kは上、「/」で検索などなど #JTF2021W #JTF2021W_D 13
14. Vimの操作に慣れていくために #JTF2021W #JTF2021W_D 14 少し、Vimiumに出会う前の話をさせてください。
15. Vimiumに出会う前の話 インサートモードで移動するな よ〜。すぐEscしろ！Esc！ https://www.irasutoya.com/2015/03/blog-post_138.html https://www.irasutoya.com/2013/03/blog-post_490.html #JTF2021W #JTF2021W_D 15
16. Vimiumに出会う前の話 Vimでファイルを操作しようとしたら。 あ”あ”あ”！ インサートモードで 移動しちゃう！！ #JTF2021W #JTF2021W_D 16
17. Vimiumに出会う前の話 なぜ混乱した？ https://www.irasutoya.com/2014/02/blog-post_28.html #JTF2021W #JTF2021W_D 17
18. Vimiumに出会う前の話 Vimを使う モード切替 キーバインド 編集(タイピング) いきなり3つ出てきたのが効いた #JTF2021W #JTF2021W_D 18
19. Vimiumに出会う前の話 Vimを使う キーバインド 編集(タイピング) インサートモードのまま編集 モード切替 #JTF2021W #JTF2021W_D 19
20. Vimiumに出会う前の話 キーバインド身に付いて いないのに他のこともや るからパニクるっぽい な、、、 https://www.irasutoya.com/2014/02/blog-post_28.html #JTF2021W #JTF2021W_D 20
21. Vimのキーバインド Vimのキーに対する機能の割り当て 語句確認)キーバインド(再掲) 21 #JTF2021W #JTF2021W_D
22. Vimiumに出会う前の話 ・・・・・ https://www.irasutoya.com/2014/02/blog-post_28.html #JTF2021W #JTF2021W_D 22
23. Vimiumに出会う前の話 https://www.irasutoya.com/2016/02/blog-post_547.html #JTF2021W #JTF2021W_D 23
24. Vimiumに出会う前の話 Vimを使う モード切替 キーバインド 編集(タイピング) キーバインドを覚えることだけを考える #JTF2021W #JTF2021W_D 24 https://www.flaticon.com/free-icon/point_556232
25. 小話)クロール泳いだことはありますか？ https://www.irasutoya.com/2012/12/blog-post_429.html #JTF2021W #JTF2021W_D 25
26. 小話)バタ足から覚えてから水泳のクロール https://www.irasutoya.com/2014/01/blog-post_3507.html https://www.irasutoya.com/2012/12/blog-post_429.html 26 #JTF2021W #JTF2021W_D
27. 小話)バタ足から覚えてから水泳のクロール https://www.irasutoya.com/2014/01/blog-post_3507.html https://www.irasutoya.com/2012/12/blog-post_429.html 27 #JTF2021W #JTF2021W_D
28. Vimiumに出会う前の話 水泳のクロールを身につけるには、まずバタ足から Vimを身につけるには、まずキーバインドから 28 #JTF2021W #JTF2021W_D
29. Vimiumに出会う前の話 キーバインドだけ覚えられる、 イイ感じのやつなんてあるの？？ クロールでいうビートバン的な。 29 #JTF2021W #JTF2021W_D
30. Vimiumに出会う前の話 もちろんあります！ だって、#推しテク総選挙 ですから 30 #JTF2021W #JTF2021W_D
31. https://www.irasutoya.com/2018/12/blog-post_418.html https://chrome.google.com/webstore/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmeb キーバインドだけ覚 えられる、 イイ感じのやつ 31 #JTF2021W #JTF2021W_D
32. Vimium https://www.irasutoya.com/2018/12/blog-post_418.html https://chrome.google.com/webstore/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmeb 32 #JTF2021W #JTF2021W_D
33. Vimの操作に慣れていくために #JTF2021W #JTF2021W_D 33 以上がVimiumに出会う前の話です。Vimのキーバインドをブラウ ザ上で覚えられることに気がついたわけなんですね。 では、Vimiumのスゴイところはなんでしょうか。それについてこれ からお話しします。
34. Vimiumのスゴイところ めちゃシンプルに Vimのキーバインド でブラウザを操作できる 34 #JTF2021W #JTF2021W_D
35. Vimiumのスゴイところ 35 #JTF2021W #JTF2021W_D なにおきた？
36. そうなると思ったので、有給投下して デモ動画、8個も 作りました(褒めてくれ Vimiumのスゴイところ 36 #JTF2021W #JTF2021W_D
37. i/I (Shift + i) Vimiumのスゴイところ h j k l gg/G (Shift + g) ページの上下スクロール 37 #JTF2021W #JTF2021W_D
38. l Vimiumのスゴイところ h J (Shift + j) K (Shift + k) gg/G (Shift + g) タブの移動 i/I (Shift + i) 38 #JTF2021W #JTF2021W_D
39. l Vimiumのスゴイところ h j/J k/K gg/G (Shift + g) i/I (Shift + i) ページの 戻る/進む 39 #JTF2021W #JTF2021W_D
40. l Vimiumのスゴイところ h j/J k/K gg/G (Shift + g) i/I (Shift + i) リンククリック 移動したいリンクのアルファベットを指定 Iは別タブ 40 #JTF2021W #JTF2021W_D
41. ページの最上部と最下部 Vimiumのスゴイところ h j/J gg/G (Shift + g) 41 #JTF2021W #JTF2021W_D
42. Vimiumのスゴイところ 「ページ内検索」からの「リンク移動」 I (Shift + i) / K (Shift + k) l J (Shift + j) 42 #JTF2021W #JTF2021W_D
43. Vimiumのスゴイところをもっと引き出す カーソルがページ外にいってしまうと Vimiumのキーバ インドが効かない。そこでカーソルをページに戻す必 要がある。 そこで検索バーに「j」と叩くと、「javascript:」が入力さ れるようにChromeで設定しておく。 43 参考: 検索エンジンはカスタマイズしてほしいです #JTF2021W #JTF2021W_D
44. Vimiumのスゴイところをもっと引き出す 検索バーに「t」と叩くだけで ページのタイトルとURLをコピーする 44 参考: 検索エンジンはカスタマイズしてほしいです #JTF2021W #JTF2021W_D
45. Vimiumのスゴイところ https://www.irasutoya.com/2017/03/blog-post_49.html 45 #JTF2021W #JTF2021W_D
46. Vimiumのスゴイところ https://www.irasutoya.com/2017/03/blog-post_49.html 46 #JTF2021W #JTF2021W_D
47. お話したいこと #JTF2021W #JTF2021W_D 47 ❏ なぜVimに惹かれたか？ ❏ Vimの操作に慣れていくために ❏ そしてその先に見えた景色とは。。。 ❏ これがよちよちVimmer三種の神器だ
48. 48 https://www.irasutoya.com/2014/10/blog-post_62.html
49. Vimiumを使い始めた今の課題 #JTF2021W #JTF2021W_D 49 円全体をVimのキーボードとしたとき、 Vimiumでは一部しか合 致しない。 Vimだけのキーバインドは 弱い。
50. Vimiumを使い始めた今の課題 ❏ 横の移動に弱い ❏ 右移動はw ❏ 合わせ技も弱い ❏ 右下はjw #JTF2021W #JTF2021W_D 50
51. 打開策1) pcの壁紙 #JTF2021W #JTF2021W_D 51
52. 1)アウトプットするた めにインプット 打開策2)アウトプット駆動なインプット #JTF2021W #JTF2021W_D 3)フィードバックから次 のインプットネタを発 掘 2)アウトプットまでこぎ つける いきなりフィードバックを もらえるアウトプットをしない 52
53. 1)アウトプットするた めにインプット 打開策2)アウトプット駆動なインプット #JTF2021W #JTF2021W_D 3)フィードバックから次 のインプットネタを発 掘 2)アウトプットまでこぎ つける 1b)自分で気 づきを得る 1a)アウトプッ トする前のア ウトプット 53 自分で気づきを得る ためにアウトプット！ →Zennのスクラップで試験運用中
54. 1)アウトプットするた めにインプット 打開策2)アウトプット駆動なインプット #JTF2021W #JTF2021W_D 3)フィードバックから次 のインプットネタを発 掘 2)アウトプットまでこぎ つける 1b)自分で気 づきを得る 1a)アウトプッ トする前のア ウトプット 他者からフィードバックを もらうためにアウトプッ ト！ →ブログ、LT、 JTF！ 54
55. 1)アウトプットするた めにインプット 打開策2)アウトプット駆動なインプット #JTF2021W #JTF2021W_D 3)フィードバックから次 のインプットネタを発 掘 2)アウトプットまでこぎ つける 1b)自分で気 づきを得る 1a)アウトプッ トする前のア ウトプット 55 アウトプットには 2種類ある。 - フィードバックを自分からもらうか - 他者からもらうか
56. お話したいこと #JTF2021W #JTF2021W_D 56 ❏ なぜVimに惹かれたか？ ❏ Vimの操作に慣れていくために ❏ そしてその先に見えた景色とは。。。 ❏ これがよちよちVimmer三種の神器だ
57. これがよちよちVimmer三種の神器だ ❏ Vimium ❏ pcの壁紙 ❏ アウトプット駆動なインプット 57 #JTF2021W #JTF2021W_D
58. 結びに) 2021年の抱負はありますか？ https://twitter.com/shinojapan/status/1345696643190980610 https://www.ted.com/talks/matt_cutts_try_something_new_for_30_days #JTF2021W JTF2021W_D 58
59. July Tech Festa 2021 Winter登壇 2021年の抱負 #JTF2021W #JTF2021W_D July Tech Festa 2020にプログラム委員として参加したので振り返ってみる エンジニア3年目を迎えるにあたってのふりかえりとこれから 59
60. Q&A #JTF2021W #JTF2021W_D 60 Q&Aタ～イム
61. Q&A自作自演 Q. Vimiumのインストール、初期設定教えて。 A.手前味噌ですが、コチラの記事を ↓。 【Chrome拡張機能】Vimライクなキーバインドでブラウザを操作する Vimiumのオレオレ設定方法をスクリーン ショットで解説 Q. メインエディタはもちろん Vimだよね？ A.コーディングする際には 「Vimを使うように」している。オンラインミーティングでターミナルとエディタをひとつの 画面のなかで行き来する際には VS Codeを使う。差分を見るときはプロジェクトで使っている GitlabのGUI。 #JTF2021W #JTF2021W_D 61
62. Q&A自作自演 Q. Vimを使っていくうえでやらなきゃよかったことはある？ A. プラグインを中途半端に入れてしまったこと。 プラグインの機能は Vim本体ではできることか分からず、ググっ て見つけたいい感じのプラグインを入れてしまった。 https://github.com/gkzz/dotfiles Q. Vimを使っていくうえで補完とかどうするの？ A.動的言語のPythonを触ることが多く、その点は考える機会がないまま今回の発表がきてしまった。自分が Vimに惹かれたのは早くファイルを移動できることだったので。 #JTF2021W #JTF2021W_D 62
63. 参考 ❏ philc/vimium: The hacker's browser. ❏ Chromeをvimライクに使えるようにする vimium - Qiita ❏ 検索エンジンはカスタマイズしてほしいで す ❏ 【Chrome拡張機能】Vimライクなキーバインドでブラウザを操作する Vimiumのオレオレ設定方法をスク リーンショットで解説 ❏ Neovimの設定Neovim の設定を綺麗に整理してみた - Qiita #JTF2021W #JTF2021W_D 63
64. ご清聴ありがとうございました。 VimiumではじめるよちよちVimmerライフ #JTF2021W #JTF2021W_D 64