開発環境の準備①:ソフトウェアのインストール

Loading

メモ帳さえあれば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)を選んでボタンを押下してください。

下矢印のボタンでOSの選択をし、「Download」ボタンを押下でダウンロードが開始される

何事もなければ、下記のようなインストーラーがダウンロードされます。

VSCodeのインストーラー

インストール

インストーラーをダブルクリックすると起動すると下記のような使用許諾契約書への同意画面が表示されます。
ここでは「同意する」を選択し、「次へ」ボタンを押下してください。

「同意する」を押し、「次へ」を押下

次にインストールフォルダの選択を促されますので、インストールしたいフォルダを選んで、「次へ」ボタンを押下してください。

インストールフォルダを選択して「次へ」を押下

次にスタートメニューにショートカットを作成するか質問されるので、作成したい場合はフォルダ名を指定、作成したくない場合は左下のチェックボックスにチェックして、「次へ」ボタンを押下してください。

ショートカットを作成するか指定して「次へ」を押下

次にインストールオプションが表示されるため、自分の好みの設定を指定して「次へ」ボタンを押下してください。
初めてインストールするのであれば、下2つは必ず指定してください。

ファイルコンテキストメニュー、もしくはディレクトリコンテキストメニューとは、ファイルやフォルダを右クリックしたときに出るメニューのことです。
右クリックメニューから「VSCodeで開く」操作ができて便利ですので、指定することをおすすめします。

好みの設定を指定して「次へ」を押下

最後に確認画面が出ますので、設定内容を確認の上、「インストール」ボタンを押下してください。
もし変更したい設定があれば、「戻る」ボタンで前の画面にもどり設定を修正してください。

確認の上インストール実行

下記のような画面が表示されたらインストール完了です。

インストール完了

まとめ

以上で必要なソフトウェアのインストールは完了です。

次の記事ではVSCodeのカスタマイズとコードの配置フォルダを設定していきます。

脚注

  1. 統合開発環境。プログラミングで利用するテキストエディタ。俗にコードエディタとも言う。