🔰

VS-CodeでかんたんJavaScript

2021/08/13に公開

VS-CodeであっさりJavaScript

「VS-CodeでJavaScriptしたい!!」という方向けに手順をまとめていきます。

VS-Codeのダウンロードとインストール

VS-Codeは、下記の公式サイトで配布されています。(無料です!!)

VS-Code公式サイト

下記のダウンロードから"Download"ボタンをクリックし、
お使いのPCに合ったインストーラーをダウンロード&インストールをしましょう。

VS-Codeダウンロードページ

VS-Codeの立ち上げと拡張機能のインストール

VS-Codeを立ち上げると、下記の様なウィンドウが出てきます。(かっこいいですね!!)

次は、Extensions(拡張機能)のインストールです。
画面の左側にボタンが並んでいると思いますが、上から5つめの"Extensions"をクリックします。

日本語化する拡張機能

検索窓に"Japanese Language"と入力します。
すると、画像の様に"Japanese Language Pack"が表示されますので、インストールしましょう。
(この拡張機能については少し時間がかかるので気長に待ちます)

インストールが終了すると、右下の方に"再起動"を促すダイアログが出てきますので、指示に従いVS-Codeを再起動します。

動作確認する拡張機能

次は、検索窓に"Live Server"と入力します。
すると、画像の様に"Live Server"が表示されます。

この拡張機能は、作ったコードをブラウザで実行させるための機能です。
(こちらのインストールは一瞬で終わるかと思います)

プロジェクトを作ろう

さっそく、"プロジェクト"を作ってみましょう。
"プロジェクト"と言いますが、その実体は空っぽの"フォルダ"です。
次の手順に従って、プロジェクトを作ります。

VS-Codeの左側にあるメニューにある、1番上のボタンを押し、"Open Folder"ボタンをクリックします。

ダイアログで"New Folder"(新しいフォルダ)を選択します。
ここでは、フォルダ名を"MyProject01"としました。

新しいフォルダ"MyProject01"を"Open"します。

これでプロジェクトの完成です。(フォルダ名は大文字になっていますね)

HTMLファイルを作ってみよう

プロジェクトは完成しましたが、初期状態なので中には何も入っていません。

次は、HTMLファイルを作ります。
プロジェクト名の上にマウスカーソルを合わせ、"New File"ボタンをクリックします。

ファイル名は、"index.html"としましょう。

ファイルが出来ました。
HTMLは、このファイルに記述していきます。

HTMLを書いてみよう

HTMLファイルを用意したら、コードを記述していきます。
下記のコードを参考にして打ち込んでみてください。
このコードは"HTML"というルールで記述されています。
"<"と、">"で囲まれた、"タグ"で構成されています。

index.html
<html>
<head>
	<meta charset="UTF-8">
</head>
<body>
	<h1>Hello HTML!!</h1>
</body>
</html>

記述ができたら、上部のメニューにから、"ファイル -> Save(保存)"の順にクリックをします。
ファイルの内容に変更があった場合は、忘れずに保存をしましょう。

ブラウザで動かしてみよう

このHTMLファイルは、簡単にブラウザで動作確認をする事ができます。
編集しているhtmlファイルの上で、
右クリック -> "Open with Live Server"をクリックします。

すると、自動でブラウザが立ち上がります。
ブラウザに、"Hello HTML!!"と表示されている事を確認できます。(やりました!!)

JavaScriptファイルを作ってみよう

先ほど記述した"HTML"は、厳密に言うとプログラム言語ではありません。
"マークアップ言語"と言うものです。
HTML言語と、JavaScript言語は違うものなんですね。
通常、HTMLは".html"ファイルに、JavaScriptは、".js"ファイルに記述します。

さっそく、JavaScriptファイルを作っていきましょう。
プロジェクト名の上にマウスカーソルを合わせ、"New File"ボタンをクリックします。

ファイル名は、"main.js"としましょう。

ファイルが出来ました。
JavaScriptは、このファイルに記述していきます。

HTMLからJavaScriptを実行する

JavaScriptファイルを作っただけではプログラムは実行されません。
そのファイル自身をHTMLファイルから呼び出す必要があるのです。

HTMLから、JavaScriptを実行するコードを記述します。
"script"タグの部分が追加したコードです。

index.html
<html>
<head>
	<meta charset="UTF-8">
</head>
<body>
	<h1>Hello HTML!!</h1>
	<script src="main.js"></script>
</body>
</html>

"main.js"ファイルを実行するには、このタグが必要になります。

JavaScriptを書いてみよう

では、"main.js"ファイルにJavaScriptを記述してみましょう。
(たったの1行だけです!!)

main.js
console.log("Hello JavaScript!!");

記述が出来たら、"ファイル -> Save(保存)"を忘れずに。。。

コンソール画面を確認する

"console.log();"は、コンソール画面に文字を出力する命令です。
"コンソール画面"とは、ブラウザに備わった特別な画面であり、
主に、プログラムの動作確認や、エラーの確認をする時に利用します。
次の手順に従って、コンソール画面を開いてみましょう。

GoogleChromeブラウザの、右上にあるメニューボタンから、
"More Tools" -> "Developer Tools"の順番にクリックしていきます。

"Console"のタブをクリックすると、コンソール画面が現れます。
"Hello JavaScript!!"の文字が出力されているのを確認する事ができます。(やりました!!)

VS-Codeを使ってJavaScriptを実行するまでをやってみました。
ここまで読んでいただき有難うございました。

おまけ

JavaScriptに慣れてきた方にオススメの内容です。
p5.jsをかじる本
和柄を全集中でかじる本
よろしくお願いします。

Discussion