🌟

【イラスト付き】JavaScript学習環境セットアップ【丁寧に解説】

2024/09/02に公開

はじめに

皆さんこんにちは。

今回はJavaScriptを始めるための環境セットアップをご紹介します。

JavaScriptの環境セットアップは、他のプログラミング言語と比べて、手軽にできます。
今回は定番のブラウザとエディタのセットアップと、実行方法までご紹介します。

こんな人にオススメ

  • JavaScriptの学習をこれから始めたい
  • 学習環境セットアップで何をすればいいか分からない

初めて学習する方にも分かるように、丁寧に解説していきます。
プログラミングに慣れてきた方も、是非一度目を通していただけると嬉しいです。

😋 学習環境を一緒に準備しましょう♪

エディタの準備

まず手順をチェック
1. エディタ(VisualStudioCode)をインストール
2. 拡張機能をインストール
3. エディタの日本語化:Japanese Language Pack
4. ソースコード実行:Live Server
5. エディタ(VisualStudioCode)をインストール

まずはエディタをパソコンにインストールします。今回はVisualStudioCode(以下VSCode)というエディタをインストールします。このエディタはJavaScriptのエディタとして非常に有名なエディタです。

ダウンロードは公式サイトからご自身のOSに合ったものを選びます。インストーラーを実行し、設定は全て「はい」で既定の設定で進めてOKです。

😋 インストールは数回クリックでできます♪

拡張機能をインストール
次にVSCodeに拡張機能をいくつか導入します。エディタを日本語化するためのJapanese Language Packと、JavaScriptを実行するためのLive Serverです。

拡張機能の導入はVSCode上で行います。VSCodeの左側のアイコンの中にブロックが積み上がったようなメニューがあります。これが拡張機能(Extentions)メニューです。

手順は次の通りです
1. 拡張機能メニューをクリック
2. 検索欄で検索
3. Installボタン押下
4. Disable Uninstall ボタンが表示されたらインストール完了の合図
5. (念の為)VSCodeを一旦閉じて再度開くことで確実に適用される

😋 拡張機能は他にも沢山あるので、自分に合うものを後から追加することもできます♪

ブラウザの準備

まず手順をチェック
1. ブラウザ(Google Chrome)をインストール
2. デベロッパーツールを開いてみる

ブラウザ(Google Chrome)をインストール

ブラウザはGoogle Chrome(以下Chrome)をインストールします。Chromeは世界でも広く使われており、デベロッパーツールの使いやすさや拡張ツールの豊富さなどの特徴があります。

ダウンロードは公式サイトから可能です。インストールはダウンロードしたファイルを実行するだけでOKです。

😋 Chromeは普段使いにも便利なブラウザです♪

デベロッパーツールを開いてみる

Chromeのインストールができましたら、デベロッパーツールを開いてみましょう。デベロッパーツールはブラウザに搭載されている開発時に利用するツールです。

デベロッパーツールでは、画面の表示内容の構造やエラーメッセージなどを確認することができます。他にも多数機能があり、拡張ツールを導入することでさらに機能を増やすこともできます。

ではGoogleのトップページでデベロッパーツールを開いてみましょう。デベロッパーツールを開く一番簡単な方法はF12キーを押すだけです。次のようにメニューから選ぶ方法もあります。

【補足】メニューから開く場合の手順
1. 右上の点が3つ並んでいる部分をクリック
2. メニュー内から「その他ツール」を選択
3. 「デベロッパーツール」を選択

デベロッパーツールを開くとElementsやConsoleといったタブがあります。Elementsには画面上の構造が表示されています。Consoleにはプログラム上のエラーメッセージや警告などが表示されます。その他にも機能はありますが、最初のうちは主に使うのはこれら二つです。

もし「Always match Chrome’s Language」が表示されている場合は、クリックすることで日本語化できます。言語の設定はいつでも設定メニューから変えることができます。

😋 デベロッパーツールはJavaScriptプログラミングでは必須です♪

LiveServerでの実行方法

まず手順をチェック

  1. 作業用のフォルダを作成しVSCodeで開く
  2. .jsファイルを作成
  3. .htmlファイルを作成
  4. .htmlファイルをLiveServerで開く

LiveServerの使い方の確認として、最低限の記述で動作するソースコードを作ってみます。

作業用のフォルダを作成しVSCodeで開く
まずはどの階層でも問題ないので、適当なフォルダを作成しましょう。ここでは、デスクトップ上にsampleフォルダを作ったと仮定します。

作成したsampleフォルダをVSCodeで開きます。VSCodeを起動し、次の手順でsampleフォルダを指定してください。VSCodeの起動はインストール時に作成されたデスクトップ上のショートカットでできます。もしくはアプリの一覧などから起動してもOKです。

sampleフォルダを開く手順
1. VSCodeを起動
2. 左上のファイルメニューを選択
3. フォルダーを開くを選択
4. sampleフォルダを探して選択
5. VSCodeでSampleフォルダが読み込まれ、左側のEXPLORERにsampleフォルダが表示される
    * ファイルを信頼しますか?といった旨のダイアログが表示されたら、信頼するを選択します
    * フォルダ名が小文字の場合でも、VSCodeで開くと大文字で表示されます

😋 開くフォルダを間違えないようにしましょう♪

以降の操作は全てVSCode上で行います。sampleフォルダの下にソースコードを作っていきましょう。

.jsファイルを作成

sampleフォルダの中にJavaScriptファイルを作成し、シンプルなコードを記述します。手順は次の通りです。

JavaScriptファイル作成手順
1. 新規ファイル作成
2. 名前をapp.jsにする
3. JavaScriptのコードを記述する

新規ファイル作成
sampleフォルダにカーソルを当てると、New File… というアイコンが出るので、クリックします。もしくは余白を右クリックしてメニューからNew File… を選んでもOKです。

名前をapp.jsにする
ファイル作成時に名前の入力をします。ファイル名は何でも大丈夫ですが、メインとなるJavaScriptはapp.jsとすることが多いので、今回はapp.jsとします。

JavaScriptのコードを記述する
app.jsをエディタで編集し、JavaScriptのコードを記述します。今回は実行結果が分かりやすいように、ダイアログを表示するalertという命令を利用します。

😋 今回は1行のみですが、これも立派なJavaScriptプログラムです♪

.htmlファイルを作成

sampleフォルダの中にHTMLファイルを作ります。手順は次の通りです。

HTMLファイル作成手順
1. 新規ファイル作成
2. 名前をindex.htmlにする
3. htmlの雛形を記述する
4. scriptタグを記述する

新規ファイル作成
sampleフォルダにカーソルを当てると、New File… というアイコンが出るので、クリックします。もしくは余白を右クリックしてメニューからNew File… を選んでもOKです。

名前をindex.htmlにする
ファイル作成時に名前の入力をします。ファイル名は何でも大丈夫ですが、トップページはindex.htmlとすることが多いので、今回はindex.htmlとします。

htmlの雛形を記述する
index.htmlをエディタで編集し、テンプレートを記述します。エディタ上で「html」と入力すると「html:5」という候補が表示されるので選択します。そうすることでエディタが自動的にテンプレートを入力してくれます。

scriptタグを記述する
scriptタグで前の手順で作成したJavaScriptファイルを指定します。srcにapp.jsファイルを指定します。

😋 HTMLファイルには画面の構造を定義しますが、今回は空っぽなので何も表示されません♪

.htmlファイルをLiveServerで開く
あとは実行するだけです。手順は次の通りです。

LiveServerでの実行手順
1. LiveServerでindex.htmlを開く
2. ブラウザで動作確認

LiveServerでindex.htmlを開く
index.html を右クリックし、Open with Live Server をクリックします。もしくはVSCode右下のGo Live をクリックしてもOKです。

ブラウザで動作確認
ブラウザが起動するので、ダイアログが表示されていることを確認します。このダイアログはJavaScriptファイルのalertによって表示されています。

初回表示以降、もしコードを修正して動作確認をしたい場合は、初回実行で開いたブラウザを再度使うことができます。LiveServerが変更を検知して画面を更新してくれます。

😋 LiveServerは変更を検知してくれるので開発時に便利です♪

【おまけ】デベロッパーツールで簡易実行

ちょっとしたコードを試したい時に、1からファイルを作るのは手間なことがあります。そういった場合はデベロッパーツールのコンソールでJavaScriptコードを実行できます。

簡易実行する際に画面の構造が邪魔になることがあります。ブラウザのURL欄に「about:blank」と入力するとブランクページ(空白ページ)が表示できます。

空白ページでデベロッパーツールを開きます。コンソールタブに自由にJavaScriptを書いて試すことができます。

😋 コンソールはちょっと試したい時に便利です♪

おわりに

皆さん、お疲れ様でした。
ここまでご覧いただき、ありがとうございました。

JavaScriptの環境セットアップから実行まで確認をしていただきました。手軽さが特徴のJavaScriptを少し体験できたかと思います。ここから学習に進んでいきましょう。

😋 これからもプログラミング学習頑張りましょう♪

Discussion