プログラミング

Webアプリ開発に役立つVSCodeの拡張機能3選

Webアプリ開発に役立つVSCodeの拡張機能

こんにちは。Visual Studio Code(以下 VSCode)ヘビーユーザーの”はやぶさ”@Cpp_Learningです。仕事でもプライベートでもVSCodeを愛用しています。

本記事ではWebアプリ開発に役立つVSCodeの拡張機能を紹介します。

Live Preview

VSCode上からlocalhost(ローカルホスト)にサーバを立て、HTMLファイルをリアルタイムでプレビューする拡張機能

Webアプリ開発に役立つVSCodeの拡張機能

使い方や特徴については、公式サイトが丁寧に解説しています。

Browser Preview

HTMLファイルが存在しない場合、 Live Preview は使えません。VSCodeからWebアプリやWebサイトを開きたいときは、Browser Preview が大活躍します。

下図のように画面左側にある Browser Preview のアイコンをクリックし、アドレスバーに任意のアドレス(例えば、localhost:8080https://www.youtube.com/ など)を入力すれば、VSCodeから開けます。

Webアプリ開発に役立つVSCodeの拡張機能

あるいは「適当なファイルを選択」⇒「右クリック」⇒「Open in Browser Preview をクリック」でもOKです。

Webアプリ開発に役立つVSCodeの拡張機能

公式サイトに以下の文言があるため、いつかインストールできなくなる恐れがあります(便利だから廃止しないでほしい)

Deprecation Notice

This extension has been deprecated in favor of the Live Preview extension.

引用元:vscode-browser-preview|GitHub

スポンサーリンク

REST Client

REST APIを開発する際、ターミナルからcurlコマンドでHTTPリクエストを投げてレスポンスを確認する機会が多いと思います。

REST Client を使えば、VSCode上からHTTPリクエストを投げて、VSCode上でレスポンスを確認できます。使い方については、公式サイトや以下の記事が参考になります。

実践!VSCodeからHTTPリクエストを投げる

以下の記事でFessサーバーにHTTPリクエストを投げて全文検索結果のレスポンスを受けとる「全文検索アプリ」を作りました。

Streamlitで全文検索アプリをつくる
Pythonで全文検索アプリをつくる -StreamlitとFessを活用-全文検索サーバーのFessとPythonライブラリのStreamlitを活用した「全文検索アプリ(Webアプリ)」の作り方を解説した記事です。...

「Fessの検索API」の動作確認で REST Client を使ったので、そのとき書いた test.http を公開します。

先ほど紹介したQiita記事には説明がありませんでしたが、「マウスカーソルを任意のコマンド上に移動」⇒「右クリック」⇒「Send Request」でHTTPリクエストを送信できます。このやり方が一番簡単だと思います。

Webアプリ開発に役立つVSCodeの拡張機能

例えば GET http://localhost:8080//json/?type=ping を送信したときのレスポンスは以下の通りでした。

レスポンス(JSON)を見る

【おまけ】CURLとは

くるる
くるる
そもそもcurlって何?どんなことができるの?

という人やフクロウは以下の記事が参考になりますよ。

まとめ

Webアプリ開発に役立つVSCodeの拡張機能3選を紹介しました。最後に改めて、おすすめの拡張機能3選を列挙しておきます。

VSCodeのおすすめ拡張機能3選

VSCodeは優れたエディタですが、拡張機能を活用することで更に便利になります。

はやぶさ
はやぶさ
好きな拡張機能をインストールして、仕事効率を向上させましょう

Webアプリ開発に限らず、全ての人に教えたい拡張機能については、以下の記事で紹介していますので、参考にしてください。

Visual Studio Code の 拡張機能
【仕事効率化】全ての人に教えたい!Visual Studio Code の 拡張機能5選!こんにちは。 Visual Studio Codeヘビーユーザーの”はやぶさ”@Cpp_Learningです。 仕事でもプラ...
Amazonギフト券チャージで最大2.5%ポイント還元
Amazonはチャージがお得

Amazonプライム会員なら、Amazonギフト券を現金でチャージ(コンビニ・銀行払い)すると最大2.5%ポイント還元!

クレジットカード払いでもキャンペーンエントリー0.5%ポイント還元中です。

Amazonでお得に買い物をするならまずはチャージから。

\チャージがお得/

詳細をチェックする

Amazonプライム無料体験中でもOK!

PICK UP BOOKS

  • 数理モデル入門
    数理モデル
  • Jetoson Nano 超入門
    Jetoson Nano
  • 図解速習DEEP LEARNING
    DEEP LEARNING
  • Pythonによる因果分析
    Python