本記事は、Visual Studio Code Advent Calendar 2021 11日目の記事です。
Dreamweaver（以下、Dw） から VisualStudioCode（以下、VSCode） に乗り換えて、早2年以上。
乗り換え当初は分からないことだらけで苦労しましたが、今ではすっかり VSCode が手放せなくなりました。
Dwといえば、今年の春に「Dw が Creative Cloud のデスクトップアプリケーションに表示できない」という話題が上がったりしましたね（現在は表示されているみたいです）。10月には他のAdobe系アプリと同時に更新は来ましたが、特に新しい機能が追加されているわけでもなく、積極的に開発されているとはいえない状況にあります。
こういった背景もあり、「まだ Dw を使い続けていてもいいのかな？」「VSCode へ移行したいけど踏ん切りがつかない」という方は増えてきているのではないでしょうか？
そんなわけで、元 Dw ユーザーからみた VSCode へ移行するメリットを、2年前の記事 執筆時点ではあまりよく分かっていなかった機能面についても触れながら改めて紹介します。
移行のメリット
起動が早く、動作が軽い
2年前は起動速度にあまり大きな差を感じていませんでしたが、最近顕著になってきました。
また、カーソルを移動したときのレスポンスなどは圧倒的に VSCode の方が早いです。体感ですが、 Dw で1箇所テキスト修正している間に、VSCode だったら同じ修正を3箇所ぐらい進められると思います。
マルチカーソル機能が強力
2年前の記事でも書きましたが、Dw のマルチカーソル機能は日本語入力モードに対応していないほか、コピペもできません。マルチカーソルの状態でうっかり日本語入力モードで入力しようものなら、即座にシングルカーソルに切り替わってしまいます。
対する VSCode は日本語でもマルチカーソルが動作しますし、コピペにも対応しています。
ターミナルが使える
VSCode では、いつでもすぐに、デフォルトで開いているディレクトリに移動した状態でコマンドが打てます。
cd コマンドで目的のディレクトリまで移動する手間がありません。
エディタの分割表示が優秀
Dw の分割表示は、あくまで1つのファイルを左右または上下に分割表示するものでした。
もともと Dw のエディタは、開いているファイル本体と読み込んでいる関連ファイルの行き来はできるものの、読み込んでいないファイル（例えばSCSSファイルなど）は見れません。そのため、「HTMLの構造を見ながらCSSを編集する」ことはできても、「HTMLの構造を見ながらSCSSを編集してコンパイルする」ということができません。
VSCode の場合、この「HTMLの構造を見ながらSCSSを編集してコンパイルする」ということが可能です。代わりに Dw のような関連ファイルの行き来はできません。
どちらを取るか……という感じですが、ほぼ生のCSSを書くことが無くなった今、個人的には VSCode の方が圧倒的に作業効率が上がって助かります。また、VSCode なら3つ以上に分割したり、グリッド表示なんかもできて、自分好みの配置で作業ができるのもポイントが高いです。
多重起動が可能
作業中に突然別のサイトの修正作業が発生することってありますよね。しかも「今エディタ閉じたらまた開き直すのが大変」みたいなときに限って……。
VSCode は「新しいウィンドウ」から、別のファイルやワークスペースを同時に開くことができます。
ワークスペースの切り替えすら面倒なときでも安心ですね。
拡張機能によるカスタマイズが可能
これも2年前の記事でも書きましたが、Dw にもアドオンは入れられます。ただ、情報の多さや更新頻度、多様な機能という点では VSCode の方が遥かに上です。
ワークスペース機能が超親切
Dw では「サイト管理」で特定のフォルダを「サイト」として定義していたかと思います。VSCode における同等の機能、および概念が「ワークスペース」です。
一見すると地味でサイト管理と遜色ない機能ですが、その真価はワークスペースの切替とカスタマイズ性にあります。
Dw でサイトを切り替えたとき、何らかのファイルを開いていていると、ファイル一覧は切り替わるものの、直前まで開いていたファイルが残ったままになります。
VSCode の場合、何らかのファイルを開いた状態でワークスペースを切り替えても、切り替え後にファイルの表示が残ることはありません。その名の通り「作業空間」が切り替わるので、再度元のワークスペースに切り替えると、先ほどと同じファイルが開かれた状態になります。
これにより、五月雨式に複数のサイトや案件の修正が飛んできても、テンポよく作業の反復横跳びができます。
また、「フォルダーをワークスペースに追加」することで、下階層のファイル一覧を一発で呼び出せるようにできるのも大きな魅力です。
奥深くの階層のファイルに到達するまでポチポチフォルダを開く手間が省けますし、見通しも良くなります。
移行で解決しないこと
ここまで書いた通り、VSCode へ移行することで作業効率は各段に上がります。また Dw に備わっている機能の多くは、拡張機能を入れることによって解決しますし、逆に Dw でできなかったことが可能になります。
とはいえ、それも万能ではありません。
ここでは、Dw の機能の中でも、VSCode の拡張機能では代替できない機能の例を挙げます。
クリッカブルマップの作成
Dw では、ビジュアルエディタに切り替えた状態でクリッカブルマップを作れるという便利な機能があります。令和の時代にクリッカブルマップを使うシーンがあるかといえば疑問ですが
ただ、エディタ内で作業を完結することにこだわらなければ、ジェネレーターサイトを利用することで解決します。
クリッカブルマップのためだけに Dw を使っている、または残しているのであれば、さっさと移行しちゃいましょう。
テンプレート機能
私が Dw を完全にアンインストールできない理由がコレです。
何十ページもある静的なサイトを制作・管理するときは、やはり Dw のテンプレート機能に頼らざるを得ません。
もし効果的な代替手段をご存知の方がいましたら、是非コメントなどで教えていただきたく存じます……。
はじめよう、VisualStudioCode
総合的に見て、Dw のテンプレート機能を使わないのであれば、VSCode に移行してもほとんど影響はありません。
初期設定が手間取ったり、ショートカットの違いなどに戸惑うなどするかもしれませんが、それを乗り越えた先には圧倒的な作業効率と自由があります。まずはサブで使うエディタとして VSCode をはじめてはいかがでしょうか？
もし Dw から VSCode へ移行するにあたって分からないことや不安なことがあったら、コメントやTwitterでリプライください。
私自身まだまだ VSCode 歴が浅いビギナーですが、微力ながらお手伝いいたします！