【イラスト付き】JavaScript学習環境セットアップ【丁寧に解説】
はじめに
皆さんこんにちは。
今回は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. 右上の点が３つ並んでいる部分をクリック
2. メニュー内から「その他ツール」を選択
3. 「デベロッパーツール」を選択
デベロッパーツールを開くとElementsやConsoleといったタブがあります。Elementsには画面上の構造が表示されています。Consoleにはプログラム上のエラーメッセージや警告などが表示されます。その他にも機能はありますが、最初のうちは主に使うのはこれら二つです。
もし「Always match Chrome’s Language」が表示されている場合は、クリックすることで日本語化できます。言語の設定はいつでも設定メニューから変えることができます。
😋 デベロッパーツールはJavaScriptプログラミングでは必須です♪
LiveServerでの実行方法
まず手順をチェック
- 作業用のフォルダを作成しVSCodeで開く
- .jsファイルを作成
- .htmlファイルを作成
- .htmlファイルをLiveServerで開く
LiveServerの使い方の確認として、最低限の記述で動作するソースコードを作ってみます。
作業用のフォルダを作成しVSCodeで開く
まずはどの階層でも問題ないので、適当なフォルダを作成しましょう。ここでは、デスクトップ上にsampleフォルダを作ったと仮定します。
作成したsampleフォルダをVSCodeで開きます。VSCodeを起動し、次の手順でsampleフォルダを指定してください。VSCodeの起動はインストール時に作成されたデスクトップ上のショートカットでできます。もしくはアプリの一覧などから起動してもOKです。
1. VSCodeを起動
2. 左上のファイルメニューを選択
3. フォルダーを開くを選択
4. sampleフォルダを探して選択
5. VSCodeでSampleフォルダが読み込まれ、左側のEXPLORERにsampleフォルダが表示される
* ファイルを信頼しますか？といった旨のダイアログが表示されたら、信頼するを選択します
* フォルダ名が小文字の場合でも、VSCodeで開くと大文字で表示されます
😋 開くフォルダを間違えないようにしましょう♪
以降の操作は全てVSCode上で行います。sampleフォルダの下にソースコードを作っていきましょう。
.jsファイルを作成
sampleフォルダの中に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ファイルを作ります。手順は次の通りです。
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で開く
あとは実行するだけです。手順は次の通りです。
1. LiveServerでindex.htmlを開く
2. ブラウザで動作確認
LiveServerでindex.htmlを開く
index.html を右クリックし、Open with Live Server をクリックします。もしくはVSCode右下のGo Live をクリックしてもOKです。
ブラウザで動作確認
ブラウザが起動するので、ダイアログが表示されていることを確認します。このダイアログはJavaScriptファイルのalertによって表示されています。
初回表示以降、もしコードを修正して動作確認をしたい場合は、初回実行で開いたブラウザを再度使うことができます。LiveServerが変更を検知して画面を更新してくれます。
😋 LiveServerは変更を検知してくれるので開発時に便利です♪
【おまけ】デベロッパーツールで簡易実行
ちょっとしたコードを試したい時に、１からファイルを作るのは手間なことがあります。そういった場合はデベロッパーツールのコンソールでJavaScriptコードを実行できます。
簡易実行する際に画面の構造が邪魔になることがあります。ブラウザのURL欄に「about:blank」と入力するとブランクページ（空白ページ）が表示できます。
空白ページでデベロッパーツールを開きます。コンソールタブに自由にJavaScriptを書いて試すことができます。
😋 コンソールはちょっと試したい時に便利です♪
おわりに
皆さん、お疲れ様でした。
ここまでご覧いただき、ありがとうございました。
JavaScriptの環境セットアップから実行まで確認をしていただきました。手軽さが特徴のJavaScriptを少し体験できたかと思います。ここから学習に進んでいきましょう。
😋 これからもプログラミング学習頑張りましょう♪
Discussion