こんちには。キノコードです。
このレッスンでは、JavaScript超入門コース#03 環境構築について説明をします。
▼ YouTube動画はこちらからどうぞ。
この記事の執筆・監修
テクノロジーアンドデザインカンパニー株式会社のCEO。
日本最大級のプログラミング教育のYouTubeチャンネル「キノコード」や、プログラミング学習サービス「キノクエスト」を運営。
著書「あなたの仕事が一瞬で片付くPythonによる自動化仕事術」や、雑誌「日経ソフトウエア」や「シェルスクリプトマガジン」への寄稿など実績多数。
環境構築に必要なもの
環境構築とは、プログラムを書いたり、実行できたりする環境を自分のコンピュータに整えることをいいます。
環境構築のために、Node.js、VisualStudioCodeの2つをインストールします。
1つずつ簡単に説明します。
まず、Visual Studio Codeについてです。
Visual Studio Codeとは、マイクロソフトが開発したプログラムを書くためのエディタです。
VScodeとも呼ばれています。
VScodeは、Windows、macOS、Linux、色々なOSで使うことができます。
また、Java、C言語、pythonなど有名どころプログラミング言語を書くことができます。
VScodeは、好きな開発環境の1位に選ばれている人気の開発環境です。
キノコードのレッスンでは、設定などで迷うことなく言語の学習に集中できるように、基本的にはVScodeを開発環境として使っていきます。
次に、Node.jsです。
Node.jsはサーバー側で動くJavaScriptの環境です。
Node.jsをインストールすると、ターミナルまたは、コマンドプロンプトで実行できるようになります。
なお、JavaScriptは、macやwindosに標準でインストールされいるので、別途インストールする必要がありません。
インストールする2つは、概要欄にURLを貼っておきます。
Visual Studio Codeの設定方法
VScodeのインストールと設定を進めていきましょう
公式サイトからVScodeをダウンロードします。
Googleで「vscode」と検索すれば出てきます。
こちらが公式サイトです。
ここに「Download for Mac」がありますのでクリックしてダウンロードしましょう。
（ダウンロードには数分かかります）
ダウンロードが完了したら、zipファイルを解凍。
解凍すると「Visual Studio Code」というファイルができます。
これをアプリケーションフォルダに追加。あわせて、Dockに追加しておきましょう。
それではVScodeを開きます。
このような表示がでるので、「開く」をクリック。
そうすると、VScodeが立ち上がります。
ブラウザが起動して、公式ドキュメントが開かれます。こちらは閉じておきます。
表示が英語になっているので、日本語に変えてみましょう。
左のバーをアクティビティバーといいます。
これはExtensionといいます。ここで、拡張機能をインストールができます。
「Japanese Language Pack for Visual Studio Code」をインストールしましょう。「Japanese」と入力すると、候補が出てくると思います
クリックをして、インストールをクリック。
インストールが終わったらvscodeを再起動してみましょう。
表示が日本語になっています。
これでVisual Studio Codeの設定が完了です。
Node.jsのインストール方法
次に、Node.jsのインストール方法です。
Node.jsのサイトからダウンロードできます。
GoogleでNode.jsと検索すると、Node.jsのホームページが出てくると思います。
osにあわせたダウンロード画面が出てくるので、LTS、推奨版をダウンロードします。
ダウンロードしたファイルをクリックして、インストールを進めていきます。
インストールが完了したら、Node.jsのバージョンを確認してみましょう。
右上の検索からターミナルと入力。
ターミナルを開きます。
node --versionと入力してください。
バージョンが返ってくれば、インストール完了です。
KinoCode チャンネル
