このチュートリアルを始めるためには Node.js が必要です。
ご使用の前に、Node.js をインストールしておいてください。
Hello World
最も簡単なNode.jsアプリケーションの “Hello World” を作成しましょう。
“hello”という空のフォルダを作成し、そこに移動して VS Code を開きます:
mkdir hello cd hello code .
ファイル・エクスプローラのツールバーで、[新規ファイル]ボタンを押します。
.jsファイル拡張子を使用することにより、VS Code はこのファイルをJavaScriptとして解釈し、JavaScript言語サービスでコンテンツを評価します。
app.jsに単純な文字列変数を作成し、その文字列の内容をコンソールに送信します。
var msg = 'Hello World'; console.log(msg);
consoleをタイプしたときに注意してください。 console オブジェクトのインテリセンスが自動的に表示されます。、VS Code は、JavaScriptコードを編集するときには自動的にDOMのインテリセンスを表示します。
また、VS Codeは、msg が ‘Hello World’ で初期化された文字列であることも認識しています。
msg. と入力すると、インテリセンスは msg に利用できるすべての文字列関数を表示します。
インテリセンスを確認したら、ソースコードから余分な変更を元に戻してファイルを保存してください(Ctrl+S)。
Hello World の実行
Node.jsからapp.jsを実行するのは簡単で、ターミナルから、次のコマンドを入力するだけです。
node app.js
“Hello World” が端末に出力され、Node.js に戻るのが確認できます。
統合端末(Integrated Terminal)
VS Codeには、シェル・コマンド実行用の統合端末(Integrated Terminal)があります。そこから Node.js を直接実行できますので、VS Code の実行にコマンドラインツールへ切換える必要がなくなります。
View > Integrated Terminal (Ctrl+` )で統合端末を開き、そこで node app.js を実行することができます:
このチュートリアルでは、コマンドラインツールの実行には、外部端末/VS Code 統合端末のいずれも使用できます。
Hello Worldのデバッグ
冒頭で述べたように、VS CodeにはNode.jsアプリケーション用のデバッガが付属しています。簡単なHello Worldアプリケーションのデバッグをしてみましょう。
app.jsにブレークポイントを設定するには、最初の行にエディタのカーソルを置き、F9キーを押すか、行番号の横にあるエディタの左のガターをクリックすると、ガターに赤い円が表示されます。
先ずこの簡単なワークスペース用にデバッガを設定する必要がありますので、サイドバーからデバッグビューを選択します。
デバッグビューの上部にある歯車の設定アイコンをクリックして、デフォルトのlaunch.json設定ファイルを作成し、デバッグ環境にはNode.jsを選択します。この設定ファイルでは、アプリケーションの起動方法や、どのような引数を渡すのか、作業ディレクトリなどを指定できます。
新しいlaunch.jsonファイルは、ワークスペースのルートにあるVS Code 固有の.vscodeフォルダに作成されます。
デフォルトのNode.js起動プログラム構成を作成したら、”Hello World” を起動してデバッグをするために、デバッグツールバーの緑色の矢印をクリックするか、F5キーを押します。ブレークポイントにヒットすると、簡単なアプリケーションを表示したり、ステップ実行したりすることができます。VS Code がデバッグモードになっていることを示すために、ステータスバーがオレンジ色になると共に、DEBUG CONSOLE が表示されていることに注意してください。
「Hello World」でVS Code を見たところで、次のセクションでは、VS Code をフルスタックNode.js Web Appで使用する方法を示します。