14
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Node.js入門編

Last updated at Posted at 2021-04-05

Node.jsとは?

フロントエンドエンジニアですが、技術の幅を広げる為、JavaScript力をあげる為にNode.jsをやろうと思い、まずは基本中の基本を簡単ですがまとめました。ノンブロッキングI/Oとか難しい部分は追って学んで行こうと思います。

スクリーンショット 2024-06-24 22.04.02.png

Node.jsはサーバーサイドのJavaScript実行環境と言われてますが、これだけだとピンとこないですね。さらに詳しく説明すると、
Node.jsは「V8」というJavaScript実行エンジンで作られてる。
(V8はGoogleが開発しているオープンソースのJavaScript実行エンジンです。V8はNode.jsに限らず、GoogleChromeでも採用されています。)

つまり、Node.js環境をサーバー上に作る
→ サーバーサイドでJavaScriptを実行できる
JavaScriptでサーバーサイド側を実装できる(PHPやRubyのように)という事です。なので、Node.jsはサーバーサイド言語ではないと言う事ですね。

もちろんNode.js固有の文法やAPIが沢山ありますしDatabaseも扱うからSQL文なども必要になるので、単純にフロントエンドのJS力だけで事足りる訳ではないですが、慣れ親しんだJSでバックエンドも作れるのは全く違う言語を覚えるよりは多少とっつきやすいかもしれません。(ただ本気でNode.jsを習得するのと他のサーバー言語を習得するコストはあまり変わらないとも言われてます。)

ちなみに、他ブラウザのJavaScript実行エンジンは、
・Firefox: SpiderMonkey
・Safari: JavaScriptCore
・MicrosoftEdge: Chakra/V8

Node.jsでできる事、使用用途

サーバーアプリ、API開発はもちろん、デスクトップアプリ開発、IoT開発でも使われている。

フロントエンド開発でも使われるNode.js

React、Vue等を使ったモダンなフロントエンド開発(これらで書かれたコードをブラウザで実行できるようにする)に、Node.jsで動作する以下のツールが基本的に使われます。
・webpack, percelといったバンドラー
・ローカルサーバーを立てるのに使われるwebpack-dev-server
・TypeScript Compiler, Babelといったトランスパイラ。
・各種ライブラリをダウンロードしたりコントロールしたりするパッケージマネージャー(npm、yarn)

なので、フロントエンドの開発にもNode.jsが必要なのです。(無くてもできるみたいですが、相当きついらしい)

npmとは?

Node Package Managerの略で、世界中で作成されるJavaScriptモジュールを誰もが利用できるエコシステムです。

Node.jsをインストールすると一緒にインストールされて、Node.jsの実装はnpmを活用して行ないます。

npmに登録されてるパッケージであれば(=Node.jsパッケージとして流通してる)、npmコマンドを使って簡単にインストールできます。

npm install MODULE_NAME
npm uninstall MODULE_NAME
npm update MODULE_NAME
npm ls //インストールしてるモジュールの一覧取得 

npmでインストールしたパッケージは勝手にnode_modules配下にダウンロード、インストールされて、import, requireで使えます。

「パッケージ」というのはライブラリやフレームワークのことで、わざわざライブラリのLPに行ってダウンロードして、プロジェクトディレクトリに置いて、なんて事しなくてもnpmコマンドを使えば一発で取り込めると言うことです。

インストールには2種類あります
ローカル(該当プロジェクトだけで使う)にインストール
何も指定しない(又は末尾に --save をつける)とローカルにインストールされます。

グローバル(システム全体で使う)にインストール
install の後に -g / --global をつける。

(注意)グルーバルにインストールすると、package.jsonにインストールしたライブラリ名が書き加えられず、チーム開発の時などは必ずローカルでインストールする。

yarn: Facebook製のパッケージマネージャー
npmでインストールする各種パッケージは本体はリモートにあるので、それを取得してインストールするクライアントはnpmじゃなくてもいい。yarnは高速で信頼性が高く、依存関係も安全に保てる。

余談:
以前業務でフロントのプロジェクトの中に組み込まれていた結構大きめな処理を外に出して、npmに登録し、外部ライブラリとして取り込んで使う運用になった事がありました。npmにアカウントを作れば誰でも自作モジュールを公開できるのです。

Package.jsonとは

プロジェクトの基本情報(名前、作者、モジュール一覧)を保持したファイル

空のディレクトリを作って、そこに移動して、npm init でPpackage.jsonファイルが作られます。

Express

Expressは、Node.jsで一番人気なフレームワークです。
プレーンなNode.jsだと大変な開発を楽にしてくれる優れものです。

以下、基本手順のコードだけを抜粋して紹介します。
・Expressオブジェクトの用意
・appオブジェクトの作成
・ルートの設定
・待ち受け開始

//Expressオブジェクト、appオブジェクトの用意
import * as express from "express";
const app = express();

//第1引数のアドレスにアクセスした(リクエストが来た)時に、第2引数の関数を呼ぶ
app.use('/users', users)

ルートの設定は、routesディレクトリに各ルートのJSファイルを用意して設定します。

const router = express.Router();
router.get('/', (req, res) => {
  //この中で処理をして、最終的に何かしらのレスポンスをする
  //res.send()であれば、引数の値をレスポンスとして返す
  const responseData = "Welcome to Express";
  res.send(responseData);
})
app.listen(3000)

これでプログラムを実行して、http://localhost:3000にアクセスすると「Welcome to Express」と表示されます。

Express Generator
Expressでアプリケーションを作っても、必要なファイル、モジュールなどは全て自前で用意しないといけないのですが、「基本セット」を最初から用意してくれるライブラリがExpress Generatorです。
Reactでいうところのcreate-react-appみたいなものかと思います。個人開発や学習の為なら間違いなくこれを使ってやるべきですね。

まとめ

本編では、あくまでも基本的な概念やExpressの基本のまとめです。
次は実際に定番のToDoアプリを作ってみますので、そこでは詳しいコードを交えた記事にしたいと思います。

14
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?