2020/04/07(火) 19:30～開催の「VS Code Meetup #4 - Extensionを使う編2」で使用した、私の発表資料です。

1. VS Code Meetup #4
開発チーム管理で役立った
VS Code拡張機能
Author: Masaki Suzuki
@makky12

2. VS Code Meetup #4
自己紹介
• 名前：鈴木 正樹 (Masaki Suzuki)
• 在住：愛知県半田市
• 職業：フリーランスエンジニア
• 業務：サーバーレスアプリのアーキテクチャ構築/設計/開発 など
• 技術：
• AWS/Azure/Serverless Framework/IaC/Vue.js など
• 各種イベント・SNS・ブログでのクラウド普及活動(個人的に)
• MS系技術(最近はPower Platform/TypeScript/Unoなど)
• SNS
http://makky12.hatenablog.com/
https://github.com/smt7174
@makky12 (Masaki Suzuki＠フリーランスクラウドエンジニア)
名古屋市
豊橋市
中部国際空港
(セントレア)
名古屋市
豊橋市
中部国際空港
(セントレア)
半田市

3. VS Code Meetup #4
今回の発表について
• 1年間サーバーレスSPA開発のリードエンジニアを担当
• プロジェクト自体は、取りあえず無事終了
• 上記開発チームの管理で使った拡張機能＆使い方の紹介
• 「開発現場」レベルでの話です
• 「プロジェクトマネジメント」レベルではない
※資料URL：

4. VS Code Meetup #4
今回紹介する拡張機能＆URL
• Settings Sync
• https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync
• ESLint・Prettier
• ESLint：https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
• Prettier：https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
• Live Share
• https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare
• GitLens・Git Graph
• GitLens：https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
• Git Graph： https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph

5. VS Code Meetup #4
Settings Sync
• 複数端末で、VS Codeの設定を同期する拡張機能
• 拡張機能/環境設定/ワークスペース など
• 「同一の開発環境」の構築が簡単に可能
• 作業そのものは、Gistへの設定アップロード＆ダウンロードだけ
• GitHubアカウントさえあれば、簡単に同期可能
※「設定の同期」機能自体は、VS Code標準機能となる模様
• 現時点(2020/04/07)では、まだプレビュー版
• VS Code Insiders Ver1.44.0から利用可能
※「マージ」ではなく「上書き」である点に注意
• 既存の拡張機能は消えてしまう

6. VS Code Meetup #4
どう使ったのか？
• 開発環境・拡張機能のチーム内での統一
• 「使用する拡張機能・設定」のブレをなくす
• (例) 「〇〇に関する作業は××に統一する」など
• 環境の違いによる動作不良および原因調査工数を減らす(=費やすべきところに集中させる)
• 「環境構築」工数を減らし、素早く開発に参加可能にする
• 「設定のダウンロードだけ行えば、すぐに開発に参加可能」な状態を作る
• 事前にダウンロード作業をしておけば、「着席→即開発」も可能に
• まあ、新メンバーなんて来なかったんですけどね…

7. VS Code Meetup #4
ESLint・Prettier
• ESLint
• JavaScript用静的検証ツール
• コードの構文チェック、コードの整形などが可能
• (例) インデントのスペースタブ, 末尾のセミコロン有無 など
• Prettier
• JavaScriptの整形ツール
• コードを整形し、可読性の高いコードにしてくれる
• ESLintよりも高性能な整形が可能
• ESLintとの併用も可能
• (例) Prettierでコード整形→ES Lintで構文チェック など

8. VS Code Meetup #4
どう使ったのか？
• 可読性の高いコードにする
• 「可読性」において、一定の品質を確保する
• 「可読性・リーダブルコード」の意識付け
• 「とりあえず動くからヨシ！」ではダメ(主に若手エンジニア向け)
• 「もっと深く知りたい」など、一定の効果はあった
• ルールの統一(指針の作成)
• テンプレ的なルールを作成し、作業をやりやすくする
• 不安を取り除き、「心理的安全」を少しでも得られるように
• いわゆる「エンジニア宗教」的理由が原因のトラブルを防ぐ
• 面倒なメンバーがいてもいいように、事前に手を打っておく
• 「押さえつける」のが目的ではない！

9. VS Code Meetup #4
Live Share
• 複数人で同時にソースコード編集が行えるツール
• 同一ソースコードの修正が可能
• 「ファイルのロック」「コンフリクト」などが起こらない
• 仕組みとしては「ホストのソースを、ゲストが同時に編集する」というもの
• 共有が非常に簡単
• ホストから送られた共有URLにアクセスするだけ(ログインなどは一切不要)
※ ホスト側はMicrosoft、またはGitHubのアカウントが必要
• チャット、音声でのやりとりも可能
※VS Code Meetup #2の戸倉彩さん＆井上章さんのセッションを参照
 https://www.youtube.com/watch?v=4wMlwWCeboQ

10. VS Code Meetup #4
どう使ったのか？
• 画面を共有できない状況でのコードレビュー
• (例) プロジェクターがない、会議室が取れない、離れた場所にいる など
• 具体的な場所を視覚的に示すことが可能で、分かりやすい
• 抽象的な言葉の使用防止 (「そこ」「あそこ」など)
• 離れた場所同士でもペアプログラミング(ペアプロ)が可能
• Live Shareが一番真価を発揮できるのがこれだと思う
• 今のリモートワーク推奨の状況において、非常に役立つ
• てか、早くリモートワークになって(頼むから…)

11. VS Code Meetup #4
GitLens & Git Graph
• GitLens
• Git管理下のファイル/フォルダについて、様々な機能を提供するツール
• ソース内に変更者/コミットコメントを表示する
• ブランチ/ファイル/ファイルの行単位 についての履歴表示
• ファイルの差分比較(別ブランチ/タグ/過去コミットのファイル) など
• 個人的に、本当に「殿堂入り」レベルの拡張機能だと思う
• Git Graph
• リポジトリのブランチ・変更履歴をツリー上で確認できるツール
• ツリーが視覚的に見やすい

12. VS Code Meetup #4
どう使ったのか？
• リポジトリ・ブランチの管理
• 各種リリースバージョンの管理
• 不具合、予期せぬコミット・マージなどが起こった時の対応など
• 差分比較が簡単(GitLens)
• ファイル全体が表示できるので、全体の処理を把握しやすい
• コードレビュー、予期せぬコミット・マージの調査に便利
• リポジトリ内の各ブランチの状況把握(Git Graph)
• ブランチが乱立した際のチェックアウト元のブランチの確認が容易
• 不要なブランチの確認、及び削除(指示)を容易に行える

13. VS Code Meetup #4
まとめ
• 使い方次第で「開発」以外の用途にも活用できる
• 開発者はもちろん、非IT系の方にもおすすめ
• もちろん、メインは「開発」
• 拡張機能を有効活用しよう！
• 非生産的な作業に割く工数を、少しでも減らす
• その分、リソースを本来費やすべき作業に多く費やす
• メンバーが「幸福」や「快適」を感じるプロジェクトにしよう！
• 良いプロダクトは、高いエンゲージメントから！

14. VS Code Meetup #4
以上です
ご清聴ありがとうございました