Node.js関連のことを調べてみた2022年06月06日

【Node】NVMによるバージョンアップ

# 指令：Nodeのバージョンをupgradeしろ！

“`sh
You are using Node v10.19.0, but this version of @vue/cli requires Node ^12.0.0 || >= 14.0.0.
Please upgrade your Node version.
“`
りょうかいです！

## 現在インストールできるNode.jsのバージョン一覧を確認

“`sh
$ nvm ls-remote
　　　　～省略～
v16.12.0
v16.13.0 (LTS: Gallium)
v16.13.1 (LTS: Gallium)
v16.13.2 (LTS: Gallium)
v16.14.0 (LTS: Gallium)
v16.14.1 (LTS: Gallium)
v16.14.2 (LTS: Gallium)
v16.15.0 (LTS: Gallium)
v16.1

Vue.jsの開発メモ#1

# 今日のメモ
– homebrew, nodebrew, node.js のアップデート
– Githubで remote repogitoryの作成
– Terminalでvue-cliのインストール (npm install -g @vue/cli)
– vue create ファイル名
– vue-class-component, vue-property-decoratorとは
– Nuxt.jsについて
– Universal mode(SSR), SPA mode,

# vue-class-componentとは
TypeScript（.tsファイル）でコンポーネントが書けるようになる。
Componentデコレータをつけて，Vueを継承したクラスとして書く

# SSRとは
SSRとは,従来のブラウザ側（クライアント側）で実行されHTMLを描画するJavaScriptをサーバー内部で実行し,HTMLを描画するもの. また、UniversalはSPAでもあるため、ページ遷移などに関しても申し分がなく、爆速.

# Nuxtプロジェクトの立ち上げ

　To create

express-generatorで作成したexpressプロジェクトをTypeScript化する

はじめまして。katと申します。
本記事が初投稿になります。至らない点があるかもしれませんが、何卒ご容赦ください。

今回は、express-generatorで作成したexpressプロジェクトをTypeScript化する方法について、学んだ事項を紹介したいと思います。

工夫した点は以下の3点です。
– views, publicフォルダを使用できる
– 開発用実行として、ts-node-devを使ったホットリロードで実行する
– 本番用実行として、jsファイルに変換した上で実行する

Githubリポジトリは[こちら](https://github.com/katkatprog/expressTs)です。

## 背景
つい最近、TypeScriptの基礎学習が終わり、何かしらアウトプットをしてみたいと思っておりました。
そこで、自室のラズパイ上で稼働中であるexpress-generatorで作成されたWEBアプリをTypeScript化してみることにしました。

その際、なるべくexpress-generatorの原型に沿ってTypeScript化したいと思ったため、view

Node-RED インストール

## 環境
Ubuntu

## Node.js
“`
curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash –
sudo apt-get install -y nodejs
“`
※16.xは2022年6月時点の推奨バージョンです。18.xで開発バージョンがインストールされます。
## Node-RED
“`
$ sudo npm install -g –unsafe-perm node-red
“`

TypeScriptで日時の操作を実施する(day.js)

day.jsを利用した日時操作。
“`typescript:app.ts
import dayjs, { Dayjs } from ‘dayjs’;

const now = new Date()

console.log(‘now: ‘, now)
console.log(‘=====================【以降】==========================’)
console.log(‘1分後’,dayjs(now).add(1, ‘m’).format())
console.log(‘1日後’,dayjs(now).add(1, ‘d’).format())
console.log(‘1時間後’,dayjs(now).add(1, ‘h’).format())
console.log(‘1週間後’,dayjs(now).add(1, ‘w’).format())
console.log(‘1ヶ月後’,dayjs(now).add(1, ‘M’).format())
console.log(‘1年後’,dayjs(now).add(1, ‘y’).format(

Node.jsの管理にVoltaを使ってみる

# Voltaとは
Windowsではnodistを長らく愛用していた。
それに代わるバージョン管理ツールとしてVoltaなるものを発見しインストールしていたが、数か月たっておりそのことをすっかり忘れていた。
node.jsのバージョンを上げる必要があったのだが、node.jsのインストーラーをDLしてセットアップしてしまい混乱した・・・。
今後忘れないように、まとめておく。

# 環境
OS：Windows 10 Pro 21H1

# 手順

インストーラをDLしてインストーラーを実行
voltaの確認
“`
PS C:\> volta -v
1.0.8
“`

特定のバージョンをインストールする

“`
PS C:\> volta install node@16.15.1
success: installed and set node@16.15.1 (with npm@8.11.0) as default
“`

nodeの確認

“`
PS C:\> node -v
v16.15.1
“`

試しに最新版を入れてみる

“`
PS C:\> volta inst

【自分用備忘録】res.status().json と res.status().send の違い

初めまして。hojojoです。

Expressを触っていて、

res.status().json
res.status().send

の違いが分からなくなってきたので整理してみました。

以下の記事を見つけたのですが、結果は変わらないのでやっぱり同じっぽいですね。

https://neos21.net/blog/2019/03/12-01.html

じゃあ、好きは法を使えばいいよね！
だと納得いかなかったので、知り合いに聞いてみたら

・　res.send()はjson形式のデータではない簡単な文字列を返すときに使っている
・　res.json()はjson形式データを返す際に、明示的に分かりやすくするために使っている
・　apiを作る際はほとんどres.json()を使っている

だそうです。なるほど。
もし違う使い分けをされている方がいれば、コメント欄で教えてください。

yarn とは？（＋ Mac に yarn を導入する手順）

# 概要
「yarn」とは何かについて、そして、macOS にインストールする手順の備忘録

# 前提

– Node.js はインストール済み
– パッケージマネージャについての概念を知っている方向け

# yarn とは

– 「yarn（ヤーン）」は、Node.js で動作するパッケージマネージャの１つ
– Node.js のパッケージマネージャと言えば「npm」だが、これと互換性がある（＝ package.jsonが使える）

# npm と yarn の違い

||npm|yarn|
|:–|:–|:–|
|リリース|2010年|2016年|
|インストール速度|遅い（というか標準）|npm より早い|
|依存プログラム|自動で意図しないバージョンのパッケージをインストールしてしまうことがある|「yarn.lock」ファイルにより厳密にバージョンを固定するため、npm の様な問題は起きづらい|

# yarn のインストール

ターミナルで以下を実行

“`bash
# yarn インストール
npm install -g yarn
“`

#### `Error:

【まとめ】npm install と npm audit とnpm-check-updates

## npm install の概要

npm install を実行すると、 package.json に記載しバージョンのパッケージと、
そのパッケージを使用するために必要な関連モジュールをまとめてインストールしてくれる。

なお、この際にpackage-lock.jsonが自動作成され、
実際にインストールされたパッケージや関連モジュールのバージョン等が記載される。

次回以降に npm install を実行した場合、package.json ではなく package-lock.jsonを元にインストールが実行される。
package-lock.jsonの存在意義としては、チームで開発する場合などに関連モジュールのバージョンまで揃えられる、という点が主かと思われる。
そのあたり下記記事様がわかりやすく解説してくださってます。

https://qiita.com/sasao3/items/b794c1e44715bb6f834f

## パッケージのセキュリティに問題がある場合

上記 npm install でインストールしたパッケージやモジュールのセキュリティに問題がある場

AngularCLI、nodejs、npmバージョン変更について

Ubuntu環境でangularの開発環境構築に手間取ったため、議事録としてのメモ

1.node.jsとnpmのバージョン変更

// 先にubuntuのアップデートを行う
$sudo apt update

// nodeとnpmのインストール（ただしこのコマンド実行時は古いバージョンでインストールされる）
$sudo apt install nodejs
$sudo apt install npm

// nodeとnpmのバージョン変更するためにnコマンドをインストールする。
$sudo npm install -g n

//　nコマンドを利用（先にnodeをインストールしないといけない）
// nodeとnpmのバージョン変更する。終わったら一度ubuntuを再起動する。
$sudo n バージョン番号

// nodeとnpmのバージョン確認
$node -v
$npm -v

nodeをインストール参考記事
https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu

メモ : claspで「Error: Looks like you are offline.」の対処方。

claspでpush、pullなどを行うエラーになって少しハマったのでメモ書き。

“`:エラー内容
$ clasp pull
⠙ Pulling files…script.google.com ✖
console.developers.google.com ✖
drive.google.com ✖
console.cloud.google.com ✖
Error: Looks like you are offline.
“`

# 実行環境

macOS Big Sur v11.6.6
node v16.5.0
clasp v2.4.1

# 参考リンク

[Clasp commands return offline error 90% of the time](https://github.com/google/clasp/issues/872)

# 対処法

自分の場合はclaspのバージョンが問題でした __v2.3.1__ だと問題なく実行出来きた。

“`:バージョン変更コマンド
$npm install @google/clasp@2.3.1 -g
“`

#

最新のNestJSでGraphQLサーバを実装する

業務でNestJSに触れる機会があったので、[参考サイト](https://zenn.dev/hakushun/articles/7daac74ae9af25)を見ながらサンプルプロジェクトを作ってみました。
参考サイトから読み替えた部分や、バージョンアップによって修正しなければいけない部分があったので、備忘録としてまとめておきます。

## 対象環境
– Node.js: v16.14.2
– @nestjs/core: v8.4.6
– graphql: v15.8.0
– apollo-server-express: v3.8.1

## npm から yarn へ

読み替えた部分としては `npm` から `yarn` への変更。
たいした変更ではないですが、一応変更後のコマンドを書いておきます。

“`bash
yarn add -g @nestjs/cli
“`
※ `@nestjs/cli` はグローバルへのインストールが必要

“`bash
yarn add @nestjs/graphql graphql@^15 apollo-server-express
`

macOS に Node.js (npm) をインストールする方法

macOS のPCに[Node.js](https://nodejs.org/ja/about/)とパッケージ管理システム npm (Node Package Manager) をインストールして確認するまでの手順を備忘録としててまとめました。参考にして頂ければ幸いです。

– 前提条件（環境）
– インストーラーのダウンロード
– Node.jsのインストール
– インストール完了の確認

# 前提条件（環境）

今回インストール下のハードウェアのmacOSの仕様は次の通りです。

– macOS Monterey バージョン 12.3.1

# インストーラーのダウンロード

Node.jsの[公式日本語サイト](https://nodejs.org/ja/)にアクセスすると、OSに対応したインストーラが表示されるので、そのままダウンロードします。
![image.png](https://raw.githubusercontent.com/gahoh/articles-qiita/main/install-nodejs-macos/images/download1.p

Nodejs 環境周りメモ

# 背景
久しぶりにnodejsを触ってバージョン管理関係の知識がゴチャゴチャしていたので、整理する。

# 開発環境

PC:macOS Montery（Intel Core）
エディター：Visual Studio Code

Homebrew 3.4.11

# 内容
「OS上でのnodejsのバージョン管理」と「プロジェクト毎にnodejsのバージョンを管理」が混ざっていたので、今回は後者の「プロジェクト毎にnodejsのバージョンを管理」についてまとめる。

「OS上でのnodejsのバージョン管理」だと[nodebrew](https://github.com/hokaccha/nodebrew)や[fnm](https://github.com/Schniz/fnm)などがある。

「プロジェクト毎にnodejsのバージョンを管理」には、nodenvを採用する。（pyenvやrbenvを使用したことがあり、似たようなものを検索したら出てきたため）

まず、homebrewを使用して、nodenvをインストールする。ターミナルから下記コマンドを実行する。

“`
b

npxやnpmでのインストールが失敗する場合はNode.jsのバージョンを確認しよう

完全に自戒です

Next.jsをインストールしていて、
インストールは一見成功したみたいですが、

“`
$ npx create-next-app@latest –typescript

$ npm run dev

ReferenceError: TextEncoder is not defined
“`

インストール後の初期状態で起動コマンドを打ち込んでみるとエラーが出てしまいます。

さらに、Storybookをインストールしようとすると

“`
$ npx storybook init

input.flat is not a function
“`

エラーが出て失敗します。

エラー文で検索してもあまりいい情報がヒットしなかったのですが、
ふとNodeのバージョンはどうだったっけと思ったらv10でした。（現時点でLTSはv16）

Nodeのバージョンを更新してから試したら問題なくインストール成功しました。

URL 生成サポートアプリを作ってみた

簡単な URL 生成サポートアプリを作ってみたので紹介します。
​
# GitHub

https://github.com/nkm-m/Translate-App
​
​
## 概要
詳細は GitHub をご覧ください。
アプリの内容は以下の通りです。
​
・入力した日本語を英語に翻訳
・英語を小文字に変換
・英単語間にハイフンを挿入
・特定の記号 (`.`, `’`, `?`) を削除
​
# 作成したきっかけ
これまでは、URL を生成したい時に以下の手順で行っていました。
​
1. Goggle 翻訳で日本語を英語に翻訳
2. 英語で大文字になっている文字を小文字に直す
3. 英単語間にハイフンを手打ち or エディタで半角スペースをハイフンに置換
4. ピリオドなどの記号を削除
​
上記の手順は 1 ~ 2 分もあればできるのですが、それがちまちました作業だったので面倒だと感じていました。
上記の手順を一発で解決するツ

ESLintでimport自動整形に関して　ESLint × Prettierの設定しているなら「なし」に落ち着く予感

## はじめに
自身が開発しているプロジェクト内で少し議論になった事もあり、importの自動整形についてはどうなのか？考えてみた。

（プロジェクトや個人の考え方に結局よると事だが）なんとなく結論としては、ESLint・Prettierの構成を取っているなら、スタイルの修正をESLintで行わせる事になるimportの自動整形は「なし」になるだろうなと思う。

以下では、ESLint・Prettierの構成の場合に、なぜimportの自動整形が「なし」になりそうか？についてみていきつつ、ESLintの静的解析とPrettierのコード整形を分離する方法についても見ていく。
おまけとして、「なし」といったもののやりたいという需要もあると思われるので、importの自動整形を行う方法についても取り上げた。

## importの自動整形はできるけど、ESLint × Prettierのプロジェクトではやらない、になるだろう
Javascript（Node.js）であれば、静的解析にESLint、コードフォーマッターにPrettier、という構成は鉄板だと思う。その場合、importの自動

Node.js 参考サイトとメモ

https://developer.mozilla.org/ja/docs/Web/JavaScript

https://qiita.com/non_cal/items/a8fee0b7ad96e67713eb

https://eng-entrance.com/what-is-nodejs

## Node.js とは？

ブラウザ上という制限された環境でしか動けなかったJavaScriptを、PythonやRubyのように __OS上で__ 動かせるようにしてくれる __JavaScript実行環境__ が __Node.js__。

OSにNode.jsをインストールすると __node.exe__ ができる。
node.exeはJavaScriptコードを __実行するアプリケーション__ （JavaScript実行環境）。

Node.jsではJavaScriptでOSの機能にアクセスするプログラムを組むことができる。
つまりブラウザ上で動作していたときはできなかった自由なファイルの読み書きやネットワーク通信などのOSの機能を扱える。

Node.jsは元々 __大量の同時

【Node.js】AWS SNSを使ってSMS(ショートメッセージ)を送る【Typescript】

ここでいうSNSは、Twitterみたいなソーシャルネットワーキングサービス・・・ではなく、
AWSの **SimpleNotificationService** のことです。
SNSでSMSを送る(噛みそう)機能を触ったので、設定方法などを記録します。

## IAMユーザの追加
まずはユーザを作成。
SNSのフルアクセス権限を付与します。

### ユーザー詳細の設定

このページの右上にある「ユーザを追加」ボタンを押下
https://us-east-1.console.aws.amazon.com/iamv2/home?region=us-east-1#/users


– ユーザ名: 適当なユーザ名
– SWS認証情報タイプ: アクセスキー -プログラムによるアクセス

ユーザ名は会社のルールに則るのがいいと思います。

コミットリント(commitlint)を導入し、コミットメッセージをlintする

## はじめに
開発現場ではコミットメッセージが適当だと、後から見た時や他の人が見た時に？？？になって、開発のネックになってしまう事はままあると思う。今回はコミットメッセージが各人でバラバラで独自的なものにならないように、git hooksでコミットメッセージにリントを書ける方法についていきたいと思う。

## ひとまずやってみる
私はNode.js（Javascript）で開発している事もあり、[commitlint](https://github.com/conventional-changelog/commitlint)を利用する。

設定方法等は[Guide: Local setup](https://commitlint.js.org/#/guides-local-setup?id=guide-local-setup)に書かれているのでそちらを参照して行っていくが、私はgit hooksを設定するのに[simple-git-hooks](https://github.com/toplenboren/simple-git-hooks)を使う事にした。

※simple-git-