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
マルチカーソルのLT
Search
Hajime Mugishima
October 10, 2019
Programming
0
260
マルチカーソルのLT
2019/10/10 Misoca 秋のLT大会での発表資料です
https://mokuteku.connpass.com/event/146769/
Hajime Mugishima
October 10, 2019
Tweet
Share
More Decks by Hajime Mugishima
See All by Hajime Mugishima
令和7年版 あなたが使ってよいフロントエンド機能とは
mugi_uno
12
6.3k
New Order in Cascade Sorting Order
mugi_uno
3
3.3k
Deep Dive into React Stream/Serialize
mugi_uno
8
2k
Next.js App Router での MPA フロントエンド刷新
mugi_uno
41
22k
コロナ禍 Frontend おさらい
mugi_uno
1
420
Toyama.rb
mugi_uno
1
110
kintoneフロントエンド刷新 〜新規参加5ヶ月から見るリアル〜
mugi_uno
3
1.7k
Javaを富山でやってたはずがSwiftのためにMacBook買ったらRubyでリモートワーカーになってJSの本を出版するまでを思い返す
mugi_uno
7
2.5k
脱レガシーフロントエンドのために知っておいたほうがいいこと
mugi_uno
20
7.5k
Other Decks in Programming
See All in Programming
Rubyで始める関数型ドメインモデリング
shogo_tksk
0
100
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
900
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.2k
個人アプリを2年ぶりにアプデしたから褒めて / I just updated my personal app, praise me!
lovee
0
340
技術を根付かせる / How to make technology take root
kubode
1
250
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
230
Grafana Cloudとソラカメ
devoc
0
170
Lottieアニメーションをカスタマイズしてみた
tahia910
0
130
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
120
時計仕掛けのCompose
mkeeda
1
290
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
270
クリーンアーキテクチャから見る依存の向きの大切さ
shimabox
1
160
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Writing Fast Ruby
sferik
628
61k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
960
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
It's Worth the Effort
3n
184
28k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
4 Signs Your Business is Dying
shpigford
182
22k
Building an army of robots
kneath
303
45k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
410
How to Ace a Technical Interview
jacobian
276
23k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Transcript
マルチカーソルの 2019/10/10 もくテク 秋のLT大会
麦島 一 (むぎしま はじめ) @mugi_uno 自己紹介
マルチカーソル使ってますか
マルチカーソル • エディタで「カーソル」を複数作る機能 • さまざまなエディタで利用可能 VSCode / Atom / SublimeText
/ JetBrain系IDE など →
絵も書ける
よくある利用例
→ "User" を "Person" に変えたいな〜
"User" 部分だけをマルチカーソルで選択 一気に編集
マルチカーソル便利〜!
ʙऴʙ
という方が大半 ʙऴʙ
使いこなすともっと便利に!
ϚϧνΧʔιϧ 参考 マルチカーソルを使わないVSCodeはただのVSCodeだ!
※注意 • VSCodeを例とした説明です • 他エディタでも 考え方は同じはずです • Vim/Emacsの方はきっと マルチカーソルより編集速いはず
マルチカーソルの基本操作
5JQT 2種類のカーソルの作り方がある ↓ 1つずつ作る or 一気に作る
基本的にはただの「カーソル」 ↓ カーソル1つでのキー操作は ほとんどそのまま使える 5JQT
• 単純なキーワード置換 • 一気にセミコロンを付与 ར༻ྫ
実演
クリップボードと組み合わせる
マルチカーソルで選択中のコピー 5JQT ↓ 改行で区切られてコピーされる
ペースト時は独特な挙動をする 5JQT
ペースト内容の行数≠マルチカーソルの数 →すべてのカーソルの位置に 同じ内容を単純にペースト ペースト内容の行数=マルチカーソルの数 →ペースト内容が1行ずつ分解され ひとつひとつのカーソルの位置にペースト 5JQT
• 置換時に入力する代わりにペースト • JSON⇔コードの流用 • 外部ドキュメントからのコード生成 ར༻ྫ
実演
VSCodeの機能と組み合わせる
マルチカーソルに対して VSCodeの各種機能が適用できる 5JQT
• ケース変換 →標準機能 or 'change-case' Extention ར༻ྫ • シーケンシャル値の生成 →
'vscode-input-sequence' Extention • エンコード/デコード → 'Encode Decode' Extention
実演
マルチカーソル生成のコツ 残り時間を確認
前後の共通部に注目する 5JQT
実演
マルチカーソルの弱点
Vimキーバインドとの相性が悪い
Vimのカーソル移動の速度は魅力的...
解決策
None
あしたから使っていきましょう!
None