今回は、基本的なファイル編集についてのチュートリアルです。
サンプルコードの作成と編集を通して、基本的な表示・編集機能やエラーの検出といった機能を見ていきます。
VSCodeを使ってみたいけどとっつきづらい、とお思いの方でも使い方を体感していただける内容となっています。
画面解説・各種機能解説記事について
過去に、VSCodeの画面解説、基本機能の解説記事を作成しております。あわせてご覧になると、今回分の理解もスムーズです
今回使用するサンプルコード
初めに、今回のチュートリアルで使用するサンプルコードを紹介します。HTMLとJavaScriptの簡単なコードを用意しました。下の文章をクリックするとコードが表示されます。
サンプルコード（ここをクリックで畳めます）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>VS Code サンプル</title>
</head>
<body>
<h2>VS Code サンプルページ</h2>
<button id="btn" onclick="ButtonProccess()">クリック</button>
<div id="text">ボタンはまだ押されていません</div>
<script>
function ButtonProccess() {
// ボタンを押したときに見出しを変更する処理
document.getElementById('text').textContent = 'ボタンがクリックされました';
}
</script>
</body>
</html>
今回はVSCodeの機能解説がメインなので、コード自体は深く理解しなくて大丈夫です。
簡単に解説すると
・ページに見出しとボタンを一つ表示する
・ボタンを押した時、ButtonProccess関数を呼ぶ
→ページの「ボタンが押されていません」の部分が書き換えられる
・
<Script>タグの間の記述で、上記のButtonProccess関数を作っているという内容です。
ファイルを作成する
それではまず、サンプルコードからHTMLファイルを作り起こしましょう。作業用フォルダを開く
まずは、コードを作成するフォルダを開きます。1. メニューから 「ファイル」→「フォルダーを開く...」 を選択します。
2. フォルダー選択ダイアログが表示されるので、コードの保存先に使いたいフォルダを選択します。
3. 下記のようなメッセージが出たら、「作成者を信頼します」を押します。
この操作をすると、画面左にエクスプローラーサイドバーが表示され、その中にフォルダの中身が表示されます。
ここからフォルダにファイルを作ったり、消したりといった操作ができるようになります。
サンプルコードからhtmlファイルを作る
次に、フォルダにファイルを作成しましょう。1. 先ほどの操作でサイドバーにフォルダが表示されていると思います。その部分で右クリックしてください。
2. 右クリックメニューから「新しいファイル...」を選択します。
3.ファイルが作成され、ファイル名の入力待ち状態になります。今回は「index.html」というファイル名にしましょう。
4. ファイル名を付けると、新しいタブにそのファイルが開かれます。 ファイルが作成出来たら、先ほどのサンプルコードをコピー・ペーストして保存してください。
ブラウザで動作を確認してみよう
ファイルができたら、ブラウザで開き、一度動作を確かめてみましょう。拡張機能を入れるとVScodeからブラウザを立ち上げる事も出来ますが、今回はPCの標準機能を利用する形にします。
エクスプローラなどからファイルをブラウザにドラッグ＆ドロップすることで、ファイルをWebページ(htmlファイル)として開くことができます。
以下がサンプルコードの表示例です。
VS Code サンプルページ
ボタンはまだ押されていません
ファイルの表示と編集の便利機能
それではまずは、ファイルを開いた状態の画面を見ていきましょう。単純にファイルの内容を表示するというだけでも、VSCodeにはさまざまな便利機能があります。
コードを見やすくするシンタックスハイライト
作ったファイルを開くと、コードのHTMLのタグ部分などが色変えされて、見やすく表示されていると思います。
この機能をシンタックスハイライト（構文強調表示）といい、多くのプログラミングエディタに搭載されています。
ハイライトのルールはファイルの種類によって変わるため、ファイルの拡張子（ファイル名の.以降の部分）を変えるとまた別のルールに切り替わります。
1.ファイル名の拡張子を変えてみましょう。
aファイル名をクリックした後にF2を押すと名前の変更ができます。
たとえば「html.txt」とすると、すべてのハイライトが無効になりプレーンな表示になります。
確認したら、またファイル名を戻して下さい。
不要な部分を非表示にできる折りたたみ機能
コードを表示したタブの、左端の部分を見てください。たとえば
<Script>タグの行には、行番号の右に▼が出ています。これをクリックしてみましょう。
<Script>～</Script>タグの間が折りたたまれ、非表示になりました。もう一度クリックするとまた開かれます。
このように、VSCodeでは入れ子構造になったテキストを、構造にそって折りたたむことができます。
プログラムコードは何重もの入れ子構造になるのが基本なので、長いコードから編集箇所を探す時に重宝します。
ファイルの構造見渡せるアウトライン機能
次は、ファイルのアウトラインを見てみましょう。アウトラインというのは、見出し構造であったり、HTMLならタグの入れ子構造といったテキストの構造のことです。
アウトライン機能では、この構造だけを抜き出して見渡すことができます。
1. エクスプローラーサイドバーの下の方に「アウトライン」というバーがあります。 これをクリックしましょう。
2. アウトラインが開かれ、現在開いているファイルのアウトラインが表示されます。
2. 任意の部分をダブルクリックすると、本文中の同じ場所に飛ぶことができます。
3. 左端に▼が表示されている行をクリックすると、折りたたみの開閉ができます。
インテリセンスの補完機能を試してみよう
VSCodeには入力のインテリセンス（入力補完）機能があります。これを少し体験してみましょう。例として、ボタンの横に太字(strongタグ付き）で「押してください」という文章を追加します。
<strong>押してください</strong>という記述になります。1.コードの
<button>～lt;/button>の次に空行を作って下さい。ここに追加していきます。2. まず、
<strなどと、タグ名の書き出しを入力してみてください。3.インテリセンス機能で候補が表示されます。
4.
strongを選択します。確定すると<strongとタグ名までが確定されます。
5. 後に
</strong>と閉じタグが後に追加されます。
<strong>と</strong>の間に、「押してください」という文字列を入力します。
このように、インテリセンスではプログラム言語でよく使われる単語を補完してくれます。HTML以外にも、CSS用の色コード(#ffffff 等の表記）をカラーピッカーを使って入力できるなど、さまざまな便利機能があります。
複数個所を一括で編集できるマルチカーソル
次はマルチカーソルについてです。これはコードの中で複数個所に同じような編集をしたい場合、手軽に一括で編集できるという機能です。
1. 例として、ページタイトルと見出しの「サンプル」を「テスト」に変えてみます。
まずはひとつめの「サンプル」をダブルクリックで選択してください。
その後、
Ctrl+D（MacはCmd+Dを押すと、自動で次の「サンプル」が選択されます。
2. その状態で編集を行うと、選択されている箇所すべてに反映されます。
また、
Alt+クリックで手作業で複数個所の選択をして、同じように一括編集を行うこともできます。エラーチェック機能について知ろう
VSCodeでは、プログラムの構文エラーなどを自動でチェックしてくれる機能があります。サンプルコードにあえてエラーの部分を追加し、それが検出されることを体験してみましょう。
エディタ上のエラーハイライト機能
まずはエディタ上で、にエラーの箇所に警告が出ることを確認してみましょう。1. まず構文エラーの個所をつくります。
ButtonProccess() 関数の、()を削除してみてください。（"()"が足らないという構文エラーの状態になります）2. エディタ内の今消した部分の直後に、赤い下線が出るはずです。
問題パネルからエラー一覧を確認する
もうひとつ、問題パネルという部分からエラーを確認する方法を紹介します。 1. 問題パネルを開きます。ショートカットキーは
Ctrl + Shift + M（MacはCmd + Shift + M）です。問題パネルは画面下部に表示されます。
2. 問題パネルに、今発生させたエラーの警告文が１行出ていることを確認してください。
問題パネルには、ファイル中で起っているエラー全てがまとめて表示されます。特定の行をクリックする事で、エディタ内のそのエラーが発生している箇所にジャンプできます。
まとめ
今回は、VSCodeの基本的な使い方と機能について、シンプルなコードの作成・編集をもとにお送りしました。このほかにもVSCodeにはプログラミングに便利な機能がたくさんあります。それらについては今後一つずつ紹介していく予定です。
皆さんのプログラミング学習の一助に慣れれば幸いです。
