本セッションの登壇者
セッション動画
私のセッションは、「サーバーレスWebアプリ開発運用で役立ったVS Code拡張機能」ということでお話しさせていただきます。よろしくお願いします。
今日のアジェンダはこんな感じになっております。ここに書いてあるようなVS Code拡張機能を紹介したいと思います。
簡単に自己紹介ですが、私は鈴木正樹といいまして、愛知県に住んでおります。2022年8月までフリーでしたが、9月からDeNAに入ってサーバ運用監視やクラウド、主にAWSに関する事業のバックエンドを担当しております。技術なんですが、主にAWSのバックエンド全般とインフラを中心にやっております。言語としては、好きなのはTypeScriptとかJavaScript、Node.jsがメインです。いちおうSNSもやっておりますのでよろしくお願いします。
今回の発表なんですが、あくまで個人の見解になりまして、所属企業とかそういうものはいっさい関係ないです。私が今の所属の前に業務で使用した経験などをもとに記載しております。またこの資料ですが、Speaker Deckで公開していますので、よろしければご参照いただければと思います。
Rest Client でWeb APIリクエストをVS Codeから送信
最初に紹介するのはRest Clientになります。Rest ClientはVS CodeからWeb APIのリクエスト送信が可能なVS Codeの拡張機能になります。ちなみにRestとありますが、GraphQL APIのリクエスト送信も可能になります。
特徴としては、準備/操作が簡単で、リクエスト定義はurlやheaderをテキストベースで書くだけになります。POSTの場合は、Bodyの内容をJSONで書きます。あとはCtrl(Macだとコマンド) + Alt + Rでリクエストを送信できて、右側にレスポンスが表示される形になります。
あと、Rest Clientではないんですが、たとえばPostman風にリクエスト内容をGUI設定したいという方もいらっしゃると思うので、そういう場合はThunder Clientというのがけっこう評判がいいみたいです。ただこれは自分は使ったことがないので、もし興味があれば調べていただければと思います。Rest ClientのURLは一番下に書いてあるマーケットプレイスのURLを参照してください。
実際の仕様はこんな感じです。左側にheaderやurlがあって、POSTの場合には下にJSONみたいな形でBodyを書いてリクエストを送ると、右のようにレスポンスが表示されるといった、非常に簡単にAPIのリクエストが可能となる拡張機能になっています。
ブランチの状態を樹形図で表すGit Graph、情報表示のGitLens
次はGit関係でGit GraphとGitLensという2つの拡張機能を紹介したいと思います。
まずGit Graphですが、これはブランチを切ったりマージしたりといったGitリポジトリ内のブランチの状態を樹形図グラフで表示できる拡張機能になります。checkout、merge、commitなどです。樹形図グラフからもブランチの操作、checkoutやcherry pick、タグの追加などが可能なので、リポジトリの状況を確認するのに便利です。これはBacklog Gitなどでもあるもので、それがVS Codeで見られるものになります。
次にGitLensですが、これはVS CodeでのGitユーティリティツールとしていろいろなことができるもので、たとえば各種ビューで変更履歴、コミット、ブランチなどをサイドバーで一覧表示できたり、あとはファイル上やソースコード上で変更履歴、更新日だったり更新者だったり、コミットメッセージなんかをソースコード上で確認できたり、ブランチなどの各種比較単位でファイル比較をするといった機能も持っています。それ以外にもたくさん機能があるんですが、このスライドだけでは紹介しきれないので、詳細は以下のURLなどを参照してもらえればと思います。本当にたくさんのことができます。
ここで簡単なスクショを紹介しますが、左側がGitGraphですね。こんな感じでリポジトリの内容が樹形図で表示できて、右クリックすると下にあるAdd tagとかCheckout、Cherry Pickみたいな操作もできます。
右側がGitLensになります。GitGraphの右クリックメニューに隠れていますが、微妙に半円で見えてるのがGitLensのアイコンです。そのすぐ右にあるように、COMMITやFILE HISTORY、BRANCHなどを一覧で表示できたり、あと、SEARCH AND COMPAREというところでちょうどファイルの差分(diff)を取ったりしています(右側に表示)。あと、その上に重ねているちょっと下のウィンドウで、たとえばファイルについてソースコード上で誰が変えたとか、そのときのコミットメッセージ、変更した日時などを確認できるので、自分で使っていてわりと痒いところに手が届いて便利だなと感じています。
Draw.ioの機能をVS Code上で扱えるDraw.io Integration
早くも今回紹介するものの最後になりますが、Draw.io Integration(+ cfn-diagram)です。Draw.ioはフロー図やアーキテクチャ図を記載するのによく利用されるツールです。処理やデータの流れ、各オブジェクトリソース間の依存関係などを表すときに利用されるツールで、Draw.io IntegrationはこのDraw.ioの機能をそのままVS Code上で扱える拡張機能です。もちろん作成したフロー図やアーキテクチャ図をそのまま画像ファイルで出力するなんてこともできます。
cfn-diagramとはVS Codeの拡張機能じゃなくてnpmモジュールなんですが、これと組み合わせることで何が便利かというと、IaaC(Infrastructure as a Code)べースでデプロイができるCloudFormationのテンプレートのリソースファイルの依存関係をVS Codeだけでプレビューできるようになるんです。これはかなり便利でした。
自分が開発していた当時はまだCloudFormationでプレビュー機能がなかったり(今はあるんですけど)、個人的にはCloudFormationのプレビューはちょっと微妙に使いにくい感じもあったので、今でもこれはけっこう役に立ってます。昨年末の「AWS re:Invent 2022」で紹介されたAWS Application Composerにも似たようなプレビュー機能があるんですが、今のCloudFormationのプレビューよりだいぶ使いやすそうな感じだったので、使い勝手次第ではひょっとしたらお役御免になる可能性もなきにしもあらず…が自分の感想です。ただし、今はプレビュー版になっています。URLは以下になります。
スクリーンショットはこんな感じです。本当にDraw.ioがそのままVS Codeで見られるという拡張機能になっております。
あとは、時間の関係で今回紹介できなかったんですが、その他の拡張機能一覧としてこういった便利な拡張機能もあるので、興味があれば一度調べていただけるといいかなと思っております。
最後にちょっと告知をさせてください。3月19日に京都リサーチパークで行われるJapan Perl Association主催の「YAPC::Kyoto 2023」というイベントで登壇させていただくことになりました。EC2でのアプリ運用における、ログによるアプリ監視についてお話しする予定です。主にCloudWatchやCloudWatchエージェントについて話します。昨年のAWS re:Invent 2022で発表されたCloudWatch Metrics Streamsのクロスアカウント対応にも触れられたらなと思っております。ここまで聞いてわかるとおり、いっさいPerlのことは話しません。どちらかというとAWSのことばかりになると思いますが、もしご興味があればぜひ一度お聞きいただけると嬉しいな…なんて思っております。
というわけで、ちょっと急ぎ足になっちゃいましたけど私の発表は以上になります。ご清聴ありがとうございました。
