【チュートリアル】Visual Studio Codeでプロジェクト作成

ある一つのプロジェクト(Webやアプリなど)に必要なファイルは、決められたフォルダ内に作成していきます。
例えば、「Alpha」というWebサイト(プロジェクト)を開発する場合は以下のような構成になります。

ワークスペース

alphaというプロジェクトのフォルダがあり、その中に必要なファイル(index.htmlなど)やフォルダを配置しています。
alphaフォルダはプロジェクトの一番上のルート(根)に当たるため、プロジェクトルートディレクトリと呼ばれます。

プロジェクトのルートディレクトリを作成する

「プロジェクトのルートディレクトリ」と言うと難しく聞こえるかもしれませんが、ただのフォルダです。

まずはどこでもいいので、alphaフォルダを作成してください。

右クリックで新規フォルダを作成する
右クリックで新規フォルダを作成する
「alpha」と入力してEnterを押す
「alpha」と入力しEnterを押す

これで、「alpha」というフォルダ(プロジェクトルートディレクトリ)を作成することができました。

理解度チェック

  • ルートディレクトリとはなんですか?
  • プロジェクトとルートディレクトリの関係について説明できますか?

VS Codeでプロジェクトのフォルダを開く

VS Codeを開いて先程作成した「alpha」フォルダを開きます。

このフォルダの開き方にはいくつか方法がありますが、ここでは一般的に使用する二つの方法について掲載します。

Welcomeタブから開く方法

VS Codeを起動した際に最初に表示されるWelcomeタブから開くことができます。

下記画像の「Open folder」をクリックしてください。

VS CodeでプロジェクトをWelcomeタブから開く
VS CodeでプロジェクトをWelcomeタブから開く

メニューから開く方法

VS Codeのメニューから開くこともできます。

「File(ファイル)- Open…(開く)」をクリックしてください。

VS Codeでプロジェクトをメニューから開く
VS Codeでプロジェクトをメニューから開く

開くプロジェクトを選択する

どちらかの方法を試すと次のようにフォルダを選択することができます。

先程作成した「alpha」を選択して「開く」をクリックしてください。

「alpha」フォルダを開く
「alpha」フォルダを開く

フォルダが開いていることを確認する

alpha」フォルダを開いていることをVS Codeの画面上で確認することができます。

次の画像のように、大文字で「ALPHA」と表示されていることをご確認ください。

「alpha」フォルダを開いていることを確認
「alpha」フォルダを開いていることを確認する

ファイルを作成する

alpha」フォルダの中に簡単なHTMLファイルを作成します。

ファイル作成アイコンをクリックする

「ALPHA」にマウスカーソルを合わせるといくつかのアイコンが表示されます。その一番左にある「新規ファイル」アイコンをクリックしてください。

ファイルを作成する
ファイルを作成する

ファイル名を入力して作成する

ファイル名を入力します。
ここではWebサイトの最初のページである「index.html」と入力してEnterを押してください。

index.htmlを作成する
index.htmlを作成する

HTMLテンプレートを記述する

ファイルを作成すると「ファイル名」で新規タブが開きます。

タブには「[ファイル名] ●」というように「●」が表示されることがありますが、これはファイルが未保存であるということを示しています。変更を適用して保存するためにはファイルを保存します。

保存のショートカットキー
Mac: ⌘ + S
Win: Ctrl + S

タブの下はソースコードを記述していく場所です。
VS CodeにはEmmet(エメット)と呼ばれるHTMLやCSSのテンプレートを呼び出す拡張機能が含まれています。

!(ビックリマーク)」を1行目に入力すると「!」と「!!!」の候補が出てきますので、「!」を選択してEnterを押してください。

Emmetを利用してHTMLテンプレートを記述する
Emmetを利用してHTMLテンプレートを記述する

HTMLのテンプレートが表示されたら、body要素に次のコードを入力してください。


<h1>こんにちは</h1>
    

入力後は次のようになります。

body要素に追加する
body要素に追加する

ファイルを保存してタブの「●」が消えることを確認してください。

ファイルの絶対パスをコピーする

ファイルの絶対パスをGoogle ChromeのURLバーに設定すると、そのファイルをブラウザで開くことができます。
この絶対パスはVS Codeのファイルから簡単に取得することができます。

index.html」の上で右クリックし「Copy Path」を選択してください。

ファイルの絶対パスを取得する
ファイルの絶対パスを取得する

Google Chromeでローカルファイルを開く

Google Chromeを起動して、URLバーにコピーしたパスを貼り付けてEnterを押します。

クロームでローカルファイルを開く
クロームでローカルファイルを開く

ファイルを作成しよう

  • VS Codeで新規ファイルを作成しよう!
  • VS Codeでファイルを編集しよう!
  • VS Codeでファイルの絶対パスを取得しよう!

フォルダを作成する

これまで作成したHTMLファイルに作用するCSSファイルを作成します。

先にCSSファイルを格納するためのstylesフォルダを新しく作成します。

次の画像の矢印の先端部分を一度クリックしてください。そうすると、ファイル一覧の大枠に青線が表示されます。この青線は「alpha」が選択されていることを示すものです。

青線を確認したら表示されている「新規フォルダ」アイコンをクリックしてください。

新規フォルダを作成する
新規フォルダを作成する

フォルダ名を「styles」にしてEnterを押します。

次に、この「styles」フォルダの中に「index.css」というCSSファイルを作成します。「styles」フォルダを選択して「新規ファイル」アイコンをクリックします。

CSSファイルをフォルダ内に作成する
CSSファイルをフォルダ内に作成する

これで「フォルダの作成」と「フォルダ内にファイルを作成」する方法を試すことができました!

フォルダを作成しよう

  • VS Codeで新規フォルダを作成しよう!

プロジェクトを完成させる

CSSにスタイルを記述してHTMLに反映させましょう。次のコードを「index.css」にコーディングしてください。


h1 {
    color: red;
}
    
CSSファイルにコーディングする
CSSファイルにコーディングする

これで「index.css」は完成です。

このCSSをHTMLに反映させるためには、HTMLでCSSを読み込む必要があります

index.html」に編集を移りtitle要素の下にlink要素を作成します。「li」まで入力するとEmmetにより候補が表示されるので「link:css」を選択してください。

HTMLからCSSを読み込む
HTMLからCSSを読み込む

Emmetが表示されない場合は、次のコードを貼り付けてください。


<link rel="stylesheet" href="">
    

このhref属性に読み込むCSSファイルのパスを設定することで、CSSを読み込むことができます。

今回は「index.html」から「index.css」までの相対パスを設定します。最終的なコードは以下のようになります。


<link rel="stylesheet" href="styles/index.css">
    
href属性にindex.cssまでの相対パスを設定する
href属性にindex.cssまでの相対パスを設定する

ファイルがすべて保存されていることを確認して、ブラウザのページを更新してください。

完成したプロジェクトの結果
完成したプロジェクトの結果

このように表示されていれば完成です!おめでとうございます!

プロジェクトを完成させよう

  • VS Codeのチュートリアルでプロジェクトを最後まで完成させよう!

前のレッスン
次のレッスン

Twitterでアウトプット

理解したことや分からないところはTwitterでつぶやいてみよう!

この学習ページで学んだことをTwitterでアウトプットしてください。

アウトプットするメリット

学習仲間が増える

同じ課題を持った仲間が増えるため、学習へのモチベーションが継続しやすくなります。

より深く理解する

頭では理解したと思っていても、文章化することで初めて気づくことがあります。