いいプロダクトは高いエンゲージメントから　開発チーム管理で役立ったVSCode拡張機能

サーバーレスアプリケーションについての何でも屋さん

鈴木正樹氏：よろしくお願いします。私はみなさんと毛色がちょっと違う感じで「開発チーム管理で役立ったVS Code拡張機能」ということで、チーム管理で自分がいろいろ使った拡張機能について紹介したいと思います。よろしくお願いします。

簡単に自己紹介します。私は本名、鈴木正樹と言いまして、愛知県の知多半島にあります半田市というところでサーバーレスアプリケーションについての何でも屋さんと言うか、アーキテクチャ構築から設計、開発まで何でもするフリーランスのエンジニアです。主にAWSと今はServerless Frameworkというオープンソースのフレームワークを使ったサーバーレスアプリケーションについていろいろ行っています。

先日Serverless関連の登壇をしたので、もしかしたらご存知の方もいらっしゃるかもしれません。

チーム管理に役立った機能拡張紹介

今回の発表ですが、先ほど私が少し申し上げた通りサーバレスSPA開発のリードエンジニアとしてチーム管理もやったんですが、その際にいろいろ利用した拡張機能やその使い方について紹介させていただきます。これは管理ということなんですが、あくまでもチームリーダーみたいな感じで、いわゆるプロジェクトマネジメントではないので、ご了承いただければと思います。

今回紹介する拡張機能は、ここにリストアップした通りになります。普通にVS Codeでこの名前を検索したら出てくるので、もしご興味があれば一度インストールしてもらえればと思います。

最初に紹介するのはSetting Syncですね。これは複数端末でVS Codeの設定を同期する拡張機能で、例えば新しく買ったPCに今使っているVS Codeの環境をそのまま移したいというときなどに役に立ちます。設定とあるんですが、拡張機能なんかもそのまま移せますので本当に非常に簡単に環境のコピーができる便利なものになります。

本日せとあずさんの発表でもありましたが、設定の同期そのものはVS Codeの標準機能として実装されるということで、まだプレビュー版ということでVS Code Insidersでのみ利用可能な機能ですね。なのでまだちょっとしばらくはこのSetting Syncは便利になるのではないかと思います。

私は管理にどう使ったかと言うと、開発環境や拡張機能をチーム内で統一すると。これを行なうことで、いわゆるバグではなく環境設定とか個人の環境に依存するエラーが発生したり、ソフトが動かないというときに、それに使う調査の時間がもったいないので、個人の環境の設定によるエラーや調査時間による工数をなくしたかったということ。

あとは実際に環境構築というのは、最初は非常に時間が掛かるところなので、この工数をとにかく削減したかった。なのでVS CodeだったらSetting Syncを使って設定のダウンロードさえすれば新しく来た人にも開発可能という体制を作りました。

これが非常に役立ったと言いたかったんですけど、結局新メンバーが来なかったので実際の効果はなんとも言えませんが、新しいプロジェクトでこういうことをやっておくともしかしたら新メンバーの方が来る予定の場合、非常に便利かもしれません。

静的検証ツールと整形ツール

次にESLintとPrettierですね。ESLintは静的検証ツールで、Prettierは整形ツールですね。どちらかと言えば構文チェックをしたり、あとはソースコードの可読性についてある程度の品質を保証できるツールになりまして、PrettierはESLintとの併用が可能です。例えばPrettierでコード整形をしてESLintで構文チェックするみたいなことをやるとなかなか使いやすいのではないかと思っています。

これは私が導入した理由としては、まずは可読性の高いコードにする。これが本来の使い方になりまして、もちろん可読性の高いコードにするというのも目的の1つなんですが、けっこう若手エンジニアと言いますか、まだ経験が浅いエンジニアが何人かいたのでそういったエンジニア向けにいわゆる可読性とかリーダブルコードというのを知ってもらいたかったという目的で導入しましたね。

「とりあえず動いたからヨシ！」ではなくて、こういった可読性とかリーダブルコードの、いわゆる保守性が高いコードにするためにやらなきゃいけないんだよというものを意識付けするために使いました。実際に若手エンジニアからそういった「もっと深く知りたい」とか、「何か勉強できる本ないですか？」という質問を受けたので、これは一定の効果があったのではないかと思っています。

あとはチーム内のルールの統一ですね。こういったルールを統一してある程度テンプレ的に用意しておくことで新しく来た人……来なかったんですけど、新しく来た人にもソースのコーディングもある程度やりやすくすることと、いわゆるエンジニア宗教的なタブ、スペースとかそういったことがあったときに、そういったしょうもないことでのトラブルを防いで事前にチームとして統一することで事前に手を打っていくということになりますね。

ただ、押さえつけるのが目的ではないので、とにかくそこの空気、意見を言える空気を作るというのは非常に大切だし、自分も苦労した部分で、かつ認識しておかないといけない部分だと思っています。

Gitに関する機能をサポート

ごめんなさい、本日私がTwitterで公開した資料と順番が逆転して申し訳ないんですけど、先にGitLensとGitGraphを紹介したいと思います。

これはもうGitと書いてある通りGitに関する機能をサポートしてくれるんですが、GitLensは例えば履歴表示ですね。コミット履歴なんかを本当にブランチだったりファイルだったり、あとはファイルの行単位について、例えばもちろんファイル単位だったり、ソースの中にも記載してくれたりそこら辺が非常にわかりやすいツールになっています。

あとはとくにファイルの差分比較ですね。これが非常に便利で、同じブランチの同じファイルの過去コミットだけでなくて、例えば別ブランチだったりその特定のタグの特定のファイルとの比較もできたりして、これは本当に非常に便利なツールです。個人的にはこれはGitで管理するんだったらとりあえず入れておいて損はないと、本当にそれぐらい便利だと思っています。

GitGraphは先ほどのその変更履歴についてツリーで表示してくれるツールになりまして、非常にそのリポジトリの中のブランチだったりファイルの変更の遷移、変更履歴がわかりやすくなるツールになります。これなんですが、これはリポジトリやブランチの管理で使いました。

特に使ったものとしては、例えば本来上がっているべきでないコミットがあったりとか、最新じゃないファイルが上がってたりしたときなどに、それを調査したりするときにGitLensの履歴が役立ったり、あるいはブランチが立て込んだりしたときにブランチが乱立した際にチェックアウト元のブランチどれにするかとか、あとちゃんとそういった不要なブランチを調べてそこら辺の削除をしたり、あとはメンバーに削除を指示したりとか、そういったことを確認するのに非常に役立ちました。

あとはコードレビューなんかでやっぱり比較するときにファイル全体が表示されたり細かい履歴が表示できるので、ここら辺が非常に便利だと思います。

複数人で同時にソースコードの編集

最後なんですが、Live Shareですね。これは簡単に言うと複数人で同時にソースコードの編集が行えるツールですね。Excel Onlineみたいな、あんな感じでソースコードの編集が行えるんですが、これ自体は1月23日にMicrosoft Ignite The Tour Osakaの夜にあったやつで実際にLive Shareで1回オンラインの勉強会などはありました。オンラインじゃないですね、普通に勉強会がありました。

これは今日参加されている戸倉彩さんとMicrosoftの井上章さんが、実際にセッションの中でデモをしていますので、そちらの動画を見ていただけると非常にわかりやすいと思います。

これはどう使ったか。これは正確には管理とは違うんですが、画面を共有できない状況でコードレビューするときですね。例えばプロジェクターがないとか会議室が取れなかったとか、そういった場合に、もちろんレビューアとレビューイが普通に同じソースを見てもいいんですけど、VS Code上で同時に画面を共有することで具体的に、例えば該当箇所を選択するとかそういったことをすることで視覚的に非常にわかりやすい。

どうしても口頭だと、例えば「〇行目のif文の3つ目」とか、そことかあそことか、どうしても抽象的になっちゃったりするので、Live Shareを使うと具体的に視覚的にわかりやすいので、とくにこういった離れているときや画面が共有できないときに便利でしたね。

あとは実はこれは僕らのプロジェクトではやってないんですけど、Live Shareで同時に編集ができるので、一番効果が発揮できるのがペアプロですね。離れた場所でのペアプロだったりモブプロだったりが非常に便利だと思います。今のこのリモートワーク推奨のご時世なので、とくにそういったところでどうやるかと悩んでいる方がいたらこれをとりあえず導入してみると非常にいいと思います。

まだ僕らはリモートワークになっていないので、でもリモートワークになっていなくても非常に便利なので、ぜひ一度、とくにリモートワークになっている方は入れてみてもらえるといいと思います。

いいプロダクトは高いエンゲージメントから

まとめです。もちろんVS Codeの拡張機能はメインは開発なんですが、そうじゃなくてこういったやり方次第でそういった開発以外の用途でも非常に便利になります。とくに今日どれだけいるかわからないんですが、非IT系の方にも非常におすすめできますので、ぜひVS Codeと拡張機能を機会があったら試してもらえるといいと思います。

管理の面で言うと、こういう拡張機能を有効活用することで、Setting Syncで少し説明したような調査があったりといった非生産的な作業に割く工数を少しでも減らして、その分本来費やすべき作業にリソースを投入してプロダクトの品質を上げたり、あとは機能をたくさん付けたりして収入だったり利益を増やして、それで最終的に何をやるかというとメンバーが幸福だったり快適さを感じる、いわゆる心理的安全ですね。

そういったものを感じられるプロジェクトにするために、こういった管理をする側としては拡張機能なんかをどんどん使っていこうということになりますね。やっぱりいいプロダクトは高いエンゲージメントからということなので、やっぱりメンバーをまず幸せにするためにどうすればよいかという、そういったことでどんどんこういった機能も導入していってほしいと思っています。

ちょっと急ぎ足になって申し訳ないんですが、私のセッションは以上になります。ご清聴ありがとうございました。