SlideShare a Scribd company logo
アプリ開発&チーム管理で
役立った拡張機能
Author: Masaki Suzuki
@makky12
自己紹介
• 名前:鈴木 正樹 (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@フリーランスクラウドエンジニア)
今回の発表について
• VS Code Meetup#4(2020/4/7)での「開発チーム管理で役立ったVS
Code拡張機能」がベースになっています
• 今回は「管理」より「開発」系の拡張機能が中心になります
• 一部「管理」にも触れています
• 前回同様「どう使った(≒役立った)」かにも触れています
• 資料URL:https://www2.slideshare.net/MasakiSuzuki3/ss-239361681
今回紹介する拡張機能(その1)
• 開発環境編
• Settings Sync
• Live Share
• サーバーレスアプリ編
• Azure Template Viewer
• Swagger Viewer
• AWS Toolkit
• コーディング補助
• ESLint/Prettier
• Grammarly/Code Spell Checker
今回紹介する拡張機能(その2)
• Git編
• GitLens/Git Graph
• その他支援ツール編
• Excel Viewer
• Draw.io Integration
• Hex Editor
開発環境編
• Settings Sync
• Live Share
Settings Sync
• 複数端末で、VS Codeの設定を同期する拡張機能
• 拡張機能/環境設定/ワークスペース など
• 「同一の開発環境」の構築が簡単に可能
• 作業自体は、Gistへの設定アップロード&ダウンロードだけ
• GitHubアカウントさえあれば、簡単に同期可能
※ 「設定の同期」機能自体は、 2020/07にVS Codeにも搭載された
• ただし2020/11/06の段階で、まだプレビュー版
※「マージ」ではなく「上書き」である点に注意
• 既存の拡張機能は消えてしまう
Settings Sync
どう使ったのか?
• 開発環境・拡張機能のチーム内での統一
• 「使用する拡張機能・設定」のブレをなくす
• (例) 「〇〇に関する作業は××に統一する」など
• 環境の違いによる動作不良および原因調査工数を減らす(=費やすべきところに集中させる)
• 「環境構築」工数を減らし、素早く開発に参加可能にする
• 「設定のダウンロードだけ行えば、すぐに開発に参加可能」な状態を作る
• 事前にダウンロード作業をしておけば、「着席→即開発」も可能に
• 会社PC⇔リモートPC間での開発環境の同期
• 異なる開発環境があっても、簡単に同期をとれるようにする
Live Share
• 複数人で同時にソースコード編集が行えるMicrosoft社製ツール
• 同時に同一ソースコードの修正が可能
• 「ファイルのロック」「コンフリクト」などが起こらない
• 仕組みとしては「ホストのソースを、ゲストが同時に編集する」というもの
• 共有が非常に簡単
• ホストから送られた共有URLにアクセスするだけ(ログインなどは一切不要)
• ホスト側はMicrosoft、またはGitHubのアカウントが必要
• 導入が非常に簡単
• 今のリモートワークが主流の環境において、非常に相性が良い
Live Share
• 「VS Code Meetup#2 -Live Share編-」 で、井上章さんと戸倉彩さんが
実際にLive Shareを使用したライブコーディングを実施しています。
• Live Shareがどんな感じかを具体的に知りたい方は、そちらの視聴を
お勧めします。
• URL:https://www.youtube.com/watch?v=4wMlwWCeboQ
どう使ったのか?
• 画面を共有できない状況でのコードレビュー
• (例) プロジェクターがない、会議室が取れない、離れた場所にいる など
• 具体的な場所を視覚的に示すことが可能で、分かりやすい
• 抽象的な言葉の使用防止 (「そこ」「あそこ」など)
• 離れた場所同士でもペアプログラミング(ペアプロ)が可能
• Live Shareが一番真価を発揮できるのがこれだと思う
• 同一ファイルを複数人が同時に編集できる
• Teamsの「制御を要求」ではできない…
• 今のリモートワーク推奨の状況において、非常に役立つ
• 特に「どうしても同時に編集しなければならない」場合など
サーバーレスアプリ編
• Azure Template Viewer
• Swagger Viewer
• AWS Toolkit
Azure Template Viewer
• Azure Resource Manager(ARM)のテンプレートファイルについて、
事前にプレビューを行える拡張機能
• 視覚的に非常にわかりやすい
• チェッカーとして使うことができる
• ARM Templateでのデプロイを行う場合に、とても便利
• あわせてAzure Toolsなどの拡張機能があると、なお便利
• AWS CloudFormationにも、こういう拡張機能が欲しい…
• 知ってたら教えてください
Azure Template Viewer
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を争うほどメジャーでは?
Rest Client
Swagger Viewer
• Swaggerファイルについて、プレビューを表示できる
• これもAzure Template Manager同様、チェッカーとして利用できる
• ファイルを編集すると、変更内容が即プレビュー内容に反映される
• リロードなどの作業が不要で便利
• Markdownビューアーに近い感じ
• 内容としては、Swagger Editor(https://editor.swagger.io/)とほぼ同じ
• ただしこちらは「オフラインでも使用できる」というメリットがある
Swagger Viewer
AWS ToolKit
• AWSの各種リソースについて、操作ができる
• Lambda, S3, CloudWatch, CloudFormationなど
• 大半のリソースは「読み取り」「実行」「削除」のみ(「編集」不可)
• (例) LambdaはAWS上での実行、名前/ARNのコピーのみ可能
• ただし、S3はファイルアップロードが可能
• 個人的には「便利ではあるけど、もう一声あると」という感想
• でも、Step Functionsのリアルタイムプレビュー機能はものすごく便利
• 他にもS3アップロード、CloudWatch Logs参照など
• 個人的には、DynamoDB関連機能があるとすごく良いと思う
AWS ToolKit
•
どう使ったのか?
• チェッカーとして使用する
• ビジュアルで一目でわかるので、確認しやすい
• 変更がリアルタイムで反映されるものも多く、非常に使いやすい
• ローカルで作業することで、作業の手間を省く
• コンソールでの作業より、作業が簡素化できるケースがある
• (例) S3バケット内ファイルの削除
• コンソールはどうしても時間・手間がかかる場合がある
• サイトが重い
• 一定時間ごとにリロードが実施される… など
コーディング補助
• ESLint/Prettier
• Grammarly/Code Spell Checker
ESLint・Prettier
• ESLint
• JavaScript用静的検証ツール
• コードの構文チェック、コードの整形などが可能
• (例) インデントのスペースタブ, 末尾のセミコロン有無 など
• Prettier
• JavaScriptの整形ツール
• コードを整形し、可読性の高いコードにしてくれる
• ESLintよりも高性能な整形が可能
• ESLintとの併用も可能
• (例) Prettierでコード整形→ES Lintで構文チェック など
Grammarly・Code Spell Checker
• Grammarly
• 本来はドキュメント内の文法チェック用の拡張機能
• コード内の英単語のスペルミスのチェックを行える
• 元々公式の拡張機能であったが、削除されたので「unofficial」になっている
• Code Spell Checker
• Vs Code内での単語のスペルチェッカー
• コード内の単語・変数名について、スペルをチェック&修正をしてくれる
• 変数名の一部が違う場合でも表示てくれるのが便利(例:”exampleVarue”、など)
• 変数名のスペルチェックにも便利
Grammarly・Code Spell Checker
どう使ったのか?
• ルールの統一(指針の作成)
• テンプレ的なルールを作成し、作業をやりやすくする
• 不安を取り除き、「心理的安全」を少しでも得られるように
• いわゆる「エンジニア宗教」的理由が原因のトラブルを防ぐ
• 面倒なメンバーがいてもいいように、事前に手を打っておく
• 「押さえつける」のが目的ではない!
• 保守・リファクタリングがしやすいコードにする補助
• 見やすいコード、読みやすいコードにする
• スペルミスが残ったままだと、バグFix/リファクタリング時に「変数を検索して
も出てこない!」というケースが…
• そういうところで時間を消費しないようにする
Git編
• GitLens/Git Graph
GitLens & Git Graph
• GitLens
• Git管理下のファイル/フォルダについて、様々な機能を提供するツール
• ソース内に変更者/コミットコメントを表示する
• ブランチ/ファイル/ファイルの行単位 についての履歴表示
• ファイルの差分比較(別ブランチ/タグ/過去コミットのファイル) など
• 個人的に、本当に「殿堂入り」レベルの拡張機能だと思う
• Git Graph
• リポジトリのブランチ・変更履歴をツリー上で確認できるツール
• ツリーが視覚的に見やすい
• これで各種操作(push, pullなど)を行うこともできる
GitLens
Git Graph
どう使ったのか?
• リポジトリ・ブランチの管理
• 各種リリースバージョンの管理
• 不具合、予期せぬコミット・マージなどが起こった時の対応など
• 差分比較が簡単(GitLens)
• ファイル全体が表示できるので、全体の処理を把握しやすい
• コードレビュー、予期せぬコミット・マージの調査に便利
• リポジトリ内の各ブランチの状況把握(Git Graph)
• ブランチが乱立した際のチェックアウト元のブランチの確認が容易
• 不要なブランチの確認、及び削除(指示)を容易に行える
• CLIコマンドより、実施に時間がかからない
その他支援ツール編
• Excel Viewer
• Draw.io Integration
• Hex Editor
Excel Viewer
• VS Code上で起動するExcelファイルビューアー
• VS Code上でExcelファイルを開くことができる
• 「Viewer」のある通り、読み取り専用で開く(編集は不可)
• Excelファイルだけではなく、CSVファイルビューアーとしても使用可能
• データの調査・解析に使いやすく、便利
• ソート・フィルタリング機能が非常に便利
• 設定不要でソート・フィルタリング機能が使用可能
• CSVでもソート・フィルタリング機能を使用可能
• Excel・CSVともに表形式の見た目で、わかりやすい
• CSVビューワーとしても優秀
Excel Viewer
Draw.io Integration
• Draw.io
• Draw.io(現Diagrams.net)の作図機能をVS Codeで使用できる
• Diagrams.netは、フローチャートを簡単に実施できるサービス
• https://app.diagrams.net/
• 本家同様、フローチャートの作成に便利
• AWS/Azureなど、クラウド関連のアイコンが充実している
• Hex Editor
• VS Code上で起動するバイナリエディタ
• Microsoft社製ツール
Draw.io Integration
Hex Editor
どう使ったのか
• 作業をVS Code上で完結できる
• VS Codeと各種ツールを行き来して…という煩わしさがなくなる
• 非ソースファイルを、ソースファイルと同じ感覚で管理できる
• インストーラでのインストールが不要
• VS Codeの拡張機能を入れるだけで始められる(=手間が少なくて済む)
• 本来行うべき作業(=開発など)に時間を有効に使える
• 一度インストールしてしまえば、オフラインでも作業が可能
• サービス側の障害、ネットワーク不調などがあっても作業ができる
• 「クラウドサービスが落ちてるから帰ります」が使いにくくなる…
まとめ
• 拡張機能を有効活用しよう!
• 便利な拡張機能を使い、効率の良い作業を実施する
• 非生産的な作業に割く工数を、少しでも減らす
• その分、リソースを本来費やすべき作業に多く費やす
• 拡張機能は「とりあえず試してみる」のが大事
• 気に入らなかったら、削除すればいいだけ
• その作業コストが少ないのも拡張機能の利点
• 自分に合っているものを探す
• 似たような機能を持つ拡張機能はたくさんある
• ダウンロード数が多い=自分に合っている…とは限らない(好みは千差万別)
以上です
ご清聴ありがとうございました
Have a nice VS Code Life!

More Related Content

What's hot

Visual studio 2019 updates pickup!
Visual studio 2019 updates pickup!Visual studio 2019 updates pickup!
Visual studio 2019 updates pickup!
一希 大田
 
angular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1clubangular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1club
silvers ofsilvers
 
Macアプリのインストーラ作成ツールSwift版
Macアプリのインストーラ作成ツールSwift版Macアプリのインストーラ作成ツールSwift版
Macアプリのインストーラ作成ツールSwift版
Akira Hayashi
 
Microsoft Azure WebAppsで ECサイトを構築してみた話 ~EC-CUBE3で試してみました~
Microsoft Azure WebAppsでECサイトを構築してみた話 ~EC-CUBE3で試してみました~Microsoft Azure WebAppsでECサイトを構築してみた話 ~EC-CUBE3で試してみました~
Microsoft Azure WebAppsで ECサイトを構築してみた話 ~EC-CUBE3で試してみました~
典子 松本
 
Azure DevOps × スクラム で実現するプロダクト開発のポイント #dotnetlab #jazug
Azure DevOps × スクラム で実現するプロダクト開発のポイント #dotnetlab #jazugAzure DevOps × スクラム で実現するプロダクト開発のポイント #dotnetlab #jazug
Azure DevOps × スクラム で実現するプロダクト開発のポイント #dotnetlab #jazug
満徳 関
 
今日から始めるARMテンプレート
今日から始めるARMテンプレート今日から始めるARMテンプレート
今日から始めるARMテンプレート
Kazumi IWANAGA
 
案件規模で使い分けよう!Microsoft Azure×WordPressの話
案件規模で使い分けよう!Microsoft Azure×WordPressの話案件規模で使い分けよう!Microsoft Azure×WordPressの話
案件規模で使い分けよう!Microsoft Azure×WordPressの話
典子 松本
 
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみたサーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
Itaru Kitagawa
 
20150905 stream analytics
20150905 stream analytics20150905 stream analytics
20150905 stream analytics
一希 大田
 
簡単・お手軽!ノンプログラミングで便利BOTを作ってみた話
簡単・お手軽!ノンプログラミングで便利BOTを作ってみた話簡単・お手軽!ノンプログラミングで便利BOTを作ってみた話
簡単・お手軽!ノンプログラミングで便利BOTを作ってみた話
典子 松本
 
【NLU祭り 場外編】コミュニケーションをより身近に、よりかしこく。LUIS と Azure AI サービスの使いどころ
【NLU祭り 場外編】コミュニケーションをより身近に、よりかしこく。LUIS と Azure AI サービスの使いどころ【NLU祭り 場外編】コミュニケーションをより身近に、よりかしこく。LUIS と Azure AI サービスの使いどころ
【NLU祭り 場外編】コミュニケーションをより身近に、よりかしこく。LUIS と Azure AI サービスの使いどころ
Kazumi IWANAGA
 
Xcode以外の開発環境 AppCodeの紹介
Xcode以外の開発環境 AppCodeの紹介Xcode以外の開発環境 AppCodeの紹介
Xcode以外の開発環境 AppCodeの紹介
Akira Hayashi
 
本番運用で使うVisual Studio
本番運用で使うVisual Studio本番運用で使うVisual Studio
本番運用で使うVisual Studio
Kazuyuki Miyake
 
現実的な「WordPress on Azure App Service」 クイックスタート
現実的な「WordPress on Azure App Service」 クイックスタート現実的な「WordPress on Azure App Service」 クイックスタート
現実的な「WordPress on Azure App Service」 クイックスタート
Kazuyuki Miyake
 
インフラ知識ゼロの「デザイナー」でもOK! Microsoft Azureの便利機能を Web制作的に活かしてみた話
インフラ知識ゼロの「デザイナー」でもOK!Microsoft Azureの便利機能をWeb制作的に活かしてみた話インフラ知識ゼロの「デザイナー」でもOK!Microsoft Azureの便利機能をWeb制作的に活かしてみた話
インフラ知識ゼロの「デザイナー」でもOK! Microsoft Azureの便利機能を Web制作的に活かしてみた話
典子 松本
 
.NET の今 ~ 最新アップデートと 2019 年の展望
.NET の今 ~ 最新アップデートと 2019 年の展望.NET の今 ~ 最新アップデートと 2019 年の展望
.NET の今 ~ 最新アップデートと 2019 年の展望
Akira Inoue
 
Infrastructure as code ~ ツールスタック / ヌーラボの事例 ~
Infrastructure as code ~ ツールスタック / ヌーラボの事例 ~Infrastructure as code ~ ツールスタック / ヌーラボの事例 ~
Infrastructure as code ~ ツールスタック / ヌーラボの事例 ~
ikikko
 
CloudWatchツールの監視目的別使い分けの例
CloudWatchツールの監視目的別使い分けの例CloudWatchツールの監視目的別使い分けの例
CloudWatchツールの監視目的別使い分けの例
makky12
 
Vs code conf2020-11-21-extensions-for-microservices-app-dev
Vs code conf2020-11-21-extensions-for-microservices-app-devVs code conf2020-11-21-extensions-for-microservices-app-dev
Vs code conf2020-11-21-extensions-for-microservices-app-dev
Shotaro Suzuki
 
Ignite 2021 振り返り(DevOps)
Ignite 2021 振り返り(DevOps)Ignite 2021 振り返り(DevOps)
Ignite 2021 振り返り(DevOps)
Kazushi Kamegawa
 

What's hot (20)

Visual studio 2019 updates pickup!
Visual studio 2019 updates pickup!Visual studio 2019 updates pickup!
Visual studio 2019 updates pickup!
 
angular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1clubangular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1club
 
Macアプリのインストーラ作成ツールSwift版
Macアプリのインストーラ作成ツールSwift版Macアプリのインストーラ作成ツールSwift版
Macアプリのインストーラ作成ツールSwift版
 
Microsoft Azure WebAppsで ECサイトを構築してみた話 ~EC-CUBE3で試してみました~
Microsoft Azure WebAppsでECサイトを構築してみた話 ~EC-CUBE3で試してみました~Microsoft Azure WebAppsでECサイトを構築してみた話 ~EC-CUBE3で試してみました~
Microsoft Azure WebAppsで ECサイトを構築してみた話 ~EC-CUBE3で試してみました~
 
Azure DevOps × スクラム で実現するプロダクト開発のポイント #dotnetlab #jazug
Azure DevOps × スクラム で実現するプロダクト開発のポイント #dotnetlab #jazugAzure DevOps × スクラム で実現するプロダクト開発のポイント #dotnetlab #jazug
Azure DevOps × スクラム で実現するプロダクト開発のポイント #dotnetlab #jazug
 
今日から始めるARMテンプレート
今日から始めるARMテンプレート今日から始めるARMテンプレート
今日から始めるARMテンプレート
 
案件規模で使い分けよう!Microsoft Azure×WordPressの話
案件規模で使い分けよう!Microsoft Azure×WordPressの話案件規模で使い分けよう!Microsoft Azure×WordPressの話
案件規模で使い分けよう!Microsoft Azure×WordPressの話
 
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみたサーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
 
20150905 stream analytics
20150905 stream analytics20150905 stream analytics
20150905 stream analytics
 
簡単・お手軽!ノンプログラミングで便利BOTを作ってみた話
簡単・お手軽!ノンプログラミングで便利BOTを作ってみた話簡単・お手軽!ノンプログラミングで便利BOTを作ってみた話
簡単・お手軽!ノンプログラミングで便利BOTを作ってみた話
 
【NLU祭り 場外編】コミュニケーションをより身近に、よりかしこく。LUIS と Azure AI サービスの使いどころ
【NLU祭り 場外編】コミュニケーションをより身近に、よりかしこく。LUIS と Azure AI サービスの使いどころ【NLU祭り 場外編】コミュニケーションをより身近に、よりかしこく。LUIS と Azure AI サービスの使いどころ
【NLU祭り 場外編】コミュニケーションをより身近に、よりかしこく。LUIS と Azure AI サービスの使いどころ
 
Xcode以外の開発環境 AppCodeの紹介
Xcode以外の開発環境 AppCodeの紹介Xcode以外の開発環境 AppCodeの紹介
Xcode以外の開発環境 AppCodeの紹介
 
本番運用で使うVisual Studio
本番運用で使うVisual Studio本番運用で使うVisual Studio
本番運用で使うVisual Studio
 
現実的な「WordPress on Azure App Service」 クイックスタート
現実的な「WordPress on Azure App Service」 クイックスタート現実的な「WordPress on Azure App Service」 クイックスタート
現実的な「WordPress on Azure App Service」 クイックスタート
 
インフラ知識ゼロの「デザイナー」でもOK! Microsoft Azureの便利機能を Web制作的に活かしてみた話
インフラ知識ゼロの「デザイナー」でもOK!Microsoft Azureの便利機能をWeb制作的に活かしてみた話インフラ知識ゼロの「デザイナー」でもOK!Microsoft Azureの便利機能をWeb制作的に活かしてみた話
インフラ知識ゼロの「デザイナー」でもOK! Microsoft Azureの便利機能を Web制作的に活かしてみた話
 
.NET の今 ~ 最新アップデートと 2019 年の展望
.NET の今 ~ 最新アップデートと 2019 年の展望.NET の今 ~ 最新アップデートと 2019 年の展望
.NET の今 ~ 最新アップデートと 2019 年の展望
 
Infrastructure as code ~ ツールスタック / ヌーラボの事例 ~
Infrastructure as code ~ ツールスタック / ヌーラボの事例 ~Infrastructure as code ~ ツールスタック / ヌーラボの事例 ~
Infrastructure as code ~ ツールスタック / ヌーラボの事例 ~
 
CloudWatchツールの監視目的別使い分けの例
CloudWatchツールの監視目的別使い分けの例CloudWatchツールの監視目的別使い分けの例
CloudWatchツールの監視目的別使い分けの例
 
Vs code conf2020-11-21-extensions-for-microservices-app-dev
Vs code conf2020-11-21-extensions-for-microservices-app-devVs code conf2020-11-21-extensions-for-microservices-app-dev
Vs code conf2020-11-21-extensions-for-microservices-app-dev
 
Ignite 2021 振り返り(DevOps)
Ignite 2021 振り返り(DevOps)Ignite 2021 振り返り(DevOps)
Ignite 2021 振り返り(DevOps)
 

Similar to アプリ開発&チーム管理で 役立った拡張機能

Azure Functionsでサーバーレスアプリケーション構築
Azure Functionsでサーバーレスアプリケーション構築Azure Functionsでサーバーレスアプリケーション構築
Azure Functionsでサーバーレスアプリケーション構築
ryosuke matsumura
 
サーバーレスの今とこれから
サーバーレスの今とこれからサーバーレスの今とこれから
サーバーレスの今とこれから
真吾 吉田
 
はじめてのAWS Lambda
はじめてのAWS LambdaはじめてのAWS Lambda
はじめてのAWS Lambda
Masaki Misawa
 
はじめてのAws lambda
はじめてのAws lambdaはじめてのAws lambda
はじめてのAws lambda
dcubeio
 
Azure Functionsでサーバーレスアプリケーション構築
Azure Functionsでサーバーレスアプリケーション構築Azure Functionsでサーバーレスアプリケーション構築
Azure Functionsでサーバーレスアプリケーション構築
ryosuke matsumura
 
Azure DevOps入門~TechLab編
Azure DevOps入門~TechLab編Azure DevOps入門~TechLab編
Azure DevOps入門~TechLab編
Kazushi Kamegawa
 
Awsのインフラをデザインパターン駆使して設計構築
Awsのインフラをデザインパターン駆使して設計構築Awsのインフラをデザインパターン駆使して設計構築
Awsのインフラをデザインパターン駆使して設計構築
Monstar Lab Inc.
 
Azure DevOps で始めるスタートダッシュ
Azure DevOps で始めるスタートダッシュAzure DevOps で始めるスタートダッシュ
Azure DevOps で始めるスタートダッシュ
Yasuaki Matsuda
 
MicrosoftのOSSへの取り組み
MicrosoftのOSSへの取り組みMicrosoftのOSSへの取り組み
MicrosoftのOSSへの取り組み
Shinichiro Arai
 
OpenWhisk Serverless への期待
OpenWhisk Serverless への期待OpenWhisk Serverless への期待
OpenWhisk Serverless への期待
Hideaki Tokida
 
AWSからOpenStack, Chef SoloからChef Serverに インフラを置き換えた事例の紹介
AWSからOpenStack, Chef SoloからChef Serverに インフラを置き換えた事例の紹介AWSからOpenStack, Chef SoloからChef Serverに インフラを置き換えた事例の紹介
AWSからOpenStack, Chef SoloからChef Serverに インフラを置き換えた事例の紹介
Naoyuki Yamada
 
Azure DevOps's security
Azure DevOps's securityAzure DevOps's security
Azure DevOps's security
Kazushi Kamegawa
 
May the FaaS be with us!!
May the FaaS be with us!!May the FaaS be with us!!
May the FaaS be with us!!
真吾 吉田
 
Serverless Architecture Overview #cdevc
Serverless Architecture Overview #cdevcServerless Architecture Overview #cdevc
Serverless Architecture Overview #cdevc
Masahiro NAKAYAMA
 
AWS Lambdaのテストで役立つ各種ツール
AWS Lambdaのテストで役立つ各種ツールAWS Lambdaのテストで役立つ各種ツール
AWS Lambdaのテストで役立つ各種ツール
Masaki Suzuki
 
AWS & Google Cloudを使ったシステム開発/技術選定のはなし
AWS & Google Cloudを使ったシステム開発/技術選定のはなしAWS & Google Cloudを使ったシステム開発/技術選定のはなし
AWS & Google Cloudを使ったシステム開発/技術選定のはなし
修一 高橋
 
Visual studio online and Agile
Visual studio online and AgileVisual studio online and Agile
Visual studio online and Agile
Kazushi Kamegawa
 
Serverless for VUI
Serverless for VUIServerless for VUI
Serverless for VUI
真吾 吉田
 
VUXデザイナー
VUXデザイナーVUXデザイナー
VUXデザイナー
真吾 吉田
 
おいしいフルマネージドデータベース はじめました
おいしいフルマネージドデータベース はじめましたおいしいフルマネージドデータベース はじめました
おいしいフルマネージドデータベース はじめました
Miho Yamamoto
 

Similar to アプリ開発&チーム管理で 役立った拡張機能 (20)

Azure Functionsでサーバーレスアプリケーション構築
Azure Functionsでサーバーレスアプリケーション構築Azure Functionsでサーバーレスアプリケーション構築
Azure Functionsでサーバーレスアプリケーション構築
 
サーバーレスの今とこれから
サーバーレスの今とこれからサーバーレスの今とこれから
サーバーレスの今とこれから
 
はじめてのAWS Lambda
はじめてのAWS LambdaはじめてのAWS Lambda
はじめてのAWS Lambda
 
はじめてのAws lambda
はじめてのAws lambdaはじめてのAws lambda
はじめてのAws lambda
 
Azure Functionsでサーバーレスアプリケーション構築
Azure Functionsでサーバーレスアプリケーション構築Azure Functionsでサーバーレスアプリケーション構築
Azure Functionsでサーバーレスアプリケーション構築
 
Azure DevOps入門~TechLab編
Azure DevOps入門~TechLab編Azure DevOps入門~TechLab編
Azure DevOps入門~TechLab編
 
Awsのインフラをデザインパターン駆使して設計構築
Awsのインフラをデザインパターン駆使して設計構築Awsのインフラをデザインパターン駆使して設計構築
Awsのインフラをデザインパターン駆使して設計構築
 
Azure DevOps で始めるスタートダッシュ
Azure DevOps で始めるスタートダッシュAzure DevOps で始めるスタートダッシュ
Azure DevOps で始めるスタートダッシュ
 
MicrosoftのOSSへの取り組み
MicrosoftのOSSへの取り組みMicrosoftのOSSへの取り組み
MicrosoftのOSSへの取り組み
 
OpenWhisk Serverless への期待
OpenWhisk Serverless への期待OpenWhisk Serverless への期待
OpenWhisk Serverless への期待
 
AWSからOpenStack, Chef SoloからChef Serverに インフラを置き換えた事例の紹介
AWSからOpenStack, Chef SoloからChef Serverに インフラを置き換えた事例の紹介AWSからOpenStack, Chef SoloからChef Serverに インフラを置き換えた事例の紹介
AWSからOpenStack, Chef SoloからChef Serverに インフラを置き換えた事例の紹介
 
Azure DevOps's security
Azure DevOps's securityAzure DevOps's security
Azure DevOps's security
 
May the FaaS be with us!!
May the FaaS be with us!!May the FaaS be with us!!
May the FaaS be with us!!
 
Serverless Architecture Overview #cdevc
Serverless Architecture Overview #cdevcServerless Architecture Overview #cdevc
Serverless Architecture Overview #cdevc
 
AWS Lambdaのテストで役立つ各種ツール
AWS Lambdaのテストで役立つ各種ツールAWS Lambdaのテストで役立つ各種ツール
AWS Lambdaのテストで役立つ各種ツール
 
AWS & Google Cloudを使ったシステム開発/技術選定のはなし
AWS & Google Cloudを使ったシステム開発/技術選定のはなしAWS & Google Cloudを使ったシステム開発/技術選定のはなし
AWS & Google Cloudを使ったシステム開発/技術選定のはなし
 
Visual studio online and Agile
Visual studio online and AgileVisual studio online and Agile
Visual studio online and Agile
 
Serverless for VUI
Serverless for VUIServerless for VUI
Serverless for VUI
 
VUXデザイナー
VUXデザイナーVUXデザイナー
VUXデザイナー
 
おいしいフルマネージドデータベース はじめました
おいしいフルマネージドデータベース はじめましたおいしいフルマネージドデータベース はじめました
おいしいフルマネージドデータベース はじめました
 

Recently uploaded

RaySheetで解決できるシナリオ10選-業務改善に貢献する機能 - RaySheet Documentation
RaySheetで解決できるシナリオ10選-業務改善に貢献する機能 - RaySheet DocumentationRaySheetで解決できるシナリオ10選-業務改善に貢献する機能 - RaySheet Documentation
RaySheetで解決できるシナリオ10選-業務改善に貢献する機能 - RaySheet Documentation
GrapeCity, inc.
 
クラウドネイティブにおけるセキュアなソフトウェア・サプライ・チェーンの考え方とベストプラクティス.pdf
クラウドネイティブにおけるセキュアなソフトウェア・サプライ・チェーンの考え方とベストプラクティス.pdfクラウドネイティブにおけるセキュアなソフトウェア・サプライ・チェーンの考え方とベストプラクティス.pdf
クラウドネイティブにおけるセキュアなソフトウェア・サプライ・チェーンの考え方とベストプラクティス.pdf
TatsuyaHanayama
 
シグネチャで始めるRustプログラミング - Superteam Japan Developer Event
シグネチャで始めるRustプログラミング - Superteam Japan Developer Eventシグネチャで始めるRustプログラミング - Superteam Japan Developer Event
シグネチャで始めるRustプログラミング - Superteam Japan Developer Event
K Kinzal
 
RaySheet Product Description Documentation - 2024.6.19
RaySheet Product Description Documentation - 2024.6.19RaySheet Product Description Documentation - 2024.6.19
RaySheet Product Description Documentation - 2024.6.19
GrapeCity, inc.
 
RayBarcode Product Description Documentation - 2024.6.19
RayBarcode Product Description Documentation - 2024.6.19RayBarcode Product Description Documentation - 2024.6.19
RayBarcode Product Description Documentation - 2024.6.19
GrapeCity, inc.
 
Solanaで始めるRustプログラミング - Superteam Japan Developer Event
Solanaで始めるRustプログラミング - Superteam Japan Developer EventSolanaで始めるRustプログラミング - Superteam Japan Developer Event
Solanaで始めるRustプログラミング - Superteam Japan Developer Event
K Kinzal
 
Bhyve Management Daemon Version 3.0 on FreBSD
Bhyve Management Daemon Version 3.0 on FreBSDBhyve Management Daemon Version 3.0 on FreBSD
Bhyve Management Daemon Version 3.0 on FreBSD
Yuichiro Naito
 
RayPen Product Description Documentation - 2024.6.19
RayPen Product Description Documentation - 2024.6.19RayPen Product Description Documentation - 2024.6.19
RayPen Product Description Documentation - 2024.6.19
GrapeCity, inc.
 

Recently uploaded (8)

RaySheetで解決できるシナリオ10選-業務改善に貢献する機能 - RaySheet Documentation
RaySheetで解決できるシナリオ10選-業務改善に貢献する機能 - RaySheet DocumentationRaySheetで解決できるシナリオ10選-業務改善に貢献する機能 - RaySheet Documentation
RaySheetで解決できるシナリオ10選-業務改善に貢献する機能 - RaySheet Documentation
 
クラウドネイティブにおけるセキュアなソフトウェア・サプライ・チェーンの考え方とベストプラクティス.pdf
クラウドネイティブにおけるセキュアなソフトウェア・サプライ・チェーンの考え方とベストプラクティス.pdfクラウドネイティブにおけるセキュアなソフトウェア・サプライ・チェーンの考え方とベストプラクティス.pdf
クラウドネイティブにおけるセキュアなソフトウェア・サプライ・チェーンの考え方とベストプラクティス.pdf
 
シグネチャで始めるRustプログラミング - Superteam Japan Developer Event
シグネチャで始めるRustプログラミング - Superteam Japan Developer Eventシグネチャで始めるRustプログラミング - Superteam Japan Developer Event
シグネチャで始めるRustプログラミング - Superteam Japan Developer Event
 
RaySheet Product Description Documentation - 2024.6.19
RaySheet Product Description Documentation - 2024.6.19RaySheet Product Description Documentation - 2024.6.19
RaySheet Product Description Documentation - 2024.6.19
 
RayBarcode Product Description Documentation - 2024.6.19
RayBarcode Product Description Documentation - 2024.6.19RayBarcode Product Description Documentation - 2024.6.19
RayBarcode Product Description Documentation - 2024.6.19
 
Solanaで始めるRustプログラミング - Superteam Japan Developer Event
Solanaで始めるRustプログラミング - Superteam Japan Developer EventSolanaで始めるRustプログラミング - Superteam Japan Developer Event
Solanaで始めるRustプログラミング - Superteam Japan Developer Event
 
Bhyve Management Daemon Version 3.0 on FreBSD
Bhyve Management Daemon Version 3.0 on FreBSDBhyve Management Daemon Version 3.0 on FreBSD
Bhyve Management Daemon Version 3.0 on FreBSD
 
RayPen Product Description Documentation - 2024.6.19
RayPen Product Description Documentation - 2024.6.19RayPen Product Description Documentation - 2024.6.19
RayPen Product Description Documentation - 2024.6.19
 

アプリ開発&チーム管理で 役立った拡張機能

  • 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
  • 7. Settings Sync • 複数端末で、VS Codeの設定を同期する拡張機能 • 拡張機能/環境設定/ワークスペース など • 「同一の開発環境」の構築が簡単に可能 • 作業自体は、Gistへの設定アップロード&ダウンロードだけ • GitHubアカウントさえあれば、簡単に同期可能 ※ 「設定の同期」機能自体は、 2020/07にVS Codeにも搭載された • ただし2020/11/06の段階で、まだプレビュー版 ※「マージ」ではなく「上書き」である点に注意 • 既存の拡張機能は消えてしまう
  • 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にも、こういう拡張機能が欲しい… • 知ってたら教えてください
  • 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を争うほどメジャーでは?
  • 18. Swagger Viewer • Swaggerファイルについて、プレビューを表示できる • これもAzure Template Manager同様、チェッカーとして利用できる • ファイルを編集すると、変更内容が即プレビュー内容に反映される • リロードなどの作業が不要で便利 • Markdownビューアーに近い感じ • 内容としては、Swagger Editor(https://editor.swagger.io/)とほぼ同じ • ただしこちらは「オフラインでも使用できる」というメリットがある
  • 20. AWS ToolKit • AWSの各種リソースについて、操作ができる • Lambda, S3, CloudWatch, CloudFormationなど • 大半のリソースは「読み取り」「実行」「削除」のみ(「編集」不可) • (例) LambdaはAWS上での実行、名前/ARNのコピーのみ可能 • ただし、S3はファイルアップロードが可能 • 個人的には「便利ではあるけど、もう一声あると」という感想 • でも、Step Functionsのリアルタイムプレビュー機能はものすごく便利 • 他にもS3アップロード、CloudWatch Logs参照など • 個人的には、DynamoDB関連機能があるとすごく良いと思う
  • 22. どう使ったのか? • チェッカーとして使用する • ビジュアルで一目でわかるので、確認しやすい • 変更がリアルタイムで反映されるものも多く、非常に使いやすい • ローカルで作業することで、作業の手間を省く • コンソールでの作業より、作業が簡素化できるケースがある • (例) S3バケット内ファイルの削除 • コンソールはどうしても時間・手間がかかる場合がある • サイトが重い • 一定時間ごとにリロードが実施される… など
  • 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”、など) • 変数名のスペルチェックにも便利
  • 27. どう使ったのか? • ルールの統一(指針の作成) • テンプレ的なルールを作成し、作業をやりやすくする • 不安を取り除き、「心理的安全」を少しでも得られるように • いわゆる「エンジニア宗教」的理由が原因のトラブルを防ぐ • 面倒なメンバーがいてもいいように、事前に手を打っておく • 「押さえつける」のが目的ではない! • 保守・リファクタリングがしやすいコードにする補助 • 見やすいコード、読みやすいコードにする • スペルミスが残ったままだと、バグFix/リファクタリング時に「変数を検索して も出てこない!」というケースが… • そういうところで時間を消費しないようにする
  • 29. GitLens & Git Graph • GitLens • Git管理下のファイル/フォルダについて、様々な機能を提供するツール • ソース内に変更者/コミットコメントを表示する • ブランチ/ファイル/ファイルの行単位 についての履歴表示 • ファイルの差分比較(別ブランチ/タグ/過去コミットのファイル) など • 個人的に、本当に「殿堂入り」レベルの拡張機能だと思う • Git Graph • リポジトリのブランチ・変更履歴をツリー上で確認できるツール • ツリーが視覚的に見やすい • これで各種操作(push, pullなど)を行うこともできる
  • 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ビューワーとしても優秀
  • 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社製ツール
  • 39. どう使ったのか • 作業をVS Code上で完結できる • VS Codeと各種ツールを行き来して…という煩わしさがなくなる • 非ソースファイルを、ソースファイルと同じ感覚で管理できる • インストーラでのインストールが不要 • VS Codeの拡張機能を入れるだけで始められる(=手間が少なくて済む) • 本来行うべき作業(=開発など)に時間を有効に使える • 一度インストールしてしまえば、オフラインでも作業が可能 • サービス側の障害、ネットワーク不調などがあっても作業ができる • 「クラウドサービスが落ちてるから帰ります」が使いにくくなる…
  • 40. まとめ • 拡張機能を有効活用しよう! • 便利な拡張機能を使い、効率の良い作業を実施する • 非生産的な作業に割く工数を、少しでも減らす • その分、リソースを本来費やすべき作業に多く費やす • 拡張機能は「とりあえず試してみる」のが大事 • 気に入らなかったら、削除すればいいだけ • その作業コストが少ないのも拡張機能の利点 • 自分に合っているものを探す • 似たような機能を持つ拡張機能はたくさんある • ダウンロード数が多い=自分に合っている…とは限らない(好みは千差万別)