TECH:EXPERT【VScode】プルダウンメニューをマルチカーソルで効率よく書く【83日目】

【学習内容】

・プルダウンメニュー
・VScodeのマルチカーソル

現在、メルカリトップページ「カテゴリーから探す」のプルダウンのマークアップを行っており、ひとまず見た目だけ整える方向で開発を進めています。

①親カテゴリにマウスオーバー　⇒　子カテゴリ出現
②子カテゴリにマウスオーバー ⇒ 孫カテゴリ出現

みたいな感じです。

これを実現するには「どの言語」の「どんな技術」を使うか、を考えなければいけません。

僕の候補としては2つの方法がありました。

①「HTML・CSS」の「<ul>タグに<ul>タグを挿入した入れ子構造」を使う
②「javascript(jQuery)」の「マウスオーバーでactiveクラスを付与」を使う

ぱっと思いつくのはこの2種類だったのですが、僕は①の方法を採用しました。

理由は、プルダウンメニューなどHTML,CSSだけで十分であるという点に尽きます。

また、jQueryは他の箇所で使用する予定なので、無理して使う必要はないと判断しました。

【ひとまずHTMLに直接書いてみた】

さて、ここから①の方法で実装を行っていきますが、まずは各カテゴリにどんな値がどの程度入っているか明確にする必要があります。

メルカリに登録されている商品は全て何かしらのカテゴリーに所属しているので、チームメンバーがエクセルを利用して、すべての小項目までの経路を明らかにしました。

その結果、1484通りもの経路があることが発覚しました。

1484通りの<li>タグを手でやってみるのは至難の技です。

（ちなみに、大カテゴリ：レディースを全て手動でマークアップしたところ1時間半もかかりました）

ここはVScodeの機能でうまいこと自動で入力できないか探っていきます。

【VScodeのマルチカーソル機能】

マルチカーソルとは、複数行にカーソルを追加して複数行同時に編集できる機能のことです。

要するに、検索バーでWordでもなんでもいいのですが、文字を入力するときにチカチカしてる縦棒みたいなやつが増殖して、同時に複数個所に入力できるようになるということです。

この機能を使えば、下記の<li>タグの中の文字を一発で入力することができますし、1484通りという数字もだんだんと少なく見えてきます。

【STEP1】データの素材を用意する（用意済）

エクセルでもテキストでもなんでもいいのですが、下記のように縦並びで各項目をリストアップします。

メンズ
レディース
キッズ
おもちゃ
食品
・
・
・

【STEP2】縦並びの項目たちを「Ctrl + C」でコピー
みなさんお得意の「コピー」をします

【STEP3】VScode上で「Ctrl + V」で貼り付ける
みなさんお得意の「貼り付け」をします

【STEP4】改行部分を選択する

縦並びの項目たちは厳密には、下記のような文字が入力されています。

メンズ[改行]レディース[改行]キッズ[改行]・・・

↓結果

メンズ
レディース
キッズ

各文字の間にある[改行]の部分を選択するために、「shift + →」をおします。（理由は後述します）

すると、メンズとレディースの間にある[改行]が選択できます。

【STEP5】カーソルを増殖させる

1番上の文字（メンズ）の右にカーソルを持ってきて、その場で「⌘ + D」を押します。
⇒カーソルが1つ増えるのと同時にレディースとキッズの間にある[改行]も選択することができました。

【STEP6】さらに⌘ + Dを押してカーソルをどんどん増殖させる

1番下にある文字の1行下までカーソルを増殖させます。

メンズ
レディース
キッズ
・
・
・
自動車・オートバイ
その他
| ←ここまで！

【STEP7】「←」を押す

左手で押している「⌘」と「D」からは手を離して、右手で「←」を押します。

すると、下記のように各項目の右にマルチカーソルたちが移動します。

メンズ|
レディース|
キッズ|
・|
・|
・|
自動車・オートバイ|
その他|

【STEP8】「command」 + 「shift」 + 「←」　を押す

これを実行すると各カーソルが、全ての文字を選択した状態になると思います。

【STEP9】「Ctrl」+「C」でコピー

ここでお得意のコピーをします。

しかし、このコピーはマルチカーソルによるコピーなので、複数の文字がコピーされている状態です。

【STEP10】コピーした項目の数だけ<li></li>タグを用意しておく

コピーした値を入れる受け皿をあらかじめ用意します。

ここで数が一致していないと、うまく<li>タグの中に文字を入力できないです。

【STEP11】<li>|</li>で「⌘」+「D」を押す

<li>ココ</li>でクリックし、カーソルをタグの内側に合わせたら、「⌘」+「D」を押してマルチカーソルを増殖させていきます。

こちらについては用意した<li>タグの数だけで大丈夫です。

【STEP12】「Ctrl」+「V」で貼り付け

これで終了です。きれいに文字が入力できたでしょうか。