VSCodeとは？
VSCodeはMicrosoftが開発した、主にファイル内の記述を編集するためのエディターです。
高機能で軽量、かつ多くのプラグラミング言語に対応しているので
多くのプログラマー、エンジニアに愛用されているエディターになっています。
操作が比較的簡単なので、初心者エンジニアにとっても使いやすいおすすめのエディターです。
また、今回は紹介しませんが、途中まで記述すると自動的に内容を補完してくれる機能などもあるので
効率よくコーディングができるようになっています。
VSCodeの特徴
VSCodeの特徴としては、主に次の2つが挙げられます。
- シンプルがゆえに、初心者でも扱いやすい
- 拡張機能が豊富である
シンプルがゆえに、初心者でも扱いやすい
VSCodeはUIや操作性がシンプルであり、それが理由で
初心者やベテランのプログラマーやエンジニアを問わず、幅広い層に圧倒的人気を誇るエディターになっています。
- ディレクトリやファイルの作成
- コーディング時のタイピング
- 保存方法
- 拡張機能の追加
など、どれをとってもシンプルに実行できるため、直感的な操作が可能です。
中には、これからプログラミングに挑戦していきたい人や初心者にとっては扱いにくいエディターもありますが
VSCodeは、そのような心配が少ないエディターと言えます。
拡張機能が豊富である
VSCodeには拡張機能というものがあり、これを利用することによってより便利にコーディングを行なったり、タイプミスやエラーを最小限に減らすことが可能です。
例えば、「Auto Rename Tag」という拡張機能を利用すれば開始タグの中身を修正した際に、終了タグも自動的に修正してくれるので
書き直しのミスによるエラーやサイトの表示崩れを防げますし
「Figma for VSCode」を利用すれば、Figmaで提出されたデザインカンプのCSSを反映できるので
ゼロからコーディングするよりもずっと効率的に案件を進めることができます。
このように、VSCodeには豊富な拡張機能が存在し、それを使いこなすことで
より効率的にコーディングできたり、ミスを最小限に抑えることができるのです。
VSCodeのインストール方法
VSCodeをインストールするには、下のリンクからアクセスをしてください。
自分のOSにあったボタンをクリックし、インストールしましょう。
こちらからインストールできます。
インストールできたらzipファイルを解凍し、表示されたソフトをダブルクリックすることで使用できます。
VSCodeにディレクトリやファイルを読み込ませる方法
VSCodeがインストールできたら、さっそく開いて
まずはディレクトリを読み込んでみましょう。
VSCodeを開いた状態で、ディレクトリを引っ張ってきてVSCodeの画面上で話すと認識されます。
下の画像のような状態になっていたら、上手く開けています。
ディレクトリ単位でなく、ファイルを読み込ませることもできますが
普通は、最低でもhtmlファイルやcssファイルの2つを用意することが多いので
扱いやすいようにディレクトリ単位で読み込みます。
ちなみに、ディレクトリではできませんが、ファイルをVSCode上で開きたい場合は
「このアプリケーションで開く」からVSCodeを選択することでも開くことができます。
VSCodeでファイルやディレクトリを生成する方法
続いては、VSCode上でファイルやディレクトリを生成する方法について解説します。
VSCode上でファイルやディレクトリを生成、追加する方法ですが
読み込んだディレクトリの名称が書いてある右の、それぞれのマークを押します。
左側がファイル、右側がディレクトリです。
そうすると、追加するファイルの名称を決めることができるので
例えば、「second.html」などとします。
名称を決めたら、エンターキーを押せば生成されます。
もし名称を変更したい場合は、ファイル上でControl + クリック（Windowsの人は右クリック）
「名称を変更」から変更できます。
なお、ディレクトリも同じ操作で名称を決定、変更できます。
VSCodeでの操作と、読み込んだディレクトリ、ファイルは連動しているので
例えばVSCodeではなく、Finderからディレクトリの方を操作して、新しいファイルやディレクトリを作成してもVSCode上でも反映されます。
htmlファイルに書き込みをしてみよう
ここまでが理解できたら、htmlファイルに書き込みをしてみましょう。
今回は
- h1タグで「VSCodeの読み込み練習」
- pタグで「今回は、VSCodeの読み込み練習をしてみます。」
と表示してみたいと思います。
h1タグで「VSCodeの読み込み練習」と記述をしてみよう
まずは、h1タグで「VSCodeの読み込み練習」と記述をしてみましょう。
「index.html」ファイルを開き、「!」を打ち込むか、「html:5」と打ち込んでみましょう。
すると、このような雛形が形成されます。
そうしたら、<body></body>という中にh1を書いていきます。
今回練習するh1やpタグなどのサイト上の目に見える部分は、この<body></body>に書いていきますので覚えておきましょう。
<h1></h1>と丁寧に打ち込んでもいいですが、VSCodeでは、「h1」だけ打ち込んでからTabキーを押すことでもタグを打ち込むことができます。
これは、h1だけでなくあらゆるタグで利用可能です。
下の画像のように記述ができればOKです。
ここまで書けたら、Command + S で保存をしてみてください。
上のファイル名の隣に白丸がついている場合は、書き換えた内容が保存されていないことを表しますが
保存をしたら消えます。
そして、VSCodeに読み込んだディレクトリを開いて、index.htmlをダブルクリックしてみてください。
そうしたら、ブラウザが立ち上がってページが表示されるはずです。
下のような表示が確認できたら、成功です（画像の背景も白なので画像と記事との境界線が分かりづらくてごめんなさい）。
pタグで「今回は、VSCodeの読み込み練習をしてみます。」と記述をしてみよう
h1の記述ができたら、今度はpタグで「今回は、VSCodeの読み込み練習をしてみます。」と記述をしてみましょう。
といっても、下の画像のようにh1タグの下にpタグを追加してテキストを入れるだけです。
保存して、先ほど開いたタブをリロードしてみましょう。
このようになっていれば大丈夫です。
cssファイルに書き込みをしてみよう
今度は、cssファイルに書き込みをしてみましょう。
今回は、CSSを利用して背景をライトブルーにしてみたいと思います。
style.cssファイルに移動して、以下のように記述してください。
bodyタグ、つまり画面全体に背景色でライトブルーを付けるという記述です。
そして、CSSはただ記述するだけではサイトに反映されず
htmlファイルのheadタグ内に
<link rel="stylesheet" href="style.css">の記述をし、htmlファイルとcssファイルを紐づける必要があります。
ちなみに、cssファイルをhtmlファイルと紐づける方法は基本的に3つあり
他の記述方法も気になる人は下の記事を参考にしてみてください。
ということで、head内にlinkタグを挿入していくのですが
titleタグの下に記述してください。
これでhtmlファイルとcssファイルが紐付けられ、CSSも読み込まれた状態になったので
ブラウザを再度リロードしてみましょう。
下のようになっていれば成功です。
今回は、htmlとcssのファイルしか扱っていませんが
VSCodeではあらゆるプログラミング言語のファイルを生成することができます。
今回の記事で、Webサイトに必要なファイルを作成できたり、実際に記述をしていくことはできたと思いますので
ぜひ使いこなしていきましょう！
最後に
というわけで、今回はVSCodeの基本的な操作方法について解説していきました！
現在ではAIを利用した様々なエディタも出てきているので、今度はそのようなエディタも紹介してみたいと思います。
このブログでは、Web制作に関する話題やコーディング、WordPressなどに役立つ情報を発信しているので
次回の記事もぜひ見てくださいね。
コメント