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
mugi / Hajime Mugishima
October 10, 2019
Programming
360
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
マルチカーソルのLT
2019/10/10 Misoca 秋のLT大会での発表資料です
https://mokuteku.connpass.com/event/146769/
mugi / Hajime Mugishima
October 10, 2019
More Decks by mugi / Hajime Mugishima
See All by mugi / Hajime Mugishima
AIと乗り切った1,500ページ超のヘルプサイト基盤刷新とさらにその先の話
mugi_uno
2
460
サイボウズフロントエンドの活動から考える探究と発信
mugi_uno
1
180
フロントエンドエキスパートチームの解散は 「いい話」なのか?
mugi_uno
8
2.5k
サイボウズフロントエンドの横断活動から考える AI時代にできること
mugi_uno
4
2.1k
令和7年版 あなたが使ってよいフロントエンド機能とは
mugi_uno
14
7.3k
New Order in Cascade Sorting Order
mugi_uno
3
4.4k
Deep Dive into React Stream/Serialize
mugi_uno
8
2.3k
Next.js App Router での MPA フロントエンド刷新
mugi_uno
40
26k
コロナ禍 Frontend おさらい
mugi_uno
1
500
Other Decks in Programming
See All in Programming
Cloudflare is Agents
chimame
0
170
リアルな遅延を測る仕様
kota_yata
1
120
170k Jobs a Day on GKE: Scaling Mercari's CI Platform - and What's Next for AI-Native Development
junyaokabe
0
120
いまどきの Codex で開発する visionOS アプリの開発スタイルについて
karad
0
150
Laravel Boostに学ぶ、AIにPHPを書かせる技術 〜OSSの実装から蒸留するエージェント制御の王道〜
kentaroutakeda
3
750
Go言語とトイモデルで学ぶTransformerの気持ち / fukuokago23-transformer
monochromegane
0
190
freee が目指す データ マネジメント戦略 AI-Ready 時代を支える 攻めのガバナンスとは
freee
PRO
0
440
AWS DevOps AgentのAzure接続機能を検証して見えた活用法/Use Cases Verified for the AWS DevOps Agent's Azure Connectivity Feature
masakiokuda
1
250
Hono + Inertia + React で LP を構築した話
oukayuka
2
110
Built Our Own Background Agent at LayerX
layerx
PRO
10
5.9k
属人化した知識を、 AIが辿れる地図にする
pkshadeck
PRO
1
200
仕様書を書く前にハーネスを作る - Agent Native開発は「探索を速く、判定を固く」
gotalab555
4
1.7k
Featured
See All Featured
WCS-LA-2024
lcolladotor
0
800
4 Signs Your Business is Dying
shpigford
187
23k
The Curious Case for Waylosing
cassininazir
1
470
<Decoding/> the Language of Devs - We Love SEO 2024
nikkihalliwell
1
290
Paper Plane
katiecoart
PRO
2
53k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
inesmontani
PRO
3
2.4k
The Impact of AI in SEO - AI Overviews June 2024 Edition
aleyda
6
1.2k
Paper Plane (Part 1)
katiecoart
PRO
1
10k
Google's AI Overviews - The New Search
badams
0
1.1k
A Tale of Four Properties
chriscoyier
163
24k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
47
8.3k
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