はじめに
今回は、JavaScriptの勉強のためにVSCodeでJavaScriptを使用するための環境構築について記載していきたいと思います。
JavaScriptとは
JavaScriptは、Webブラウザ上で動作するプログラミング言語であり、動的なWebページを作成するために広く使用されています。もともとはブラウザ内で動作するスクリプト言語として開発されましたが、現在ではNode.jsなどの技術によりサーバーサイド開発にも利用されています。
VSCodeのインストール
まずは、VSCodeのダウンロード/インストールを実施していきます。
ダウンロード
サイトから自身のPCのOSにあった、インストーラーをダウンロードします。
【ダウンロードサイト】
Visual Studio Code – Code Editing. Redefined
インストール
ダウンロードしたインストーラーを実行します。インストール操作は、インストーラーの指示に従って実施します。
インストール画面
完了画面
VSCodeの設定
設定を追加していきます。
Japanese Language Pack for Visual Studio Codeをインストール
日本語化パックの設定。
「Ctrl + Shift + x」キー、または左タブの拡張機能から「日本語」と検索して「Japanese Language Pack for Visual Studio Code」をインストールする。
JavaScriptを書いてみる
プロジェクトフォルダの作成
プロジェクト用のフォルダを用意していきます。
EXAMPLE
│ index.html
│
└─js
main.js
ソースを書く
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>example</title>
<script src="main.js" defer></script>
</head>
<body>
<h1 id="title">こんにちは</h1>
<button id="btn">クリック</button>
</body>
</html>
main.js
alert('test')
document.getElementById("btn").addEventListener("click", function() {
document.getElementById("title").textContent = "ボタンがクリックされました！";
});
実行
F5キーでデバック実行してみます。画面が表示しボタンクリックでメッセージが変更されたら成功です。
ブラウザで試す
開発者ツールを使用することで、ブラウザのみでJavaScriptを試すこともできるのでこちらの記事も参考にしてみてください。
【JavaScript】開発者ツールでコードの実行やデバッグを実施する方法 – SEもりのLog JavaScript
最後に
以上、ログになります。
これからも継続していきましょう！！
コメント