Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

E7c0cdb6e91562ab5995348cd2b2110e?s=128

gakuji tamaki

January 23, 2021
Tweet

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