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

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);

GASからシンプルにLINE Notifyにポストするライブラリを作ってみた #LINEDC #LINENotify

Google Apps ScriptからLINE Notifyにポストするライブラリを作ってみました。

LINE NotifyはLINEに通知を送れる仕組みです。

> https://notify-bot.line.me/ja/

## 使い方

### LINE Notifyのトークンを取得する

https://notify-bot.line.me/ja/

### ライブラリのインストール

GASのエディタ画面でライブラリのメニューの`+ボタン`を押します。

> 

スクリプトIDを求めらるので以下をコピペして利用します。

> `1L4uz6F_w_o0RZsH-W6oR-eXklMmGvHddVjA4FrU6V

フロントエンド開発 Next.js、TypeScriptのインストールと初期設定

# はじめに
フロントエンドの環境構築で
TypeScript、next.jsを使用するために行ったことについてまとめます。

## 仕様技術、環境
OS → Windows　
エディター → VSCode

## Node.jsとは
サーバーサイドでJavaScriptを動かすための動作環境。

参考記事↓
・[Node.jsとはなにか？なぜみんな使っているのか？](https://qiita.com/non_cal/items/a8fee0b7ad96e67713eb)

## TypeScriptとは
JavaScriptを元にしたプログラミング言語。
私の認識だとJavaScriptの進化版

参考記事↓
・[TypeScriptを入門者向けに解説！JavaScriptとの違いや勉強法までわかりやすく](https://udemy.benesse.co.jp/development/system/typescript.html)

## Next.jsとは
JavaScriptのライブラリであるReactを元にしたフロントエンドフレームワーク。

参考記事↓
・[Next.js

Mac に node.js（と Python2）をインストール。時々 ncu。

## nodebrew のインストール
#### nodebrew は node のバージョンを切り替えて使うことができる管理ツール。
環境によっては、node の特定のバージョンでしか動かせない場合があり、バージョンを切り替えたいケースがあるため。
brew を使うには、予め [homebrew](https://qiita.com/nekyo/items/46ab6ae5d875b932cfbc) をインストールしておく必要がある。（[インストール方法はこちら](https://qiita.com/nekyo/items/46ab6ae5d875b932cfbc))

“`
% brew install nodebrew
“`

### リモートのバージョンを一覧
既に用意されているインストール元のバージョンが一覧できる。
このバージョンを指定してインストールする。
“`
% nodebrew ls-remote
v0.0.1 v0.0.2 v0.0.3 v0.0.4 v0.0.5 v0.0.6

v0.1.0 v0.1.1 v0.1

AWS LambdaでPostgreSQLのRDSプロキシを使用する方法 – Node.js

はいさい！ちゅらデータぬオースティンやいびーん。

# 概要
RDSデータベースへの接続を管理してくれるRDSプロキシを介して、AWSのLambda関数でPostgreSQLのデータベースに接続する方法を紹介します。

今回は、Node.js用のLambda関数を使います。

## 背景
Lambda関数でコネクションを張ると、パフォーマンスの問題が大きく関わってくるので、直接に接続するのは避けた方がいいです。

そこで、RDSプロキシを使用すると、Lambda関数の中で効率よくデータベースにアクセスできます。

前回の記事で、PostgreSQLのRDSプロキシの作り方を紹介しましたが、それを元に今回の記事を書いていきます。

https://qiita.com/tronicboy/items/c982eb046907b2965d08

# 目次
1. Node.jsのLambda関数のソースコードを書く
1. Lambda関数を作成する
1. RDSプロキシを設定する
1. 実行してみる

# Node.jsのLambda関数のソースコードを書く
ローカルで作成したLambda関数

【discord.js】modal windowを使ってみる

初書 ： 2022/07/24
node : 17.9.0
discord.js: v13.6.0

# 前書き

最近のdiscordに追加されているスラッシュコマンドやボタンなどの一つに、modalがある。
これが入力フォームの役割をしてくれるので、これを使ってみる。
なお、discord.jsの13.0.0の時は存在していなかったので、途中から追加された機能になる。

# 前提

・botは一通り動作すること

# 参考サイト

[Modals | discord.js Guide](https://discordjs.guide/interactions/modals.html#building-and-responding-with-modals)

# とりあえず書いてみる

上記参考サイトにコードの一例があったのでそのまま書いてみる。
ちなみにスラッシュコマンドで実行できるように書いている。

“`ts: index.ts
import {
Client,
MessageActionRow,
Modal,
ModalActionRowComponent,

SemanticRelease整備メモ

必要なパッケージを全部インストール

“`sh
$ npm i -D @semantic-release/changelog @semantic-release/git semantic-release simple-git-hooks @commitlint/config-conventional commitlint
“`

“`package.json
{
“scripts”: {
“prepare”: “npx simple-git-hooks”,
“commitlint”: “commitlint -e $GIT_PARAMS”,
},
“commitlint”: {
“extends”: [
“@commitlint/config-conventional”
]
},
“release”: {
“plugins”: [
“@semantic-release/commit-analyzer”,
“@semantic-release/releas

Next.js × Typescript で環境構築

Next.jsとTypescriptで開発環境の構築していきます。

環境{
Mac Os 12.5
Vscode
}

備忘録です。

## 初めに

エディタのターミナルでnode.jsのバージョン（存在）を確認

“`terminal
node -v

// v16.14.0
“`

nodeの存在を確認。
これは、JavaScriptのライブラリを管理するパッケージ。
パッケージとしてまとめたファイルが作られる。＝`package.json`
具体的にいつ使うのかはこの後すぐに分かる。

## アプリケーションの作成

##### ①ファイルの保管場所を決める。今回はデスクトップ。
“`terminal
cd desktop

//ユーザー名＠ユーザー名PC desktop ←　となればOK
“`

##### ② アプリ名を決め、コマンドを実行
“`terminal
npx create-next-app {好きなアプリ名} –use-npm –typescript
※{}は不要

npx create-next-app {好きなアプリ名} –types

jest + talkbackで外部APIリクエストをお手軽ユニットテスト

# TL; DR

– [talkback](https://github.com/ijpiantanida/talkback)を使えば、HTTPリクエスト/レスポンスを記録、再生可能！
– Rubyの[vcr](https://github.com/vcr/vcr)のNode.js版

# はじめに

外部APIのリクエスト箇所は、ユニットテストに苦戦しがちです。テストのたびに本家のAPIを叩くわけにはいかないし、かといってモックまみれにすると本番との差分が怖いです…

そこで今回は、talkbackを使ったユニットテストの方法を紹介します。

# 仕組み

https://github.com/ijpiantanida/talkback

talkbackは、外部APIリクエストのHTTPプロキシとして動作します。初回テストでは実際にAPIリクエストを発生させ、リクエスト、レスポンスの組み合わせをjsonファイル（「テープ」）に保存します。
次回以降はtalkbackがテープをもとにレスポンスを返すため、実際のAPIにはリクエストが飛びません。

– **実際のAPIリクエ

【Opensea】NFTに無限に「いいね❤」押せるツールを作成した話

## Openseaが意外とガバガバだった話。

[Opensea Hack] NFT Favorite Bot 2022✨

✅Everyday Everynight Getting More Likes on Your NFTs
Created by @LostMyCode#NFTCommunity #opensea

GASからシンプルにDiscordにポストするライブラリを作ってみた

GASのライブラリ作成ってどうやるんだろうと勉強がてら作ってみました。

## インストール

ライブラリIDはこちらです。

> `1s04ndQZRPQeivPoo_62F7wXa-GIdkSOij3W-2KcYeKYl_yiAsgS1CwJv`

GASのライブラリ追加からIDを指定してライブラリのインストールができます。

> 

## 使い方

“`js
function myFunction() {
const discord = new DiscordWebhook.init(`WEBHOOKのURLを指定`);
discord.post(`hogehoge`);
}
“`

こんな感じで実行できます。

Node.js + Express + Typescriptでプロジェクト作成

ExpressとTypescriptを使ってプロジェクトを立ち上げる手順を書き残します。
コードは[GitHub?](https://github.com/hinahinako/node-typescript-sample)で公開しています。

## ? ディレクトリ構成
– 以下のようになる予定です。

“`
– src
– server.ts ・・・Typescriptで実際に記述するコード
– dist
– server.js ・・・トランスパイル後に生成されるjsファイル
– tsconfig.json
– package.json
– package-lock.json
– node_modules
“`

– src配下に`.ts`ファイル
– dist配下に`.js`ファイル

が生成される想定です。

## ? プロジェクト作成

以下のコマンドを実行します。
“`
mkdir myapp
cd myapp
npm init -y
“`

以下のようにプロジェクトができます。
“`

{
“name”: “myapp”,
“ve

【JavaScript/TypeScript】jestで環境変数を差し替えてテストする方法

jestを使ってテストを書いていて、環境変数をケースごとに書き換えたくなった際にハマったので記事に残しておく。
# 前提

Lambdaで環境変数を受け取る際に、以下のようにhandlerの外側で変数を定義しているときの話である。

“`typescript:例)
import { Context, SQSEvent, SQSHandler } from ‘aws-lambda’;
import * as log from ‘lambda-log’;

// ** こんな感じで環境変数を取得している場合 **
export const TABLE_NAME = process.env.TABLE_NAME || ”;
export const PRIMARY_KEY = process.env.PRIMARY_KEY || ”;

export const handler: SQSHandler = async (event: SQSEvent, context: Context) => {
log.info(‘event row data’, { event, cont

コマンド付きでリプライするとリプライ元のメッセージ内容を取得する

# インストール必須
– Node.js
# 必要なライブラリ
– discord.js

# Q.需要はあるのか？
わかりません
# Q.なんで作ったんや
暇つぶし
# コード
“`js:index.js
client.on(‘messageCreate’, async message => {
if(message.content === ‘!replytxt’ && client.user.id !== message.author.id) {
console.log(message.reference)
if(message.reference != null){
console.log(message.reference.messageId)
const msg = await message.channel.messages.fetch(message.reference.messageId)
message.reply(‘返信したメッセージの内容:’+msg.content)
}else {
message.reply(‘メッセージ

Markdownで振り仮名が使える「Markdown Furigana」

# はじめに
普段､VScodeでMarkdownを使っていると､たまに振り仮名を使いたくなる時がある｡振り仮名をふるにはHTMLの``でマークアップするのだが､せっかくMarkdownを使っているのだから簡単に使いたい｡

そこで調べたところ､`furigana-markdown-it`というnpmパッケージと､それを利用して作ったVScode拡張機能の`Markdown Furigana`を見つけたので紹介する｡

# Markdown Furigana

## インストール
VScode拡張機能の欄で「**furigana**」と入力すれば､「Markdown Furigana」が表示されるのでインストールする｡

拡張機能:[Markdown Furigana – Visual Studio Marketplace](https://l.pg1x.com/UCMi)

## 使い方
`[]`で漢字を囲い､`{}`で振り仮名を囲う

“`md:foo.md
[猫]{ねこ}
“`
この状態でMarkdownのプレビューを見れば､

猫(<

WindowsでNode.js+React+TypeScriptの開発環境を作る

## Node.jsをインストールする
既にNode.jsがインストールされている場合でNodistを使用したい場合は
Node.jsをアンインストールしてから、Nodistのインストールを行うこと。

### Nodistのダウンロード
Node.jsのバージョン管理をするためにNodistをダウンロード＆インストール
[Nodist Github](https://github.com/nullivex/nodist/releases)

### nodistコマンドが使用できるようになっているか確認
“`
nodist -v
“`

### 使用可能なNode.jsのバージョン確認
“`
nodist dist
“`

### 指定するバージョンのNode.jsのインストール
v14.17.2をインストールする場合
“`
nodist + v14.17.2
“`

### 指定したバージョンのNode.jsがインストールされているか確認
“`
nodist list
“`

### 指定したバージョンのNode.jsに切り替え
v14.17.2に切り替える場合
`