メモ帳さえあればJavaScriptのプログラミングはできますが、必ずしも快適に作業できるわけではありません。
以下では、本サイト推奨の開発環境について説明します。
JavaScriptにかぎらず、プログラミングをするにはいくつかのソフトウェアを利用することが一般的です。
本サイトでJavaScriptの解説に利用するソフトウェアは以下のとおりです。
- ブラウザ:Google Chrome
- IDE1:Visual Studio Code(以下、VSCodeと略記)
以下、各ソフトウェアのインストール手順について説明します。
目次
Google Chromeのインストール
Google Chrome(グーグル クロム)はGoogle社が作成・頒布しているブラウザです。
JavaScript、あるいは合わせてHTML/CSSの学習をしている方はできるだけこのブラウザを使った方がよいです。
なぜかというと、Chromeで利用できる「デベロッパーツール」というのが、プログラミングをする上で非常に便利だからです。
以下のサイトに使い道や利用方法が書かれているので、こちらを参考にしてください。
Google Chromeは下記のリンクからダウンロードできます。
Google Chrome公式ページ:https://www.google.com/intl/ja_jp/chrome/
Chromeのインストール自体は簡単なので、ここではインストール手順の紹介は省略させていただきます。
VSCodeのインストール手順
VSCodeは動作が軽快で、様々なプログラミング言語に対応できる優秀なIDEです。
本サイトではJavaScriptの学習にVSCodeを利用しますので、以下、PCへのインストール手順を説明いたします。
ダウンロード
VSCodeは下記のサイトからダウンロードができます。
Visual Studio Code公式ページ:https://code.visualstudio.com/
サイトにアクセスすると中央左側にダウンロードボタンがありますので、OS(Windows, Mac, Linux)を選んでボタンを押下してください。
![](https://codes101.tech/wp-content/uploads/2022/10/vscode_download1.jpg)
何事もなければ、下記のようなインストーラーがダウンロードされます。
![](https://codes101.tech/wp-content/uploads/2022/10/vscode_download2.png)
インストール
インストーラーをダブルクリックすると起動すると下記のような使用許諾契約書への同意画面が表示されます。
ここでは「同意する」を選択し、「次へ」ボタンを押下してください。
![](https://codes101.tech/wp-content/uploads/2022/10/vscode_download3.png)
次にインストールフォルダの選択を促されますので、インストールしたいフォルダを選んで、「次へ」ボタンを押下してください。
![](https://codes101.tech/wp-content/uploads/2022/10/vscode_download4.png)
次にスタートメニューにショートカットを作成するか質問されるので、作成したい場合はフォルダ名を指定、作成したくない場合は左下のチェックボックスにチェックして、「次へ」ボタンを押下してください。
![](https://codes101.tech/wp-content/uploads/2022/10/vscode_download5.png)
次にインストールオプションが表示されるため、自分の好みの設定を指定して「次へ」ボタンを押下してください。
初めてインストールするのであれば、下2つは必ず指定してください。
ファイルコンテキストメニュー、もしくはディレクトリコンテキストメニューとは、ファイルやフォルダを右クリックしたときに出るメニューのことです。
右クリックメニューから「VSCodeで開く」操作ができて便利ですので、指定することをおすすめします。
![](https://codes101.tech/wp-content/uploads/2022/10/vscode_download6.png)
最後に確認画面が出ますので、設定内容を確認の上、「インストール」ボタンを押下してください。
もし変更したい設定があれば、「戻る」ボタンで前の画面にもどり設定を修正してください。
![](https://codes101.tech/wp-content/uploads/2022/10/vscode_download7.png)
下記のような画面が表示されたらインストール完了です。
![](https://codes101.tech/wp-content/uploads/2022/10/vscode_download8.png)
まとめ
以上で必要なソフトウェアのインストールは完了です。
次の記事ではVSCodeのカスタマイズとコードの配置フォルダを設定していきます。