狼読

 
2021/06/03

【Mac】Node.jsを使ってみよう

前回、Node.jsをインストール(最新バージョンへのアップデート)をしたので、Node.jsを使ってみたいと思います。

Node.jsのインストールや最新バージョンへのアップデートがまだの場合は、下記の記事を参考にしてみてください。
【Mac】nodebrewでNode.jsをインストール(アップデート)する方法

npmのアップデート

npmとは、「Node Package Manager」の略で、名前のとおりNode.jsのパッケージを管理するパッケージマネージャーです。

npmは別段インストールしなくても、Node.jsのインストール時に一緒にインストールされます。知らず知らずのうちにインストールされていることが多いので、バージョンが古い可能性があります。
そこで、npmでパッケージをインストールしていく前に最新バージョンにアップデートしておきましょう。

まず、npmのバーションを確認してみましょう。

$ npm -v
7.13.0

現在のバージョンは、7.13.0みたいです。では、アップデートしていきましょう。

$ npm update -g npm

アップデートが完了したら、再度バージョンを確認してみましょう。

$ npm -v
7.15.1

アップデート前:7.13.0 → アップデート後:7.15.1 アップデートされたことが確認できます。

npm init で初期化

npm init とは、初期化するための処理です。結論から言うと npm init を実行することで、 package.json が生成されます。パッケージを管理するうえでpackage.jsonは必要となります。

$ npm init

上記コマンドを実行すると設定を色々と聞かれますが、全て無回答でもそれ自体が問題になることはありません。

今回は以下のようにpackage.jsonを作成しました。

{
  "name": "sampleapp",
  "version": "1.0.0",
  "description": "node.js_sample",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "roudoku",
  "license": "ISC"
}

これで初期化は完了です。

npm でパッケージをインストール

今回は、Node.jsの有名なフレームワークExpressをインストールしてみましょう。

$ npm install express

インストールが完了すると新たに「node_modules」というディレクトリが生成されます。また、先ほど生成したpackage.jsonの中身も確認してみましょう。

# package.jsonの中身
{
  "name": "sampleapp",
  "version": "1.0.0",
  "description": "node.js_sample",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "roudoku",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1"
  }
}

インストールしたExpressの内容が追記されていると思います。(以下の部分)

"dependencies": {
    "express": "^4.17.1"
  }

ブラウザにテキストを表示してみよう

以下のような内容でjsファイルを作成しましょう。今回は、ファイル名をindex.jsとしています。

var express = require("express");
var app = express();
const http = require("http").createServer(app);

app.get("/", function(req, res){
  res.send("表示されれば成功です!!");
});

http.listen(3000, ()=>{
  console.log("listening on *:3000");
});

index.jsが作成できたら、サーバーを起動しましょう。

$ node index.js

今回の場合は、ポートを3000に設定しているので、localhost:3000にアクセスしてみましょう。

今回はここまで!
次回は、htmlファイルを送信する方法やソケット通信をしていきたいと思います。

Profile Card

タマリュウ

生息地:福井県
WEB制作会社を立ち上げて日々レベルアップの修行中! 俺自身まだまだ修行中なので、新しく学んだこと、引っかかったポイントを備忘録として記事にして皆さんと共有できればと思っています。 読んで誰が得するのかわからない情報も発信します!

関連記事

Related Post

2020/06/09

[html]ラジオボタンを作って、チェック済みにしたり選択できないようにしてみよう

2020/05/22

[css]bootstrap4のグリッドシステムを使って横並びのブロックを作ってみた

投稿カレンダー

2021年6月
 123456
78910111213
14151617181920
21222324252627
282930  

Technology

category

©狼読