2020/11/21(土)開催の「VS Code Conference Japan」における、私(makky12)の発表で使用した資料になります。

1. アプリ開発＆チーム管理で
役立った拡張機能
Author: Masaki Suzuki
@makky12

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

3. 今回の発表について
• VS Code Meetup#4(2020/4/7)での「開発チーム管理で役立ったVS
Code拡張機能」がベースになっています
• 今回は「管理」より「開発」系の拡張機能が中心になります
• 一部「管理」にも触れています
• 前回同様「どう使った(≒役立った)」かにも触れています
• 資料URL：https://www2.slideshare.net/MasakiSuzuki3/ss-239361681

4. 今回紹介する拡張機能(その1)
• 開発環境編
• Settings Sync
• Live Share
• サーバーレスアプリ編
• Azure Template Viewer
• Swagger Viewer
• AWS Toolkit
• コーディング補助
• ESLint/Prettier
• Grammarly/Code Spell Checker

5. 今回紹介する拡張機能(その2)
• Git編
• GitLens/Git Graph
• その他支援ツール編
• Excel Viewer
• Draw.io Integration
• Hex Editor

6. 開発環境編
• Settings Sync
• Live Share

7. Settings Sync
• 複数端末で、VS Codeの設定を同期する拡張機能
• 拡張機能/環境設定/ワークスペース など
• 「同一の開発環境」の構築が簡単に可能
• 作業自体は、Gistへの設定アップロード＆ダウンロードだけ
• GitHubアカウントさえあれば、簡単に同期可能
※ 「設定の同期」機能自体は、 2020/07にVS Codeにも搭載された
• ただし2020/11/06の段階で、まだプレビュー版
※「マージ」ではなく「上書き」である点に注意
• 既存の拡張機能は消えてしまう

8. Settings Sync

9. どう使ったのか？
• 開発環境・拡張機能のチーム内での統一
• 「使用する拡張機能・設定」のブレをなくす
• (例) 「〇〇に関する作業は××に統一する」など
• 環境の違いによる動作不良および原因調査工数を減らす(=費やすべきところに集中させる)
• 「環境構築」工数を減らし、素早く開発に参加可能にする
• 「設定のダウンロードだけ行えば、すぐに開発に参加可能」な状態を作る
• 事前にダウンロード作業をしておけば、「着席→即開発」も可能に
• 会社PC⇔リモートPC間での開発環境の同期
• 異なる開発環境があっても、簡単に同期をとれるようにする

10. Live Share
• 複数人で同時にソースコード編集が行えるMicrosoft社製ツール
• 同時に同一ソースコードの修正が可能
• 「ファイルのロック」「コンフリクト」などが起こらない
• 仕組みとしては「ホストのソースを、ゲストが同時に編集する」というもの
• 共有が非常に簡単
• ホストから送られた共有URLにアクセスするだけ(ログインなどは一切不要)
• ホスト側はMicrosoft、またはGitHubのアカウントが必要
• 導入が非常に簡単
• 今のリモートワークが主流の環境において、非常に相性が良い

11. Live Share
• 「VS Code Meetup#2 -Live Share編-」 で、井上章さんと戸倉彩さんが
実際にLive Shareを使用したライブコーディングを実施しています。
• Live Shareがどんな感じかを具体的に知りたい方は、そちらの視聴を
お勧めします。
• URL：https://www.youtube.com/watch?v=4wMlwWCeboQ

12. どう使ったのか？
• 画面を共有できない状況でのコードレビュー
• (例) プロジェクターがない、会議室が取れない、離れた場所にいる など
• 具体的な場所を視覚的に示すことが可能で、分かりやすい
• 抽象的な言葉の使用防止 (「そこ」「あそこ」など)
• 離れた場所同士でもペアプログラミング(ペアプロ)が可能
• Live Shareが一番真価を発揮できるのがこれだと思う
• 同一ファイルを複数人が同時に編集できる
• Teamsの「制御を要求」ではできない…
• 今のリモートワーク推奨の状況において、非常に役立つ
• 特に「どうしても同時に編集しなければならない」場合など

13. サーバーレスアプリ編
• Azure Template Viewer
• Swagger Viewer
• AWS Toolkit

14. Azure Template Viewer
• Azure Resource Manager(ARM)のテンプレートファイルについて、
事前にプレビューを行える拡張機能
• 視覚的に非常にわかりやすい
• チェッカーとして使うことができる
• ARM Templateでのデプロイを行う場合に、とても便利
• あわせてAzure Toolsなどの拡張機能があると、なお便利
• AWS CloudFormationにも、こういう拡張機能が欲しい…
• 知ってたら教えてください

15. Azure Template Viewer

16. Rest Client
• VS Code上でHTTPリクエスト送信＆レスポンス受信ができる
• curlやPostmam(https://www.postman.com/)と同じ
• 定義、実行が簡単
• 必要な定義が少なく、導入しやすい
• 次スライドのスクショを参照
• 実行するのが非常に簡単
• Ctrl+Alt+Rキーを押すだけ
• サーバーレスなどの環境で、APIの動作確認に使いやすい
• VS Code上で、Ctrl+Alt+Rキーを押すだけで完結する
• Rest Client自体もネット上にも情報量が多く、情報収集に苦労しない
• VS CodeのRestクライアントソフトとしては、1, 2を争うほどメジャーでは？

17. Rest Client

18. Swagger Viewer
• Swaggerファイルについて、プレビューを表示できる
• これもAzure Template Manager同様、チェッカーとして利用できる
• ファイルを編集すると、変更内容が即プレビュー内容に反映される
• リロードなどの作業が不要で便利
• Markdownビューアーに近い感じ
• 内容としては、Swagger Editor(https://editor.swagger.io/)とほぼ同じ
• ただしこちらは「オフラインでも使用できる」というメリットがある

19. Swagger Viewer

20. AWS ToolKit
• AWSの各種リソースについて、操作ができる
• Lambda, S3, CloudWatch, CloudFormationなど
• 大半のリソースは「読み取り」「実行」「削除」のみ(「編集」不可)
• (例) LambdaはAWS上での実行、名前/ARNのコピーのみ可能
• ただし、S3はファイルアップロードが可能
• 個人的には「便利ではあるけど、もう一声あると」という感想
• でも、Step Functionsのリアルタイムプレビュー機能はものすごく便利
• 他にもS3アップロード、CloudWatch Logs参照など
• 個人的には、DynamoDB関連機能があるとすごく良いと思う

21. AWS ToolKit
•

22. どう使ったのか？
• チェッカーとして使用する
• ビジュアルで一目でわかるので、確認しやすい
• 変更がリアルタイムで反映されるものも多く、非常に使いやすい
• ローカルで作業することで、作業の手間を省く
• コンソールでの作業より、作業が簡素化できるケースがある
• (例) S3バケット内ファイルの削除
• コンソールはどうしても時間・手間がかかる場合がある
• サイトが重い
• 一定時間ごとにリロードが実施される… など

23. コーディング補助
• ESLint/Prettier
• Grammarly/Code Spell Checker

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

25. Grammarly・Code Spell Checker
• Grammarly
• 本来はドキュメント内の文法チェック用の拡張機能
• コード内の英単語のスペルミスのチェックを行える
• 元々公式の拡張機能であったが、削除されたので「unofficial」になっている
• Code Spell Checker
• Vs Code内での単語のスペルチェッカー
• コード内の単語・変数名について、スペルをチェック＆修正をしてくれる
• 変数名の一部が違う場合でも表示てくれるのが便利(例：”exampleVarue”、など)
• 変数名のスペルチェックにも便利

26. Grammarly・Code Spell Checker

27. どう使ったのか？
• ルールの統一(指針の作成)
• テンプレ的なルールを作成し、作業をやりやすくする
• 不安を取り除き、「心理的安全」を少しでも得られるように
• いわゆる「エンジニア宗教」的理由が原因のトラブルを防ぐ
• 面倒なメンバーがいてもいいように、事前に手を打っておく
• 「押さえつける」のが目的ではない！
• 保守・リファクタリングがしやすいコードにする補助
• 見やすいコード、読みやすいコードにする
• スペルミスが残ったままだと、バグFix/リファクタリング時に「変数を検索して
も出てこない！」というケースが…
• そういうところで時間を消費しないようにする

28. Git編
• GitLens/Git Graph

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

30. GitLens

31. Git Graph

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

33. その他支援ツール編
• Excel Viewer
• Draw.io Integration
• Hex Editor

34. Excel Viewer
• VS Code上で起動するExcelファイルビューアー
• VS Code上でExcelファイルを開くことができる
• 「Viewer」のある通り、読み取り専用で開く(編集は不可)
• Excelファイルだけではなく、CSVファイルビューアーとしても使用可能
• データの調査・解析に使いやすく、便利
• ソート・フィルタリング機能が非常に便利
• 設定不要でソート・フィルタリング機能が使用可能
• CSVでもソート・フィルタリング機能を使用可能
• Excel・CSVともに表形式の見た目で、わかりやすい
• CSVビューワーとしても優秀

35. Excel Viewer

36. Draw.io Integration
• Draw.io
• Draw.io(現Diagrams.net)の作図機能をVS Codeで使用できる
• Diagrams.netは、フローチャートを簡単に実施できるサービス
• https://app.diagrams.net/
• 本家同様、フローチャートの作成に便利
• AWS/Azureなど、クラウド関連のアイコンが充実している
• Hex Editor
• VS Code上で起動するバイナリエディタ
• Microsoft社製ツール

37. Draw.io Integration

38. Hex Editor

39. どう使ったのか
• 作業をVS Code上で完結できる
• VS Codeと各種ツールを行き来して…という煩わしさがなくなる
• 非ソースファイルを、ソースファイルと同じ感覚で管理できる
• インストーラでのインストールが不要
• VS Codeの拡張機能を入れるだけで始められる(=手間が少なくて済む)
• 本来行うべき作業(=開発など)に時間を有効に使える
• 一度インストールしてしまえば、オフラインでも作業が可能
• サービス側の障害、ネットワーク不調などがあっても作業ができる
• 「クラウドサービスが落ちてるから帰ります」が使いにくくなる…

40. まとめ
• 拡張機能を有効活用しよう！
• 便利な拡張機能を使い、効率の良い作業を実施する
• 非生産的な作業に割く工数を、少しでも減らす
• その分、リソースを本来費やすべき作業に多く費やす
• 拡張機能は「とりあえず試してみる」のが大事
• 気に入らなかったら、削除すればいいだけ
• その作業コストが少ないのも拡張機能の利点
• 自分に合っているものを探す
• 似たような機能を持つ拡張機能はたくさんある
• ダウンロード数が多い=自分に合っている…とは限らない(好みは千差万別)

41. 以上です
ご清聴ありがとうございました
Have a nice VS Code Life!