2022/02/01(水) 19:30~20:30に開催された「TechFeed Experts Night#12 エンジニア向けエディタ最新動向!」における、私のセッション「サーバーレスWebアプリ開発&運用で役立ったVS Code拡張機能」の発表資料です。
https://techfeed.io/events/techfeed-experts-night-12
#techfeed #techfeed_experts_night
サーバーレスWebアプリ開発&運用で役立ったVSCode拡張機能Masaki Suzuki2023/02/01TechFeed Experts Night #12
View Slide
アジェンダ1. 自己紹介&注意事項2. Rest Client3. Git Graph/GitLens4. Draw.io Integration(+cfn-diagram)5. その他拡張機能一覧6. 告知2
自己紹介◼ 名前:鈴木 正樹(Masaki Suzuki)◼ 在住:愛知県◼ 職業:フリーランスエンジニア(2022/08まで)株式会社DeNA(2022/09から)◼ 業務:サーバー運用・監視、およびクラウド(主にAWS)バックエンド◼ 技術:• AWS(特にLambda, DynamoDB, S3, CloudWatch, SNS, SQS, Chatbot), その他サーバーレスバックエンド全般• Infrastructure as Code(Serverless Framework, AWS CDK, Terraform), CI/CD(GitHub Actions) etc.• TypeScript, JavaScript(Node.js), Jest, bash, Perl(少し)◼ SNS:• @makky12 (SUZUKI Masaki@クラウドエンジニア)• https://github.com/smt7174/• http://makky12.hatenablog.com/3
注意事項◼ 今回の発表資料・発言内容は、個人の見解になります• 私が過去に業務で使用した経験をもとに記載しています• 所属企業、及びその方針・見解などとは一切無関係です4
Rest Client
Rest Client◼ VS CodeからWeb APIのリクエスト送信が可能• 名前に「Rest」とあるが、GraphQL APIも実行可能◼ 準備・操作が簡単• リクエスト定義(url, headerなど)をテキストベースで書くだけ• POSTなどの場合、BodyをJSONで定義• あとはCtrl+Alt+Rでリクエスト送信すれば、レスポンスが表示される◼ Postman風にGUIで設定したい場合は「Thunder Client」が良いみたい• https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client◼ URL:https://marketplace.visualstudio.com/items?itemName=humao.rest-client6
スクリーンショット(Rest Client)7
Git Graph/GitLens
Git Graph/GitLens◼ Git Graph:リポジトリ内のブランチの状態を樹形図グラフで表示• checkout, merge, commitなど• 樹形図グラフからもブランチの操作が可能(checkout, cherry pick, add tagなど)• リポジトリの状況を確認するのに便利◼ GitLens:VS CodeでのGitユーティリティツール• 各種ビューの一覧表示(変更履歴、コミット、ブランチ… etc)• ファイル上で変更履歴(更新日/更新者/コミットメッセージなど)を確認できる• ブランチなど、各種単位でのファイル比較(diff)が可能• その他にも数多くの機能(詳細は公式ページを参照)◼ URLは以下• https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph• https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens9
スクリーンショット(Git Graph&GitLens)10
Draw.io Integration(+cfn-diagram)
Draw.io Integration(+cfn-diagram)◼ Draw.ioをVS Codeで扱える拡張機能• Draw.ioはよくフロー図やアーキテクチャ図を記載するのに利用される• (例) 処理・データの流れ、各オブジェクト・リソース間の依存関係など• Draw.io Integrationは、Draw.ioをVS Code上で扱うことができる拡張機能• 作成したフロー図やアーキテクチャ図を画像で出力できる(*.png, *.jpg, *.svgなど)◼ cfn-diagram(npmモジュール)と組み合わせて、CloudFormationテンプレートのリソース&依存関係をプレビュー可能• CloudFormation(以下「Cfn」)テンプレートのプレビューがVS Codeだけで可能に• 当時はCfnプレビュー機能がなかった。(今はあるけど、個人的にはイマイチな感じ…)• AWS Application Composerの使い勝手次第で、お役御免になるかも…(現在はプレビュー版)◼ URLは以下• https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio12
スクリーンショット(Draw.io Integration)13
その他拡張機能一覧
その他拡張機能一覧15名前 機能 用途Live Share 複数ユーザー間で同一のソースを編集したり、チャットでやり取りしたりできる・ペアプロ・モブプロなど・Web MTGツール(Google Meet, Zoomなど)の画面共有だと見づらい…という場合Remote SSH VS Code上で(コマンド入力せずに)リモートホストに接続したり、リモートホストのファイルをそのままVS Codeで編集できる・リモートの(仮想)サーバー・コンテナに開発環境がある場合の接続に(=接続後、そのままVS Codeで開発できる)・リモートの有用環境(ホスト・コンテナ)の運用管理に(設定ファイルなどをVS Codeで編集したい…など)Setting Sync 複数PC間でVS Code拡張機能・設定の同期を取れる※「設定同期」はVS Codeが公式でサポートしたので、出番は減ってくるかも…・複数PCを所持している場合の環境設定&環境統一・チームで環境統一する&環境構築の簡略化
告知
YAPC::Kyoto 2023で登壇します◼ Japan Perl Association主催のYAPC::Kyoto 2023で登壇します• 日時・場所:3/19(日) 京都リサーチパーク◼ EC2でのアプリ運用における、ログによるアプリ監視についてお話しします• 主にCloudWatchやCloudWatchエージェントについて話します• CloudWatch Metrics Streamsについても少し話すかも(クロスアカウント対応)◼ 公式HP: https://yapcjapan.org/2023kyoto/17
ご清聴ありがとうございました以上です