【Javascript 入門】VScodeでJavascript実装

# はじめに
VScodeでJavascriptを実装していきます。
VScodeは各自でダウンロードしておいてください。

Javascriptを実装する場合、HTMLファイルが必要になってきます。
手順としては、
1. プロジェクト作成
1. HTMLファイルを作成
1. Javascriptファイルを作成

となります。
自分は初心者の頃、入門編といいつつ文字ばかりの記事見てて目が痛かったので、できるだけ画像メインの書式にします。
もし、Javascript勉強したての方がいらっしゃいましたら、とりあえず以下の手順通りやってみてください。
できた上で、何か不明な点があれば適宜調べていきましょう。

# PC環境
- MacBook Pro (M1 Max, 2021)
- mac OS Monterey (ver 12.5)
- SSD 2TB
- RAM 32GB


# プロジェクト作成
1. VScodeを開き、「フォルダを開く」をクリック。
![VSjavascript_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2779582/0b4a8a42-9257-c273-6ff8-9dbadb6e0ebc.png)

2. 「新規フォルダ」からフォルダを作り、「作成」をクリック。
フォルダの名前は適宜決めていただいて構いません。初心者の方は、とりあえず「Test01」と入力しましょう。
![VSjavascript_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2779582/f129550a-59ba-cc40-6e81-aadd9c6518e8.png)
![VSjavascript_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2779582/c31b2788-5b49-e740-80bf-cc4b14b1c050.png)


3. フォルダが作成できたら、「開く」をクリック
![VSjavascript_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2779582/ff169251-cc58-0386-d355-73b5f2171863.png)


4. 赤枠のボタンから、HTMLファイルを作成します。
HTMLファイル名は適宜決めていただいて構いませんが、〇〇.htmlの書き方にしてください。
初心者の方は、とりあえず「index.html」と入力しましょう。
![VSjavascript_5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2779582/bd79b306-c2aa-80ff-032c-23058918cad7.png)
![VSjavascript_6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2779582/af376008-9d1c-2cdb-9712-6a1597ae33b1.png)


5. 以下のコードを入力し、キーボードの［control］+[S] (同時押し) で保存します。
![VSjavascript_7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2779582/b0001e13-d313-8951-6def-60adc019d3b5.png)

6. 赤枠のボタンから、Javascriptファイルを作成します。
Javascriptファイル名は適宜決めていただいて構いませんが、〇〇.jsの書き方にしてください。
初心者の方は、とりあえず「test.js」と入力しましょう。
![VSjavascript_8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2779582/ed12fdfe-4cef-2115-fa0f-ee3bc42e1a1c.png)
![VSjavascript_9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2779582/d1f6641d-b059-8a99-9715-c86dff481491.png)


7. 以下のコードを入力し、キーボードの［control］+[S] (同時押し) で保存します。
![VSjavascript_10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2779582/8712e4e3-999c-4115-f40e-7e0a0e2095b2.png)


8. ここで再び同じフォルダ内のhtmlファイルに戻り、以下のコードを追記し、キーボードの［control］+[S] (同時押し) で保存します。
![VSjavascript_11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2779582/67f532cd-b203-90bc-0de9-707c9630758b.png)
これで実装は完了です。では動くかどうかみてみましょう。

9. Macの場合はFinderから、Windowsの場合はエクスプローラから、作成したフォルダを探し、htmlファイルをダブルクリックします。
![VSjavascript_12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2779582/8c41462f-7de2-f15d-2c6c-559fdff04d6e.png)


9. ブラウザ(ここではchrome)が起動し、「Hello World」と書かれていることを確認します。
![VSjavascript_13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2779582/61437605-d8ad-ca4b-4da5-550b701545b6.png)
で、javascriptファイルで作成した「こんにちは」はどこで表示されるの？ということなのですが

9. 右クリックから「検証」をクリックします。
![VSjavascript_14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2779582/9e59425f-8de5-c180-5004-d7721580ef63.png)

9. 右側にデベロッパーツールが表示されるので、「Console」をクリックします。
![VSjavascript_15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2779582/da4dcb6a-b707-001b-ba6b-14eb8bdfc549.png)

9. 「こんにちは」が表示されればOKです！
![VSjavascript_16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2779582/44f0b446-aeb2-abad-1ce8-8dbbb61c1c97.png)



# 終わりに
さて、Javascriptは実際に動いたでしょうか。
といいつつも、まだJavascriptを実装して動かしたという実感はあまりないかもしれません。
Javascriptは、Webブラウザ上で活躍するプログラミング言語です。
一例を挙げると、ホームページのエラー画面もJavascriptで実装されるのがほとんどです。
<img width="400" alt="VSjavascript_17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2779582/8a4873e3-e643-76f5-a9c6-fc5907dd5725.png">
パスワードを入力し忘れるとこのような表示がされますよね、こういったものをJavascriptで実装していきます。
何となくイメージがついたでしょうか。
私も未熟の身ですが、これからもJavascriptを一緒に勉強していきましょう。