f@ctor

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

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

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

こんにちは～

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

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

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

## 完成した動画

私の多少の音痴がチュールのうたにも出ているし、
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)です。

![image](https://code.visualstudio.com/assets/docs/remote/containers/architecture-containers.png)
[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)をやってる人がいたけど、こういうのは勢いが大事なのでやっていく。

# 元ネタ

## 触発された記事
[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);

元記事を表示

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のエディタ画面でライブラリのメニューの`+ボタン`を押します。

> ![スクリーンショット 2022-07-25 19.23.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/73714e9d-40b9-40d9-7236-842a68cd2016.png “スクリーンショット 2022-07-25 19.23.58.png”)

スクリプト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
:
io@v1.0.0 i

元記事を表示

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が意外とガバガバだった話。

元記事を表示

OTHERカテゴリの最新記事