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

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

Lambda Node.js 18 でaws-sdkを使おうとして詰まった

:::note info
この記事は[miriwoお一人様 Advent Calendar 2022](https://qiita.com/advent-calendar/2022/miriwo)の17日目の記事です
:::

# 概要

– LambdaのNode.js18にてaws-sdkを使おうとしてかなり詰まったのでまとめておく。

# 謝辞

– 本問題の解決は同プロジェクトの先輩エンジニアさんにご協力いただきました。改めてお礼申し上げます。

# 情報

| 内容 | 情報 |
| — | — |
| ランタイム | Node.js 18.x |
| ハンドラ | index.handler |
| アーキテクチャ | x86_64 |
| 関数の作成 | 一から作成 |

# 問題発生までの経緯

– Lambda関数にブラウザから下記の様にindex.mjsに記載をした。

“`index.mjs
import { AWS } from ‘aws-sdk’;

exports.handler = async (event) =

元記事を表示

[Next.js+Node.js+Socket.io]新体操の採点システムを作った話

# はじめに

新体操の採点をすることができるWebアプリの作成をしました。
Node.jsやMongoDBをまともに触るのは初めてだったので、少し苦戦しました。
今回は、システムの説明と詰まったところや反省点について説明していきたいと思います。

使用技術
– Next.js(Typescript)
– Node.js(Express.js + Mongoose)
– WebSockt(Socket.io)
– MongoDB

# GitHubのリポジトリ

フロントエンドのリポジトリ↓
https://github.com/mrkmtkm/mrg-referee-front

バックエンドのリポジトリ↓
https://github.com/mrkmtkm/mrg-referee-backend

# 概要
ユーザーは、大会の主催者と審判の2人がいます。
簡単に説明すると、審判の採点した点数を主催者側でリアルタイムで受け取り、点数を集計し表示するシステムです。
実際はこんな感じです。

特徴としては
– 手軽で簡単に

元記事を表示

AWS SDK V3 のFirehoseでputRecord出来なかったのを、何とかできた件について(AWS SDK V2 → V3 移行Tips)

# はじめに

AWS SDK V2 で動作していたコードを、ガイドに従って V3 に置き換えても、putRecord(Firehoseへのデータ登録)ができず、エラーで終了してしまう。

# 結論
インターフェースが変わってる(不便になってる!?)
こんな代表的なレベルのメソッドを互換取らずに置き換えるなんて、なんて罠。。。

+ API インターフェース(V3) V3のドキュメント見にくい。。。(個人的感想)

https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/clients/client-firehose/interfaces/_record.html

Uint8Arrayで渡せという事らしい。。。

+ API 仕様(V2)

https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/Firehose.html#putRecord-property

V2の頃は、「’STRING_VALUE’ /* Strings will be Base-64 encoded」

元記事を表示

Node.jsのバージョンを下げる方法

結論

以下を実行。

“`
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash
“`

~/.bash_profile, ~/.zshrc, ~/.profile, or ~/.bashrcなどのファイルに以下を書き込む。
“`
export NVM_DIR=”$([ -z “${XDG_CONFIG_HOME-}” ] && printf %s “${HOME}/.nvm” || printf %s “${XDG_CONFIG_HOME}/nvm”)”
[ -s “$NVM_DIR/nvm.sh” ] && \. “$NVM_DIR/nvm.sh” # This loads nvm
“`

Node.jsで使用したいバージョンをインストールする。

“`
nvm install 16
“`

参考サイト

[nvm で複数の Node.js バージョンを切り替えて使用する (Node Version Manager)](https

元記事を表示

strapi運用を節約する

Strapiをcloud環境などに設置する場合、テキストや画像ファイルなどをその環境に置くことはないかと思います。
大体の場合、テキストはRDSやcloud SQLにsupabaseといった外部のデータベース、画像ファイルはs3やcloud storage, supabaseといった外部のストレージに吐き出すことになるのではないでしょうか。

そんな時、問題となってくるのがお値段です。

テキストは書けば書くほど、画像は置けば置くほどお金がかかります。
多くのクラウドサービスには無料枠がありますが、たいていの場合期限があったり上限が低かったりといったことが多いでしょう。

特に、DBはまあ仕方がないとしても、画像ファイルをどうにかして削減したいと考えるのは自然のことだと思います。
そんなわけで、これら節約術を考えていくというのが今回の記事となります。

なお、最終的な画像出力先、headlessCMSからブログなどの適当なアプリケーションに届けた段階で不都合はいろいろ何とかしてくれるだろという前提で話を進めるので、フロントエンド側で解決できそうなことはすべてフロントエンド側に丸投げする

元記事を表示

WindowsでNode.js環境の構築

windowsでnodejs環境を構築したときの備忘録

# chocolateyのインストール
chocolateyはwindowsのパッケージマネージャ、これを入れると色々便利。
`windows + R`でpowershellを指定して`ctr + shift + Enter`で管理者として実行
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181686/dfd28495-bdf1-1b77-c751-9d31ea5b726b.png)

以下のコマンドを実行するとchocolateyがインストールされる
“`bash
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object S

元記事を表示

Docker + Squooshで、一括で画像をwebpにする方法

## はじめに
[スペリス](https://spalice.com)で開発をしております、安永です。
この記事では、Dockerを使って、手軽かつホストの環境を汚さず、画像ファイルを一括でwebpに変換する方法を紹介します。

## squooshとは?
`squoosh`はGoogleが開発をしている画像を次世代フォーマットである`webp`に変換することができる神ツールです。
画像をwebpにすると、jpgやpngなどと比べて、サイズが抑えられ、画像の表示速度改善に役立ちます。

https://squoosh.app/

https://github.com/GoogleChromeLabs/squoosh

web上でも画像の変換をすることができ、webpだけじゃなく、avifとかの変換もでき、UIも素晴らしいものになっております。

ただ、画像を複数変換する必要があると、web上だけだと少し面倒でした。
その場合に備えてnpmのパッケージも用意されているのがさらに素晴らしいですね。

https://github.com/GoogleChromeLabs/squoosh/t

元記事を表示

Prismaの導入とメリットを考える

# はじめに
Node.js + TypeScriptによるサーバーサイドの開発は、クライアントサイドとスクリプトを同じ言語で管理できるなどのメリットがあります。
その際に使用するのが、Node.jsウェブフレームワークであり、データベース連携は必要不可欠です。
ですが、普段データベースに触れる機会が少ないデータベース初心者にとって、SQL文を書くのはハードルが高く感じます。

そういった状況で役に立つのが、「Object-Relational Mapping / オープンソースのオブジェクト関係マッピング」(以降ORM)です。
「[Prisma](https://www.prisma.io/)」はNode.js ORMの1つです。
本記事では、Prismaについての理解を深めることを目的とします。

## 前提と対象読者
以下の知識や経験があり、
– Node.jsの基礎知識
– Node.jsウェブフレームワークの使用経験

以下の考えをお持ちの方。
– Node.jsによるORMに興味がある
– フロントエンドもバックエンドも同じ言語(JavaScript / TypeScrip

元記事を表示

【11日目】Node.jsでDiscordに毎分ランダムでGIF画像を送る

# はじめに
こんにちは、なりかくんです。
今回は、Node.jsでDiscordに毎分ランダムでGIF画像を送るプログラムを作りたいと思います。

# GIF画像を取得する
今回は、GIF画像を取得するのにTenor APIのランダムGIFを使います。
このAPIでは、API Keyと検索文字を指定するだけでランダムにGIF画像を持ってきてくれるという優れたAPIです。
ドキュメントは以下のページに記載されていますので、ぜひ参考にしてみて下さい。

https://developers.google.com/tenor/guides/quickstart

今回作成した取得するコードは以下のコードになります。検索結果が見つかればGIFのリンクを返して、見つからなければnullを返すというコードです。
“`js
function getGif(query) {
return new Promise((resolve, reject) => {
request({
url: `https://tenor.googleapis.com/v2

元記事を表示

【Flutter】Webでcsvファイルをダウンロードする

# はじめに
よくあるWebページからcsvをダウンロードする機能ですが、この記事はFlutterを用いてcsvダウンロード機能とnodejsを用いてawsのWebAPIに実装について書いています。

# Flutter Webからダウンロード
## AnchorElementクラス

使うSDKはdart:htmlライブラリAnchorElementクラスです。

https://api.flutter.dev/flutter/dart-html/AnchorElement-class.html

## 実装

### BOM
エンコードしたファイルの先頭にBOMを設定しないと文字化けすることがあります。
>バイト順マーク (バイトじゅんマーク、英: byte order mark) あるいはバイトオーダーマークとは、通称BOM(ボム)といわれるUnicodeの符号化形式で符号化したテキストの先頭につける数バイトのデータのことである。このデータを元にUnicodeで符号化されていることおよび符号化の種類の判別に使用する。

[バイト順マーク – Wikipedia](https://

元記事を表示

Node.js+mysql2でデータ取得&登録

Node.jsでDB接続をする時、MySQL8系とnpmのmysqlライブラリだとパスワード認証ができないので[mysql2](https://www.npmjs.com/package/mysql2)ライブラリを使うと思います

mysql2のDB操作は記事によって書き方が違う、(当時のバージョンと違うから)全然動かない…!と苦労したので書いておきます

## DB接続
async-awaitでDB操作をする `mysql2/promise` を利用します

“`js
// require(‘mysql2’)でコールバック関数を使う方法だと動かなかった
var mysql = require(‘mysql2/promise’);
let client
/**
* DB接続生成
* DB操作時に接続、クローズをする
*/
const createConnection = async() => {
client = await mysql.createConnection({
host: “localhost”,
port: 3306,
user: “userNa

元記事を表示

TypeScriptとInversifyを使って開発してる時に手癖的に使うスクリプト

# はじめに

この記事は [アイスタイル Advent Calendar 2022](https://qiita.com/advent-calendar/2022/istyle) 15日目の記事です。

お久しぶりです。@shiratah(@chilitreat)です。
最近は、誰も詳細を知らないレガシーなコードを新しくTypeScriptで再実装したり、Nuxt.jsでフロントエンドを作り直したりしています。その中で得た知見を紹介します。

近年アイスタイルでは、Node.js(TypeScript)で作られたバックエンドAPIが増えています。
その中でも、[Inversify](https://github.com/inversify/InversifyJS)と[inversify-express-utils](https://github.com/inversify/inversify-express-utils) を使ったアプリケーションが多いです。

Inversifyは、JavaScriptとNode.jsアプリケーションのための、強力で軽量な反転制御コンテナ(DIコン

元記事を表示

タイピングもできない高校生が0からSNS作ってみた!

## はじめに
こんにちは。はなむ++です。
私は2021年の夏までPCさえまともに触ったことのない高校生でした。元々面白そうなことを考えることが好きだったこともあって「考えること」「作ること」は好きでした。
ある時、「自分の通っている学校のために作られたSNSがあれば便利じゃね?」と思い、MacBookAir(M1チップ搭載)を購入し、コンピュータ部に転部したことから物語は始まります。
約1年半の時を経て、「Tone」と名付けられたSNSは完成間近となりました。どうぞその軌跡とやらをご覧ください。

## 本記事で紹介すること

– SNSの概要
– コーディングなど詳細を含まない開発過程および活動

本記事では技術的なことを詳しく紹介していません。
SNSの機能やどういった仕組みで実装しているかはこちらで紹介しています(執筆中)。

https://zenn.dev/hariken/books/tone-ref-2022-08-29

## 対象読者

– どう精進するか迷っているプログラミング初心者
– コンピュータ系の部活に所属している中高生

大体こんな感じの人に対して書きま

元記事を表示

ラーメン画像をプッシュ通知で送りつけあって飯テロするクソWebアプリを作った

## 作ったもの

https://ramen-sender.vercel.app?1

## どんなアプリ?

* プッシュ通知を購読し、プッシュ通知送信ボタンを押すとプッシュ通知を購読している**自分も含めたユーザ全員に**ラーメン画像のプッシュ通知を送りつけることが出来ます。
* また、飯テロといえば深夜なので毎日24時にラーメン画像がプッシュ通知で送られてきます。
* 送られてくるラーメン画像はすべて私が撮ったものです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154239/da805f08-2848-f073-ac81-b9413ca381ca.png)

## なんで作ったの?

iOSのsafariのPWAでもPush通知ができるようになる!
iOS16で実装される!
みたいな情報があったから、iOS16出たしなんか作ってみよう!って思ってたんだけど
実際に使えるようになるのは2023年中(

元記事を表示

実はSVGってCanvasの代わりに使えるんじゃないか?

## はじめに

個人開発アドベントカレンダーとして何を書くか悩んだのですが、作ったもの列挙するのもありきたりかと思ったので、最近自分が考えていることについて書こうと思います。

それは、表題のとおり「実はSVGってCanvasの代わりに使えるんじゃないか?」ということです。

## 経緯

私は、個人開発で「サーモンラン研究所」([@salmon_lab](https://twitter.com/salmon_lab))というアカウントを運営しています。これは、スプラトゥーン3というゲームのイベント情報を、リアルタイムにツイートするという非公式なbotです。

このbotはこんな感じで、イベントの詳細情報を画像でツイートすることができます。この画像機能の実装についてどうするか、ということが今回の出発点でした。

## 5年前の実装:PHP

https://twitter.com/salmon_shift/s

元記事を表示

asciidoctor.jsでJavaScriptからasciidocファイルを変換する方法

AsciiDocは、Markdownに似ている軽量マークアップ言語です。比較的マイナーですがGitHubでのプレビューに対応しています。

Markdownはドキュメント記述言語としては仕様が貧弱なため、簡潔に書くのが難しいものや、環境毎に異なる方言を使わなければならない事が多いです。
ただ、asciidocはそれなりに多機能な仕様が公式でしっかり定義されているので取り扱いやすい言語だと言えます。
https://docs.asciidoctor.org/asciidoc/latest/syntax-quick-reference/

下記はasciidocファイルのサンプルです。`#`が`=`になったMarkDownのような感じですね。

“`asciidoc:example.asciidoc
:hardbreaks:
= AsciiDocの例

== AsciiDocの例の一章

内容です
“`

AsciiDocにはAsciiDoctorというドキュメント変換プロジェクトがあり、これを使用してコマンドラインからasciidocファイルをHTMLに変換する方法はよく知られてい

元記事を表示

LTE-M Leaf を使ってモノを制御するプロトタイピングをやってみる

Webエンジニアです。

突然ですが、KDDIさんから、LTE-M Leafというモノをお借りしました。
なんと、[SORACOM のSIM](https://soracom.jp/store/5263/) とセットで。ありがとうございます!

前回、[STM32を使ったLチカ]() をやったのは、この LTE-M Leafが使いたかったからなんですね。
今回はようやく本番。LTE-M Leaf を使ったプロトタイピングに挑戦してみようと思います。

## LTE-M Leaf とは?

KDDI製のLTE-M通信用のモジュールです。

![IMG_2412.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31758/1d12fc98-0006-2a60-13c6-ad1deb5e1d83.jpeg)

LeafonyにLTE-Mを使ったセルラー通信機能を追加できます。

2枚セットですが、どうやら下記が正式名称のようです。

– [AC04 LTE-M King M (LTE-M通信用

元記事を表示

【9日目】Node.jsで為替レートをDiscordにリアルタイムで投稿する

# はじめに
こんにちは、なりかくんです。
今回は、Node.jsで為替レートをリアルタイムに取得してDiscordにリアルタイムで投稿するプログラムを作ってみようと思います。

# 今回使う為替レートの取得方法
今回は、有志の方が作成した為替レートAPIを利用します。
それがこちらです。
https://fx.mybluemix.net/

こちらのAPIを開発されたと思われるブログがこちらです。
http://dotnsf.blog.jp/archives/1039352247.html

このAPIはAPI Keyなどが不要で、非常にシンプルなレスポンスなので非常に使いやすいのが特徴です。以下が記事執筆時のレスポンスJsonの例です。
“`json
{
“status”: true,
“datetime”: “2022-12-14 10:54:00+0”,
“rate”: {
“USDJPY”: 134.797,
“EURJPY”: 143.69,
“EURUSD”: 1.06601,
“AUDJPY”: 92.563,
“G

元記事を表示

【完走賞ゲット-14】node-hid の hid-showdevicesコマンドで HIDデバイスに関する情報を出力(Node.js、JavaScript)

## はじめに
こちらは、[完走賞ゲットのため小ネタを毎日投稿しようとチャレンジする Advent Calendar 2022](https://qiita.com/advent-calendar/2022/youtoy) の 14日目の記事です。

記事の内容は、「JavaScript + HID用のライブラリ」という組み合わせで検索をすると、検索上位に出てくる [node-hid](https://www.npmjs.com/package/node-hid) の話です。
もう少し補足すると、その node-hid の公式情報の中に出てくる「hid-showdevices」のコマンドに関する内容です。
![node-hid の hid-showdevices について](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/28686cf4-77ca-c094-c9ee-44a7ca1b0398.png)
これに興味を持った経緯は、以下のとおりです。

1. 個人的に HID関連の技術の話が気になってきた

元記事を表示

Slack APIでLambda(Node.js)でランダムで絵文字のリアクションをする(reactions.add)

furikaeruという、1日の振り返りを簡単に楽しくできるSlack botを作りました。こちらがその記事です。

https://qiita.com/kakudaisuke/items/18681418cebc3bee93b5

この中で、メッセージに対してLambda(Node.js)を利用して、botで絵文字のリアクションをするという実装をしたのですが、シンプルそうなのにで、あまりサンプルコードにありつけず、ちょいと手こずってしまったのでメモを。

ランタイム: Node.js 14.x

Slack APIの`reactions.add`を使います。
必須パラメータはtoken, channel, name, timestamp。

https://api.slack.com/methods/reactions.add

“`js:index.js
const AWS = require(‘aws-sdk’);

exports.handler = async (event) => {
const eventBody = JSON.parse(event.body);

元記事を表示

OTHERカテゴリの最新記事