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

DriveAPIでGドラ内ファイルを取得、削除、アップロードする【Node.js】【Express】

Webアプリをデプロイする際に、画像を保存するWebストレージを用意する必要がでてくる。
よく使われるのがAWSやGCPになると思が、いかんせんお金がかかってくる。
そこで、無料で使えてよく馴染みのある__Googleドライブ__を利用できたらなと思って、今回チャレンジしてみた。

#事前準備
以下を事前に行っておくこと。
※手順は割愛

1. Node.js、npmがインストールされている
1. APIが有効になっているGoogleCloudPlatformプロジェクトが作成されていること
1. Googleドライブが有効なGoogleアカウント

#1.認証情報の作成
GCPでOAuth2認証の設定をする
__①「APIとサービス」＞「認証情報」画面の「認証情報を作成」から認証情報を作成する__

回線速度を計測して、Steamの帯域制限を自動で設定するようにした

## きっかけ

Steamの回線が丈夫なのか、アップデートなどでダウンロードが始まると閲覧しているYoutubeなどのロードが追いつかなくなることがありました。

Steamにはダウンロード帯域制限機能がありますので、はじめは設定画面からちまちま設定していたのですが…

時間帯や日によって毎度毎度手作業で帯域を設定するのが面倒くさいので、何か自動でできる方法がないかと調べました

## インターネット速度の計測方法

ブラウザ経由でFast.comやSpeedtest.netを使って回線速度を調べて、Steamで設定するという方法を今までとっていましたが

https://www.speedtest.net/ja/apps/cli

Speedtest CLIがコマンドラインで実行できてとてもよさそうです。

ただ実行するだけではなく、csvやjsonに吐き出すことが可能

“`speedtest.exe -f json > speedtest.txt“`

みたいな感じで呼び出すとJSONのテキストを吐き出してくれます。

## Steamの帯域制限を設定する方法

この辺を参

Discordで動くLinuxターミナルを作る

[長野高専 Advent Calendar 2021](https://qiita.com/advent-calendar/2021/nnct) 22日目の記事になります．皆さんすごい記事書いてる…
この記事では，Discord上で動くLinuxターミナル…風のbotを作ってみました．
こんな感じのターミナルを作りました．

https://github.com/BonyChops/discord-terminal

:::note warn
任意コマンド実行を他人に許可することにより，予期せぬ問題が起こる可能性があります．使う際は必ず信頼できるメンバー間でのみにしましょう．
:::

(画像にあるF-langについては以下)

https://github.com/NNCt18J/F-Lang

# きっかけ
黒板があれば学生が数式を

IDs in Node.js

日本語へ翻訳中です。しばらくお待ちください。:bow:

Following my 2020 blog post about [Promise cancellation](https://qiita.com/martinheidegger/items/6e8275d2de88174bc7e6) this is yet another basic topic.

Identity (short ID) – the way to identify a _thing_ – is something most tools provide out-of-the-box so you don’t need to think about it. But we are building for users. Humans. Often IDs comes in contact with the user – be it in an URL or on a receipt – and then the shape of an ID can make an actual difference.

If

Docker レイヤー キャッシュ(DLC) で高速なDockerビルドを理解。

##  はじめに
この記事は[Linkbal (リンクバル) Advent Calendar 2021](https://qiita.com/advent-calendar/2021/linkbal)の15日目の記事です。

Webの開発業界ではDockerレイヤー キャッシュ(DLC) より、`Docker`の概念が慣れた方が多いと思います。本日は、Docker レイヤー キャッシュ(DLC) に関して、Dockerビルドの速度を向上する仕組みを調べてみましょう。

## まずDockerについてちょっと調べましょう？

Dockerの仕組みをイメージすると「仮想化」という概念が出てきます。「仮想化」は1台のOSにたくさんの仮想化ソフトウェアをインストールすることにより、複数のサーバとして利用できるものです。ただ、完全な仮想化ソフトウェアを含むのではなく、「コンテナ型」の仮想化物を含んでいます。

## Dockerがどのように動くかをみてみます。
簡単なDockerコンテナを作成します。

1. Dockerfileを作成し、ソースコードと一緒に追加します。
2. Dockerf

ts-node config

## package

`package.json`

“`
{
“name”: “demo”,
“version”: “0.1.0”,
“main”: “”,
“scripts”: {
“start”: “ts-node src/main.ts”
},
“license”: “MIT”,
“dependencies”: {},
“devDependencies”: {
“@types/node”: “^17.0.2”,
“ts-node”: “^10.4.0”,
“tslib”: “^2.3.1”,
“typescript”: “^4.5.4”
}
}
“`

## tsconfig

`tsconfig.json`

“`json
{
“compilerOptions”: {
“lib”: [
“es6”
],
“target”: “es6”,
“module”: “commonjs”,
“moduleResolution”: “node”,

Jest + @testing-library/react + mswのtips

JavaScriptではSinonをはじめとして、さまざまなモックの仕組みがあります。
その中で、最近Mock Service Worker(以下msw)が良いよ、とNode.js会長に教えてもらいました。

https://mswjs.io/

mswはブラウザではService Workerとして動き、通信をフックすることでフロントのJavaScriptコードからは本物のサーバーに見えるのが特徴です。また、Node.jsでも動きます。isomorphicではないのですが、モック用のハンドラー、ブラウザ用、Node.js用、エントリーポイントとファイルを4分割して作成すると、ブラウザ単体でもSPAとして動きつつ、サーバーサイドレンダリングでNode.jsでも動作するというNext.jsでも動作します。

https://github.com/vercel/next.js/tree/canary/examples/with-msw

Sinonでテストを書くと、どうしても内部実装べったりな壊れやすいテストになるのですが、mswだと疑似的なサーバーを実装している感じで書けますので、素結合

草を生やしてこどものモチベーションを上げる【おまけ】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 する方法

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

Tencentが数ヶ月前から作ってるUnityやUE4のスクリプトをTypeScriptで書けるようにするライブラリ、
ランタイムでコード読み込めるのはもちろん、VSCodeにアタッチしてTypeScriptのままデバッグ出来るらしいし、なんだこれ最強か？
> Tencent/puerts https://t.co/jKbtuWyF9C

— きゅぶんず (@kyubuns) December 1, 2020

どうやら中華人民共和国の大手企業テンセントが開発中の、
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に任せることも出来ます。

## 使い方
動画を見ると使い方のイメージが付くはず
![画面収録-2021-12

ブラウザ 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