コードエディタVS Codeを使うメリット（初心者向け）
VS Codeはあらゆる拡張子ファイルの編集に対応したコードエディタで、無料で利用できます。
様々なコード入力補助表示機能やエラー警告機能、一括検索・置換機能があり、円滑な開発行動が可能になっています。
フォルダ単位で最後に開いていたファイル群を記録しているので、いつでも複数ファイルを開いた状態にできます。
コードエディタ「VS Code」がおすすめ
HTMLソースを操作するテキストエディタには様々なツールがありますが、中でも「VS Code」が非常に便利です。
VS Codeは無料で利用できる大変機能性の高いコードエディタソフトです。
HTMLソースだけでなく、CSS・JavaScriptやphpなど様々な言語ファイルの編集操作ができます。
VS Codeの画面
本記事では初心者の方向けに、WEBサイト構築時のエディタとしてVS Codeを使った方が良い理由をいくつか紹介しましょう。
種類の違うファイル・フォルダを1つのウィンドウで管理できる
通常はWEBサイトに必要なファイルを開くため、様々なソフトを利用した状態になりますよね。
一番シンプルな静的サイトでも、大体以下のファイルは必ず開きます。
拡張子の違うファイルの集まり
・データが入ったフォルダ
・HTMLファイル
・CSSファイル
・JSファイル
上記以外にcgiやphpファイルなどがあれば、それらもデータフォルダの中に格納されているはずです。
それぞれの拡張子データを開く事に特化した専用ソフトもたくさんあります。
それぞれ違うソフトで開いた状態
複数のソフトで開く
・データフォルダ（Windowsエクスプローラー）
・htmlやJS、phpなどのソースファイル（秀丸・サクラエディタなど）
・CSSファイル（Brackets・Adobe Dreamweaver）
本来は、どの拡張子も共通のソフトで開けるのが理想でしょう。
しかしデータフォルダ自体とCSSファイルを同じソフトで開く事は難しいはずです。
これらの画面間を行ったり来たりしながら構築を進めていく訳ですが、このソフト画面を切り替える行動が一番面倒なのですね。
全種類をタブで開ける
それに対しVS Codeでは、全て1つのウィンドウの中に収める事ができます。
・一番左にデータフォルダの一覧
・htmlファイルのタブ
・CSSファイルのタブ
・JSファイルのタブ
拡張子が違っても全て同じようにタブ形式で表示されるので、他のソフト画面を開く必要が無いのです。
あらゆる拡張子ファイルに対応しているため、全ての形式ファイルを開けるのでスッキリします。
開いていたファイル構成で再度開ける
あらゆる拡張子ファイルを1つのソフトで開くのは、そんなに珍しい事ではありません。
このVS Codeが優れている点は、「最後に開いていたファイル構成群を記録している」事です。
最後に開いていた状態
例えばWEBサイトのデータ（静的サイト或いはReactなどのプロジェクト）を、以下の様に開いていたとしましょう。
・データフォルダ
・index.html
・service.html
・style.css
・responsive.css
普通ソフトを一度閉じてしまうと、それぞれ開き直す必要がありますよね。
何も準備が無ければ、エクスプローラーを開いてhtmlソースを開いてCSSを開いて…と、一つずつおこなう必要があります。
ところがVS Codeの場合、フォルダを開くと複数ファイルが「開いていた状態」で開始されるのです。
これはVS Codeを閉じた時、開いていたファイル構成を記録しているためです。
対象フォルダを開く事で、開いていたファイル構成を再現
VS Codeでは指定したフォルダに対して、開いていたファイル情報が紐づけされています。
ですのでVS Codeで対象のフォルダを指定すれば、いつでも開いていた構成を再現する事ができるのです。
※拡張子ファイルを直接VS Codeで開いた場合はそのファイルしか開きません。フォルダを指定した時のみ有効になります。
基本的にVS Codeは、一つのフォルダ内の構成を1つのウィンドウで展開するシステムになっています。
フォルダごとに個別に記録される
しかもこれはフォルダ単位で記録がされています。
複数のデータフォルダがあっても、それぞれで開いていたデータ状態を個別に保存・再現してくれるのですね。
Aサイトの構成からBサイトの構成に変える場合
例えば「A」WEBサイトのフォルダを開いている状態で、キーボードの「Ctrl＋K、そしてO」と押してみましょう。
するとあらたに「開くフォルダを選択する画面」が出てきます。
ここで「B」WEBサイトのディレクトリを選択すると、以前「B」サイトデータを開いていた時の最後の構成が再現されます。
この時「A」サイトのウィンドウは消えますが、Aサイトも記録されていますから、再度「A」フォルダを選択すれば再現されます。
とにかくVS Codeでフォルダを指定さえすれば、ファイルは一気に開いてくれる訳です。
強力なコード入力サポート
次はやはり何といっても、コード入力をサポートしてくれる入力候補表示機能でしょう。
タグを打つ際に入力候補が表示されるので、ソースコードを入力する時間と手間の大幅な削減になります。
タグを自動生成
例えば<div></div>とコードを打つとします。
<と入力した時点でそれに該当する「入力候補」を表示してくれます。
候補の中から「div」を選択して、閉じるタグ「>」を入れた瞬間に「</div>」が後ろに出現してくれます。
これはpタグやh1等の見出しタグも全て対応します。
インデント付きで改行できる
<div></div>の間にカーソルを入れてEnter改行すると、間に段が入りつつ適切なインデント位置にカーソルが来ます。
自然で滑らかにインデント付きのソースコードを書く事ができる訳です。
JSでもコード補助される
jsファイルでもコード補助サポートがされます。
Reactでjsファイルのコード候補が表示された様子
上記の様に、頭文字を入れる事で命令文などの入力候補が表示されます。
CSSでも入力がサポートされる
入力サポートがされるのはhtmlファイルやjsファイルだけではありません。
CSSでもCSS3に準拠した入力候補が表示されるので、スタイリングの時間を大幅に短縮する事ができます。
baと入れた時点でそれに相応するプロパティ名がリスト表示されている
※プロパティや値は、1文字目を入力する事で初めてその候補が表示されます。ですので知識が無くても書ける様な補助機能ではありません。
視覚サポートもあり
さらに色指定の部分では16進数コードの前に■の色付きマスが表示されるので、何色が設定されているのかが一目瞭然です。
構文エラーのサポート
VS Codeはjsファイルで構文エラーに対応するので、書き間違いの場合は対象部分に「赤い波線」を出して警告してくれます。
構文エラーはCSSファイルでも有効です。
特にReactなどの開発では、波線以外に文字の濃淡でエラー判定をしてくれるので、設定が反映されているかどうかがすぐにわかります。
全ファイル対象の検索・置換機能
VS Codeには便利検索そして置換機能が装備されています。
1ファイル内検索
通常ファイル内の検索をする場合は、「CTRL＋F」を押すと右上に検索ボックスが表示されます。
表示された入力ボックスに検索単語を入力して上下の矢印をクリックすると、ヒットした候補の位置にジャンプします。
もちろん大文字・小文字の区別や正規表現にも対応しています。
1ファイル内置換
置換の場合は、「Ctrl＋H」でボックスが2つ表示されます。
上のボックスに検索候補を入れ、それを下のボックスに入れた候補に置き換えてくれます。
置換は1語ずつ置換や、一括で置換する事ができます。
全ファイルを対象とした検索・置換
VS Codeでは、指定データフォルダ内の全てのファイルを対象にした検索・置換ができます。
左端の虫眼鏡メニューがそれにあたりますね。
このアイコンを押すと、検索ボックスと置換ボックスが左袖に表示されます。
この検索は「データフォルダの全ファイル」を対象にする事ができるのです。
例えば.htmlや.php、.jsなど種類に関係なく、すべてを検索・置換の対象としてくれるのです。
ファイルの種類に関係なく検索をヒットさせる
検索にヒットした候補が、下の画面部分にズラッと並びます。
どのファイルに何個該当箇所があるのか、そしてその部分の表示までしてくれるのですね。
置換の場合も同様で、表示された候補を1個ずつ置き換えたり、一括で全て置き換えたりが可能です。
複数個所の同時コピペが可能
もう一つVS Codeが優れているのは、コピー&ペースト（以下：コピペ）のしやすさでしょう。
コピペをする際一番面倒なのは、ペースト箇所が1か所じゃない場合ですよね。
候補を1件ずつ複数追加できる
例えば何かタグやテキスト部分などを別の情報に変更したとします。
この修正対象が同ファイル内に何か所かある場合、修正箇所をコピーして何か所もペーストする事になりますね。
かと言ってわざわざ置換機能を使うのは、正直面倒な時もあります。
複数を任意に選択できる
こういった場合に「Ctrl+D」を押すことで、次に出てくる同じ候補も同時に範囲選択する事ができます。
例えば同じ様な修正をしたい箇所が3か所あれば、Ctrl＋Dで直下の3か所を同時に範囲選択できます。
そしてペースト（Ctrl＋V）すれば、3か所が一気に置き換わってくれるのです。
その他の機能
そのほかにもVS Codeには、様々な機能が導入されています。
いくつか紹介しましょう。
ローカル環境のプレビューを画面に出せる
静的WEBサイトやReact等のアプリ開発の場合は、VS Codeの左半分でコードを書きながら、右半分でローカルデータをプレビュー表示させる事ができます。
一つのウィンドウ内で表と裏が同時確認できるので大変便利です。
プレビュー画面を表示するのには、「Live Preview」拡張機能のインストールが必要です。
ターミナルも起動できる
React開発はローカル環境での実行確認のため、「npm start」などコマンド入力をする必要があるでしょう。
VS Codeでは、ウィンドウ上にターミナルを起動させる事ができます。
cmd.exeを起動しディレクトリ移動まで終了した状態
表示メニューから「ターミナル」、或いはCtrl＋@を押すことで、いつでもcmd（Powershell）等のコマンドラインソフトを起動する事ができます。
ターミナルはコンソールやデバッグツールと共に格納されていて、画面左・下・右の表示位置を選ぶことができます。
今回はごく一部の紹介です。
今回紹介したのはVS Codeのほんの一部であり、他にも様々な機能が搭載されています。
VS Codeのメリットを最大限に活かせば、より効率的に開発が進められると思います。
ぜひ一度使ってみて下さいね。
