Node.js がわからないので雑にやってみる

2024年9月14日 19:14

雑にやってみるメモだぞい。

Node.jsとは？

JavaScript 実行環境

Run JavaScript Everywhere
Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.

https://nodejs.org/en

（雑訳）
どこでも JavaScript を実行
Node.js® は、開発者がサーバー、Web アプリ、コマンドラインツール、スクリプトを作成できる、無料のオープンソースのクロスプラットフォーム JavaScript ランタイム環境です。

だそうです。
JavaScript 実行環境らしいです。
で？

何が嬉しいの？

教えて、チャッピー先生

JavaScriptってのは本来はクライアントサイド、フロントエンドで使うものだけど、バックエンドでも使えるようにできちゃうよ……ってコト!?
非同期処理？に強いのかな？

Qiita

nodeとは

やる

とりあえず触ってみないとねってことで、やる。

前提としてあると良さげなもの

括弧内は自分のステータスです。よわ。まあいいいか。

HTML・CSSを何となく読み書きできる（いにしえのオタクは触っているはず。最新のトレンドは知らん）
ターミナルでコマンドを打つ（細かいことは知らん）
VS Codeが使える状態（入ってるけど使いこなしているとは言えない）
JavaScriptが何となくわかる（GASなら多少はわかる）

公式にもこの辺のことがちゃんと書いてありました

公式をちゃんと読んでみる

https://nodejs.org/en　このサイトをまずは読んでみる。

ど頭にDownloadがあるから、これをDLしろってコトなんだろう、多分。
何もわからんがDLしてみる。

サンプルコード的なものが横にある。

// server.mjs
import { createServer } from 'node:http';

const server = createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('Hello World!\n');
});

// starts a simple http server locally on port 3000
server.listen(3000, '127.0.0.1', () => {
  console.log('Listening on 127.0.0.1:3000');
});

// run with `node server.mjs`

'node:http'からライブラリ的なものを読み込んで、
createServer的なメソッドがあるらしい、ステータスコードとか書き込んで　Hello World!　を表示させるのか？　

Learn　https://nodejs.org/en/learn/getting-started/introduction-to-nodejs

読んでばっかりでもしょうがないので、手を動かすかあ。

環境構築とWebサーバーを作ってみる

この動画を観ながらやってみる。
Node.jsは設計手法みたいなの、って言ってるなー。

ターミナルを立ち上げる

今これはMacでやってるのでターミナルで。というか最近はiTerm2入れてみた。
背景透過になるのがいいかなって。

フォルダを作り、そのフォルダに移動し、VS Code立ち上げる。

cdのコマンドを打った後は、noぐらいまで打ったらTabでサジェストするんだぞ！

mkdir nodejs-tutorial-youtube
cd nodejs-tutorial-youtube
code .

VS Code

ターミナル表示しておく。
ターミナル？ねえぞ？っていう人は、⌘J　または　下図参照。

node -v で、Node.jsが入っているか、バージョンがいくつか確認する。

npmが使えるようになったらしい。
node package manager 何でもかんでも略しやがって。

モジュールとかライブラリをインストールしていく際に色々管理してくれるらしい。

package.json ファイルを作成し、Node.jsプロジェクトを素早く始める

npm init -y

オプションでYesをスキップすんのね,
で、JSONできた
/package.json:

{
  "name": "nodejs-tutorial-youtube",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

ここで依存関係を管理していく、らしいぞ。

サーバーを作る（準備・前段階編）

touch server.js

ターミナルで上記コマンドでもいいし、VS Code上でポチポチしてもいいので、まずファイル作る。

動作確認
server.jsに適当なコンソールログ書いて、以下を実行する。

node server.js

コンソールログがちゃんと表示されてる。

HTTPモジュールを使ってサーバーを作る

npm install --save-dev http

実行すると、パッケージの中に追加された

scripts を書き換え
"dev":"node server.js"

書き換えると、node server.js　の代わりに
npm run dev　で以下のように実行できる。

サーバーを作る

ポート8000でリクエストを受けるWebサーバーを作り、リクエストが来たら「Hello World!」というメッセージをブラウザに表示する

const http = require("http");
const PORT = 8000;

// webサーバーを作ろう
const server = http.createServer((req, res) => {
    //ブラウザからアクセスが来た時の処理
    res.writeHead(200, {"Content-type": "text/html"});
    res.write("<h1>Hello World!</h1>")
});

server.listen(PORT, () => {
    console.log("server running!");
});

htmlファイルを作る

毎回、res.write("<h1>Hello World!</h1>")　はかったるいし、htmlファイルを別に用意して読み込めばいいよねってことでhtmlファイルを作る。

VS Codeでhtml書いたの初めてなんですけど、!で補完されるし、閉じタグも補完してくれるし、神では？という20年前からやってきた人ムーブになっていました。
メモ帳でチマチマ書いたり、IE対応の謎の呪文を書いてたのは何やったんや。

server.jsを書き換える

const http = require("http");
const PORT = 8000;
const html = require("fs").readFileSync("./index.html");

// webサーバーを作ろう
const server = http.createServer((req, res) => {
    //ブラウザからアクセスが来た時の処理
    res.writeHead(200, {"Content-type": "text/html"});
    res.write(html);
});

server.listen(PORT, () => {
    console.log("server running!");
});