nikkie-ftnextの日記

イベントレポートや読書メモを発信

入門F2 〜VS CodeのRename Symbolで楽々リファクタリング〜

はじめに

秘密はね、最後に明かされるんだよ、nikkieです。

普段使いのエディタはVS CodeVisual Studio Code)なのですが、声を大にして言いたい!


📣 F2はいいぞ!!

知ったことでコーディングを捗らせてくれたF2の世界へ皆さまをご案内します。

目次

伝えたいこと:F2によるRename Symbolはいいぞ

VS Codeリファクタリングのドキュメントには「Rename Symbol」という項目があります。

VS Code has a separate Rename Symbol command (F2).

変数や関数にカーソルを置いた状態でF2キーを押すと「Rename Symbol」できます1(上のドキュメントの画像を見たり、手元で試したりしてみてください!)

リーダブルコード』といった書籍で命名の重要性は説かれていますが、ぴったりなものを一発で命名するのは難しいですよね。
命名の難しさ・うまくいかなさを日々痛感しており、「もっといい名前があるじゃん!」と気づいたときはCtrl+D2でカーソルを増やしたり、検索から置換を使ったりして修正してきました。
VS Codeというエディタの力を借りて、作業の間違いを起きにくくしています。

現時点では、命名の修正に最も適した方法がF2(による「Rename Symbol」)と考えています。
特に関数名の場合は複数ファイルに渡って簡単に修正できるのでとても便利です。

F2の効能(ただしN=1)

F2による「Rename Symbol」を知って2つの変化がありました。

1つは肩の力を抜いてプログラミングできるようになったことです。
F2を知る以前は、「ぴったりな名前を初手で考え出すのは難しいけれど、それでもなるべくいい名前を付けなきゃ」と力んでいたように思い出されます。
F2で(VS Codeに助けてもらって)ほとんど手間なしでリネームできるようになり、「名前はいつでも変えられるから考え抜かなくてもいいな」と力を抜くことができています。

もう1つは8月の「設計の考え方とやり方」勉強会で聞いた増田さんの言の理解の変化がありました。
(記憶ベースなので正確ではない可能性が高いですが、)「名前が変なんで直します、これはtypoと同じ」というような言葉がありました。
そのときは「たしかに変な名前は直したいよな。typo見つけたときとおんなじで開発者が頑張るってことかな」と捉えました。
F2を知ってからは、「エディタに任せて全然手間なしでできるからたしかにtypo修正と同じだ(むしろtypo修正より楽かも)」と捉えています。
きっと、こういうときに使うんですよね、F2による「Rename Symbol」は実質無料!!

書籍『リファクタリング』との対応

リファクタリング手法のカタログ『リファクタリング』。

こちらを引くと、「Rename Symbol」は以下の2つのテクニック3をサポートしています:

  • 関数名の変更
  • 変数名の変更

なお、リファクタリングにはテストコードによるハーネスが必要と言われますし、私も支持します。
ですが、私は一回限りのちょっとしたスクリプトを書いている(テストコードはなし)ときも、VS Codeを信頼して、積極的にF2リファクタリングしています。

今年、IntelliJ IDEAを触る機会があったのですが、その経験から書籍『リファクタリング』で紹介されたテクニックはIDEの操作と結び付くという仮説を持っています。
VS CodeIntelliJと比べるとIDEではないので、比肩するだけの機能はない印象ですが、それでもリファクタリングのいくつかはサポートしています。
関数名や変数名の変更F2のおかげで私にとってはゼロコストでできるリファクタリングテクニックとなりました!

終わりに

VS CodeではF2キーによる「Rename Symbol」で簡単に変数や関数の名前を変えることができます(実質無料)!
これは劇的に私のプログラミングを変えました。
この記事で初めて知ったという方は「騙されたと思ってぜひお試しあれ!」という想いです。
📣VS Codeを使っている全人類、F2に入門しよう!

P.S. ボーイスカウト・ルール

紹介した増田さんの言から浮かんだのは、ボーイスカウト・ルール4

Uncle Bobは以下のように書いています。

チェックアウト時より少しでも良い物にしようと言っているだけなのです

今回紹介したF2のようなtipsを使えば、エディタに頑張ってもらって開発者は全然頑張らずにボーイスカウト・ルールに沿って動けるわけですね!



  1. 右クリックから現れるメニューにも「Rename Symbol」はあります。
  2. https://code.visualstudio.com/docs/editor/codebasics#_multiple-selections-multicursor
  3. いずれも「Chap.6 リファクタリングはじめの一歩」より
  4. 詳しく知りたい方は、『プリンシプル オブ プログラミング』の5.2をどうぞ