f@ctor

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

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

草を生やしてこどものモチベーションを上げる【おまけ】heroku編~svg画像をpng画像に変換する~

# この記事は

シリーズ物の番外編です。
pixelaの画像を使いたかったのだけれども、gasだけでsvgからpngに変換することが難しく。
パワープレイでpngに変換したお話

– [草を生やしてこどものモチベーションを上げる【その１】仕様〜設計編](https://qiita.com/meowmeowcats/items/3fe2d0f006f374ffc71e)
– 草を生やしてこどものモチベーションを上げる【その２】実装編
– 草を生やしてこどものモチベーションを上げる【その3】テスト編
– 草を生やしてこどものモチベーションを上げる【おまけ】heroku編
– 草を生やしてこどものモチベーションを上げる【その4】運用編

# 課題　＆　解決方法（再び）

子供（特に長男）が、「今何をやっているか？」を忘れがちで、宿題や準備が進みません。
宿題の途中で何か別のことをしたり、、、、

子供用のToDoリストを見える化してみます
ポイントで釣ってどうにかならないだろうか、、、、と思っている

– 仕様
– タスクを完了にするとポイントが貯まる
![スクリーンショット 20

元記事を表示

お猫様ほかほか監視装置

こちらは[IoTLT Advent Calendar 2021 \| Advent Calendar 2021 \- Qiita](https://qiita.com/advent-calendar/2021/iotlt) 21日目の記事です。
### はじめに
寒くなってきたので猫が３匹いる我が家では電気毛布が欠かせません（４枚くらい稼働中）
しかし最近の電気毛布は勝手に電源が切れる安全仕様になっていて、電気毛布が勝手に止まっています（切れないタイマー）
電気毛布が切れてお猫様が寒い思いをしてしまっている OR 電気毛布の上でお猫様がほかほかになりすぎていないかをチェックして冬を快適に過ごしてもらいたいというものです
### できたもの

電気毛布の上にサーモセンサを置いて、電気毛布上の温度を計測
10分ごとにLINE Notifyで温度を通知してくれる

### 環境・材料
– 非接触温度センサ　-　[OMRON MEMS非接

元記事を表示

HACCPが制度化されたので、温度を定期的に取得して記録するデバイスを作成

詳細は後ほど追記します。

#HACCP制度化
食品事業者は温度記録しないと法律違反になります。

#温度ロガーに金払うのがちょっと・・・
自作します。
多少慣れていないところがあったので２時間ちょっとかかりました。

https://zenn.dev/shuyin02/scraps/491f348774f38c

リンクでごめんなさい。
単三電池1本で１年持つらしいので、結構経済的
冒頭にも書きましたが、後で詳細は書き直します。

元記事を表示

fs には promis 版もあるよ

# 生成した大量のデータをファイルに書き出したい

「POSデータ処理のテストデータ作ってほしいんだよ。性能測るから1年分。ここに日付けいれてあとはフォーマットあってれば中身何でもいいから適当に作って。DBに食わせるためのCSVだから、ファイルは分けても分けなくてもいいよ。」

『はーい。適当に作りまーす。』

—-

『さくっとNodeで出すかー。』

『んーっと、500バイトぐらいのデータが1日1000件ぐらい……せめて月単位ぐらいで分けるか……』

“`javascript:main.js
const fs = require(‘fs’)

const date = new Date(2017, 0, 1)
const dir = ‘hoge’

while(date.getFullYear() < 2018 ){ const month = date.getMonth() while(date.getMonth === month){ const file = `${dir}/data_${month+1}.csv` let lines = []

元記事を表示

[ ].slice.call(arguments) がよくわからなかったので、ECMAScriptの仕様書含めいろいろ調べた

# [].slice.call(arguments)…?
現在Node.jsを勉強中で、[Node.js デザインパターン](https://www.oreilly.co.jp/books/9784873118734/) を読んでます。
そんな中、読み進めていくとこんな記述が多くありました。

“`javascript
function hoge() {
…
const huga = [].slice.call(arguments, 1)
…
}
“`
この部分。
結局ここは引数を配列にして返しているのですが、
`slice`メソッドを空の配列に使っているという点と、
その後に`call(arguments, 1)`と繋がっているところで、やっていることがよくわからなかったので、自分なりに調べて考えてみました。

##argumentsについて

まず、`arguments`について調べました。

mozillaの[公式ドキュメント](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference

元記事を表示

Puerts を使って TypeScript で Unity する方法

こんなつぶやきを見つけて気になったので入門した。

どうやら中華人民共和国の大手企業テンセントが開発中の、
TypeScript で Unity や Unreal Engine などを使えるようにするライブラリらしい。

https://github.com/Tencent/puerts

ドキュメントが殆ど中国語で大変だったけど、とりあえず基本的な使い方が分かったので書く。

# プロジェクトのサンプル

今回学習するにあたり、
「このリポジトリをクローンして改造すれば、普通に１からやるよりはそれなりに楽」な
サンプルプロジェクトを作った。

https://github.com/katai5plate/example-puerts-typescript-unity

# 環境構築

## Unity 側の設定

1. Unity プロジェクトを用意する
2. `git clone https://github.com/Tencent/puerts.git` する
3. リ

元記事を表示

Node.js デザインパターン Promise 逐次イテレーション

Node.jsで、Promiseを使用したイテレーションのデザインパターンについて学んだので書いていく。

複数の、Promiseオブジェクトを返すタスクを逐次実行するのには、以下のパターンが有効

“`javascript
let tasks = [task1, task2, task3]

let promise = Promise.resolve()

function task1() {
Promise.resolve(console.log(‘task1 completed’))
}

function task2() {
Promise.resolve(console.log(‘task2 completed’))
}

function task3() {
Promise.resolve(console.log(‘task3 completed’))
}

tasks.forEach(task => {
console.log(‘task handled’)
promise = promise.then(() => {
return task

元記事を表示

「APIを叩いてもCORSで弾かれた」の対応はこれ

# はじめに
開発環境にデプロイする際にセキュリティの観点から「APIを叩いてもCORSで弾かれた」ため、それに伴うアウトプットをします。
※個人ブログから技術的アウトプットはQiitaへ引っ越ししたので、こちらは過去に書いたブログとなります。

# エラーの事象
開発環境にデプロイする際にセキュリティの観点から
「 **APIを叩いてもCORSで弾かれた** 」です。

# 背景
まず冒頭の

> 開発環境にデプロイする際に

ということですが、今までローカル環境では、`nuxt.config.js`の設定で`proxyサーバー`を立てることができていたので、サーバー側でCORS対応をする必要ありませんでした。

しかし、Firebaseのhostingにデプロイした際にproxyサーバーを立てることができずに、結果、冒頭に書いたAPIを叩いてもCORSで弾かれました。  

調べてみると、セキュリティの観点から、オリジン(HTMLが置かれたサーバー)以外のサーバーからデータを取得すること(＝CORS：Cross-Origin-Resource-Sharing)を、現在のブラウザ

元記事を表示

【TypeScript】AWS CDKv2でサクッとLambda関数を作る

先日AWS CDK v2がstableになり、一層便利に使えるようになったので、TypeScriptでLambda関数をサクッと作ってみました。
リポジトリは公開していますので、よかったらご参考ください :bow:

https://github.com/tokku5552/cdk-lambda-typescript

### 環境

– macOS Monterey バージョン12.0.1 (Intel)
– node -v
– v16.13.0
– npm -v
– 8.1.4

“`json:package.json(一部)
“devDependencies”: {
“@types/jest”: “^26.0.10”,
“@types/node”: “10.17.27”,
“jest”: “^26.4.2”,
“ts-jest”: “^26.2.0”,
“aws-cdk”: “2.2.0”,
“ts-node”: “^9.0.0”,
“typescript”: “~3.9.7”
},
“dep

元記事を表示

TypeScriptを書いていてちょっと困った事まとめ

TypeScriptで書いているとたまにこの時はどうするんだっけ？ってが止まることがありますよね
今回は私が普段の実装している時に？？って手が止まった時のことをまとめてみました

#### 1. Object.keys使ったループ処理
Object.keysはstring[]を返却するためstring型では列挙型のindexとは型が不一致なためエラーになります

“`javascript
const obj = {
aaa: ‘0’,
bbb: ‘1’,
ccc: ‘2’
}
// error 型 ‘string’ のパラメーターを持つインデックス シグネチャが型に見つかりませんでした。
Object.keys(obj).map((key) => Number(obj[key]))
“`
##### 解決策
どこかで型を明示的に変えてあげれば解決します。
###### ① 宣言しているオブジェクトの型を{ [key: string]: string }で定義する
上記の宣言だと列挙型になってしまうので列挙型ではなくインデックスシグネチャの型定義をしてあげれば参照できるよ

元記事を表示

BigQuery日本語カラム自動変換ツールのアップデート

https://qiita.com/yasudakn/items/2e6a69a11845a9bcdc33

以前、この記事で作ったWebアプリについて活用出来るユースケース、使い方、アップデート情報を紹介します。

## ユースケース

– 手元にあるエクセルデータのカラムが日本語で、BigQueryやAutoMLに入らない!

BigQueryやAutoMLを始めるにあたって、日本語カラムが障壁になっているも多いのではないでしょうか。
2021/12/19 現在、データセット名までは、Unicode対応が入っています。
近いうちにカラム名のUnicode対応が入ってくるとは思いますが、保守性の観点で物理名には英字を利用したい需要も多いと思います。

– 一定のルールで機械的にカラムを日本語変換したい! メンテナンスしたい!

一旦変換したスキーマをjsonスキーマとしてエクスポート出来ます。
（今後、インポート出来る機能追加する予定です)
辞書登録機能として外部のcodicに任せることも出来ます。

## 使い方
アプリは次の手順で実行出来ます。

#### 1. `git clo

元記事を表示

ブラウザ JavaScript / Node.js の仕組みを知ろう！ ～トラブルに迅速に立ち向かえる様に

## はじめに

近年 JavaScript の需要は増し、Web Application のほとんどは JavaScript を使って動いているのではないかと思います。

もともと JavaScript は [DOM] API (Document Object Model、HTML を JavaScript でから操作できる) の為にありました。[DOM] API を更に使いやすくした [jQuery] 等が流行りましたね。

しかし JavaScript の活用範囲は拡大し、現在では以下の様々な用途で利用されます。

* フロントエンド JS 開発の環境 ([Babel],[Webpack], etc…)
* Web バックエンド ランタイムサーバー ([Node.js], [Express])
* クロスプラットフォームなデスクトップアプリケーションランタイム ([Node.js], [Electron])
* AWS Lambda 等のサーバーレス環境のランタイム

例えばフロントエンド開発をするとき、ローカルマシンに [Node.js] をインストールして使いますが、[N

元記事を表示

React-Konvaで作成したcanvasをTwitterに画像投稿する

Reactで画像を作成してTwitterAPIを使って画像投稿する。

# ReactでCanvasを使う
探したところReact-Kanvaが便利そうだった。使い方は公式や他の方の記事を参照。
公式：https://konvajs.org/docs/react/
使い方：https://qiita.com/YSRKEN/items/bb8b34510d70ec90eb50

# 画像をDataURLとして取得
作成したCanvasの画像データを取得する。
useRefのHookを使ってCanvasの要素を取得し、.toDataURL()を呼び出せばOK

（https://qiita.com/YSRKEN/items/bb8b34510d70ec90eb50 から引用）

“`react
import React, { useRef } from “react”;
import { Stage as StageType } from ‘konva/types/Stage’;

const stageRef = useRef(null);

const proc

元記事を表示

React Nativeでイカゲーム！

（１）はじめに

普段はソーシャルワーカーとして障がいをお持ちの方の支援をしています。Advent Calendarに合わせてバージョンアップさせてきたReact Nativeでの3D表示について、今回で仕上げの投稿になります。前回はReact NativeでSocket通信しようで3DキャラクターをSocket通信でマルチプレイができるコードを紹介しました。今回はイカゲームに出てくる、だるまさんが転んだの要素（イカゲームの流行に乗っただけ:joy:）を追加して完成にしたいと思います。
大きな敵キャラクターが振り向いたときに、自身のキャラクターが動いているとアウトとなり初期位置に戻ります。githubで公開しましたので、ご興味のある方はどうぞ。

https://github.com/syehacom/expo3d

gl.pixelStorei() doesn’t support this parameter yet! fro

元記事を表示

Node.jsデザインパターン　並行処理

[Node.jsデザインパターン](https://www.oreilly.co.jp/books/9784873118734/)を読んでいる中で
並行処理を学んだので書いていく。

## 並行処理の基本パターン

“`{javascript}
const tasks = [task1, task2, task3]

let completed = 0

tasks.forEach(task => {
task(() => {
if(++completed === tasks.length) {
finish();
}
})
})

function finish() {
console.log(‘all tasks finished!!’)
}

function task1(callback) {
setTimeout(()=> {
console.log(‘task1 finished’)
callback()
}, 1000)
}

function task2(callback) {
setTimeout(

元記事を表示

[NodeJS] Yargsを使ったコマンドパラメタの処理

#最初に
NodeJSでこんな感じのパラメタを渡すアプリを作りたいとします

“`
node mynote add –title=”title” –body=”message body”
“`
addは機能名、–titleはタイトル、–bodyは本文だったとします。
皆さん、こんな時どうします？
ゴリゴリ処理を書くこともできますが、結構面倒ですよね。
さらに別なlistという機能を追加してみたい…ってなったら…
ということで、今回は簡単パラメタパーサー”yargs”を紹介します。

yargsはnodeプログラム向けのパーサーです。
https://github.com/yargs/yargs

#インストール
インストールはnpmコマンドで行います。

“`
npm i yargs
“`

#使い方
基本的な手順は以下の通りです

1. requireする
1. コマンドを定義する
1. parseする

## コード

では、実際にコードを書いてみます。
ここではaddというメソッドに対しtitleとbodyというパラメタを持ったアプリを作り、以下のような形で呼び

元記事を表示

【fwywd】初学者が Next.js tailwindcss JavaScript を使用してポートフォリを作成して学んだこと

# はじめに
初めてQiitaへ投稿いたします。

今回、ポートフォリオを作成する機会がありました。作成を通じて、私がつまずいたところ、学んだことをアウトプットしていきます。

同じように苦戦している初学者の方の参考になれば幸いです。

どのようなポートフォリオを作成したかは、こちらのリンク先からご確認ください。
リンク先➣➣[**ポートフォリオ**](https://shinsuke.vercel.app/)

# 導入方法
導入方法すらわからない状況でしたので、こちらの[**リンク先**](https://fwywd.com/tech/next-tailwind)を見ながら導入していきました。
Vs Code を使用していましたら、便利な拡張機能も紹介していましたので、是非ご参考にしてください。

# tailwindcss
css は少し触れたことがあるので、なんとなくは理解していました。それもあり、tailwindcss の使用に関して大きな抵抗はそこまでありませんでした。
もしcss も触ったことが無い方がいきなりtailwindcss で実装すると、使用イメージがあまりつか

元記事を表示

npm install エラー「npm ERR! g++: error: unrecognized command line option」解決法

# 環境
Mac OS：Monterey 12.0.1
Node.js：16.3.0
npm：7.15.1

# エラー内容
npm install した際、以下のようなビルドエラーが発生する。

“`
MacBook-Air:××× $ npm install
（省略）
npm ERR! command failed
npm ERR! command sh -c node ./build.js
npm ERR! make: Entering directory ‘×××/node_modules/deasync/build’
npm ERR! CXX(target) Release/obj.target/deasync/src/deasync.o
npm ERR! make: Leaving directory ‘×××/node_modules/deasync/build’
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using node-gyp@7.1.2
npm ERR! gyp inf

元記事を表示

TypeScript +NestJSをプロジェクトで導入したら素晴らしかった件

# 概要

https://qiita.com/advent-calendar/2021/timeleap-typescript

アドベントカレンダー11日目の記事になります。
空きスケジュールになっていたので急遽記事を書かせていただきました!
今回はTypescript製のバックエンドフレームワーク「NestJS」について紹介させていただきます

私が導入した時にお世話になった記事?‍♂️

https://qiita.com/elipmoc101/items/9b1e6b3efa62f3c2a166

# 記事のゴール
1.NestJSの概要を説明
2.NestJSを使用したREST APIをハンズオンで構築する
3.構築したAPIにリクエストを投げる

ここまでをゴールとします

# NestJSとは？

https://nestjs.com/

https://github.com/nestjs/nes

– 効率的でスケーラブルなNode.jsサーバーサイドアプリケーションを構築するためのフレームワーク
– モダンなJavaScriptを使用し、TypeScript（純粋

元記事を表示

【Next.js】Hunter×Hunterの休載期間をリアルタイム表示するWebアプリ【Vercel】

# なにこれ
[こんなの](https://how-long-h-h-suspned.vercel.app/)
ソースコード : https://github.com/nishiurahiroki/how_long_H-H_suspned

# なぜ作った
Hunter×Hunterが好きすぎるから(全漫画で一番)
~~愛故のイジり~~

# なぜNext.js
とにかくNext.js触ってみたかった。

# 気付き
主にNext.jsに関して、

– 環境構築が生のReact.jsより(create-react-appを使わない)遥かに簡単
– モジュールバンドラーの用意とかがほとんど必要無い
– Vercelへのデプロイ、CIの設定がとにかく楽

等

何気に初SSRフレームワークだったが、とにかく直感的に使えるフレームワークだと感じた。
これを期にNuxt等もぜひ触ってみたいと思った。

# こだわった所
・現在時刻に関して、端末時間ではなく、Rest APIを用いてサーバー側の正確な時間を`getServerSideProps`内で取得する様にした。

“`jsx
i

元記事を表示

OTHERカテゴリの最新記事