CodeTourでCodeのTourを作ってみた

使ってみようと思いながらなかなか手をつけていなかったCodeTour。GWなので使ってみることにしました。

CodeTourって?

CodeTourはVSCodeのExtensionで、コードのウォークスルーをVSCodeでそのまま作れるツールです。文字で表すとわかりづらいのですが、以下の場合に特に活躍しそうなツールです:

  • 新しくプロジェクトにJoinした新人にコードを理解してもらう
  • 自分のためにコード内にメモを残しておく

NotionだったりConfluenceだったり、いろんなツールを使ってコードに関するナレッジを残す工夫を人それぞれやっていると思うのですが、「コードそのものに残せたら良いのに...」と思ったことがあるはずです。そんなときに使える優れものです。

この記事では基本的な使い方だけ紹介しますが、ExtensionやGitHubリポジトリを見たら細かい機能まで説明が載っているのでぜひ読んでみてください。

github.com

さっそく使ってみた様子

百聞は一見に如かずとやらなので、一連の流れを動画に収めてみました。(書いてるコメントはしょぼいですけど、雰囲気は伝わるはずです)

www.youtube.com

基本的な使い方

使い方に関しては本家のページが詳しく載っているので、ここではどういうときに何を使うと良さそうかというのを紹介しておきます。

Tourを作る

Tourを開始する

Tourを保存する

リポジトリ内で作ったTourは .tours ディレクトリに ツアー名.tour ファイルとして以下のキャプチャのように保存されます。これをリポジトリ管理下に置いておくのが基本的な運用方法になりそうです。

f:id:kenev:20210503173153p:plain

が、必ずしもリポジトリ配下に置けるとは限らないですし、ちょっとしたメモレベルのものを作っておきたいと思うかもしれません。そんなときにTourを外部にエクスポートしておくこともできます。

Exporting Tours

Tourを開く

リポジトリ内のTourは自動でVSCodeで開かれるのですが、リポジトリのTourを開くこともできます。しかも、URLから開くこともできます。ちょっと何を言っているかわかりづらいと思うので、これも動画でとってみました。

youtu.be

何がすごい(?)かというと、ローカルにTourのコードが無くてもこのTourが再生できるということです。動画で使っていた .tour のファイルを見るとわかるのですが、なんとTourで使われたコードがそのままJSONに入っているので、コードが無くてもTourが再生できるのです。

ory_keto_relation-tuple_parse.tour · GitHub

他にすごそうな機能

基本的な機能は上で述べた通りですが、他にもすごい機能があります。

  • Tour同士をリンクさせることができる(Linking Tours
  • 状況に応じてTourを表示するか否か、JavaScriptで制御できる(Conditional Tours
    • デフォルトで isLinux, isMac, isWindows という変数が用意されてるので、プラットフォーム別に表示するTourを容易に制御できる
  • Tourからシェルコマンドを実行できる(Shell Commands
  • Tourをコードとどのように紐付けるか指定する(Versioning Tours
    • TourをBranchに紐付けるのか、Commitに紐付けるのか、Tagと紐付けるのか等指定できる(コードとTourの同期をとるためにかなり重要
  • コードとTourの同期が取れてなさそうならCIで検知してもらう(Maintaining Tours

おわりに

  • CodeTourを使ってみた
  • コードベースへのオンボーディングで重宝しそう
  • コードに対して自分のメモ用としても強力
  • メンテナンス性についてもかなり考慮されている

これからがっつり使っていって、CodeTour力を高めていきます!