「Node.js Visual StudioでNode.jsの開発 入門・初歩」の版間の差分
(ページの作成:「== '''概要''' == Node.jsをVisual Studioで扱うことができます。 前提 *Visual Studioをインストール済。 *Node.js Windowsをインストール済。 Node.jsのインストール途中で必要なものを自動インストールするかという選択肢が表示されるので一緒にインストールします。Chocolateyもインストールされますと表示されますが、インストールしましょう。Chocolateyは…」) |
編集の要約なし |
||
16行目: | 16行目: | ||
*表示されたウィンドウで、[ワークロード]-[Web&クラウド]からNode.js開発のチェックボックスをマークします。 | *表示されたウィンドウで、[ワークロード]-[Web&クラウド]からNode.js開発のチェックボックスをマークします。 | ||
*バックグラウンドで起動しているVisual Studio本体側を閉じます。もともとのウィンドウに戻って、右下のボタンからインストールを開始します。 | *バックグラウンドで起動しているVisual Studio本体側を閉じます。もともとのウィンドウに戻って、右下のボタンからインストールを開始します。 | ||
== Hello World! == | |||
まずは、新しい言語を覚える時の最初の一歩。Hello World!と表示される処理をやってみましょう。 | |||
Node.jsのソリューションを新規作成します。HelloWorld_Stepという名前のソリューションを作ります。Server.jsのソースエディタで以下のように入力します。 | |||
<syntaxhighlight lang="javascript"> | |||
'use strict'; | |||
var http = require('http'); | |||
var url = require('url'); | |||
var port = process.env.PORT || 1337; | |||
var server = http.createServer(function (req, res) { | |||
res.write("Hello world!\n"); | |||
res.end(); | |||
}).listen(port); | |||
</syntaxhighlight> | |||
入力したら、ツールバーの[▶ウェブサーバ(Microsoft Edge)]をクリックします。わりかし時間がかかりますが、ブラウザが起動あるいは新しいページを開いて、http://localhost:1337というURIアドレスでHelloWorldが開いたと思います。 | |||
これでHelloWorldは完成です。 | |||
== Hello World! その2== | |||
Hello Worldを違う場所に表示させます。ひたつ目は、ウェブサーバのコンソール画面に出力する方法です。res.writeの前後に以下の命令を追加します。res…の前後といいましたが、命令の記述順序はどっちでもいいという意味です。 | |||
<syntaxhighlight lang="javascript"> | |||
Console.log("Hello world!\n"); | |||
res.write("Hello world!\n"); | |||
res.end(); | |||
</syntaxhighlight> | |||
Console.logでWebページへではなく、コンソールに表示できます。 | |||
== Hello World! その3== | |||
Hello Worldを違う方法で表示させます。Node.jsコンソール画面に出力する方法です。res.writeの前後に以下の命令を追加します。 | |||
<syntaxhighlight lang="javascript"> | |||
process.stdout.write("Hello world!\n"); | |||
Console.log("Hello world!\n"); | |||
res.write("Hello world!\n"); | |||
res.end(); | |||
</syntaxhighlight> | |||
標準出力というものです。コンソールに出力されます。 | |||
== Hello World! その4== | |||
Hello Worldを更に違う方法で表示させます。 | |||
<syntaxhighlight lang="javascript"> | |||
process.stdout.write("Hello world!\n"); | |||
Console.log("Hello world!\n"); | |||
res.write("Hello world!\n"); | |||
res.send("Hello world!\n"); | |||
res.end(); | |||
</syntaxhighlight> | |||
res.sendでも出力できます。writeはWebページのContent部品として書き出しますが、sendは、特にどこへ記述するか意識しないので、Header部分にもContent部分にもなりえます。 |
2022年11月2日 (水) 15:58時点における版
概要
Node.jsをVisual Studioで扱うことができます。
前提
- Visual Studioをインストール済。
- Node.js Windowsをインストール済。
Node.jsのインストール途中で必要なものを自動インストールするかという選択肢が表示されるので一緒にインストールします。Chocolateyもインストールされますと表示されますが、インストールしましょう。ChocolateyはNuGetというパッケージ管理をWindowsでも使うためのもので、NuGetはヌガーという風にも読めそうなところからChocolateyという名前が使われています。ちょっと容量が大きくなりますが、頑張って勉強するなら入れておいたほうが楽でしょう。
Visual StudioでJavascriptのデバッグをするときはNode.jsのWebサーバ機能を使いますので、Node.jsの勉強をしたいわけではないときも、インストールすることになるでしょう。以下のような手順になります。
- [ツール]-[ツールと機能を取得]
- 表示されたウィンドウで、[ワークロード]-[Web&クラウド]からNode.js開発のチェックボックスをマークします。
- バックグラウンドで起動しているVisual Studio本体側を閉じます。もともとのウィンドウに戻って、右下のボタンからインストールを開始します。
Hello World!
まずは、新しい言語を覚える時の最初の一歩。Hello World!と表示される処理をやってみましょう。
Node.jsのソリューションを新規作成します。HelloWorld_Stepという名前のソリューションを作ります。Server.jsのソースエディタで以下のように入力します。
'use strict';
var http = require('http');
var url = require('url');
var port = process.env.PORT || 1337;
var server = http.createServer(function (req, res) {
res.write("Hello world!\n");
res.end();
}).listen(port);
入力したら、ツールバーの[▶ウェブサーバ(Microsoft Edge)]をクリックします。わりかし時間がかかりますが、ブラウザが起動あるいは新しいページを開いて、http://localhost:1337というURIアドレスでHelloWorldが開いたと思います。
これでHelloWorldは完成です。
Hello World! その2
Hello Worldを違う場所に表示させます。ひたつ目は、ウェブサーバのコンソール画面に出力する方法です。res.writeの前後に以下の命令を追加します。res…の前後といいましたが、命令の記述順序はどっちでもいいという意味です。
Console.log("Hello world!\n");
res.write("Hello world!\n");
res.end();
Console.logでWebページへではなく、コンソールに表示できます。
Hello World! その3
Hello Worldを違う方法で表示させます。Node.jsコンソール画面に出力する方法です。res.writeの前後に以下の命令を追加します。
process.stdout.write("Hello world!\n");
Console.log("Hello world!\n");
res.write("Hello world!\n");
res.end();
標準出力というものです。コンソールに出力されます。
Hello World! その4
Hello Worldを更に違う方法で表示させます。
process.stdout.write("Hello world!\n");
Console.log("Hello world!\n");
res.write("Hello world!\n");
res.send("Hello world!\n");
res.end();
res.sendでも出力できます。writeはWebページのContent部品として書き出しますが、sendは、特にどこへ記述するか意識しないので、Header部分にもContent部分にもなりえます。