Visual Studio Codeで開発をはじめよう

ここでは、ダウンロードした Visual Studio Code(以下VSCodeとも略記します)を使ってスクリプトを書き、VSCode内のターミナルからそのスクリプトを実行するまでを行います。
早速「Node.js」を取り扱っていきますが、あまり深く考えず、手を動かして開発手順を覚えていきましょう。

1. Visual Studio Code の使い方を覚えよう

VSCodeは、Microsoft開発の優れたソースコードエディタです。
無料でオープンソース、マルチプラットフォーム(Windows, macOS, 各種Linux)で動作します。

  • マルチカラム画面で、エディタ・シェル操作・ファイルエクスプローラが統合されている
  • JavaScript と Node.js の効率的な操作性
  • Gitリポジトリの操作に対応
  • シンタックスハイライト
  • 拡張機能を追加することで、言語サポートや環境を柔軟にカスタマイズ可能

1-1. 作業の始め方

image

01-01-helloworld というフォルダ名で新規フォルダを作成しましょう。
場所はどこでもよいです。(デスクトップなど)
フォルダ名は必ず英語で作成してください。

1-2. Visual Studio Code を開きます

VSCodeのアイコンをダブルクリックして開きます。

image

メニュー → New Window(新しいウィンドウ)で新しくウィンドウを開きます。

image

つづいて、

image

メニュー → Open Folder(開く…)をクリックして、先ほどのフォルダを選択します。

image

これで 01-01-helloworld フォルダの中で作業を開始できます。

image

1-3. 左メニューについて

image

  1. エクスプローラ:現在のフォルダの中身を表示します。
  2. ファイル検索(基本的に使用しません)
  3. Git管理:フォルダがGitリポジトリの場合、差分確認やブランチ切替などができます。
  4. Run & Debug(基本的に使用しません)
  5. 拡張機能検索:拡張機能を検索して追加することができます。

image

この時点で、このようにエクスプローラが表示されていない場合はクリックして表示させましょう。

1-4. ターミナルを使えるようにする

image

メニュー → New Terminal(ターミナル)をクリックします。

image

下部にターミナル(Windowsの場合PowerShell)が開きます。

1-5. ファイルの作成

image

New Fileをクリックします。

image

ファイル名を入力できるようになります。

image

app.js と入力します。

image

エディタに app.js タブが表示されて編集できるようになります。

1-6. ファイルに入力して保存

以下のソースコードを app.js に書いてください。

console.log('Hello ProtoOut!');

image

タブが ● になっているのは、まだ保存されていないというマークです。

image

メニュー → Save(保存)を押してファイルを保存します。
WindowsはCtrl+S、Macは⌘+Sのショートカットキーで、こまめに保存することを心がけましょう。

image

× マークになると保存済みとなり、クリックすることでファイルを閉じることができます。

1-7. 自動保存を有効化

有効にしておくと、ファイルを自動で保存してくれるようになります。
チェックマークがついていれば自動保存が有効になっています。

Image from Gyazo

2. ターミナルを使ってみよう

image

こちらの赤枠のエリア「ターミナル」で、コマンド入力を実際に行っていきます。
これ以降、皆さんのPCの環境によっては、このVSCodeのターミナルでエラーが発生する場合があります。その際は指示をいたしますので、講師が発言中でも必ず報告いただくようお願いいたします。

2-1. ターミナルの役割

Image from Gyazo

コンピュータと人間とのあいだで情報をやりとりするには、まず「インターフェース」というものが必要になります。図形やボタンなどできれいにわかりやすく作ってあるインターフェースは「GUI」といい、逆に文字だけでシンプルに構成されているインターフェースは「CUI」と言われます。

「ターミナル」は、CUIの1つです。
どのようなことをしたいのか? を示す「コマンド文字列」を入力して送信することで、コンピュータに要求を送り、操作することができます。要求に対する答えも、ターミナル上に文字として表示することで人間側に伝えます。

ターミナルはあくまで「インターフェース」つまり操作画面を提供するアプリケーションのことであり、中身で実際に文字を受け取ったり表示させたりしているのは「シェル」という、また別のアプリケーションです。シェルは人間の打ったコマンドを理解し、OSの中枢に直接アクセスすることができる、いわばコンピュータと人間のあいだの仲介者ともいえるアプリケーションです。

シェルは、Windowsの場合は「PowerShell」、macOSの場合は「bash」や「zsh」といったものがよく利用されます。とはいえ1つのアプリケーションですので、もちろん自分で新たにインストールすることも可能です。

2-1-1. 補足: WindowsのCUI

2-2. コマンド実行してみよう

ターミナルに実際に基本的なコマンドを打ち込み、結果を表示してみます。

2-2-1. pwd

pwd コマンドは positioning working directory の略で、現在作業しているディレクトリのフルパス(ファイル・フォルダの位置)を出力するコマンドです。

pwd

というコマンドを実行すると

C:\Users\****\

といったような実行結果が返ってきます。これは Windows の例です。
ここは皆さんの実行しているディレクトリ(フォルダ)によって変わります。

2-2-2. ls

ls コマンドはディレクトリの内容を表示するコマンドです。
主に、特定のディレクトリにあるファイル一覧を知りたいときに使います。

ls

というコマンドを実行すると

-a----       2020/04/27     21:26             29 app.js

といったような実行結果が返ってきます。これは Windows の例です。

2-2-3. cd

cd コマンドは change directory の略で、現在の作業ディレクトリを変更するコマンドです。

「ディレクトリ」と「フォルダ」は、文脈によって呼び方が変わる場合がありますが、基本的には同じ意味です。
CUI環境やファイルシステムに関する話題では「ディレクトリ」、それ以外のGUI環境では「フォルダ」と呼ばれることが多いです。

image

エクスプローラから新しいディレクトリ newfolder を作ります。

image

フォルダが作成されたか確認します。

pwd

で、 01-01-helloworld の一番上の階層にいることを確認したうえで、

cd newfolder

というコマンドを実行すると、01-01-helloworld から 01-01-helloworld/newfolder に移動します。
pwd コマンドをもう一度実行し、確かめてみましょう。

確認ができたら、

cd ..

というコマンドを実行してみましょう。.. というのは、一つ上のディレクトリ階層のことを示します。もう一度pwdを実行し、もとのディレクトリに戻っていることを確認しましょう。

2-3. nodeコマンドでapp.jsを実行してみよう

2-3-1. 先ほどの app.js の確認

01-01-helloworld の app.js をもう一度クリックして内容を見てみましょう。

image

このファイルは、実体としては「テキストファイル」ですが、中身は「Node.jsで実行可能なスクリプトファイル」となっており、それを示すための「.js」という拡張子がファイル名につけられています。

console.log('Hello ProtoOut!');

2-3-2. 実行してみる

ターミナルで「app.jsに記述された内容をNode.jsで実行する」コマンドを入力、Enterを押します。

node app.js

Image from Gyazo

コマンドはこのような形式になっています。
Node.js以外でも、アプリケーションによりますが、ターミナルで何かしらを実行するときはこのような形式になっていることが多いですので、覚えておいてください。

「node」は、Node.jsにおいては固定ですが、「app.js」は、今後はみなさんがご自身で作成したファイルの名前と置き換えて使っていくようにしてください。現在のディレクトリ位置との関係も忘れずに。

image

このように Hello ProtoOut! と表示されればOKです!