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

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

gkzz
January 23, 2021

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

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

gkzz

January 23, 2021
Tweet

More Decks by gkzz

Other Decks in Technology

Transcript

  1. Vimiumではじめる
    よちよちVimmerライフ
    July Tech Festa 2021 Winter
    2021/01/24(Sun)
    玉木 岳爾 (Gakuji Tamaki)
    #JTF2021W #JTF2021W_D
    1
    資料のQRコード

    View Slide

  2. 2
    【いきなりチャレンジ企画】
    本日の発表を1分でご紹介

    View Slide

  3. 3
    https://www.independentlab.net/ppt-starwars/

    View Slide

  4. 4
    はい。アップ完了です。これより20分で本日の発表をします。
    p.s. #ゆるぼ ↓
    #JTF2021W #JTF2021W_D でTweetしていただけると泣いて喜
    びます。
    ❏ ブラウザハック術
    ❏ Vimのおすすめキーバインド

    View Slide

  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

    View Slide

  6. ❏ Vimのキーバインドに慣れたい方
    ❏ 他のエディターと二股している方
    ❏ ネットサーフィン好きな方
    どんな人に聞いてほしいか #JTF2021W #JTF2021W_D
    6

    View Slide

  7. キーバインド (key bind)とは|「分かりそう」で「分か
    らない」でも「分かった」気になれるIT用語辞典
    https://wa3.i-3-i.info/word12450.html
    #JTF2021W #JTF2021W_D
    語句確認)キーバインド
    7

    View Slide

  8. Vimのキーバインド
    Vimのキーに対する機能の割り当て
    語句確認)キーバインド
    8
    #JTF2021W #JTF2021W_D

    View Slide

  9. お話したいこと #JTF2021W #JTF2021W_D
    9
    ❏ なぜVimに惹かれたか?
    ❏ Vimの操作に慣れていくために
    ❏ そしてその先に見えた景色とは。。。
    ❏ これがよちよちVimmer三種の神器だ

    View Slide

  10. お話したいこと #JTF2021W #JTF2021W_D
    10
    ❏ なぜVimに惹かれたか?
    ❏ Vimの操作に慣れていくために
    ❏ そしてその先に見えた景色とは。。。
    ❏ これがよちよちVimmer三種の神器だ

    View Slide

  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

    View Slide

  12. お話したいこと #JTF2021W #JTF2021W_D
    12
    ❏ なぜVimに惹かれたか?
    ❏ Vimの操作に慣れていくために
    Vimium使いましたということなのですが、、。
    ❏ そしてその先に見えた景色とは。。。
    ❏ これがよちよちVimmer三種の神器だ

    View Slide

  13. Vimiumってなんなの?
    ❏ 読み方は「ヴィミィユム」、「ヴィミィウム」?
    ❏ Vimumではないです!Vimiumです!
    ❏ 「それまちがってね?」とTwitterでご指摘されて気がつく、、
    ❏ Chrome/Firefoxの拡張機能
    ❏ Vimライクなキーバインドでブラウザを操作できる
    ❏ jは下、kは上、「/」で検索などなど
    #JTF2021W #JTF2021W_D
    13

    View Slide

  14. Vimの操作に慣れていくために #JTF2021W #JTF2021W_D
    14
    少し、Vimiumに出会う前の話をさせてください。

    View Slide

  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

    View Slide

  16. Vimiumに出会う前の話
    Vimでファイルを操作しようとしたら。
    あ”あ”あ”!
    インサートモードで
    移動しちゃう!!
    #JTF2021W #JTF2021W_D
    16

    View Slide

  17. Vimiumに出会う前の話
    なぜ混乱した?
    https://www.irasutoya.com/2014/02/blog-post_28.html
    #JTF2021W #JTF2021W_D
    17

    View Slide

  18. Vimiumに出会う前の話
    Vimを使う
    モード切替
    キーバインド
    編集(タイピング)
    いきなり3つ出てきたのが効いた
    #JTF2021W #JTF2021W_D
    18

    View Slide

  19. Vimiumに出会う前の話
    Vimを使う キーバインド
    編集(タイピング)
    インサートモードのまま編集
    モード切替
    #JTF2021W #JTF2021W_D
    19

    View Slide

  20. Vimiumに出会う前の話
    キーバインド身に付いて
    いないのに他のこともや
    るからパニクるっぽい
    な、、、
    https://www.irasutoya.com/2014/02/blog-post_28.html
    #JTF2021W #JTF2021W_D
    20

    View Slide

  21. Vimのキーバインド
    Vimのキーに対する機能の割り当て
    語句確認)キーバインド(再掲)
    21
    #JTF2021W #JTF2021W_D

    View Slide

  22. Vimiumに出会う前の話
    ・・・・・
    https://www.irasutoya.com/2014/02/blog-post_28.html
    #JTF2021W #JTF2021W_D
    22

    View Slide

  23. Vimiumに出会う前の話
    https://www.irasutoya.com/2016/02/blog-post_547.html
    #JTF2021W #JTF2021W_D
    23

    View Slide

  24. Vimiumに出会う前の話
    Vimを使う
    モード切替
    キーバインド
    編集(タイピング)
    キーバインドを覚えることだけを考える
    #JTF2021W #JTF2021W_D
    24
    https://www.flaticon.com/free-icon/point_556232

    View Slide

  25. 小話)クロール泳いだことはありますか?
    https://www.irasutoya.com/2012/12/blog-post_429.html
    #JTF2021W #JTF2021W_D
    25

    View Slide

  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

    View Slide

  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

    View Slide

  28. Vimiumに出会う前の話
    水泳のクロールを身につけるには、まずバタ足から
    Vimを身につけるには、まずキーバインドから
    28
    #JTF2021W #JTF2021W_D

    View Slide

  29. Vimiumに出会う前の話
    キーバインドだけ覚えられる、
    イイ感じのやつなんてあるの??
    クロールでいうビートバン的な。
    29
    #JTF2021W #JTF2021W_D

    View Slide

  30. Vimiumに出会う前の話
    もちろんあります!
    だって、#推しテク総選挙 ですから
    30
    #JTF2021W #JTF2021W_D

    View Slide

  31. https://www.irasutoya.com/2018/12/blog-post_418.html
    https://chrome.google.com/webstore/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmeb
    キーバインドだけ覚
    えられる、
    イイ感じのやつ
    31
    #JTF2021W #JTF2021W_D

    View Slide

  32. Vimium
    https://www.irasutoya.com/2018/12/blog-post_418.html
    https://chrome.google.com/webstore/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmeb
    32
    #JTF2021W #JTF2021W_D

    View Slide

  33. Vimの操作に慣れていくために #JTF2021W #JTF2021W_D
    33
    以上がVimiumに出会う前の話です。Vimのキーバインドをブラウ
    ザ上で覚えられることに気がついたわけなんですね。
    では、Vimiumのスゴイところはなんでしょうか。それについてこれ
    からお話しします。

    View Slide

  34. Vimiumのスゴイところ
    めちゃシンプルに
    Vimのキーバインド
    でブラウザを操作できる
    34
    #JTF2021W #JTF2021W_D

    View Slide

  35. Vimiumのスゴイところ
    35
    #JTF2021W #JTF2021W_D
    なにおきた?

    View Slide

  36. そうなると思ったので、有給投下して
    デモ動画、8個も
    作りました(褒めてくれ
    Vimiumのスゴイところ
    36
    #JTF2021W #JTF2021W_D

    View Slide

  37. i/I
    (Shift + i)
    Vimiumのスゴイところ
    h j k l
    gg/G
    (Shift + g)
    ページの上下スクロール
    37
    #JTF2021W #JTF2021W_D

    View Slide

  38. l
    Vimiumのスゴイところ
    h J
    (Shift + j)
    K
    (Shift + k)
    gg/G
    (Shift + g)
    タブの移動
    i/I
    (Shift + i)
    38
    #JTF2021W #JTF2021W_D

    View Slide

  39. l
    Vimiumのスゴイところ
    h j/J k/K
    gg/G
    (Shift + g)
    i/I
    (Shift + i)
    ページの
    戻る/進む
    39
    #JTF2021W #JTF2021W_D

    View Slide

  40. l
    Vimiumのスゴイところ
    h j/J k/K
    gg/G
    (Shift + g)
    i/I
    (Shift + i)
    リンククリック
    移動したいリンクのアルファベットを指定
    Iは別タブ
    40
    #JTF2021W #JTF2021W_D

    View Slide

  41. ページの最上部と最下部
    Vimiumのスゴイところ
    h j/J
    gg/G
    (Shift + g)
    41
    #JTF2021W #JTF2021W_D

    View Slide

  42. Vimiumのスゴイところ
    「ページ内検索」からの「リンク移動」
    I
    (Shift + i)
    /
    K
    (Shift + k)
    l
    J
    (Shift + j)
    42
    #JTF2021W #JTF2021W_D

    View Slide

  43. Vimiumのスゴイところをもっと引き出す
    カーソルがページ外にいってしまうと Vimiumのキーバ
    インドが効かない。そこでカーソルをページに戻す必
    要がある。
    そこで検索バーに「j」と叩くと、「javascript:」が入力さ
    れるようにChromeで設定しておく。
    43
    参考: 検索エンジンはカスタマイズしてほしいです
    #JTF2021W #JTF2021W_D

    View Slide

  44. Vimiumのスゴイところをもっと引き出す
    検索バーに「t」と叩くだけで
    ページのタイトルとURLをコピーする
    44
    参考: 検索エンジンはカスタマイズしてほしいです
    #JTF2021W #JTF2021W_D

    View Slide

  45. Vimiumのスゴイところ
    https://www.irasutoya.com/2017/03/blog-post_49.html 45
    #JTF2021W #JTF2021W_D

    View Slide

  46. Vimiumのスゴイところ
    https://www.irasutoya.com/2017/03/blog-post_49.html 46
    #JTF2021W #JTF2021W_D

    View Slide

  47. お話したいこと #JTF2021W #JTF2021W_D
    47
    ❏ なぜVimに惹かれたか?
    ❏ Vimの操作に慣れていくために
    ❏ そしてその先に見えた景色とは。。。
    ❏ これがよちよちVimmer三種の神器だ

    View Slide

  48. 48
    https://www.irasutoya.com/2014/10/blog-post_62.html

    View Slide

  49. Vimiumを使い始めた今の課題 #JTF2021W #JTF2021W_D
    49
    円全体をVimのキーボードとしたとき、
    Vimiumでは一部しか合
    致しない。
    Vimだけのキーバインドは
    弱い。

    View Slide

  50. Vimiumを使い始めた今の課題
    ❏ 横の移動に弱い
    ❏ 右移動はw
    ❏ 合わせ技も弱い
    ❏ 右下はjw
    #JTF2021W #JTF2021W_D
    50

    View Slide

  51. 打開策1)
    pcの壁紙 #JTF2021W #JTF2021W_D
    51

    View Slide

  52. 1)アウトプットするた
    めにインプット
    打開策2)アウトプット駆動なインプット #JTF2021W #JTF2021W_D
    3)フィードバックから次
    のインプットネタを発

    2)アウトプットまでこぎ
    つける
    いきなりフィードバックを
    もらえるアウトプットをしない
    52

    View Slide

  53. 1)アウトプットするた
    めにインプット
    打開策2)アウトプット駆動なインプット #JTF2021W #JTF2021W_D
    3)フィードバックから次
    のインプットネタを発

    2)アウトプットまでこぎ
    つける
    1b)自分で気
    づきを得る
    1a)アウトプッ
    トする前のア
    ウトプット
    53
    自分で気づきを得る
    ためにアウトプット!
    →Zennのスクラップで試験運用中

    View Slide

  54. 1)アウトプットするた
    めにインプット
    打開策2)アウトプット駆動なインプット #JTF2021W #JTF2021W_D
    3)フィードバックから次
    のインプットネタを発

    2)アウトプットまでこぎ
    つける
    1b)自分で気
    づきを得る
    1a)アウトプッ
    トする前のア
    ウトプット
    他者からフィードバックを
    もらうためにアウトプッ
    ト!
    →ブログ、LT、
    JTF!
    54

    View Slide

  55. 1)アウトプットするた
    めにインプット
    打開策2)アウトプット駆動なインプット #JTF2021W #JTF2021W_D
    3)フィードバックから次
    のインプットネタを発

    2)アウトプットまでこぎ
    つける
    1b)自分で気
    づきを得る
    1a)アウトプッ
    トする前のア
    ウトプット
    55
    アウトプットには
    2種類ある。
    - フィードバックを自分からもらうか
    - 他者からもらうか

    View Slide

  56. お話したいこと #JTF2021W #JTF2021W_D
    56
    ❏ なぜVimに惹かれたか?
    ❏ Vimの操作に慣れていくために
    ❏ そしてその先に見えた景色とは。。。
    ❏ これがよちよちVimmer三種の神器だ

    View Slide

  57. これがよちよちVimmer三種の神器だ
    ❏ Vimium
    ❏ pcの壁紙
    ❏ アウトプット駆動なインプット
    57
    #JTF2021W #JTF2021W_D

    View Slide

  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

    View Slide

  59. July Tech Festa 2021 Winter登壇
    2021年の抱負 #JTF2021W #JTF2021W_D
    July Tech Festa 2020にプログラム委員として参加したので振り返ってみる
    エンジニア3年目を迎えるにあたってのふりかえりとこれから
    59

    View Slide

  60. Q&A #JTF2021W #JTF2021W_D
    60
    Q&Aタ~イム

    View Slide

  61. Q&A自作自演
    Q. Vimiumのインストール、初期設定教えて。
    A.手前味噌ですが、コチラの記事を ↓。
    【Chrome拡張機能】Vimライクなキーバインドでブラウザを操作する Vimiumのオレオレ設定方法をスクリーン
    ショットで解説
    Q. メインエディタはもちろん Vimだよね?
    A.コーディングする際には 「Vimを使うように」している。オンラインミーティングでターミナルとエディタをひとつの
    画面のなかで行き来する際には VS Codeを使う。差分を見るときはプロジェクトで使っている GitlabのGUI。
    #JTF2021W #JTF2021W_D
    61

    View Slide

  62. Q&A自作自演
    Q. Vimを使っていくうえでやらなきゃよかったことはある?
    A. プラグインを中途半端に入れてしまったこと。 プラグインの機能は Vim本体ではできることか分からず、ググっ
    て見つけたいい感じのプラグインを入れてしまった。
    https://github.com/gkzz/dotfiles
    Q. Vimを使っていくうえで補完とかどうするの?
    A.動的言語のPythonを触ることが多く、その点は考える機会がないまま今回の発表がきてしまった。自分が
    Vimに惹かれたのは早くファイルを移動できることだったので。
    #JTF2021W #JTF2021W_D
    62

    View Slide

  63. 参考
    ❏ philc/vimium: The hacker's browser.
    ❏ Chromeをvimライクに使えるようにする vimium - Qiita
    ❏ 検索エンジンはカスタマイズしてほしいで す
    ❏ 【Chrome拡張機能】Vimライクなキーバインドでブラウザを操作する Vimiumのオレオレ設定方法をスク
    リーンショットで解説
    ❏ Neovimの設定Neovim の設定を綺麗に整理してみた - Qiita
    #JTF2021W #JTF2021W_D
    63

    View Slide

  64. ご清聴ありがとうございました。
    VimiumではじめるよちよちVimmerライフ #JTF2021W #JTF2021W_D
    64

    View Slide