はじめに

この記事には、VSCodeの「Live Server」と「Live Share」という拡張機能を併用すると便利だよっていう話が書かれています。

簡単に言えば、Live Shareのサーバー共有機能を使ってLive Serverで建てたサーバーを共有すれば、HTML（等のブラウザで解釈できるもの）が表示できるってことです。

この時点で何ができるか大体わかった人、この話に魅力を感じなかった人は、ここでブラウザバックすることを推奨します。

環境

MacOS Sonoma 14.1
VSCode 1.87.1
Live Server 5.7.9
Live Share 1.0.5918
- ホスト：手元のVSCode
- ゲスト：Chromeで招待リンクを開いたもの

やりたかったこと

Live ShareでHTML, CSS, JSを共有して編集しようとしていたのですが、HTMLを表示する方法がなくて動作確認ができないということに気づきました。

ホスト側はもちろんできるのですが、ゲスト側ができなかったんですよね...

Live Shareとは

一言でまとめると、手軽に複数人でコードを読んだり書いたりできる拡張機能です。

これが非常に便利で、ボタンひとつ押すだけで準備が完了し、参加する側もリンクを開くだけという手軽な設計です。

また、以下の機能も兼ね備えています。

共有したファイルはreadonlyにすることもできる
コールできる
サーバーを共有できる
ターミナルを共有できる

こちらの記事で詳しく解説されています。

サーバー共有機能とは

簡単に言うと、ホストが建てた開発用のサーバーをゲストに共有できる機能です。

例えば、なんらかの手段でホストである自分がlocalhost:3000に開発用のサーバーを建てたとします。
自分（ホスト）がここにアクセスすると、制作途中のWebサイトが表示されます。
そして自分は今、ゲストとして参加しているメンバーもlocalhost:3000の内容が見れるようにしたいと思っています。

そしたらまずは、サイドバーのLive Shareアイコン > Shared Servers > Share Server を押します。

そして、共有したいポート番号を入れます。

そのあとはサーバーの名前（Live Shareのサイドバーに表示される）を聞かれますが、ここはデフォルトのままで大丈夫です。

これだけでサーバーの共有が完了しました。

ゲスト側は、サイドバーから共有されたサーバーにアクセスできます。
以下の画像ならlocalhost:3000と書かれたところを押します。

たったこれだけです。便利ですね。

どうやってサーバーを建てようか

さて、ここで問題なのが、どうやってサーバーを建てるかです。

開発にNext.jsあたりを使っている場合は、そこに備わっている開発サーバーを建てる機能を使えばいいです。
バックエンドの開発である場合も、大体の場合開発用のサーバーは簡単に建てられると思います。

では、ただのHTMLの場合は？
サーバー側の処理を一切必要としない、生のHTMLとCSSとJavaScriptの場合は？

方法を考えてみる

これについて方法をいくつか考えていきます。

結論を言ってしまうと、Live Server以外の方法を考えた結果いいのが思いつかなかったってだけです。
興味ない方は Live Serverを使ってみるまで飛ばしてください。

そもそもサーバーいる？

サーバーが云々って散々言ってきたのにも関わらず、ここで根底を覆すようなことを言い始めました。
というのも、別にHTMLをブラウザで開くのにサーバーっていらないですからね...

じゃあゲスト側はどうやってHTMLを開けばいいのでしょうか。
...残念ながら、私にはいい方法が思い浮かびませんでした。

ちなみに、VSCodeサイドバーのエクスプローラーにあるHTMLファイルをブラウザにドラッグすると、そのHTMLファイルが開けます。

これで開けるんじゃないかと試してみたのですが、結果は真っ黒なHTMLが表示されただけでした。

HTML Previewを使う

VSCodeの拡張機能であるHTML Previewを使う方法です。

HTML Previewとは、VSCode上でHTMLを表示してくれる拡張機能です。
自動リロードが入っている上、CSSやJavaScriptも反映してくれます。
また、この拡張機能であればサーバーは不要です。

やり方はこんな感じです。

ゲストにHTML Previewを入れてもらう
HTMLが入っているフォルダでLive Shareする
VSCodeでHTMLを開き、⌘K + Vを押してプレビューしてもらう

かなり手軽ですが、ゲスト側にHTML Previewを入れてもらう必要があります。
また、私の環境だと、ゲストのみプレビュー時にCSSとJavaScriptが反映されませんでした。

頑張ってサーバーを建てる

泥臭いですが、自分で頑張ってサーバーを建てる方法もあります。
以下はNode.jsでサーバーを建てる例です。（実行してないので雰囲気で読んで下さい）

Node.jsでサーバーを建てる

const http = require('node:http');
const fs = require('node:fs');
const server = http.createServer((req, res) => {
  const html = fs.readFileSync('public/index.html', 'UTF-8');
  res.end(html);
});
server.listen(3000, () => {});

このコードをnode index.jsで実行すると、多分localhost:3000にサーバーが立ち上がります。
そして多分public/index.htmlの内容が表示されると思います。

ただ、この方法をやるためにはNode.jsが必要です。
あと複雑なことをやろうと思ったらhttpモジュールの知識が必要です。

そして何より、ここでやりたいことにサーバー側の処理は不要です。
そのためこの方法はあまり得策とは言えません。

Live Serverを使う

上にはいろいろ書きましたが、実は私が一番最初に思い浮かんだ方法はLive Serverを使う方法でした。

この拡張機能は、簡単に言うとライブリロードを備えたサーバーを手軽に建てられるものです。

これを使ってHTMLを開くと、VSCodeでファイルを保存したタイミングで、ブラウザのHTMLも自動的に更新されます。
便利ですね。

使ってみる

この拡張機能を使うと、ボタンを押すだけでサーバーが建てられます。
VSCodeでHTMLを表示した状態で右下にある「Go Live」を押すと、これだけでサーバーが立ち上がり、ブラウザでHTMLが開かれます。

デフォルトだと5500番のポートに立ち上がると思います。
手軽ですね。

Live Shareと併用する

Live Serverで建てたサーバーを、Live Shareのサーバー共有機能で共有します。
こうすることで、ゲストがHTMLを表示することができるようになるはずです。

また、この方法の利点として、ライブリロード機能があるためHTMLの内容を自動で反映してくれることが挙げられます。

ということで、さっそく併用していきます。

Live Shareする

まずはLive Shareを使って共同編集の準備をします。
サイドバーのLive Shareアイコンから「Read / Write」という方を押すと、ゲストが編集可能なセッションが始まります。

長くなりそうなため、詳細な解説は省きます。

Live Serverでサーバーを建てる

次は、Live Serverでサーバーを建てます。
VSCodeでHTMLを開き、右下の「Go Live」を押します。

ブラウザが立ち上がり、HTMLが表示できたら成功です。

Live Shareでサーバーを共有する

そしたらサーバーを共有していきます。
サイドバーから「Share Server」を押してください。

ポートを入力するボックスが出てくるので、5500と入力するか、アドレスバーからURLをコピーして貼り付けます。
_{撮り直すのが面倒だったため、画像では3000になっています。すみません。}

するとサーバーの名前を入力するボックスが出てきますが、ここはデフォルトで大丈夫だと思います。

これでサーバーが共有できました。

ゲストに開いてもらう

ここまで来たら、あとはゲストにサーバーにアクセスしてもらうだけです。
Shared Serversにあるlocalhost:5500（先ほどの名前）を押します。

無事にHTMLが開けたら成功です。
どちらも手軽に使えるので、サーバーを共有するのにそんなに時間はかからない（慣れれば十数秒程度？）と思います。

【VSCode】Live ShareとLive Serverで手軽に共同作業する