large_eycatch-gemini-vs-cloud.png

medium_eycatch-gemini-vs-cloud.png

small_eycatch-gemini-vs-cloud.png

thumbnail_eycatch-gemini-vs-cloud.png

eycatch-gemini-vs-cloud.png

画像処理系AIの Gemini 2.5 Flash Image と Cloud Vision API を比べてみる（Next.jsの実装例付き）

## はじめに

Node.jsは、Web開発や自動化スクリプト、APIサーバー構築など、幅広い分野で利用されているJavaScript実行環境です。<br>
本記事では、これからNode.jsを学ぶ方に向けて、基本的な使い方と環境構築の手順を解説します。

## 1. Node.jsとは？

* JavaScriptをサーバーサイドで実行できる環境
* Google ChromeのV8エンジンをベースに開発
* 非同期処理（イベント駆動型）に強く、高速な動作が可能
* Webアプリ、APIサーバー、CLIツール、IoT開発など幅広く利用されている

**フロントエンド開発者が、そのままJavaScriptを活かしてサーバーサイド開発できるのが最大のメリットです。**

**特徴：**
- **非同期処理が得意**（高速なI/O）
- **npm** という豊富なパッケージ管理システム
- クロスプラットフォーム対応（Windows / macOS / Linux）

## 2. Node.jsのインストール

Node.js をインストールする前に、まず nvm を使うかどうか を決めましょう。

### 2.1 先に考える：nvmを使うかどうか

* nvm を使う場合<br>
先に nvm をインストールしてから、nvm 経由で Node.js を入れる

* nvm を使わない場合<br>
公式サイトから直接 Node.js をインストール

**これにより、複数バージョンを切り替えたい場合も迷わず手順を進められます。**

### 2.2 公式サイトからダウンロード（nvm を使わない場合）
1. [Node.js公式サイト](https://nodejs.org/) にアクセス
2. **LTS（安定版）** を選んでダウンロード
3. インストーラーの指示に従ってインストール

#### 2.2.1 バージョン確認
インストール後、ターミナルで以下を実行してバージョンを確認します。

```
node -v   # Node.js のバージョンを確認
npm -v    # パッケージ管理ツール npm のバージョンを確認
```
👉 正しくバージョンが表示されればインストール成功です。

### 2.3 Node Version Manager (nvm)を使う方法

プロジェクトごとに異なる Node.js バージョンを使い分けたい場合に便利なのが nvm（Node Version Manager）です。<br>
nvm を使えば、複数バージョンを簡単に切り替えることができます。

#### 2.3.1 nvm の使い方（macOS / Linux の例）

```
# nvm のインストール
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# Node.js LTS をインストール
nvm install --lts

# バージョン確認
node -v
npm -v
```
Windows の場合は [nvm-windows](https://github.com/coreybutler/nvm-windows/releases)を利用します。

## 3. 最初のプログラムを作ってみよう

1. 任意のフォルダを作成
2. app.js を作成して以下を記述

```js
console.log("Hello, Node.js!");
```
そのフォルダで、次のコマンドを実行します。

```
node app.js
```
👉 ターミナルに Hello, Node.js! と表示されれば成功です。

## まとめ

本記事では、Node.jsの基本と環境構築について解説しました。

* Node.jsは JavaScriptをサーバーサイドで実行できる環境
* 初心者はまず 公式サイトからLTS版をインストール すればOK
* 実務や学習を進めるときは nvm を使うと便利
* node app.js を実行して「Hello, Node.js!」が表示されればスタート成功

次回は、npm の使い方と簡単なサーバー構築について解説します。


Node.js入門 ― 基本の使い方と環境構築

medium_スクリーンショット-2022-05-13-10.33.24-768x321.png

small_スクリーンショット-2022-05-13-10.33.24-768x321.png

thumbnail_スクリーンショット-2022-05-13-10.33.24-768x321.png

スクリーンショット-2022-05-13-10.33.24-768x321.png

GraphQL Code GeneratorでGraphQlのschemaからTypescriptの型定義を生成する方法

YeomanでMEAN環境を整える

ルート相対パスを使ったHTMLの制作・確認をnode.jsのローカルな簡易サーバで効率的にする方法

<p>サーバーサイドのプログラムとして数年前から注目されている<strong>Node.js</strong>ですが、</p>
<p>私は、サーバーサイドで動くJavaScriptで、非同期の処理が得意というくらいの認識しかなかったので、</p>
<p>さすがにまずいと思い、どんなものなのか調べてみました。</p>
<p>&nbsp;</p>
<p>今回は同じくサーバーサイドで動くプログラミング言語であるPHPと比較する形でまとめてみました。</p>
<p>(私はまだ理解が浅いので、間違ったことを書いてしまっている可能性がありますので、ざっくりと参考までに)</p>
<p>&nbsp;</p>
<h2>1. Node.jsのJavaScriptとPHPは基本的に役割が異なる</h2>
<p>正直私はNode.jsはPHPを動かすためのApacheのようにJSファイルをサーバー上に置くことで、</p>
<p>それを実行してくれるようにするものだと思っていました。</p>
<p>実際はそうではなく、Node.jsはサーバーサイドでJavaScriptを実行できるようにしてくれるものです。</p>
<p>これは、JSファイルをサーバー上の特定のディレクトリに配置すると自動的に実行できるようにするという意味ではありません。</p>
<p>実際には、以下のようにコマンドでNode.jsにJSファイルを実行するように指示することで、JavaScriptは実行されます。</p>

		<div id="crayon-64954015892c0603645872" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">Linux command</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
$ node example.js</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64954015892c0603645872-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64954015892c0603645872-1"><span class="crayon-sy">$</span><span class="crayon-h"> </span><span class="crayon-e">node </span><span class="crayon-i">example</span><span class="crayon-sy">.</span><span class="crayon-i">js</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>さらに、これを実行するとPHPのようにWebページにテキストが表示されるというものでもなく、</p>
<p>Webページにテキストを表示は、以下のようにJSファイル内でHTTPモジュールを呼び出すことで可能になります。</p>

		<div id="crayon-64954015892c4036206896" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">Node.js JavaScript</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
var http = require('http'); //httpモジュールの呼び出し
 
http.createServer(function (request, response) {
    response.writeHead(200, {'Content-Type': 'text/plain'}); //ヘッダー情報の書き込み
    response.end('Hello World\n'); //テキストの書き込み
}).listen(8000); //ポートの指定</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64954015892c4036206896-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015892c4036206896-2">2</div><div class="crayon-num" data-line="crayon-64954015892c4036206896-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015892c4036206896-4">4</div><div class="crayon-num" data-line="crayon-64954015892c4036206896-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64954015892c4036206896-6">6</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64954015892c4036206896-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">http</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-e">require</span><span class="crayon-sy">(</span><span class="crayon-s">'http'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//httpモジュールの呼び出し</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015892c4036206896-2"><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-64954015892c4036206896-3"><span class="crayon-i">http</span><span class="crayon-sy">.</span><span class="crayon-e">createServer</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-i">request</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">response</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015892c4036206896-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">response</span><span class="crayon-sy">.</span><span class="crayon-e">writeHead</span><span class="crayon-sy">(</span><span class="crayon-cn">200</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-s">'Content-Type'</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">'text/plain'</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//ヘッダー情報の書き込み</span></div><div class="crayon-line" id="crayon-64954015892c4036206896-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">response</span><span class="crayon-sy">.</span><span class="crayon-st">end</span><span class="crayon-sy">(</span><span class="crayon-s">'Hello World\n'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//テキストの書き込み</span></div><div class="crayon-line crayon-striped-line" id="crayon-64954015892c4036206896-6"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">listen</span><span class="crayon-sy">(</span><span class="crayon-cn">8000</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//ポートの指定</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>このコードでは　「Hello World」と書かれたテキストファイルが8000番ポートに出力されます。</p>
<p>&nbsp;</p>
<p>ここまで見ていただいて分かる通り、Node.jsにおけるJavaScriptはPHPとは根本的な役割が違います。</p>
<p><a href="/uploads-archive/2015/07/node-js-in-web1.png"><img decoding="async" loading="lazy" class="alignnone wp-image-7711" src="/uploads-archive/2015/07/node-js-in-web1.png" alt="node-js-in-web" width="656" height="465" srcset="/uploads-archive/2015/07/node-js-in-web1.png 960w, /uploads-archive/2015/07/node-js-in-web1-300x213.png 300w, /uploads-archive/2015/07/node-js-in-web1-228x162.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>PHPはApacheなどのHTTPサーバ上でHTMLを表示したりデータベースを操作したりするWebアプリを作成することが役割となりますが、</p>
<p>Node.jsでのJavaScriptでは、HTTPサーバやファイルサーバなどを作成したりするなど、サーバのより根幹的なアプリを作成することも役割となります。</p>
<p>&nbsp;</p>
<h2>2. PHP(Apache)は同期処理×マルチスレッド、Node.jsは非同期処理×シングルスレッド</h2>
<p>PHPでは何かプログラムを実行する場合、</p>
<p>その処理が終わるまでは他の処理が始まらない同期処理という方法でプログラムを実行しています。</p>
<p>この方法では、同時に一つの処理しか行うことができないため、</p>
<p>同時に２つ以上の処理が必要な場合、</p>
<p>例えば複数のユーザーからアクセスがあった場合などには、</p>
<p>処理する場所を複数作ることで、平行して処理を行っています。</p>
<p>この複数に分けて処理する方法をマルチスレッドといいますが、</p>
<p>この方法は処理が増えるたびに処理する場所を確保する必要があるので、</p>
<p>メモリの消費が大きいという欠点があります。</p>
<p>&nbsp;</p>
<p>一方Node.jsでは、プログラムを実行するときに、</p>
<p>ある処理が終わる前に別の処理を実行する非同期処理という方法でプログラムを実行しています。</p>
<p>この方法ではひとつの場所で複数の処理を平行して行うことができるので、</p>
<p>処理する場所を複数に分ける必要がありません。</p>
<p>そのこともあり、Node.jsでは処理を一つの場所で行うシングルスレッドという方法で処理を行っています。</p>
<p><a href="/uploads-archive/2015/07/node-js2.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-7713" src="/uploads-archive/2015/07/node-js2.png" alt="node-js2" width="656" height="604" srcset="/uploads-archive/2015/07/node-js2.png 656w, /uploads-archive/2015/07/node-js2-300x276.png 300w, /uploads-archive/2015/07/node-js2-228x210.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>&nbsp;</p>
<p>このあたりは↓こちらのサイトでの説明がわかりやすいです。</p>
<p><a href="http://codebreak.com/blog/takezoe/page/d0e2b2/" target="_blank">コンビニでわかるノンブロッキングIO | break the code!! | codebreak;</a></p>
<p>&nbsp;</p>
<h2>3. PHPはフロー駆動型、Node.jsはイベント駆動型</h2>
<p>PHPではプログラムによる命令があるたびに実行を行う「フロー駆動型」という実行形式をとっていますが、</p>
<p>Node.jsでは&#8221;ページが読み込まれた&#8221;、 &#8220;クライアントからリクエストがあった&#8221;などのイベントが起こったときに実行を行う「イベント駆動型」という実行形式をとっています。</p>
<p>イベント駆動型のプログラムでは、イベントが起こった時だけ実行するので、特定の処理が終わるのを待たずに別の処理を行うことができたり、処理の流れがわかりやすくなるなどのメリットがあります。</p>
<p>&nbsp;</p>
<p>他にも様々な違いや特徴がありますが、今回はこのあたりまでで。</p>
<p>&nbsp;</p>
<p>Node.jsがすべてのサイトに有利であるというわけではないので、</p>
<p>すべてのサイトがNode.jsに変わっていくということはないと思いますが、</p>
<p>リアルタイムな処理が求められるサイトなどでは特に強みを発揮しますので、</p>
<p>利用は更に広がっていくのではないかと思います。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3>参考サイト</h3>
<p><a class="link" href="test.sachi-law.jp" target="_blank">WordPressとApache、PHP、MySQLの関係 | サイト構築日記(WordPress編）</a></p>
<p><a class="link" href="http://codebreak.com/blog/takezoe/page/d0e2b2/" target="_blank">コンビニでわかるノンブロッキングIO | break the code!! | codebreak;</a></p>
<p><a class="link" href="http://qiita.com/hshimo/items/1ecb7ed1b567aacbe559" target="_blank">Node.js を5分で大雑把に理解する &#8211; Qiita</a></p>
<p>&nbsp;</p>
<h3>参考図書</h3>
<p><a class="link" href="http://www.amazon.co.jp/dp/4839950695/" target="_blank">掌田 津耶乃 2014 現場で通用する力を身につける Node.jsの教科書</a></p>

Node.jsとは何なのか調べてみました

Blogブログ

Articles

Contact Us