ロコガイド テックブログ

「地域のくらしを、かしこく、たのしく」する、株式会社ロコガイドの社員がいろいろな記事を書いています。

「地域のくらしを、かしこく、たのしく」する、株式会社ロコガイドの社員がいろいろな記事を書いています。

非エンジニア必見!!VS Codeではじめるコードグレップ入門

f:id:shimewtr:20201204114331p:plain

はじめに

この記事はロコガイド Advent Calendar 2020の12日目です。

はじめまして。2020年10月に入社した @shimewtr です。
現在はトクバイアプリのバックエンド開発に従事していますが、以前はプランナーやディレクターとしてスマートフォン向けゲームアプリの開発に携わっていました。

ゲーム、チラシ情報サービスを問わず、優れたプロダクト開発にはコミュニケーションコストや認識齟齬を減らすことが大切です。
エンジニアスキルがついた今、ディレクター時代の経験を振り返ると「あの時これを知っていれば、もっとうまくコミュニケーションがとれたのに…」と思うことが数多くあります。
今回はその中の1つ、「コードグレップ」に関してお伝えします。
エンジニア以外の方には聞き慣れない言葉だと思いますが、実際にありそうなシチュエーションでコードグレップの方法と有用性をお伝えします。

こんなことありませんか?

プロダクト開発において、テキストの変更が必要な場面は往々にしてあります。
例えば、東京オリンピックに関連する情報を掲載している場合、以下のようなやりとりが起こったのではないでしょうか?


ディレクター(以下: デ)「サイト内の東京オリンピックは2020年夏開催!というテキストを東京オリンピックは2021年夏開催!に変えてほしいです」
デ「対象ページはここと、ここの2ページです!!」(数字変えるだけだし、すぐできるよね…?)
エンジニア(以下: エ)「わかりました。調査と対応で1人日ください」(該当箇所が2ページだけか調べないとわからないし、延期すると思ってなかったからハードコーディングしてるよなぁ…)
デ「? わかりました!」(そんなにかかるものかな? 不思議だなぁ…)

〜その後〜

エ「調べてみました」
エ「挙げていただいたページ以外に、このページにも記載があります!! 今はアクセスが少ないキャンペーンページにも記載があります!!」
エ「2020年7月というテキストはどうします? 今夏というテキストはどうします? 東京五輪という表記は変更します?」
デ「今一度、対応を洗い出します…」(あわわわ…)



「ハードコーディングするな!!」や、「表記揺れしないように管理しろ!!」というご指摘は一旦置いておき…。
影響範囲を目視確認したディレクターと、ソースコードから検索して確認したエンジニアの間には影響範囲や対応箇所の認識に齟齬があります。

結果として

  • コミュニケーションコストの増加
  • 確認のための手戻り
  • 工数見積に対する不信感

といった問題が発生します。

これらの問題はディレクターが事前に コードグレップ することで解消できます!!

ご注意
エンジニアに該当箇所を聞くことや影響範囲を洗い出すことも必要な作業であり、ディレクターの作業負荷を無意味に増加させる意図はありませんし、コードグレップによって上記の問題がすべて解決するわけでもありません。

グレップとは

そもそもグレップとはなんでしょうか。

Wikipediaによると、

grep(グレップ、グレプ)は、UNIXおよびUnixオペレーティングシステムにおけるコマンド。テキストファイル中から、正規表現に一致する行を検索して出力する。

とありますが、「ソースコードから任意のテキストが記載されているファイルや行を見つける」と広義の解釈をします。
今回のケースでは「オリンピックに関するテキストが記載されているファイルや行をソースコードの中から見つける」と捉えてください。

実際にやってみよう

先の例でコードグレップを実際に試してテキスト変更の影響範囲を調べてみましょう!!

Visual Studio Code(以下、VS Code)をダウンロードし、ソースコードのフォルダを開いてください。
VS Codeでは画面左部の虫眼鏡をクリックするかShift + Command + F(WindowsではCtrl + Shift + F)のショートカットで検索ができます。

f:id:shimewtr:20201204123023p:plain

たとえば、東京オリンピックは2020年夏開催!と入力すると、入力したテキストを含むファイルの一覧が表示されます。

f:id:shimewtr:20201204123042p:plain

これで対象ファイルが判明しました!! エンジニアに対象ファイルを伝えれば認識齟齬も減って、考慮漏れはありません!

となればいいのですが…。

さきほどの例にも挙げたように、東京オリンピックは今夏開催など別の表現を使っている場合もあります。*1

正規表現を使ってみよう

VS Codeは検索に正規表現が使えます。

Wikipediaによると、

正規表現(せいきひょうげん、英: regular expression)は、文字列の集合を一つの文字列で表現する方法の一つである。

文章だけだとよくわかりませんね…。百聞は一見に如かず!! 正規表現を利用して再度検索してみましょう。
さきほどの検索フィールドの右にあるマークをクリックすると正規表現での検索モードに切り替わります。

f:id:shimewtr:20201204123059p:plain

たとえば、東京オリンピックは.+開催!と入力すると2020年開催,今夏開催,今年の夏開催などの表記揺れにもヒットするようになります。
これは.+という部分が1文字以上の任意の文字にマッチする正規表現だからです。

f:id:shimewtr:20201204123113p:plain

ほかにも東京オリンピックは\d+年夏開催!とすることで2020年夏開催,2021年夏開催,20年夏開催といったテキストを対象に検索できます。
これは\d+という部分が1文字以上の数字にマッチする正規表現だからです。

このように、正規表現を利用するとさまざまな表現方法にマッチするように検索できます。
ここですべての説明をするのは難しいので、ぜひ正規表現で調べてみてください。

他の便利機能

正規表現の他にもVS Codeには検索を便利にするさまざまな機能があります。
さきほどの検索フィールドの左のアイコンをクリックすると大文字と小文字を区別して検索できます。

f:id:shimewtr:20201204123132p:plain

APPLEだけを検索してappleにはヒットしてほしくないときや、Appleだけを検索してAPPLEにはヒットしてほしくないといった際に利用できます。

真ん中のアイコンは単語区切りで検索できる機能です。

f:id:shimewtr:20201204123143p:plain

appleだけを検索してpineappleにはヒットしてほしくないといった際に利用できます。

含めるファイルや除外するファイルも便利な機能です。

f:id:shimewtr:20201204123156p:plain

ファイルの拡張子を限定して検索したいときに活用できます。

f:id:shimewtr:20201204123213p:plain

反対に、除外するファイルを入力することでも対象のファイルを限定できます。
前述した正規表現での検索、大文字小文字を区別した検索、単語区切りの検索は同時に使用できるため、組み合わせることで目的のファイルに対して数多くのパターンで検索が可能です。

おわりに

今回の例では「東京オリンピック」に関するテキスト変更に焦点を当てて、コードグレップの方法と利便性をお伝えしました。
検索テキストと対象ファイル一覧を洗い出したうえでエンジニアへ作業依頼をすると、早い段階で目線を合わせられ、手戻りも少なくなり全員が幸せになれるのではないでしょうか。
コミュニケーションコストや認識齟齬を減らし、プロダクト開発をより円滑に行う助けになれば幸いです。

*1:繰り返しになりますがハードコーディングや表記ゆれは避けるのが望ましいことも多いと思います。ひとつの例としてお考えください