Simple Answer

simpleanser

Node.js サーバーの構築手順

前提

Node.jsがインストールされている必要があります。

Node.jsのインストール - Simple Answer

手順 -- 生のNode.jsの場合

  • 作業フォルダ(test-server)を作成してそこへ移動
> mkdir test-server
> cd test-server
  • プロジェクト開始の宣言
> npm init -y

※-yは、規定の値でpackage.jsonを作成する。無しの場合は色々聞かれる

  • 作業フォルダにapp.jsを作成し、下記のコードを記載する
const http = require('http');

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

// 3000ポートで待ち受け
server.listen(3000, () => {
    console.log('Start Server. port:3000');
})
  • 作業フォルダで下記を実行しサーバーを立ち上げ
> node app.js
  • ブラウザから「localhost:3000」へアクセスすると、「Hello World!」と表示される

  • 以上。
    尚、サーバーを終了させる場合は、コンソールでCtrl+cを入力して終了させる。

手順 -- Expressの場合

  • 作業フォルダ(test-server)を作成してそこへ移動
> mkdir test-server
> cd test-server
  • プロジェクト開始の宣言
> npm init -y

※-yは、規定の値でpackage.jsonを作成する。無しの場合は色々聞かれる

  • Expressのインストール
> npm install express --save

※--saveで、package.jsonへ記載してくれる。完了後のpackage.jsonを参照すると、dependenciesにexpressが追加されているのがわかる。 ※完了後は、作業フォルダ内にmode_modules、paclage-lock.jsonが作成される。 ※paclage-lock.jsonの必要性 javascript - npm package-lock.json がなぜ必要なのかがわからない - スタック・オーバーフロー

  • 作業フォルダにapp.jsを作成し、下記のコードを記載する
const express = require('express');
const app = express();

app.get('/', (req, res) => {
    res.send('Hello World! Express!');
})

// 3000ポートで待ち受け
app.listen(3000, () => {
    console.log('Start Express Server. port:3000');
})
  • 作業フォルダで下記を実行しサーバーを立ち上げ
> node app.js
  • ブラウザから「localhost:3000」へアクセスすると、「Hello World! Express!」と表示される

  • 以上。
    尚、サーバーを終了させる場合は、コンソールでCtrl+cを入力して終了させる。

補足

さらに詳しく知るには、下記を参照するとよい。

Node.jsとExpressでローカルサーバーを構築する(1) ―Node.jsとnpmの導入― - Qiita

Node.jsとExpressでローカルサーバーを構築する(2) ―Expressでルーティング― - Qiita

Node.jsとExpressでローカルサーバーを構築する(3) ―JSONを返すスタブAPI― - Qiita

Node.jsとExpressでローカルサーバーを構築する(4) ―Requestで他サーバーから画像を取得する― - Qiita

また、上記記事内にあるが、
Advanced REST client ってのがすごい。下記のサイトを見るとよい。オレオレ証明書が必要な時の手順の記載がある。

「Advanced REST client」の使い方まとめ ~GoogleChromeの拡張ツール

また、上記記事内にあるが、
JSON Serverなるものも、簡単にモックが作れるみたい。下記サイトが紹介されている。

JSON Server使いこなし | 第1回 モックサーバーの起動とリソース処理 | CodeGrid

Node.jsのインストール

Node.jsのインストール手順です。(Windows10で行いました。)

手順1

Node.jsの公式ダウンロードページに行きます

手順2

インストーラーをダウンロードします。

バージョンは下記を意識した方が良いでしょう。

  • LTSを選ぶ ・・・長期期間サポートされる
  • 最新版を選ぶ場合も、メジャーバージョンは偶数を選ぶ ・・・今後LTSとなり、長期期間サポートされる

f:id:tomatoma777:20210911150953p:plain

インストーラーのダウンロードページ
手順3

インストーラーを実行します。

(自分の場合は、ダウンロードした「node-v14.17.6-x64.msi」をダブルクリックで実行しました。)

手順4

インストーラーに従って、OKしていきます。

(基本的にデフォルトのままでよいでしょう。)

手順5

インストールが完了したら、インストールされたことを確認しましょう。

コンソール(Windowsならコマンドプロンプト)で下記を実行します。

f:id:tomatoma777:20210911154804p:plain

バージョンの確認

バージョンが表示されれば問題なくインストールされています。

※上記では、併せてインストールされるnpm(Node Package Manager)のバージョンも確認しています。

完了

以上で完了です。

 

補足

Node.jsのアップデート

WindowsのNode.jsをアップデートするときは、変更したいバージョンのインストーラーをダウンロードしてインストールする。(Windowsではn(Node.jsのバージョン管理ツール)が使えない)

参考:WindowsのNodejsをアップデートする - suzu6の技術ブログ

Linuxではnを利用してバージョン管理する。

 

どのグローバルパッケージが古いか確認

> npm outdated -g

 

全てのグローバルパッケージのアップデート

> npm update -g

 

 

 

Bootcampでスクリーンショット:「command」+「shift」+「s」

BootcampのWindows10でスクリーンショットを取得したい場合、

「command」+「shift」+「s」

です。

このコマンドで、画面上部に取得範囲のアイコンが表示されます。

そこから任意のアイコンを選んだ後、取得します。

VueのGUI管理ツールの起動:「vue ui」

VueのGUI管理ツールの、Vue プロジェクトマネージャを起動します。

前提

Vue CLIがインストールされている必要があります。

Vue CLIのインストール方法 - Simple Answer

手順1

コンソール(Windowsならコマンドプロンプト)で下記を実行します。

vue ui

f:id:tomatoma777:20210911164128p:plain

vue uiの実行
手順2

しばらく待つと、WebブラウザでVue プロジェクトマネージャが起動します。

f:id:tomatoma777:20210911164304p:plain

Vue プロジェクトマネージャ
完了

以上で完了です。

Vue CLIのインストール:「npm install -g @vue/cli」

Vue CLI(Vue3開発ツール)をインストールします。

前提

Node.jsがインストールされている必要があります。

手順

コンソール(Windowsならコマンドプロンプト)で下記を実行します。

npm install -g @vue/cli

f:id:tomatoma777:20210911161831p:plain

Vue CLIインストール

完了するまで待ちます。(時間がかかります。)

完了

以上で完了です。

コマンドプロンプトでテキストをコピーしたい

コマンドプロンプトで、コピーしたい文字列を選択できるようにする方法です。

ゴール

f:id:tomatoma777:20210911120941p:plain

ゴールの画像
手順

手順1

f:id:tomatoma777:20210911121023p:plain

手順1

手順2

f:id:tomatoma777:20210911121048p:plain

手順2

すると、下記(ゴール)になります。

f:id:tomatoma777:20210911121107p:plain

ゴールの画像
完了

以上で完了です。

デベロッパーツールでConsoleタブを常時表示させる:「Esc」キー押下

Chromeデベロッパーツールで、Consoleタブを常時表示させる方法です。

ゴール

f:id:tomatoma777:20210911110430p:plain

ゴールの画像
手順

①、②の順にクリックします。

(別の方法:代わりに、Escキーを押下するでもOK。)

f:id:tomatoma777:20210911110524p:plain

手順

すると、下記(ゴール)になります。

f:id:tomatoma777:20210911110430p:plain

ゴールの画像
完了

以上で完了です。