Open8

Node.jsについて

Hidden comment
enduch8enduch8

よくまとまっていそうで、比較的最近の投稿で、無料で公開されているありがたいコンテンツを見つけたので、こちらを参考に試しながらnode.jsについて勉強していく
Beginner's Series to Node.js

1. Node.jsとは: 動画1より

JavaScriptの実行環境。
ブラウザではなくサーバーサイドでJavaScriptを実行する仕組みのこと。

##2. Node.jsを実行する: 動画4より
2つ方法がある。

  1. REPL(レペル)(コマンドラインインタラプタ)を使う
  2. JavaScriptファイルを使う

1. REPL(レペル)(コマンドラインインタラプタ)を使う

※REPLとは: 入力、評価、出力のループのこと

  • Read
  • Eval
  • Print
  • Loop

つまり、コンソールでJavaScriptコードを入力すると、直接その実行結果を見ることができるインタラクティブな環境のこと

試してみる。
ターミナルで

node

と入力。
すると、インタラクティブな状態になる。
そこで試しに、

console.log(Hello node.js)

と入力すると、結果は

Hello node.js
undifined

と返ってくる。
undifinedなのは、戻り値がこの場合ないから

JavaScriptファイルを使って実行する

余談: codeコマンドで、一発でターミナルからファイルを作成したり開いたりできるように設定できる
https://maku.blog/p/f5iv9kx/
やってみたらすごく便利

このコマンドを使い、任意のディレクトリで下記コマンド

code hello.js

するとhello.jsファイルが新規作成され、vscodeでファイルが開かれる。

console.info("hello node.js")

とファイルに書き保存。
ターミナルに戻り、

node hello.js

を実行すると

hello node.js

と表示される。

Node.js開発を効率化するおすすめVS code拡張機能5つ

こちらの動画の内容です。https://www.youtube.com/watch?v=byCBvmIOrlE&list=PLQEKit6tfVVKkp0ELOyKey_v7I89mxYZI&index=5

1. npm intellisense

npmコマンド利用時に使用する。
ライブラリのインポートが便利にできる。
使い方

  • VS codeのコマンドパレットで、npm intellisenseを検索
  • クリックすると、そのプロジェクトですでにインストールされたnpmパッケージがサジェストされる
    • 選択するだけで、ファイルに自動でインポート文が入力される(requireの文)

2. ES Lint

コードの細かいミスを見つけてくれる。便利

3. Prettier

コードフォーマッター。
使い方は、

  • VS codeのコマンドパレットでprettierを検索
  • 方法を聞かれるので、prettierを選択

4. Document this

/**をfunctionの上に書き、エンターを押すとコメントを挿入してくれる

5. REST Client

VS code上で手軽にHTTPリクエストを送信し、レスポンスを確認できるツール
Node.jsを使ってAPIを開発したい人にはおすすめ

次回、https://www.youtube.com/watch?v=r481iDoIpsA&list=PLQEKit6tfVVKkp0ELOyKey_v7I89mxYZI&index=6 の動画から再開する

enduch8enduch8

## Node.jsでプロジェクトを新規作成する
こちらの動画の内容 : https://www.youtube.com/watch?v=r481iDoIpsA&list=PLQEKit6tfVVKkp0ELOyKey_v7I89mxYZI&index=7

プロジェクトを新規作成するには、Node.jsをインストールするときにバンドルされているnpm cliを利用する。
まず、

npm

とターミナルで入力してみる。(たぶんとりあえず動くことを確認)

続いてプロジェクトの初期化をする。

npm init

を入力。
package.jsonを作成する
割愛するが、ほぼほぼデフォルトでOK

package.jsonについて

中身は通常のjson。
内容としては主に3つのグループに分けられる

  • メタデータ(npm initで入力した情報)
  • Dependencies 依存関係にあるライブラリ群
  • Scripts: プロジェクトの開始、ビルド、テスト、lintなどを実行するスクリプトを定義できる
    ※ lint: コードの間違いを指摘してくれる静的解析ツール

この動画はここまで。一回の動画が3-5分ほどなのでなんか進んだ気になる。
Microsoft、この動画が無料で提供はすごい。

enduch8enduch8

NPMスクリプトで開発作業を自動化

この動画の内容です: https://www.youtube.com/watch?v=32j-b1iacys&list=PLQEKit6tfVVKkp0ELOyKey_v7I89mxYZI&index=7

Node.jsアプリで作業をしているときには、実行、テスト、ビルドなど常に実行するタスクがある。
->package.jsonファイルに関連付けられたターミナルコマンドを定義することで自動化できる。

注意: 複数プロジェクトを持っている場合には、複数の開発者が関わるプロジェクトでは、一貫したスクリプト名をつけるのがおすすめ
まず4つ、scriptsに定義する。

  • start
  • test
  • build
  • lint
    これがnode.jsプロジェクトの基本。
enduch8enduch8

Node.js プロジェクトで依存パッケージを追加しよう

この動画の内容です: https://www.youtube.com/watch?v=4dsUFgSRLP0&list=PLQEKit6tfVVKkp0ELOyKey_v7I89mxYZI&index=8

Node.jsのアプリを使うとき、いちから作成することはめったに無い。
既存のパッケージやライブラリを利用することがほとんど。
それらの依存関係を管理するのがnpm。
npmはCLIでもあり、パッケージのグローバルレジストリでもある。

npmの公式ページ: https://www.npmjs.com/

ここで例えば、typescript、などと入力すると、人気度やメンテナンス情報を含む全てのパッケージが表示される。
デフォルトでは、npmはこのパブリックレジストリからインストールするようになっているが、実はそれは変更できて、プライベートなレジストリを指定できたり、あるいはgitリポジトリから直接もってきたりなんてこともできる。

ここでは2つパッケージをインストール

npm install express
npm install --save-dev jest

余談だけど"-"は英語では"ダッシュ"なんだな・・・日本語ではハイフンと言っていたけど。
この方とても発音がいい

enduch8enduch8

Lockfile とは?このファイルのコミットって必要?

この動画の内容です。

npm installはいつも使ってたし、package.jsonpackage-lock.jsonに関しても大体理解していたが、npm ciコマンドを知らなかった。

npm installを実行すると、package-lock.jsonから誰がどの環境でも同じ依存関係を解決できる。
でも実はこのコマンドは ロックファイルといいつつpackage-lock.jsonをも更新してしまう。セマンティックバージョンのパッチレベルだかマイナーレベルだかの更新を共用するための様子。
そのため、新にpackage-lock.jsonを見てそこから依存関係を解決してくれるコマンドがnpm ci
その名の通り、CI環境での用途を意図している様子。
参考: https://ginpen.com/2019/12/04/npm-install-vs-ci/

普段の開発で使うものではないのか?

Node.js 依存パッケージを更新するには

この動画の内容です。

nodeのパッケージは更新が早いものが多い。
古くなっているパッケージを調べるためには下記コマンドを使う

npm outdated

例えば、下記のように結果が表示される

Package  Current  Wanted  Latest  Location
jest      27.4.2  27.4.3  27.4.3  my-node-app

package名は赤or黃で表示される。上記の場合は、jestの部分が赤く表示されていた。
赤: package.jsonで指定されたバージョン内で更新がある
黃: package.jsonで指定されたバージョン以外で更新がある。

npm updateコマンドで、赤のものは更新される。

セマンティックバージョニングの意味

例えば、6.21.3というバージョンを例に取る。
メジャーバージョンの変更: Breaking change、つまりコードを修正する必要があるような大きな変更がある場合に、ここが上がる
マイナーバージョンの変更: 機能追加の場合。一般的にこの更新は受け付けても大丈夫。安全。
パッチバージョンの変更: 細かい修正など。ここは積極的に更新するべき

パッケージのバージョン指定の方法

バージョン指定には、3つの方法がある。

  1. ^(キャレット)をつける: ^6.21.3: マイナーとパッチバージョンの更新を受け付ける
    npm installでパッケージを追加すると、デフォルトで^がつく
  2. ~(チルダ/ティルデ)をつける: ~6.21.3: パッチバージョンの更新のみを受け付ける。ユーザーが自分でコード変更を行わなければならない場合に使用
  3. 何もつけない: 6.21.3: そのバージョンのみを受け付ける。十分な注意が必要な場合
  4. *(アスタリスク)を使う: *.21.3: 任意の更新を許可する。かなり大幅に影響が出るので、使用には気をつける

黄色のパッケージはどうやってインストールするのか

npm install express@latest

例えば、これでメジャーバージョンが更新された場合、破壊的変更なので、コードを修正する必要があるか確認しなければならない。githubの更新履歴などをみて、確認すること。

バージョン確認にコマンド使いたくないときは

Version Lens というvscode拡張機能も使える。

enduch8enduch8

Node.js の脆弱性を npm audit でチェック

こちら の動画の内容です。

パッケージをインストールしたあとのログには、インストールされたバージョンと、脆弱性があるかどうかが出力される。
高レベルの脆弱性の場合は、通常パッケージの更新が必要。
まずそれを一覧表示する

npm audit

これで、

  • 脆弱性の種類
  • 影響を受けるパッケージ
  • 解決方法

に関する情報を取得できる

許可されたバージョン内で解決するには、下記コマンド。

npm audit fix

これで十分ではないときは、

npm audit fix -- force

を使う。これで、許可されたバージョン以外の更新ができる。
最後にnpm auditをもう一度実行し、確認。

ただ、修正が全然存在しない場合もある。
脆弱性が問題であるかどうかは、

  • プロジェクトに依存するかどうか
  • どのような問題が発生するか
  • どのパッケージが影響を受けるか

などで判断する。
もし開発環境にのみ影響し、運用環境にのみ影響するなら、そのまま置いてもOK。
脆弱性は一般的に存在するものだと認識すること。

githubでは、コードスキャン機能を全ユーザーに無料提供している。
https://japan.zdnet.com/article/35160321/
のでそれを使うのも手