Zenn
👻

Settings SyncとCodespacesで体験する新世代へのパラダイムシフト

2021/09/17に公開
Docker
GitHub
VS Code
tech

はじめに

本稿は「Software Design 2021年6月号」に掲載いただいたVisual Studio拡張機能特集のSettings Syncの記事を、許可を受けたうえで内容を修正したものです。

Visual Studio Codeは、柔軟に拡張やカスタマイズすることが可能で、自分だけの最高の環境を実現できます。しかし長い間使い込んで構築した最高の環境を、別の環境に再現することは中々に骨の折れる作業です。

そこで活躍するのが設定のクラウド同期機能「Settings Sync」です。Settings Syncを利用することで、同じ設定を複数の環境で同期できます。普段自分の利用しているPCはもちろん、GitHub Codespaces上のVisual Studio Codeにも適用されます。

GitHub Codespaces（以後Codespaces）とは、GitHub上のリポジトリを直接ブラウザから開いて利用できる開発環境です。CodespacesのIDEにはVisual Studio Codeが採用されています。はじめて利用する（もしくはちょっと覗きたい）リポジトリを、ローカルにクローンすることなく、ダイレクトに「いつも自分が利用しているVisual Studio Code」でひらけます。将来、「開発のための高性能なPCなんて必要はなく、手元にはブラウザとディスプレイ・マウス・キーボードだけあれば良い時代が来るかもしれない」と想像させられ、わたしは非常に強い衝撃を受けました。

そこで本章ではつぎの2つを紹介します。

  1. Settings Syncの使い方
  2. Settings SyncとCodespacesによるクラウド開発

環境

本章は以下の環境で執筆しています。

  • Windows 10 20H2
  • macOS Big Sur 11.2.3
  • Visual Studio Code 1.60.0

またGitHubアカウントを事前に準備されていることを前提とします。

Settings Syncの使い方

Settings Syncでは、つぎを同期できます。

  1. 設定
  2. キーボードショートカット
  3. ユーザースニペット
  4. 拡張機能
  5. UIの状態（表示言語、アクティビティバー、パネル、画面レイアウト、コマンド履歴、同一通知の抑止など）

Settings Syncの利用には、GitHubかMicrosoftのアカウントが必要です。今回はCodespacesを利用することからGitHubアカウントを利用しますが、Microsoftアカウントであっても機能的な差異はありません。

Settings Syncの有効化

ではVisual Studio Codeを開き、左下の歯車アイコンを選択してください。開かれたメニューの「同期の設定をONにする...」を選択します。すると「設定の同期」ダイアログが開かれます。開かれたダイアログから、設定したい項目をチェックします。通常はすべての項目をチェックしておいてよいでしょう。

つづけて「サインインしてオンにする」を選択します。ここでは「GitHubでサインイン」を選択します。するとブラウザでGitHubのサイトが開かれます。

GitHubアカウントを指定するとブラウザが開き、Visual Studio Codeを認可してよいか尋ねられるので、問題なければContinueを選択しましょう。すると認可したことを伝えるため、ブラウザがVisual Studio Codeを開いて良いか尋ねてきますので、「開く」を選択します。

しばらくするとVisual Studio Codeの右下に、同期の開始が通知され同期設定は完了です。以後は設定が変更されるつど自動的に同期されます。

設定のマージまたは置換

ここまではWindowsで設定してきましたが、実際に別の端末で設定が同期されるかどうか、確認してみましょう。

ここからはMacを利用します。Settings Syncを有効にする手順は変わりません。

新しく設定を有効にしようとした場合、設定に相違がある場合はつぎのようなダイアログが表示されます。

それぞれ、つぎのようにふるまいます。

  • マージ：ローカルの設定とクラウドの設定が自動的にマージします
  • ローカルを置換：クラウドの設定でローカルの設定が置き換えます
  • 手動でマージする...：マージビューが表示され、手動でマージします

ここでは「ローカルを置換」を選択しました。実際に同期したものが以下のとおりです。

左側がWindows、右側がMacです。同じ拡張がインストールされ、同期されていることが見て取れます。なお言語設定など、一部の拡張はVisual Studio Codeの再起動が必要になります。

同期データの設定

Settings Syncでは設定や拡張機能を同期の可否を個別に制御できます。同期の制御はsettings.jsonを編集します。

Visual Studio Codeの左下の歯車「管理」から「設定の同期がオン」を選択し、「設定の同期：設定を表示する」を選択してください。

設定の除外設定を編集してみましょう。「Settings Sync：Ignored Settings」の下の「settings.jsonで編集」を選択してください。

するとsettings.jsonが開かれ、自動的にsettingsSync.ignoreSettingsセクションが追加されます。

編集時には除外する候補を表示してくれますので、除外が必要な候補を選択してください。

たとえばVisual Studio CodeにはGitのインストールパスを明示的に指定するオプションがありますが、インストールパスはプラットフォームごとに異なるはずです。そういった設定値を同期から除外するときに、この機能を利用します。

拡張機能の制御も同様に編集できます。

競合の解消

複数の端末で同期していると、まれに競合することがあります。たとえばノートパソコンでオフラインの時に設定を変更した場合などに競合することがあります。

競合が発生すると、ダイアログにつぎの選択肢が表示されます。

  • リモートを置換：ローカルの設定でクラウドの設定を置き換えます
  • ローカルを置換：クラウドの設定でローカルの設定を置き換えます
  • 競合の表示：マージビューが表示され、手動でマージ処理を行います

StableとInsiders

デフォルトでは、同期の設定はVisual Studio CodeのStable版とInsiders版で別々に同期されます。Insiders版はStableより新しいため、StableとInsidersで設定内容が非互換になる可能性があるからです。

Insiders版側はStable版に同期するように設定できます。逆はできません。ただし設定データが非互換になった場合、Stable版の同期が無効となります。Stable版がアップデートされて設定内容がInsidersに追いついたとき再度同期されます。

特別な理由がない限り、StableとInsidersで同期することは、オススメできません。

データの復元

何らかの理由により誤った状態で同期してしまった場合、設定や拡張機能を過去の任意の時点に復元できます。

左下の歯車「管理」から「設定の同期がオン」を選択し、「設定の同期：同期されたデータを表示する」を選択してください。

同期の履歴が表示され、任意の地点を選択することで変更内容が確認できます。また該当の履歴の右側の矢印から、その時点までデータを復元できます。

同期済み端末の管理

Visual Studio Codeでは同期設定されている端末を管理できます。

左下の歯車「管理」から「設定の同期がオン」を選択し、「設定の同期：同期されたデータを表示する」を選択してください。左下に端末の一覧が表示されます。

デフォルトで付与された端末の名称は任意に変更できます。

また端末を選択し、別の端末の同期を無効にできます。

Settings SyncとCodespacesによるクラウド開発

さて、ここからはSettings SyncとCodespacesをつかったクラウド開発について触れていきます。

Codespacesとは、公式によると

Codespacesは、GitHubがホストし、Visual Studio Codeが提供するオンライン開発環境で、完全にクラウド上で開発を行うことができます。

だそうです。GitHub & Visual Studio Codeということで、みんな絶対大好きなやつですね。

GitHubにホストされたDockerコンテナー上で、開発環境とVisual Studio Codeが動作し、そこへはブラウザでアクセスします。クラウド上で動作するWeb IDEはほかにもありますが、Codespacesの素晴らしいところはエディターがVisual Studio Codeそのままという事です。

そしてここがポイントです。

ここまでSettings Syncを紹介してきました。そうです。「いつもつかっているVisual Studio Code」をクラウド上の開発環境で利用できるわけです。

ワクワクしませんか？私はしました。

この世界線の先に「ローカルにはブラウザだけあれば、いつでも、どこでも開発できる」世界が待っているかもと考えると、パラダイムシフトを感じませんか？

これは「いつものVisual Studio Code」だからであって、お仕着せの環境じゃありえない世界です。

2021年3月現在、まだベータなのでいまからバリバリ実用するという訳にもいきませんが、今でも魅力的なシーンはあります。

たとえばスポットでOSSに貢献したい。でも貢献するには自分の環境に入っていないものがあるとします。スポットで貢献するために自分の環境に手を入れたくないでしょうし、バージョン違いのものを普段利用していたりすると最悪です。

でも大丈夫。Codespacesならいますぐクラウド上の環境で、自分のVisual Studio Codeを使って開発を始められます。

たとえばPreview版の新しい環境を試してみたい。でも自分の環境に入れたくない。

でも大丈夫。Codespacesならいますぐクラウド上の環境で、自分のVisual Studio Codeを使って開発を始められます。

ワクワクしませんか？私はします。

というわけで、実際に試してみましょう。

本当はWebフロントエンドのチャレンジャブルな構成でお試しするのが良いのでしょうが、残念ながら私は.NETエンジニアということで、今回はASP.NETをまだPreviewな.NET 6で動かしてみたいと思います。

誰でもできるよう解説しますので、普段.NETに触れたことがない人もぜひお試しください。むしろ普段触れない人が、自分の環境を汚さず試してみるには良い題材だと思います。

Codespacesに申請する

さてCodespaces、まだベータなのでデフォルトでは利用できる状態になっていません。そのためまずは下記のURLから利用申請をしてください。

https://docs.github.com/ja/github/developing-online-with-codespaces/about-codespaces

すぐ返事は来ません。何日か待つ可能性がありますので、気長に待ちましょう。

また現在ベータのため無料ですが、ステーブルがリリースされた際には有償化される予定なので利用にはお気を付けください。

Hello, Codespaces!

早速試していきましょう。まず初めに .NET 5の環境で試します。これは .NET 6の環境は2021年3月現在、Codespacesの環境として用意されていないからです。後ほど.NET 6に環境を更新します。

ではお試しするためのリポジトリをGitHub上に作成します。今回は「HelloCodespaces」という名称で作成します。その際.gitignoreにVisual Studioを選択してください。

リポジトリができたら、トップページの「Code」から「Open with Codespaces」を選択します。そして開かれたダイアログから「＋New Codespaces」を選択してください。Dockerコンテナーが起動するまでしばらく待ちましょう。

しばらくするとブラウザでVisual Studio Codeが起動します。感動！

さて、この時点では自分の環境が同期されていないかもしれません。これはCodespacesではデフォルトでInsiders版が起動するからです。

前述したとおりSettings SyncはStableとInsidersで別に同期されます。というわけでまずはStableに変更しましょう。左下の歯車アイコンを選択し「Switch to Stable Version...」から切り替えます。

このときSettings Syncが設定の衝突を伝えてくると思います。ここでは基本的に「Replace Local」を選択して、ローカルの設定を普段の自分の設定に置き換えてください。

なお現時点では日本語化のような一部の設定は反映されません。

ではASP.NETのプロジェクトを作成して行きましょう。ターミナルからdotnetコマンドを実行します。

dotnet new webapp

そして一部設定を変更します。「Properties」フォルダーの下の「launchSettings.json」を開いてください。

HelloCodespacesの下の、applicationUrlの値から「https://localhost:5001;」を削除して保存してください。

    ...
    "HelloCodespaces": {
      "commandName": "Project",
      "dotnetRunMessages": "true",
      "launchBrowser": true,
      "applicationUrl": "http://localhost:5000",
      ...

つづいて「Pages」フォルダーの下の「index.cshtml」をを開いてください。

そしてWelcomeメッセージの後ろにスペースをあけて「@Environment.Version」を追記します。後ほど.NET 6の動作を確認するために、画面に実行バージョンを表示しましょう。

...
<div class="text-center">
    <h1 class="display-4">Welcome @Environment.Version</h1>

では実行しましょう！コンソールからつぎのコマンドを実行します。

dotnet run

しばらくまつと、右下につぎのようなに表示されるので「Open in Browser」を選択します。

するとインデックスページが開かれます。ちゃんとポートがフォーワードされWebアプリも実行されるのが素晴らしいですね。

.NET 6の適用

それでは.NET 6を適用しましょう。

の、まえにつぎのコマンドを実行して、導入されている.NETのバージョンを確認します。

dotnet --list-sdks

2021年3月現在、2.1、3.1、5.0がインストールされていることが確認できました。

ここから .NET 6へ移行します。

CodespacesはDockerコンテナー上で動作します。したがって動作環境をカスタマイズしたい場合、Dockerコンテナーをカスタマイズします。ベースとなるコンテナーは公式から公開されています。

https://github.com/microsoft/vscode-dev-containers

多種多様なコンテナーイメージが公開されています。.NETのイメージはつぎのアドレスにあります。

https://github.com/microsoft/vscode-dev-containers/tree/master/containers/dotnet

ここに公開されている.devcontainerフォルダーをリポジトリのトップに配置します。

そこでまずは、つぎのコマンドをCodespaces上にクローンして、.devcontainerをコピーした後、不要なファイルを削除します。

git clone https://github.com/microsoft/vscode-dev-containers.git
cp -r vscode-dev-containers/containers/dotnet/.devcontainer/ .
rm -rf vscode-dev-containers/

ではここで動作確認をします。つぎのコマンドを実行してリポジトリを更新してください。

git add .
git commit -m 'Add .devcontainer'
git push

リポジトリを更新したら右下「Codespaces」を選択し、「Codespaces: Rebuild Container」からコンテナーをリビルドしましょう。が再起動されたら「dotnet --list-sdks」コマンドを実行してください。今度は5.0しか含まれていないことから、動作環境の変更が確認できます。

.devcontainerフォルダーには、つぎの4つのファイルとフォルダーが含まれます。

  1. library-scripts
  2. base.Dockerfile
  3. devcontainer.json
  4. Dockerfile

library-scriptsディレクトリーには、構築に利用するスクリプトが含まれています。今回は詳細を割愛します。

base.Dockerfileについては後ほど説明します。

devcontainer.jsonはCodespacesを起動するさいの設定が記載されています。ファイルの先頭を見てください。

{
	"name": "C# (.NET)",
	"build": {
		"dockerfile": "Dockerfile",
		"args": {
			"VARIANT": "5.0",
      ...

dockerfileに、.devcontainerフォルダー下のDockerfileが指定されています。Codespacesは起動する際にここで指定されたコンテナーをビルドして利用します。その際にVARIANTという名前の引数で5.0という値を渡しています。

つづいてDockerfileです。これがCodespacesで実際に利用されるコンテナーの構築ファイルです。先頭につぎのように記載されています。

ARG VARIANT=3.1
FROM mcr.microsoft.com/vscode/devcontainers/dotnet:0-${VARIANT}

先頭の「ARG VARIANT～」は、VARIANT変数が指定されなかった場合のデフォルト値です。今回はdevcontainer.jsonで指定された5.0が利用されます。

そして2行目の「FROM ～」が、このコンテナーのベースイメージになります。イメージの末尾に${VARIANT}が指定されています。つまり「mcr.microsoft.com/vscode/devcontainers/dotnet:0-5.0」をベースに作成していることになります。

ではそのベースコンテナーはというと、base.Dockerfileで作成したイメージがコンテナーリポジトリーに公開されています。base.Dockerfileの先頭を覗いてみましょう。

ARG VARIANT="3.1"
FROM mcr.microsoft.com/dotnet/sdk:${VARIANT}-focal

「mcr.microsoft.com/dotnet/sdk」をベースに作成されているのが分かります。これはMicrosoftが公開している .NET SDK用イメージです。これには6.0-focalが存在します。

そこで「mcr.microsoft.com/dotnet/sdk:6.0-focal」からベースイメージを作成し、Dockerfileをかぶせると.NET 6で動作する環境がつくれるはずです。

整理しましょう。

  1. base.Dockerfileで.NET SDK用イメージからベースイメージを作成する
  2. 作成されたベースイメージはDocker Hub上に公開
  3. Codespacesは起動時にdevcontainer.jsonを読み込み、Dockerfileから開発環境を構築する
  4. Dockerfileでは、base.Dockerfileで作成されたイメージをベースとする

このためbase.Dockerfileで.NET 6用のベースイメージを作成し、コンテナーリポジトリに公開するのが理想的な手順となります。しかしはDocker Hubへの公開にはいくらかの手間がかかりますし、今回の趣旨から外れます。

そこで今回はDockerfileとbase.Dockerfileをマージしてしまい、.NET SDKのイメージから直接作成します。ただしこうするとCodespaces起動時のコンテナービルドに時間がかかってしまうため、本来は推奨できません。

では実際に.NET 6用の環境を作成していきましょう。まずはdevcontainer.jsonを開き、VARIANTを6.0に書き換えます。

"args": {
  "VARIANT": "6.0",

つづいてDockerfileを書き換えます。Dockerfileの先頭にbase.Dockerfileの内容をすべて挿入します。つぎのコマンドを実行しましょう。

cd .devcontainer
mv Dockerfile original.Dockerfile
cp base.Dockerfile Dockerfile
cat original.Dockerfile >> Dockerfile

Dockerfileをoriginal.Dockerfileにバックアップし、base.DockerfileをDockerfileにコピーします。そしてバックアップしたoriginal.DockerfileをDockerfileに追記します。

づついてDockerfileを開き、つぎの行を探して削除してください。

# [Choice] .NET version: 5.0, 3.1, 2.1
ARG VARIANT=3.1
FROM mcr.microsoft.com/vscode/devcontainers/dotnet:0-${VARIANT}

今回はbase.Dockerfileをマージしており、その先頭に.NET 6用のベースイメージが指定されているためです。

ではつぎのコマンドでリポジトリを更新し、先ほど同様「Rebuild Container」を実行してください。

git add .
git commit -m 'Update dotnet to 6.0'
git push

起動時にベースイメージから構築されるため少し時間がかかります。実際にはbase.Dockerfileと同じあたりでイメージを作成・公開しておき利用した方がよいでしょう。

Visual Studio Codeが起動したら「dotnet --list-sdks」を実行して.NET SDKのバージョンを確認してみてください。.NET 6だけがインストールされているのが確認できます。

では.NET 6を適用します。HelloCodespaces.csprojファイルを開き「TargetFramework」を「net6.0」に変更して保存してください。

<TargetFramework>net6.0</TargetFramework>

では「dotnet run」で実行しましょう。「Welcome 6.0.0」が表示されたら完成です。

ローカルのVisual Studio Codeから利用する

最後に、CodespacesへローカルのVisual Studio Codeから接続する方法を説明しましょう。

左上の「三」のようなドロワーを開き、「VS Codeで開く」を選択してください。初回はCodespaces用の拡張のインストールが求められますので指示にしたがってインストールしてください。拡張機能のインストール後に、再読み込みしたらそのまま利用できます。

さいごに

というわけでSettings SyncとGitHub Codespacesを紹介してきました。

Settings Syncは非常に便利ですので、いますぐ皆さん設定しましょう！ほとんどの場合、設定しない理由はないはずです。

そしてGitHub Codespaces。いますぐメイン環境にというものではありませんが、利用シーンによっては非常に便利です。将来のに夢を見つつ正式リリースを待ちましょう。

Discussion