JavaScript超入門コース#03 環境構築(for Windows)

こんちには。キノコードです。
このレッスンでは、JavaScript超入門コース#03 環境構築について説明をします。

▼ YouTube動画はこちらからどうぞ。

環境構築とは、プログラムを書いたり、実行できたりする環境を自分のコンピュータに整えることをいいます。
環境構築のために、Node.js、VisualStudioCodeの2つをインストールします。
1つずつ簡単に説明します。
はじめに、Node.jsです。
Node.jsはサーバー側で動くJavaScriptの環境です。
Node.jsをインストールすると、ターミナルまたは、コマンドプロンプトで実行できるようになります。
なお、JavaScriptは、macやwindosに標準でインストールされいるので、別途インストールする必要がありません。
次に、Visual Studio Codeについてです。
Visual Studio Codeとは、マイクロソフトが開発したプログラムを書くためのエディタです。
VScodeとも呼ばれています。
VScodeは、Windows、macOS、Linux、色々なOSで使うことができます。
また、Java、C言語、pythonなど有名どころプログラミング言語を書くことができます。
VScodeは、好きな開発環境の1位に選ばれている人気の開発環境です。
キノコードのレッスンでは、設定などで迷うことなく言語の学習に集中できるように、基本的にはVScodeを開発環境として使っていきます。
インストールする二つは、概要欄にURLを貼っておきます。

Node.jsのインストール方法

Node.jsのインストール方法です。
コントロールパネルのシステム画面を開きます。
システムの種類にビット数が書かれています。
このビット数と同じNode.jsをインストールしましょう。
Node.jsのサイトからダウンロードできます。
Googleで「Node.js」と検索すると、Node.jsのホームページが出てくると思います。
こちらをクリック。
「ダウンロード Windows」の下にある、ダウンロードボタンをクリック。
ダウンロードが開始します。
フォルダを開いて、インストーラをダブルクリック。
インストールを進めていきます。
チェックを入れて、「Next」をクリック。
インストールするフォルダはデフォルトのままにしておきましょう。
インストールが完了したら、Node.jsのバージョンを確認してみましょう。
「Windows」ボタンと「R」で検索窓を開き、「cmd」を入力しエンター。
コマンドプロンプトが開きます。
node –versionと入力してください。
バージョンが返ってくれば、インストール完了です。

Visual Studio Codeのインストール方法と設定

最後に、VScodeの設定を進めていきましょう
公式サイトからVScodeをダウンロードします。
Googleで「vscode」と検索すれば出てきます。
こちらが公式サイトです。
「今すぐ無料でダウンロードする」をクリック。
ここに「Windows」の「こちら(User Installer 64bit)」をクリックしてダウンロードしましょう。
(ダウンロードには数分かかります)
ダウンロードが完了したら、ファイル(VSCodeUserSetup-x64-1.42.1.exe)をダブルクリック。
「セットアップ」画面が表示されるので、「同意」を選択し、「次へ」をクリック。
VSCodeをインストールするフォルダも、デフォルトのままにしておきましょう。
「次へ」をクリック。
「次へ」をクリック。
「デスクトップ上にアイコンを作成する」以外にチェックを入れ、「次へ」をクリック。
「インストール」をクリックしてインストールを開始します。
これでセットアップは終わりです。「完了」をクリックして、VSCodeを起動します。
VScodeが立ち上がりました。
表示が英語になっているので、日本語に変えてみましょう。
一番左のバーをアクティビティバーといいます。
この四角のアイコンをExtensionsといいます。ここで、拡張機能をインストールできます。
「Japanese Language Pack for Visual Studio Code」と検索してみましょう。「Japanese」と入力すると、候補が出てくると思います。
インストールをクリック。
インストールが終わったらvscodeを再起動してみましょう。
表示が日本語になっています。