Vimmerへの憧れを抱く私がどうやってVimを使いこなせるようにトレーニングしているか、そのために使っているVimiumの使い方、魅力について、Vim初心者の私がお話しできればと思います。
VimiumではじめるよちよちVimmerライフJuly Tech Festa 2021 Winter2021/01/24(Sun)玉木 岳爾 (Gakuji Tamaki)#JTF2021W #JTF2021W_D1資料のQRコード
View Slide
2【いきなりチャレンジ企画】本日の発表を1分でご紹介
3https://www.independentlab.net/ppt-starwars/
4はい。アップ完了です。これより20分で本日の発表をします。p.s. #ゆるぼ ↓#JTF2021W #JTF2021W_D でTweetしていただけると泣いて喜びます。❏ ブラウザハック術❏ Vimのおすすめキーバインド
自己紹介❏ 名前：玉木 岳爾 (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_D5
❏ Vimのキーバインドに慣れたい方❏ 他のエディターと二股している方❏ ネットサーフィン好きな方どんな人に聞いてほしいか #JTF2021W #JTF2021W_D6
キーバインド (key bind)とは｜「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典https://wa3.i-3-i.info/word12450.html#JTF2021W #JTF2021W_D語句確認)キーバインド7
VimのキーバインドVimのキーに対する機能の割り当て語句確認)キーバインド8#JTF2021W #JTF2021W_D
お話したいこと #JTF2021W #JTF2021W_D9❏ なぜVimに惹かれたか？❏ Vimの操作に慣れていくために❏ そしてその先に見えた景色とは。。。❏ これがよちよちVimmer三種の神器だ
お話したいこと #JTF2021W #JTF2021W_D10❏ なぜVimに惹かれたか？❏ Vimの操作に慣れていくために❏ そしてその先に見えた景色とは。。。❏ これがよちよちVimmer三種の神器だ
なぜ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_D11
お話したいこと #JTF2021W #JTF2021W_D12❏ なぜVimに惹かれたか？❏ Vimの操作に慣れていくためにVimium使いましたということなのですが、、。❏ そしてその先に見えた景色とは。。。❏ これがよちよちVimmer三種の神器だ
Vimiumってなんなの？❏ 読み方は「ヴィミィユム」、「ヴィミィウム」？❏ Vimumではないです！Vimiumです！❏ 「それまちがってね？」とTwitterでご指摘されて気がつく、、❏ Chrome/Firefoxの拡張機能❏ Vimライクなキーバインドでブラウザを操作できる❏ jは下、kは上、「/」で検索などなど#JTF2021W #JTF2021W_D13
Vimの操作に慣れていくために #JTF2021W #JTF2021W_D14少し、Vimiumに出会う前の話をさせてください。
Vimiumに出会う前の話インサートモードで移動するなよ〜。すぐEscしろ！Esc！https://www.irasutoya.com/2015/03/blog-post_138.htmlhttps://www.irasutoya.com/2013/03/blog-post_490.html#JTF2021W #JTF2021W_D15
Vimiumに出会う前の話Vimでファイルを操作しようとしたら。あ”あ”あ”！インサートモードで移動しちゃう！！#JTF2021W #JTF2021W_D16
Vimiumに出会う前の話なぜ混乱した？https://www.irasutoya.com/2014/02/blog-post_28.html#JTF2021W #JTF2021W_D17
Vimiumに出会う前の話Vimを使うモード切替キーバインド編集(タイピング)いきなり3つ出てきたのが効いた#JTF2021W #JTF2021W_D18
Vimiumに出会う前の話Vimを使う キーバインド編集(タイピング)インサートモードのまま編集モード切替#JTF2021W #JTF2021W_D19
Vimiumに出会う前の話キーバインド身に付いていないのに他のこともやるからパニクるっぽいな、、、https://www.irasutoya.com/2014/02/blog-post_28.html#JTF2021W #JTF2021W_D20
VimのキーバインドVimのキーに対する機能の割り当て語句確認)キーバインド(再掲)21#JTF2021W #JTF2021W_D
Vimiumに出会う前の話・・・・・https://www.irasutoya.com/2014/02/blog-post_28.html#JTF2021W #JTF2021W_D22
Vimiumに出会う前の話https://www.irasutoya.com/2016/02/blog-post_547.html#JTF2021W #JTF2021W_D23
Vimiumに出会う前の話Vimを使うモード切替キーバインド編集(タイピング)キーバインドを覚えることだけを考える#JTF2021W #JTF2021W_D24https://www.flaticon.com/free-icon/point_556232
小話)クロール泳いだことはありますか？https://www.irasutoya.com/2012/12/blog-post_429.html#JTF2021W #JTF2021W_D25
小話)バタ足から覚えてから水泳のクロールhttps://www.irasutoya.com/2014/01/blog-post_3507.htmlhttps://www.irasutoya.com/2012/12/blog-post_429.html26#JTF2021W #JTF2021W_D
小話)バタ足から覚えてから水泳のクロールhttps://www.irasutoya.com/2014/01/blog-post_3507.htmlhttps://www.irasutoya.com/2012/12/blog-post_429.html27#JTF2021W #JTF2021W_D
Vimiumに出会う前の話水泳のクロールを身につけるには、まずバタ足からVimを身につけるには、まずキーバインドから28#JTF2021W #JTF2021W_D
Vimiumに出会う前の話キーバインドだけ覚えられる、イイ感じのやつなんてあるの？？クロールでいうビートバン的な。29#JTF2021W #JTF2021W_D
Vimiumに出会う前の話もちろんあります！だって、#推しテク総選挙 ですから30#JTF2021W #JTF2021W_D
https://www.irasutoya.com/2018/12/blog-post_418.htmlhttps://chrome.google.com/webstore/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmebキーバインドだけ覚えられる、イイ感じのやつ31#JTF2021W #JTF2021W_D
Vimiumhttps://www.irasutoya.com/2018/12/blog-post_418.htmlhttps://chrome.google.com/webstore/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmeb32#JTF2021W #JTF2021W_D
Vimの操作に慣れていくために #JTF2021W #JTF2021W_D33以上がVimiumに出会う前の話です。Vimのキーバインドをブラウザ上で覚えられることに気がついたわけなんですね。では、Vimiumのスゴイところはなんでしょうか。それについてこれからお話しします。
VimiumのスゴイところめちゃシンプルにVimのキーバインドでブラウザを操作できる34#JTF2021W #JTF2021W_D
Vimiumのスゴイところ35#JTF2021W #JTF2021W_Dなにおきた？
そうなると思ったので、有給投下してデモ動画、8個も作りました(褒めてくれVimiumのスゴイところ36#JTF2021W #JTF2021W_D
i/I(Shift + i)Vimiumのスゴイところh j k lgg/G(Shift + g)ページの上下スクロール37#JTF2021W #JTF2021W_D
lVimiumのスゴイところh J(Shift + j)K(Shift + k)gg/G(Shift + g)タブの移動i/I(Shift + i)38#JTF2021W #JTF2021W_D
lVimiumのスゴイところh j/J k/Kgg/G(Shift + g)i/I(Shift + i)ページの戻る/進む39#JTF2021W #JTF2021W_D
lVimiumのスゴイところh j/J k/Kgg/G(Shift + g)i/I(Shift + i)リンククリック移動したいリンクのアルファベットを指定Iは別タブ40#JTF2021W #JTF2021W_D
ページの最上部と最下部Vimiumのスゴイところh j/Jgg/G(Shift + g)41#JTF2021W #JTF2021W_D
Vimiumのスゴイところ「ページ内検索」からの「リンク移動」I(Shift + i)/K(Shift + k)lJ(Shift + j)42#JTF2021W #JTF2021W_D
Vimiumのスゴイところをもっと引き出すカーソルがページ外にいってしまうと Vimiumのキーバインドが効かない。そこでカーソルをページに戻す必要がある。そこで検索バーに「j」と叩くと、「javascript:」が入力されるようにChromeで設定しておく。43参考: 検索エンジンはカスタマイズしてほしいです#JTF2021W #JTF2021W_D
Vimiumのスゴイところをもっと引き出す検索バーに「t」と叩くだけでページのタイトルとURLをコピーする44参考: 検索エンジンはカスタマイズしてほしいです#JTF2021W #JTF2021W_D
Vimiumのスゴイところhttps://www.irasutoya.com/2017/03/blog-post_49.html 45#JTF2021W #JTF2021W_D
Vimiumのスゴイところhttps://www.irasutoya.com/2017/03/blog-post_49.html 46#JTF2021W #JTF2021W_D
お話したいこと #JTF2021W #JTF2021W_D47❏ なぜVimに惹かれたか？❏ Vimの操作に慣れていくために❏ そしてその先に見えた景色とは。。。❏ これがよちよちVimmer三種の神器だ
48https://www.irasutoya.com/2014/10/blog-post_62.html
Vimiumを使い始めた今の課題 #JTF2021W #JTF2021W_D49円全体をVimのキーボードとしたとき、Vimiumでは一部しか合致しない。Vimだけのキーバインドは弱い。
Vimiumを使い始めた今の課題❏ 横の移動に弱い❏ 右移動はw❏ 合わせ技も弱い❏ 右下はjw#JTF2021W #JTF2021W_D50
打開策1)pcの壁紙 #JTF2021W #JTF2021W_D51
1)アウトプットするためにインプット打開策2)アウトプット駆動なインプット #JTF2021W #JTF2021W_D3)フィードバックから次のインプットネタを発掘2)アウトプットまでこぎつけるいきなりフィードバックをもらえるアウトプットをしない52
1)アウトプットするためにインプット打開策2)アウトプット駆動なインプット #JTF2021W #JTF2021W_D3)フィードバックから次のインプットネタを発掘2)アウトプットまでこぎつける1b)自分で気づきを得る1a)アウトプットする前のアウトプット53自分で気づきを得るためにアウトプット！→Zennのスクラップで試験運用中
1)アウトプットするためにインプット打開策2)アウトプット駆動なインプット #JTF2021W #JTF2021W_D3)フィードバックから次のインプットネタを発掘2)アウトプットまでこぎつける1b)自分で気づきを得る1a)アウトプットする前のアウトプット他者からフィードバックをもらうためにアウトプット！→ブログ、LT、JTF！54
1)アウトプットするためにインプット打開策2)アウトプット駆動なインプット #JTF2021W #JTF2021W_D3)フィードバックから次のインプットネタを発掘2)アウトプットまでこぎつける1b)自分で気づきを得る1a)アウトプットする前のアウトプット55アウトプットには2種類ある。- フィードバックを自分からもらうか- 他者からもらうか
お話したいこと #JTF2021W #JTF2021W_D56❏ なぜVimに惹かれたか？❏ Vimの操作に慣れていくために❏ そしてその先に見えた景色とは。。。❏ これがよちよちVimmer三種の神器だ
これがよちよちVimmer三種の神器だ❏ Vimium❏ pcの壁紙❏ アウトプット駆動なインプット57#JTF2021W #JTF2021W_D
結びに)2021年の抱負はありますか？https://twitter.com/shinojapan/status/1345696643190980610https://www.ted.com/talks/matt_cutts_try_something_new_for_30_days#JTF2021W JTF2021W_D58
July Tech Festa 2021 Winter登壇2021年の抱負 #JTF2021W #JTF2021W_DJuly Tech Festa 2020にプログラム委員として参加したので振り返ってみるエンジニア3年目を迎えるにあたってのふりかえりとこれから59
Q&A #JTF2021W #JTF2021W_D60Q&Aタ～イム
Q&A自作自演Q. Vimiumのインストール、初期設定教えて。A.手前味噌ですが、コチラの記事を ↓。【Chrome拡張機能】Vimライクなキーバインドでブラウザを操作する Vimiumのオレオレ設定方法をスクリーンショットで解説Q. メインエディタはもちろん Vimだよね？A.コーディングする際には 「Vimを使うように」している。オンラインミーティングでターミナルとエディタをひとつの画面のなかで行き来する際には VS Codeを使う。差分を見るときはプロジェクトで使っている GitlabのGUI。#JTF2021W #JTF2021W_D61
Q&A自作自演Q. Vimを使っていくうえでやらなきゃよかったことはある？A. プラグインを中途半端に入れてしまったこと。 プラグインの機能は Vim本体ではできることか分からず、ググって見つけたいい感じのプラグインを入れてしまった。https://github.com/gkzz/dotfilesQ. Vimを使っていくうえで補完とかどうするの？A.動的言語のPythonを触ることが多く、その点は考える機会がないまま今回の発表がきてしまった。自分がVimに惹かれたのは早くファイルを移動できることだったので。#JTF2021W #JTF2021W_D62
参考❏ philc/vimium: The hacker's browser.❏ Chromeをvimライクに使えるようにする vimium - Qiita❏ 検索エンジンはカスタマイズしてほしいで す❏ 【Chrome拡張機能】Vimライクなキーバインドでブラウザを操作する Vimiumのオレオレ設定方法をスクリーンショットで解説❏ Neovimの設定Neovim の設定を綺麗に整理してみた - Qiita#JTF2021W #JTF2021W_D63
ご清聴ありがとうございました。VimiumではじめるよちよちVimmerライフ #JTF2021W #JTF2021W_D64
gkzz
torounit
bumptakayuki
ramimac
tomoaki25
nikkei_engineer_recruiting
pauli
yokawasa
keio_smilab
mhidaka
elcuervo
line_developers_tw
makotu
lynnandtonic
danielanewman
panda_program
thekraken
lemiorhan
paulrobertlloyd
myddelton
mojombo
wjessup
eileencodes
hatefulcrawdad
destraynor