VS-CodeであっさりJavaScript
VS-CodeであっさりJavaScript
「VS-CodeでJavaScriptしたい!!」という方向けに手順をまとめていきます。
VS-Codeのダウンロードとインストール
VS-Codeは、下記の公式サイトで配布されています。(無料です!!)
下記のダウンロードから"Download"ボタンをクリックし、
お使いのPCに合ったインストーラーをダウンロード&インストールをしましょう。
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"というルールで記述されています。
"<"と、">"で囲まれた、"タグ"で構成されています。
<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"タグの部分が追加したコードです。
<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行だけです!!)
console.log("Hello JavaScript!!");
記述が出来たら、"ファイル -> Save(保存)"を忘れずに。。。
コンソール画面を確認する
"console.log();"は、コンソール画面に文字を出力する命令です。
"コンソール画面"とは、ブラウザに備わった特別な画面であり、
主に、プログラムの動作確認や、エラーの確認をする時に利用します。
次の手順に従って、コンソール画面を開いてみましょう。
GoogleChromeブラウザの、右上にあるメニューボタンから、
"More Tools" -> "Developer Tools"の順番にクリックしていきます。
"Console"のタブをクリックすると、コンソール画面が現れます。
"Hello JavaScript!!"の文字が出力されているのを確認する事ができます。(やりました!!)
VS-Codeを使ってJavaScriptを実行するまでをやってみました。
ここまで読んでいただき有難うございました。
おまけ
JavaScriptに慣れてきた方にオススメの内容です。
p5.jsをかじる本
和柄を全集中でかじる本
よろしくお願いします。
Discussion