nvmのデフォルトのバージョンの変え方

# コマンドでデフォルトのバージョンを変更

ターミナルでコマンド
`nvm alias default v[version]`
を実行。
例：`nvm alias default v18.9.0`

結果：ターミナルを開き直して `nvm ls` を実行するとdefaultのバージョンが変わる。

Cloud Tasks を使って、Cloud Functions で作成した認証が必要なエンドポイントを叩いてみた

## 目次
– Cloud Tasks から叩くエンドポイントの作成
– エンドポイントのデプロイ
– エンドポイントの権限設定
– キューの作成
– キューの設定
– サービスアカウントの作成
– タスク作成ロジックの作成
– タスク作成ロジックの呼び出し

## Cloud Tasks から叩くエンドポイントの作成

Cloud Functions を用いてエンドポイントを作成します。

“`ts
export const helloWorld = functions
.region(“asia-northeast1”)
.https.onRequest(
async (req, res) => {
console.log(“hello world”);
res.status(200).send(“success”);
return;
}
);
“`

参考 ↓

https://firebase.google.com/docs/functions/http-events?hl=ja

## エンドポイントのデプロ

#プログラミング #英語 #Javascript #nodejs #glitch # 英単語を覚えたり、思い出すのを早くするツール

本内容を利用した場合の一切の責任を私は負いません。

# 概要
リスニングができるようになるには、英単語の意味を思い出す早さも必要だと思った。
それをトレーニングするツール。
ほんとは見てではなく聞いてで行いたかったが素材が無いため。
一応、英単語を覚えるツールとしても使えると思う。

# バージョン
– OS
OS 名: Microsoft Windows 10 Home
OS バージョン: 10.0.19043 N/A ビルド 19043
システムの種類: x64-based PC
– node.js
node-v10.16.0-win-x64
– linq(node.jsのライブラリ)
3.2.4
– multer(node.jsのライブラリ)
1.4.5-lts.1
– jsonwertoken(node.jsのライブラリ)
8.5.1
– async-lock(node.jsのライブラリ)
1.3.2
– csvjson-csv2json(node.jsのライブラリ)
bc644c4428f551

Directory Path の alias 設定（備忘録）

# 1. VSCode

1. `jsconfig.json` に書く。

“`json:jsconfig.json
{
“compilerOptions”: {
“paths”: {
“@root/*”: [
“./*”
],
“@/*”: [
“./src/*”
]
}
}
“`

# 2. babel

1. `babel-plugin-module-resolver`([公式](https://github.com/tleunen/babel-plugin-module-resolver))をインストール
1. `babel.config.js`に書く

“`javascript:babel.config.js
module.exports = {
plugins: [
[
“module-resolver”,
{
root: [“.”, “./src”],
alias: {
“@roo

Express × TypeScriptでバックエンド開発②(MySQLの導入、ExpressでDB接続・操作)

## ご挨拶
Express × TypeScriptでバックエンド開発①(下準備~簡単なGET, POST)
の続きです。
この記事では**ExpressでMySQLへ接続しGET・POST**します。
できる限りシンプルにハンズオンでまとめました。
皆様の新しいキャリア開拓の一助になればと思います。

### ▼ゴール
・ExpressでMySQLに接続する
・シンプルなAPIの実装（GET, POST）と動作確認

### ▼対象
・フロントエンドからキャリアを始めた人（ジュニア、ミドル）
・TypeScriptでバックエンド書いてみたい人

## MySQLをインストール
https://dev.mysql.com/downloads/windows/installer/8.0.html
にアクセスし、自分のOSを選択したうえでインストーラーをダウンロードしてください。
![mysqlinstaller.png](https://qiita-imag

herokuビルドでアプリがcrashしてしまった時の解決例

herokuにデプロイした際にビルドは成功したのですが、WEBページを開くと下記の画面になってしまいました。
1週間ほど嵌ったので備忘録として記載します。?
参考にしてください。

# 起点 「Application error」
ビルドが正常に終了したのに、WEBページに「Application error」画面が表示され、「heroku logs –tail」でログを確認してね！とあるのでターミナルで確認する。
以下のログが表示されていた。

“`zsh:heroku logs –tail
2022-09-12T03:32:48.194301+00:00 heroku[web.1]: Starting process with command `npm start`
2022-09-12T03:32:49.916104+00:00

【React学習シリーズ#1】環境構築

# はじめに
React初心者が、Next.js×TypeScriptにてWEBアプリケーションを作成する際の個人的な開発メモになります。
1回あたりの文量は少ないですが、少しづつ学んだことをメモに起こしたいと思います。

# 前提条件
下記、環境については既に構築済の状態から始めます。

# 環境
各バージョンは以下のとおりです。
エディタは、Visual Studio Codeを使用します。
“`
node -v
v16.16.0

npm –version
8.11.0

npx -v
8.11.0
“`

# create-react-app
Reactプロジェクト作成ツールを利用して、プロジェクトを作成します。
今回はTypeScriptを使用する為、–templete typscriptを使用します。

https://create-react-app.dev/docs/adding-typescript/
“`
# npx create-react-app{バージョン} {プロジェクト名} –templete typscript
npx create-reac

[備忘録]jest.spyOn()でモック化する時に気をつけること

# はじめに

jestを使ってユニットテストをしていると、関数やメソッドのモック化は頻繁に行う。
[jest.spyOn()](https://jestjs.io/ja/docs/jest-object#jestspyonobject-methodname)は、モック関数を作るのに便利なメソッドだが、つまづいたことがあったので備忘

# 事象について

## 私の今までの認識

– `jest.spyOn()`したメソッドは、下記を使って戻り値や実装を書き換えてやることで、実行されないと思っていた（[このあたり](https://jestjs.io/ja/docs/mock-function-api)のヤツ）
– `mockResolvedValue`
– `mockImplementation`
– などなど

## 実際

– 気をつけないと実装したままのコードが実行されちゃう
– 特に`new`したインスタンスは、mockしようとしてるのが、実行されるインスタンスなのかをよく確認しないと、テスト実行時に、実装コード通りの動きをしてしまう

##

javascript の module import のテストを自動化する

# 前提

以下がインストール済みであること

* Node.js – v16.14.2
* mocha – v8.4.0
* chai – v4.3.6
* @babel/register – v7.17.7

# 0. テスト対象の script 構成

以下の様な javascript 階層があると仮定。

# 0.1. `src`ディレクトリ構成

* :open_file_folder: src
* :open_file_folder:scripts
* :open_file_folder:bin
* :pencil: apple.js
* :open_file_folder:lib
* :pencil: orange.js
* :pencil:index.js

# 0.2. `src`ファイルの内容

“`javascript:scripts/bin/apple.js
module.exports = () => {
console.log(`apple.js`);
}
“`

“`javascrip

ESP32の周りのBLEデバイスを監視

バッファローの「探せるキーホルダー」や、Logitecの「ぶるタグ」、懐かしい「Stick-N-Find」やNTTドコモのProject Linkingの「Pochiru」や「Tomoru」など、あるいは、LINE Beaconなど、常に電源On状態でアドバタイズし続けるBLEデバイスの、稼働状態や出入りを監視します。

BLEアドバタイズやレスポンスのスキャンデータには、デバイスがサポートするサービスUUIDが含まれています。
そこに、以下のUUIDが含まれていたら、生存していることとしてサーバに通知します。

　Stick-N-Find：bec26202-a8d8-4a94-80fc-9ac1de37daa6
　Project Linking：b3b36901-50d3-4044-808d-50835b13a6cd
　Immediate Alert Service：0x1802
　LINE Things：0xfe6f

スキャンするBLE CentralデバイスとしてESP32を使います。
M5StampC3が小さくてちょうど良い感じです。とはいっても、どのESP32でも動作します

Reactの基礎3

https://qiita.com/hiro949/items/855e64ba7934d1774d91

https://qiita.com/hiro949/items/633a9086abfb1be274fe

の続きです。

# 配列に対する操作

配列のメンバ関数mapに引数として関数を与えれば、配列の各要素に対してその処理をしてくれます。

“`index.js
const nums = [1,2,3,4,5];
const squares = nums.map(function(num) {
return num*num;
});

console.log(squares);

const pokemon = [“Bulbasaur”, “Charmander”, “Squirtle”];
const paragraphs = pokemon.map(mon => `

${mon}

`);

console.log(paragraphs);
“`

“`
[ 1, 4, 9, 16, 25 ]
[ ‘

Bulbasaur

‘, ‘

C

Reactの基礎２

https://qiita.com/hiro949/items/855e64ba7934d1774d91

の続きです。

# 変数の導入

ベースのコード：

“`index.js
import React from ‘react’;
import ReactDOM from ‘react-dom/client’;

function HelloWorld(){
return (

Hello World!

);
};

const root = ReactDOM.createRoot(document.getElementById(‘root’));
root.render();
“`

{ }で囲んだものをhrml形式のところに書くと、それは変数として認識されます。

例えば次のコードでは名前と苗字、現在の時刻を変数として付け加えてみました。

“`index.js
import React from ‘react’;
import ReactDOM from ‘react-dom/client’;

functio

Reactの基礎１

Reactはユーザインターフェイス(UI)を作成することに特化したJavascriptのパッケージです。

# 環境構築

Windowsでnode.jsをインストールしておきました。エディターはvscodeでvscode上でコマンドプロンプトを動かして操作します。詳しくは以下の記事をご覧ください。

https://qiita.com/gumiTECH/items/4b82e4e3757f226df6b0

https://qiita.com/hiro949/items/8f992bdafa8f90828b62

ターミナルで
“`
npm install -g create-react-app
create-react-app tutorial
“`

と入力してreactが使えるディレクトリtutorialを作り、この中でデモをやっていきます。

以下の記事の通りにやれば、補間機能も設定できます。

https://mattdufeu.co.uk/blog/setup-intellisense-vscode-react-js/

# 実行

ターミナルで

“`
npm

Node + Denoで使えるテンプレートエンジンEta（イータ）

## はじめに
良さそうなnode.js向けレンダリングエンジンを見つけたので紹介させてください。
[Eta](https://eta.js.org)と言います。node.jsでの利用のほか、CDNでの利用、Denoでの利用が可能のようです。
jsでの軽量単体アプリケーションフレームワーク([Neutralino](https://neutralino.js.org/))での使用も可能でした
いづれDenoに乗り換える際サーバサイドレンダリングのロジック部分をそのまま使おうという魂胆で使ってみました。
軽量で高速に動作するようです。Fastifyでメモリ上にバッファすればさらに最強と見てます。
[ect](https://github.com/baryshev/ect)最強と思ってましたがこれもいいかもです。ちなみにectとは無関係のようです。

読み方はイータになります。
アルファ・ベータ・デルタ・シータ・イータのイータです
Etaユーザが増えた際イーティーエー等誤った読み方が定着することを全力で阻止するための投稿になります。
以上。

## おまけ
今回小さなアプリケーションを作

TypeORM SelectQueryBuilderでJoinとwithDeletedの挙動

TypeORMでSelectQueryBuilderをよく使うのですが、論理削除されたレコードを取得する`withDeleted`メソッドについてのドキュメントがシンプルすぎてテーブルをJOINしたときの挙動がよくわからなかったので実際に動かして調べてみました。

**※ 動かしてみてきっとこうだろうと推測される内容を書いてます。この動作が保証されるわけではないです。**

# 前提

## TypeORM

TypeORM 0.2.31 で確認しました。
[Changelog](https://typeorm.io/changelog)を見る限り、これ以降0.3.9までの間で特に変更入ってないようです

SelectQueryBuilderのwithDeletedメソッドについてドキュメントで見つけられたのは[ここ](https://typeorm.io/select-query-builder#querying-deleted-rows)だけでした。他にあるのかなあ？

## DB

他のものでもそんなに変わらないと思うけど、手元で試したのはPostgreSQLです。

## 例

#React + fullcalendar + Steinでスプレッドシートをカレンダー化する

## Glideで予約表作ったら紙以下と言われたので仕方なくReactでつくってます

部内の会議室予約が紙ベースで嫌だったので、電子化することにしました。
あまり時間をかけたくないと考え、ノーコードツールの[glide](https://www.glideapps.com/)で作ったのですが、操作感がいまいちだったため、**紙以下**と言われてしまいました
頭にきたので**React + fullcalendarで一から作ってやろう**と言うのが前回記事でした。

https://qiita.com/watanabe-tsubasa/items/12892b4711bf1526051e

## スプレッドシートのデータをfullcalendarのフロントに反映させる

glideで作ったアプリはスプレッドシートをデータベースとして利用していた都合上、同じスプレッドシートのデータを読み込んで、Reactで作成したフロントに反映させることを考えました。
今回は[Stein](https://steinhq.com/)を用いて、スプレッドシートをAPI化して、データを反映させていきます。

firebase-emulators を起動してから、webpack-dev-server を起動したい

# 前提

* Node.js, Webpackは導入済み
* firebase SDK, firebase-emulatorsは導入済み

# 結論

以下のようにコマンド実行する

“`shell:gitbash
#
# @see https://firebase.google.com/docs/emulator-suite/install_and_configure#startup
$ firebase emulators:exec “npm run serve”
“`

以上

node.jsのインストールに苦戦した。

vuejsの学習で環境構築をするために、
node.jsをインストールしようとした時のエラーをまとめます。

環境構築に必要な作業は、
①node.jsをインストール。
(node.jsをインストールするのに、HomebrewとNodebrewをインストールしないといけない)
②VueCLIをインストール。

①のnode.jsのインストールに苦戦したのでまとめます。

### 発生している問題・エラー
①今回はnode.jsのバーージョン14.6
　をインストールしたいので下記コマンド実行。
“`
$ nodebrew install-binary v14.16.0
“`
次に、インストールされたバージョンを確認
“`
nodebrew ls
“`
使用するバージョンを指定
“`
nodebrew use v14.16.0
“`
結果
“`
v14.16.0

current: v14.16.0
“`
ここまでは問題なし。
再度に
“`
node　-v
“`
で最終確認しようとしたが、
“`
zsh: command not found: node
“`

Vue.js（Vue-CLI）でprocess.env.HOGEのように環境変数が使えるのはなぜ？

## 以下の記事を参照して頂ければと思います

https://note.com/shift_tech/n/n651c5b80522d

**※Qiitaの記事は全て個人的な記載であり、所属する組織団体とは無関係です。**

【Node.js】MySQLのIN句に配列の要素を指定する方法

配列の要素をMySQLのクエリのIN句に指定したい時。
“`
const selectUsers = [ ‘田中’, ‘鈴木’, ‘木下’ ];

const sql = ‘SELECT * FROM users WHERE name IN (?)’;
const res = await mysql.query(sql, [selectUsers]);
“`

参考：
https://qiita.com/komatsu_1324/items/df1253fb3d4b3e312d17