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
#JTF2021W_D VimiumではじめるよちよちVimmerライフ / Vimmer b...
Search
gkzz
January 23, 2021
Technology
1
2k
#JTF2021W_D VimiumではじめるよちよちVimmerライフ / Vimmer beginners start with Vimium
Vimmerへの憧れを抱く私がどうやってVimを使いこなせるようにトレーニングしているか、そのために使っているVimiumの使い方、魅力について、Vim初心者の私がお話しできればと思います。
gkzz
January 23, 2021
Tweet
Share
More Decks by gkzz
See All by gkzz
MagicPodで始めるがんばらない回帰試験の自動化/Automated Regression Testing Journey with MagicPod
gkzz
0
3.4k
What I Need to Do Before Promoting Automation
gkzz
0
74
StackstormというIFTTT的なツールをDockerコンテナに載せた小話
gkzz
0
940
インフラエンジニアが考えてみた Mockの使いどころ
gkzz
1
670
QuickStartToGAS
gkzz
0
280
About Our House
gkzz
0
42
Other Decks in Technology
See All in Technology
[2025-02-07]生成AIで変える問い合わせの未来 〜チームグローバル化の香りを添えて〜
tosite
1
290
「海外登壇」という 選択肢を与えるために 〜Gophers EX
logica0419
0
500
まだ間に合う! エンジニアのための生成AIアプリ開発入門 on AWS
minorun365
PRO
4
580
ビジネスと現場活動をつなぐソフトウェアエンジニアリング~とあるスタートアッププロダクトの成長記録より~
mizunori
0
210
偶然 × 行動で人生の可能性を広げよう / Serendipity × Action: Discover Your Possibilities
ar_tama
1
740
Tech Blogを書きやすい環境づくり
lycorptech_jp
PRO
0
120
地方拠点で エンジニアリングマネージャーってできるの? 〜地方という制約を楽しむオーナーシップとコミュニティ作り〜
1coin
1
130
株式会社EventHub・エンジニア採用資料
eventhub
0
4.2k
マルチモーダル理解と生成の統合 DeepSeek Janus, etc... / Multimodal Understanding and Generation Integration
hiroga
0
360
テストアーキテクチャ設計で実現する高品質で高スピードな開発の実践 / Test Architecture Design in Practice
ropqa
3
710
第13回 Data-Centric AI勉強会, 画像認識におけるData-centric AI
ksaito_osx
0
360
2.5Dモデルのすべて
yu4u
2
610
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
310
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
How STYLIGHT went responsive
nonsquared
98
5.3k
Transcript
Vimiumではじめる よちよちVimmerライフ July Tech Festa 2021 Winter 2021/01/24(Sun) 玉木 岳爾 (Gakuji
Tamaki) #JTF2021W #JTF2021W_D 1 資料のQRコード
2 【いきなりチャレンジ企画】 本日の発表を1分でご紹介
3 https://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_D 5
❏ Vimのキーバインドに慣れたい方 ❏ 他のエディターと二股している方 ❏ ネットサーフィン好きな方 どんな人に聞いてほしいか #JTF2021W #JTF2021W_D 6
キーバインド (key bind)とは|「分かりそう」で「分か らない」でも「分かった」気になれるIT用語辞典 https://wa3.i-3-i.info/word12450.html #JTF2021W #JTF2021W_D 語句確認)キーバインド 7
Vimのキーバインド Vimのキーに対する機能の割り当て 語句確認)キーバインド 8 #JTF2021W #JTF2021W_D
お話したいこと #JTF2021W #JTF2021W_D 9 ❏ なぜVimに惹かれたか? ❏ Vimの操作に慣れていくために ❏ そしてその先に見えた景色とは。。。
❏ これがよちよちVimmer三種の神器だ
お話したいこと #JTF2021W #JTF2021W_D 10 ❏ なぜ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_D 11
お話したいこと #JTF2021W #JTF2021W_D 12 ❏ なぜVimに惹かれたか? ❏ Vimの操作に慣れていくために Vimium使いましたということなのですが、、。 ❏
そしてその先に見えた景色とは。。。 ❏ これがよちよちVimmer三種の神器だ
Vimiumってなんなの? ❏ 読み方は「ヴィミィユム」、「ヴィミィウム」? ❏ Vimumではないです!Vimiumです! ❏ 「それまちがってね?」とTwitterでご指摘されて気がつく、、 ❏ Chrome/Firefoxの拡張機能 ❏
Vimライクなキーバインドでブラウザを操作できる ❏ jは下、kは上、「/」で検索などなど #JTF2021W #JTF2021W_D 13
Vimの操作に慣れていくために #JTF2021W #JTF2021W_D 14 少し、Vimiumに出会う前の話をさせてください。
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
Vimiumに出会う前の話 Vimでファイルを操作しようとしたら。 あ”あ”あ”! インサートモードで 移動しちゃう!! #JTF2021W #JTF2021W_D 16
Vimiumに出会う前の話 なぜ混乱した? https://www.irasutoya.com/2014/02/blog-post_28.html #JTF2021W #JTF2021W_D 17
Vimiumに出会う前の話 Vimを使う モード切替 キーバインド 編集(タイピング) いきなり3つ出てきたのが効いた #JTF2021W #JTF2021W_D 18
Vimiumに出会う前の話 Vimを使う キーバインド 編集(タイピング) インサートモードのまま編集 モード切替 #JTF2021W #JTF2021W_D 19
Vimiumに出会う前の話 キーバインド身に付いて いないのに他のこともや るからパニクるっぽい な、、、 https://www.irasutoya.com/2014/02/blog-post_28.html #JTF2021W #JTF2021W_D 20
Vimのキーバインド Vimのキーに対する機能の割り当て 語句確認)キーバインド(再掲) 21 #JTF2021W #JTF2021W_D
Vimiumに出会う前の話 ・・・・・ https://www.irasutoya.com/2014/02/blog-post_28.html #JTF2021W #JTF2021W_D 22
Vimiumに出会う前の話 https://www.irasutoya.com/2016/02/blog-post_547.html #JTF2021W #JTF2021W_D 23
Vimiumに出会う前の話 Vimを使う モード切替 キーバインド 編集(タイピング) キーバインドを覚えることだけを考える #JTF2021W #JTF2021W_D 24 https://www.flaticon.com/free-icon/point_556232
小話)クロール泳いだことはありますか? https://www.irasutoya.com/2012/12/blog-post_429.html #JTF2021W #JTF2021W_D 25
小話)バタ足から覚えてから水泳のクロール https://www.irasutoya.com/2014/01/blog-post_3507.html https://www.irasutoya.com/2012/12/blog-post_429.html 26 #JTF2021W #JTF2021W_D
小話)バタ足から覚えてから水泳のクロール https://www.irasutoya.com/2014/01/blog-post_3507.html https://www.irasutoya.com/2012/12/blog-post_429.html 27 #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.html https://chrome.google.com/webstore/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmeb キーバインドだけ覚 えられる、 イイ感じのやつ 31 #JTF2021W #JTF2021W_D
Vimium https://www.irasutoya.com/2018/12/blog-post_418.html https://chrome.google.com/webstore/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmeb 32 #JTF2021W #JTF2021W_D
Vimの操作に慣れていくために #JTF2021W #JTF2021W_D 33 以上が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 l gg/G
(Shift + g) ページの上下スクロール 37 #JTF2021W #JTF2021W_D
l Vimiumのスゴイところ h J (Shift + j) K (Shift +
k) gg/G (Shift + g) タブの移動 i/I (Shift + i) 38 #JTF2021W #JTF2021W_D
l Vimiumのスゴイところ h j/J k/K gg/G (Shift + g) i/I
(Shift + i) ページの 戻る/進む 39 #JTF2021W #JTF2021W_D
l Vimiumのスゴイところ h j/J k/K gg/G (Shift + g) i/I
(Shift + i) リンククリック 移動したいリンクのアルファベットを指定 Iは別タブ 40 #JTF2021W #JTF2021W_D
ページの最上部と最下部 Vimiumのスゴイところ h j/J gg/G (Shift + g) 41 #JTF2021W
#JTF2021W_D
Vimiumのスゴイところ 「ページ内検索」からの「リンク移動」 I (Shift + i) / K (Shift +
k) l J (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_D 47 ❏ なぜVimに惹かれたか? ❏ Vimの操作に慣れていくために ❏ そしてその先に見えた景色とは。。。
❏ これがよちよちVimmer三種の神器だ
48 https://www.irasutoya.com/2014/10/blog-post_62.html
Vimiumを使い始めた今の課題 #JTF2021W #JTF2021W_D 49 円全体をVimのキーボードとしたとき、 Vimiumでは一部しか合 致しない。 Vimだけのキーバインドは 弱い。
Vimiumを使い始めた今の課題 ❏ 横の移動に弱い ❏ 右移動はw ❏ 合わせ技も弱い ❏ 右下はjw #JTF2021W
#JTF2021W_D 50
打開策1) pcの壁紙 #JTF2021W #JTF2021W_D 51
1)アウトプットするた めにインプット 打開策2)アウトプット駆動なインプット #JTF2021W #JTF2021W_D 3)フィードバックから次 のインプットネタを発 掘 2)アウトプットまでこぎ つける
いきなりフィードバックを もらえるアウトプットをしない 52
1)アウトプットするた めにインプット 打開策2)アウトプット駆動なインプット #JTF2021W #JTF2021W_D 3)フィードバックから次 のインプットネタを発 掘 2)アウトプットまでこぎ つける
1b)自分で気 づきを得る 1a)アウトプッ トする前のア ウトプット 53 自分で気づきを得る ためにアウトプット! →Zennのスクラップで試験運用中
1)アウトプットするた めにインプット 打開策2)アウトプット駆動なインプット #JTF2021W #JTF2021W_D 3)フィードバックから次 のインプットネタを発 掘 2)アウトプットまでこぎ つける
1b)自分で気 づきを得る 1a)アウトプッ トする前のア ウトプット 他者からフィードバックを もらうためにアウトプッ ト! →ブログ、LT、 JTF! 54
1)アウトプットするた めにインプット 打開策2)アウトプット駆動なインプット #JTF2021W #JTF2021W_D 3)フィードバックから次 のインプットネタを発 掘 2)アウトプットまでこぎ つける
1b)自分で気 づきを得る 1a)アウトプッ トする前のア ウトプット 55 アウトプットには 2種類ある。 - フィードバックを自分からもらうか - 他者からもらうか
お話したいこと #JTF2021W #JTF2021W_D 56 ❏ なぜVimに惹かれたか? ❏ Vimの操作に慣れていくために ❏ そしてその先に見えた景色とは。。。
❏ これがよちよちVimmer三種の神器だ
これがよちよちVimmer三種の神器だ ❏ Vimium ❏ pcの壁紙 ❏ アウトプット駆動なインプット 57 #JTF2021W #JTF2021W_D
結びに) 2021年の抱負はありますか? https://twitter.com/shinojapan/status/1345696643190980610 https://www.ted.com/talks/matt_cutts_try_something_new_for_30_days #JTF2021W JTF2021W_D 58
July Tech Festa 2021 Winter登壇 2021年の抱負 #JTF2021W #JTF2021W_D July Tech
Festa 2020にプログラム委員として参加したので振り返ってみる エンジニア3年目を迎えるにあたってのふりかえりとこれから 59
Q&A #JTF2021W #JTF2021W_D 60 Q&Aタ~イム
Q&A自作自演 Q. Vimiumのインストール、初期設定教えて。 A.手前味噌ですが、コチラの記事を ↓。 【Chrome拡張機能】Vimライクなキーバインドでブラウザを操作する Vimiumのオレオレ設定方法をスクリーン ショットで解説 Q. メインエディタはもちろん
Vimだよね? A.コーディングする際には 「Vimを使うように」している。オンラインミーティングでターミナルとエディタをひとつの 画面のなかで行き来する際には VS Codeを使う。差分を見るときはプロジェクトで使っている GitlabのGUI。 #JTF2021W #JTF2021W_D 61
Q&A自作自演 Q. Vimを使っていくうえでやらなきゃよかったことはある? A. プラグインを中途半端に入れてしまったこと。 プラグインの機能は Vim本体ではできることか分からず、ググっ て見つけたいい感じのプラグインを入れてしまった。 https://github.com/gkzz/dotfiles Q.
Vimを使っていくうえで補完とかどうするの? A.動的言語のPythonを触ることが多く、その点は考える機会がないまま今回の発表がきてしまった。自分が Vimに惹かれたのは早くファイルを移動できることだったので。 #JTF2021W #JTF2021W_D 62
参考 ❏ philc/vimium: The hacker's browser. ❏ Chromeをvimライクに使えるようにする vimium -
Qiita ❏ 検索エンジンはカスタマイズしてほしいで す ❏ 【Chrome拡張機能】Vimライクなキーバインドでブラウザを操作する Vimiumのオレオレ設定方法をスク リーンショットで解説 ❏ Neovimの設定Neovim の設定を綺麗に整理してみた - Qiita #JTF2021W #JTF2021W_D 63
ご清聴ありがとうございました。 VimiumではじめるよちよちVimmerライフ #JTF2021W #JTF2021W_D 64