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

バージョン管理システム#2

# npm インストールのオプションを使い分ける
前回の記事でpackage.jsonとpackage-lock.jsonの違いやnode_modulesをまとめました。今回は、
・npm install
・npm install ＜package＞
・npm install -D ＜package＞
・npm install -g ＜package＞
の使い分けをまとめます。

## npm install
用途・・・package.json及びpackage-lock.jsonが共有されていて、自分のディレクトリでまだpackageがインストールできていない時にnode_modulesを生成（packageをインストール）する。
もしくは、package.jsonが更新され、新たに全てのパッケージをインストールするとき

## npm install ＜package＞
ローカルインストール
用途・・・グローバルインストールでもdevインストールでもない時に使用する。基本的にはこのインストールコマンドを使用する。
packageは、.node_modules/.bin/配下にイン

ゼロからNode.js環境をHomebrew、nodenv経由で構築(MacOS)

# ゼロからNode.js環境をHomebrew、nodenv経由で構築
大学入学時に購入して何もわからず環境構築したMacBook Pro。
何かがおかしいと気づきつつ無理矢理使ってきましたが本当に限界を感じたので一旦出荷状態まで戻して全てを最初からやり直します。
**この記事ではNode.js環境をHomebrew、nodenv経由で構築していきたいと思います。**
一連の投稿のハブになる記事は[こちら](https://qiita.com/TakayoshiK/items/ae53424b788c8fcb645b)

**参考にさせていただいた記事**
[MacにHomebrew経由でnodenvを導入する（＋PHPStorm対策）](https://qiita.com/alice37th/items/989af6749264de50bb85)

## 環境
MacBook Pro (13-inch, 2018)
macOS　Monterey Version 12.5
メモリ intel Core i5
zsh 5.8.1 (x86_64-apple-darwin21.0)

#

パッケージ管理システム #1

# パッケージ管理システム
## npm（Node Package Manager）とは？

Node.jsで外部パッケージをインストールして使うためのマネージャ。
package.jsonを読み込んで、npmのリポジトリにパッケージを取りに行く。
npmを使うと、依存しているパッケージを一度にインストールできる。
似たようなパッケージ管理システムにyarnがある。
以前はBowerというものが使われていたが、今ではnpm,yarnが一般的。

## package.jsonとpackage-lock.json
### package.json
自身のパッケージを管理するために使われるファイル
package.jsonは npm init　コマンドによって生成される
インストールすべきパッケージのバージョンのの範囲や対応ブラウザのバージョン指定、npm-scriptなどが記入される。
また、package.jsonが存在するディレクトリにnpmを使って新たにパッケージをローカルインストールすると自動的にpackage.jsonの情報が更新される。※グローバルインストールでは記入されない

Payment APIで支払い用のQRコードを発行するメモ PayPay for Developers

## はじめに

この記事は、PayPay の Payment APIを利用して、決済用のQRコードを発行するまでの手順メモです。

## ドキュメント

https://developer.paypay.ne.jp/products/docs/webpayment

## インストール

“`bash
npm i request
“`

## コード

下記のコードを`qr.js`として保存する。

“`js
var request = require(“request”);
var options = {
method: POST,
url: /v2/codes,
headers: {
‘Authorization’: ‘hmac OPA-Auth: ‘,
‘X-ASSUME-MERCHANT’: ,
‘Content-Type’: ‘application/json’,
},
body: { “amount”: 1000, “codeType”: “ORDER_QR”, “merchantPay

windowsでUbuntu,homeblew,nodebrewをインストール、VSCodeでTypeScript環境を構築する

## はじめに
windowsでubuntuを用いてhomebrew,nodebrewをインストール、nodeをインストールしてVSCodeでTypeScriptの環境構築を行うまで、調べたこと、作業したことをまとめました。
コマンドはすべて、WSL上で実行します。

## Ubuntu、Homebrewをインストール
Ubuntuとは、Linux系のOS
Homebrewとは、パッケージ管理システム

1. WSL（Windows Subsystem for Linux）の有効にする
1. Ubuntuをタウンロード、セットアップを行う
1. Homebrewをインストールする

参考記事
・[HomebrewをWindows上で使えるようにする](https://www.techgaku.com/setup-homebrew-on-wsl/)
・[【完全版】Homebrewとはなんぞや](https://zenn.dev/sawao/articles/e7e90d43f2c7f9)

## nodebrew、node.js、npmをダウンロードする
nodebrewとは、node.

Node.js+React+Herokuでアプリ開発環境を構築する

# 概要
フロントエンドにReact、バックエンドにNode.js(expressサーバー)を使ってアプリを構築し、それをHerokuにデプロイする開発環境を構築する

# 目次
[1. Node.jsのインストール](#1-nodejsのインストール)
[2. Herokuのアカウント登録とインストール](#2-herokuのアカウント登録とインストール)
[3. gitをインストールする](#3-gitをインストールする)
[4. expressサーバーの準備](#4-expressサーバーの準備)
[5. reactの準備](#5-reactの準備)
[6. ローカル環境での起動](#6-ローカル環境での起動)
[7. Herokuへのデプロイ手順](#7-herokuへのデプロイ手順)
[8. アプリ実行](#8-アプリ実行)

# 1. Node.jsのインストール
Node.js公式ページから推奨版のインストーラーをダウンロードする
[Node.js公式](https://nodejs.org/ja/ “Node.js公式”)
※2022/07/29現在の推奨版は16.16

async/awaitを一言で説明する

丁寧な説明は多いが結局なんだっけ？となったので一言にしてみた。
要するにasync/awaitとは、

## asyncの中でawaitを使うと、promiseが返ってくるまで待ってくれる仕組みのこと

“`test.js
async function test(){
console.log(‘1’);
await setTimeout(() => {console.log(‘2 (非同期処理)’)}, 1000);
console.log(‘3’);
};
“`

出力結果

“`
1
2 (非同期処理) // awaitしたので非同期処理でも記述順に実行される。
3

// awaitしないと132となる。
“`

## ということは、awaitを使いたくなったら最後にpromiseを返せばOK

“`testPromise.js
function testPromise(){
return new Promise(function(resolve){
// 何らかの非同期を含む処理
//

DRY原則に効く！Node.js+ExpressによるAPIのMiddleware化

こんにちは。GMSのバックエンドエンジニアの@yuyasan-goです。
Node.js のWeb Frameworkとしては古株ではあるものの、利用されている方もまだまだ多いExpress関連についてです。
軽量フレームワークであり新規導入のしやすさがメリットですが、サービスも成長して徐々にコードベースも大きくなるにつれて、エラー処理や同様処理が増えてくるケースも目にすることも多くなってくるのではないでしょうか。
今日はそういった状態になってきた際の「DRY原則に効く！Node.js+ExpressによるAPIのMiddleware化した」話について紹介します。

# 全体構成

全体構成の概要図はこのような形となっています。
バックエンドの主な技術スタックは、Node.js + Express + MySQL(Amazon Aurora) + DynamoDBを採用しています。
![infrastructure.drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803671/cb59b33

チュールのうたを圧電スピーカーで音階設定して、動画BGMを作成した話。

こんにちは～

私には飼っている猫（こっちゃん♀）をいなばチュールのCMに出演させたい！という
夢があるのですがなかなか叶えることができず・・・
こっちゃんのために自分でＢＧＭを作り、動画までとってみよう！と
実践したことをまとめました！

**今回はYoutubeのちゅーるのうたを流すだけでは面白くないので
圧電スピーカーで音階設定して、LINEリッチメニューで使用しやすいように作成しました。**

ちなみにチュールはいなば食品グループのいなばペットフードから発売されており、
猫達が食べやすいよう水分を90%含んだペースト状のフードらしいのですが、
我が家ではほぼ猫のおやつです。
そして今年はチュール販売開始から10年という記念すべき年でもあります！

## 完成した動画

ここさんに再度お願いしてチュールCM風動画を撮りました?電圧スピーカーの音階設定難しいけど楽しい！ワンフレーズじゃ食べきれないからエンドレスで流れる設定にしつつ、リッチメニューで再生&ストップも楽ちんに✌️#ちゅーる #猫好きさんと繋がりたい #obniz #LINEBot #protoout pic.twitter.com/RjTTplD89A

— hitomi@趣味探しアプリMe Clip（ミークリップ）開発中?‍♀️ (@nghrhtm1) July 24, 2022

私の多少の音痴がチュールのうたにも出ているし、
obnizが映ってないから2回撮影しましたが、
こっちゃんは喜んで対応してくれました笑

## 使用したもの
* [obniz](https://

VSCode remote containersでnodejs環境を構築する

VSCode remote containersでnodejs環境を構築する

# 目指すもの
VSCode remote containersを使ってホスト側の環境を汚すことなく、コンテナ側でnodejsの環境構築をします。
その際に、extensionでLintツールをインストールしたり、VSCodeの設定も行います。これは開発メンバー間で同一の環境を作成することを想定しています。

## VSCode remote containersとは？
Dockerコンテナに開発環境を構築し、ホスト側のディレクトリをマウントすることで、開発者がホスト側のVSCode上でコンテナ側のファイルを書き換えることができる機能(extension)です。

[VSCodeドキュメントより](https://code.visualstudio.com/docs/remote/containers)より

##

M1,2(arm64)でnode-sassを使用するには

### はじめに

最近、intel macからM2 macに変更したのですが、環境構築等を行っているときにnode-sassに関してのエラーが発生し、解決に時間がかかったので備忘録として残しておきます。

### エラー内容
プロジェクトをyarn install した際に以下のエラーが発生しました。
“`
…/node_modules/node-sass: Command failed.
Exit code: 1
Command: node scripts/build.js
Arguments: …
Directory: …
…
gyp info using node-gyp@3.8.0
gyp info using node@14.17.0 | darwin | arm64
gyp verb command rebuild []
gyp verb command clean []
gyp verb clean removing “build” directory
gyp verb command configure []
gyp verb check pyt

Javascriptでもアローラロコンをアーロンにする

# やる事
タイトルの通り。入力された文字列を2文字づつ飛ばした文字列にして出力する。Pythonほど楽じゃないけどPHPよりは簡単そう。Typescriptで[もっとすごいこと](https://qiita.com/schrosis/items/1835c8e5787837eb2199)をやってる人がいたけど、こういうのは勢いが大事なのでやっていく。

# 元ネタ

アローラロコンを1文字飛ばしで読むと…

>>> "アローラロコン"[::2]
'アーロン'

— 清原弘貴@ShodoでAI校正 (@hirokiky) July 27, 2022

## 触発された記事
[PHPでアローラロコンをアーロンにする](https://qiita.com/tadsan/items/828cf43ec902440255cb)

# コード
“`javascript:arora.js
function arora(str){
return new Array(…str).filter((_,i)=>(i+1)%2===1).join(“”)
}

function main(){
const str = “アローラロコン”
console.log

yarn startでサーバーが立ち上がらない

# 概要
UdemyでReact Hooksの講座を学習中、環境構築で詰まったのでまとめる

https://www.udemy.com/course/react-hooks-101/

# エラー文
Error: error:0308010C:digital envelope routines::unsupported

# 解決策
https://qiita.com/yuzu_283879391/items/8e9acaea257d64231037

こちらの記事と同様の問題と判明。
使用しているNodeのバージョンが新しすぎたことが原因らしい。
講座で使用しているバージョンに変更したところ、無事にサーバーが立ち上がった。
変更方法は以下の記事を参考。

https://qiita.com/k3ntar0/items/322e668468716641aa5c

人形使い（puppeteer）

Puppeteer は Chrome を制御するノードライブラリ。
RPA（ロボティクプロセスオートメーション）として、Webの定型作業を自動化・代行できる。
もちろん Webのテストを自動化することも可能。
# Get Start
## 初期化と Puppeteer インストール
“`
# プロジェクトを初期化する。
% npm init -y
# インストール
% npm i puppeteer
“`
## スクリプト作成
Googleのトップページのスクショを撮る簡単なサンプル。
index.js
“`
const puppeteer = require(‘puppeteer’);

(async () => {
const browser = await puppeteer.launch({
headless: true // 画面表示 true:なし / false:あり
});
const page = await browser.newPage(); // ブラウザの新しいページを開く
await page.goto(‘https://www

docker compose環境でvite起動時、Cannot start service: Host version “0.14.49” does not match binary version “0.14.50”エラーが発生する時の対策

# 前置き
dockerとviteには初心者でして、今回のエラーを解決する方法が多少雑で遠回りになります。
ご覧いただいて不足する部分や間違っているところがありましたら、ご指摘いただけると嬉しいです。

# 現象
docker-composeでdockerを起動すると、以下のメッセージがコンソールに表示されます。

“`
app_frontend | ✘ [ERROR] Cannot start service: Host version “0.14.49” does not match binary version “0.14.50”
app_frontend |
app_frontend | 1 error
app_frontend | failed to load config from /app/some_app/vite.config.ts
app_frontend | error when starting dev server:
app_frontend | Error: The service was st

React 18の新機能と並行レンダリング革命

## 概要

本記事ではReactのメジャーバージョンアップであるReact 18で実装された新機能についてご紹介します。このアップデートによりReactはレンダリングを並行化するという大きな革命に挑戦しています。この並行レンダリングという概念を解き明かしながら新機能の使い方やメリットについて解説していきます。

## React 18とは

React 18は2022年3月にリリースされたReactのメジャーバージョンアップです。基本的なアップデート内容については以下の記事に詳しく書かれています。

https://reactjs.org/blog/2022/03/29/react-v18.html

Reactはバージョン16のリリース以来ここ数年大きな機能追加を行いませんでした。一つ前のメジャーバージョンである17では「新機能なし」とされています。

https://reactjs.org/blog/2020/10/20/react-v17.html

その裏では並行モード(Concurrent Mode)と呼ばれる新しい仕組みの開発が進められていました。それが結実したのがRea

nvmとnpmの違いをまとめてみた(ついでにyarnも

## 概要
毎回あやふやになってしまうので備忘録として残しておきます。

## nvmはnode.jsのバージョン管理ツール
nvmはnode.jsのバージョンを管理するツールです。
主に,`nvm install “10.17.0”`みたいな感じでインストールしたりします。
さらに`echo ‘10.17.0’ > .nvmrc`みたいにするとそのディレクトリで`nvm use`でバージョン切り替えるみたいなことができます。

## npmはnode.jsの公式パッケージ管理ツール
一方、npmの用途はパッケージ管理です。
JavaScript公式のやつです。
Expressとか、asyncとかnode.jsの有名なパッケージを管理できます。

## yarnはnode.jsの非公式パッケージ管理ツール
yarnもnpmと同じnode.jsのパッケージ管理ツールです。
非公式だけどこっちの方が早くて優秀？らしいです。（今はあんまり変わらないみたい

nodejs で import がシンタックスエラーを吐く

ある`nodejs`のコードを実行しようとしたら以下のようなエラーを吐かれた

“`jsoutput
import pkg from ‘‘;
^^^^^^

SyntaxError: Cannot use import statement outside a module
“`

https://bobbyhadz.com/blog/javascript-syntaxerror-cannot-use-import-statement-outside-module#:~:text=The%20%22SyntaxError%3A%20Cannot%20use%20import,json%20for%20the%20Node%20apps.

によると、どうもJavascriptのバージョン`ES6`からの機能を使ったコードが含まれている場合にこのようなことが起きるらしい。
`Nodejs`の場合には`package.json`の中に以下のような記述を追加すればよいらしい。

“`json
{
“type”: “module”,
}
“`

Node.jsのfetchでバイナリデータをダウンロードする

Node.jsはv18でデフォルト利用出来るようになったFetch APIで
バイナリデータをダウンロードする方法でハマったので備忘録として記事にする。

## バイナリデータをダウンロードする方法

`res.arrayBuffer()`メソッドを使うのが正解。
そのままではNode.jsでは扱えないので、
適宜`Buffer.from()`でバッファー型に変換してやる必要がある。

“`js
const fs = require(“fs”);

const main = async () => {
const res = await fetch(“https://example.com/path/to/image.png”);

// バイナリデータはarrayBufferメソッドを叩いて取り出す
const arrayBuffer = await res.arrayBuffer();

// Uint8ContentsのArrayBuffer型 -> Buffer型に変換
const buffer = Buffer.from(arrayBuffer);