この記事の執筆・監修

テクノロジーアンドデザインカンパニー株式会社のCEO。
日本最大級のプログラミング教育のYouTubeチャンネル「キノコード」や、プログラミング学習サービス「キノクエスト」を運営。
著書「あなたの仕事が一瞬で片付くPythonによる自動化仕事術」や、雑誌「日経ソフトウエア」や「シェルスクリプトマガジン」への寄稿など実績多数。

環境構築に必要なもの

環境構築とは、プログラムを書いたり、実行できたりする環境を自分のコンピュータに整えることをいいます。
環境構築のために、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を再起動してみましょう。
表示が日本語になっています。

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を再起動してみましょう。
表示が日本語になっています。