echo("備忘録");

IT技術やプログラミング関連など、技術系の事を備忘録的にまとめています。

【VS Code】VS Code Conference Japanで発表しました

はじめに

2020/11/21(土)に、Visual Studio Code5周年記念として、「VS Code Conference Japan」というイベントがオンラインで開催されました。

vscode.connpass.com

この中で、「アプリ開発&チーム管理で役立った拡張機能など」という内容で30分セッションを行いましたので、その内容を含め、VS Code Conference Japanについて書きたいと思います。

※ちなみに、発表資料は↓になります。
URL:https://www2.slideshare.net/MasakiSuzuki3/ss-239362824

www2.slideshare.net

お礼

管理者の皆様、いろいろ手筈を整えていただき、ありがとうございました。

また、当日聴いてくださった皆さん、ありがとうございました。

セッションで紹介した拡張機能について

  • セッションで紹介した拡張機能の概要+αを記載しています。(詳細は先述の発表資料を参照)
  • 個々のURLは載せてませんが、VS Code拡張機能検索やブラウザで名前をそのまま検索すれば、(多分)出てきます。

開発環境編

Setting Sync
  • 複数のPCでVS Code環境の同期を取れる。
  • GitHubアカウント(正確にはアクセストークンとGist ID)さえあればOK。
    • Gist IDはダウンロード時のみ必要
  • やることは「設定のアップロード」と「設定のダウンロード」だけ。

ちなみに、「複数PCでのVS Code環境の同期」機能は、2020/07にVS Codeに標準で搭載された。
ただしまだプレビュー版なので、使用前に警告が出る。

f:id:Makky12:20201123083949p:plain

Live Share
  • VS Code上で複数人で同時にソースコードの編集が行える、Micorsoft製の拡張機能
  • ソースの同期だけではなく、チャット&音声通話も可能。
  • withコロナ時代のリモートワーク全盛の今の時代、ものすごく真価を発揮している拡張機能では

ちなみにLive Shareを実際に動かした様子は、下記「VS Code Meetup#2 -Live Share編-」の動画を参照
https://www.youtube.com/watch?v=4wMlwWCeboQ

サーバーレスアプリ編

Azule Template Viewer
  • AzureのARM(Azure Template Manager。AWSでいうCloudFormationのような、Infrastructure as Codeを実現するリソース)のテンプレートファイルの内容について、事前にデプロイ後の内容を確認できる。
  • てか、マジでめっちゃ便利。
  • マジでCloudFormationにも欲しい...

f:id:Makky12:20201123084425p:plain

Rest Client
  • HTTPリクエスト送信&レスポンス受信をVS Code上で行える。
  • リスエスト定義&送信がめっちゃ簡単。(定義はスクショ参照。送信は[ctrl]+[alt]+[R]だけ)
  • この手の機能の拡張機能で、一番有名なのではないか?

f:id:Makky12:20201123084452p:plain

Swagger Viewer
  • Swagger定義ファイルの内容をプレビューできる。
  • 定義ファイルを変更したら、それがリアルタイムにプレビュー画面に反映されるのが良い。
  • Swagger Editor( https://editor.swagger.io/ )と同等の機能を持つ。

f:id:Makky12:20201123084532p:plain

AWS ToolKit
  • AWSのいくつかのリソース(Lambda, S3, CloudWatchなど)について、参照・AWS上で実行・削除を実施できる。
  • S3はアップロード&ダウンロードを行える。
  • いちいちコンソールを開かないでよい。
  • けど、編集ができないので、そこは今後の課題かな...
  • でも、Step FunctionsのSteta Machineプレビュー機能は便利(これも変更がりリアルタイムで反映される)。あとS3アップロード&ダウンロード機能とか。
  • セッションでも言ったけど、個人的にDynamoDBのCRUDができると、かなりいい感じではないかなと思う。

f:id:Makky12:20201123084604p:plain

コーディング補助編

ESLint
  • JavaScriptの静的検証ツール
  • 構文エラーとか、設定したコーディングルールに反したコードを知らせてくれる。
Prettier
  • コードフォーマッタ
  • コードを整形し、可読性の高いコードにしてくれる。
  • 一部静的検証も行ってくれる。
Grammarly
  • もともとはドキュメントの文法チェッカ
  • スペルが誤っている単語をお知らせしてくれる。
  • 「unofficial」となっているが、使用には全く問題ない。(もともとMSが公式で出していたらしいが、無くなったため)
Code Spell Checker
  • VS Code上でスペルチェックを行ってくれる。
  • スペルが違う単語についてお知らせしてくれて、修正候補も表示してくれる。
  • 「expectVarue」(正しくは「expectValue」)のような、複数の単語がつながった変数などのスペルミスも教えてくれる。

f:id:Makky12:20201123084719p:plain

Gi編

GitLens
  • ブランチ・ファイル・ファイル行単位で履歴を表示する
  • ブランチ/タグ/過去コミット間での差分を表示する
  • ソース内に変更者&コミットコメントを表示する

...など(他にもいろいろ)、「VS CodeでGit扱うなら、とりあえずこれは入れとけ」レベルで便利な拡張機能

f:id:Makky12:20201123084746p:plain

Git Graph
  • Gitリポジトリについて、ブランチ&変更履歴をツリー状に表示してくれる。
    • Backlog Gitの「ネットワーク」みたいな感じ
  • ツリー上から、Gitの各種操作(push/pull/checkoutなど)が可能
  • これも非常に便利だし「とりあえずこれは入れとけ」レベルでおススメ

f:id:Makky12:20201123084817p:plain

その他支援ツール編

Excel Viewer
  • 名前の通り、ExcelVS Code上で閲覧できる。(閲覧のみ。編集は不可)
  • Excelだけではなく、CSVファイルも閲覧可能。
    • というか、CSVビューワーとして非常に便利
  • ソート&フィルタ機能が標準で使用できるのが非常に良い。
  • データの調査&解析に向いている。

f:id:Makky12:20201123085151p:plain

Draw.io Integration
  • Draw.io(現Diagrams.net)のフローチャート作成機能をVS Code上で実行できる。
  • 微妙に違う部分があるかもしれないが、使った限りはさほど気にならないレベル。
  • 本家同様、AWS/Azureなどクラウド関連の図が豊富で、クラウド・サーバーレスのフロー図作成に便利。

f:id:Makky12:20201123084917p:plain

Hex Editor

f:id:Makky12:20201123084948p:plain

おまけ:諸事情で資料に載せられなかった拡張機能

Barcket Lens & Bracket Code Colorizer(2)
  • どちらも、コード内の各種カッコについて、対応するカッコを教えてくれる拡張機能
  • Bracket Code Colorizer(2)は色で、Bracket Lensは文字列で教えてくれる。
  • Bracket Code Colorizerは1と2があるが、基本的な機能は同じ。(2の方が性能が向上している、とのこと)

※左がBracket Lens, 右がBracket Code Colorizer2(なんかこのブログを書いているPCだと、同時使用ができなかった。たまたま?)

indent-rainbow
  • 名前の通り、インデントを深さごとに色分けして、コードを読みやすくしてくれる。
  • 色は設定可能

f:id:Makky12:20201123090320p:plain

余談

  • 最初は「サーバーレスアプリ開発で役立った拡張機能など」というタイトルを予定していましたが、構想を考えてるうちに「これ、ほとんど(Azule Template ViewerとAWS ToolKit以外)サーバーレス関係なくね?」と思い、運営さんにタイトルを変更してもらいました。(ありがとうございました)
  • 実は10月後半からずっと体調不良が続いており、本格的に資料を作成できたのがイベントの2日前からでした。
  • しかも、最初は10分くらいだとずっと思っていたので、イベント3日前のZoomリハーサルで30分と聞いたときは、マジで焦りました。
  • そして「まあリモートだし、始業前とかにも時間あるから、そこで進めるか」と思った時に限って、前日は3週間に一度の出社日というタイミングの悪さ...
  • 発表内容&このブログでも、AWS Toolkitがちょっと辛口だったかな?
  • でも個人的にはAWS Toolkitには期待しているし、実際クラウドの中ではAWSが一番好きなので、期待を込めてという意味で

お知らせ

12月にQiitaさんで行われる「Advent Calendar 2020」において、2記事を担当することになりました。
担当するテーマは、サーバーレスAWS です。

ちなみに、下記のタイトルで記事を書こうかな、と健闘中です。(確定ではない)

  • サーバーレス:Serverless Frameworkを始めよう または Serverless Frameworkでクロススタック参照を行う
  • AWSaws-sdk-mockでAWSのテストを行う

おわりに

ていうか、体調も戻ってきたし、そろそろブログも本格的に再開したいです。
Serverless Frameworkもいろいろ機能やプラグインが追加されましたし、いろいろ触って、いろいろ記事にしたいですね。本当に。
プラグインも自作したいですし。

それにAWSを始め、いろいろ技術が出てきたので、こんな時代でも仕事が絶えないように、時間の許す限りスキルアップしていきたいなと思ってます。

それではまた。