Zenn
🦔

VScodeで書いたJavaScriptをブラウザで実行する

2021/12/06に公開
JavaScript
VS Code
初心者
tech

はじめに

友人で最近、プログラミングを始めた方がいます。
その方から、どうやってvscodeを使ってJavaScriptをブラウザで実行すれば良いのかと連絡をもらい自分なりに纏めたメモを共有したら、分かり易いとのお言葉をいただけました。
自分も初学者の頃に分からなくて困った記憶があるので、せっかくなら記事にしようと思い、初めてzennに投稿します🙏

下準備

まずはvscodeに拡張機能を入れていきます。
vscodeを開いて、四角いブロックが４つまとまっているようなアイコンを押します。そうすると検索窓があるので、そこにDebugger for Chromeと入れて検索をして下さい。そうすると添付写真のようなUIがあるので、インストールを押し下さい。同じ要領でLive Serverと検索をして、インストールをします。

実装

vscodeを開いて、フォルダーを開くを押す。


お好みのディレクトリ（フォルダー）に新規ファルダーを作成する。

その新規で作成したファルダーを選択して、右下にある開くを押す。

次にファイルを作成する。（4つ並んでいるアイコンの一番左が新しいファイルの作成）
アイコンを押すとファイル名を入れることができるので、任意のファイル名を入れる。
今回はHelloWorld.jsとする。これでJavaScriptのファイルの作成ができました。

新規作成したファイルに簡単なコードを書きます。
まずはconsole.log("Hello world!!");と書きます。

これで、JavaScriptファイルにJavaScriptのコードを書くことができました🎉
しかしこれだけでは、ブラウザでコードを実行させることはできません。

次にHTMLファイルを作成していきます。
ファイルの作成の仕方としては、JavaScriptファイルと同じです。
新規ファイルを作成して、名前はindex.htmlとして下さい。

htmlファイルに半角英数字でhtmlと打つと、いくつか予測変換が出てきます。その中からhtml:5を選択して下さい。選択すると自動でコードが出てきます。
（もしコードが出てこなかった際には下記のコードをコピペして下さい）
※今回の主旨とズレるのでHTMLファイルの中身については解説しません。

以下、コピペ用のコード

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

次に先ほど作成したJavaScriptファイルと、このhtmlファイルを繋げる作業をします。
先程のhtmlファイルに<title>Document</title>というコードがあると思います。
その下に<script src="HelloWorld.js"></script>を追記します。ちなみに、HelloWorld.jsの部分は先程作ったJavaScriptファイルの名前を使って下さい。
※ファイル名を書くときは" "で必ず囲って下さい。
あまり書く意味はないですが、JavaScriptファイルの<body>と書かれた下に<h1>Hello world!</h1>と書きます。

下準備は整ったので、ブラウザでJavaScriptコードを実行していきます。
右クリックをすると、Open with Live Serverがあるので、押して下さい。

自動でブラウザが立ち上がり、先程書いたHello world!が表示されています。

次にブラウザ上で右クリックして、検証を押します。

検証ツールが立ち上がったかと思うので、コンソールタブを選択して下さい。
先程、JavaScriptファイルに書いたconsole.log("Hello world!!");のHello world!!部分が表示されています。これでブラウザでjavascriptを実行することができました🎉

JavaScriptファイルのHello world!!を別の単語に変えると、ブラウザの文言も変わりますので、ぜひ試して下さい。※その際、必ず文字を" "で囲うようにして下さい。

応用

しかし、これだけだと正直、JavaScriptって結局何ができるの？というお気持ちになると思うので、軽く別のことをしたいと思います。ここからは解説は特には無いのでコピペしてみてください🙏
(ものすごく雑なコードなのですが、多めに見てください。また初学者用の噛み砕いたコードになります）

HelloWorld.jsファイルを以下のように書き換えます。

// フラグでボタンが押されているかどうかを判断
let flag = true;
const changeBgColor = () => {
  //flagがtrueなら{}内の処理に入る
  if (flag === true) {
    //背景色を赤に変更する処理
    document.body.style.backgroundColor = "red";
    //現在のflagがtrueなのでfalseに変更して、
    // 次ボタンが押されたら背景色がblueになるようにする
    flag = false;
    //flagがfalseなら{}内の処理に入る
  } else if (flag === false) {
    //背景色を青に変更する処理
    document.body.style.backgroundColor = "blue";
    //現在のflagがfalseなのでtrueに変更して、
    // 次ボタンが押されたら背景色がredになるようにする
    flag = true;
  }
};

HTMLファイルは以下のように。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="HelloWorld.js"></script>
  </head>
  <body>
    <input type="button" value="押して！！" onclick="changeBgColor()" />
  </body>
</html>

これでブラウザを見るとボタンがあると思うので、押してみてください。背景の色が変わるようになったと思います。

最後に

JavaScriptは幅広い用途があり何から始めるのが良いのか悩むと思います。
最初は難しいことはせずに、簡単なこと（サイコロ作ったり、ちょっと文字を動的に動かしたり）をして何が出来るのかを学ぶことが大切だと思います。焦ると視野が狭くなってしまうと思うので、マイペースくらいが良いと思います。（偉そうにすみません。自戒を込めてです）

Discussion