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.jsで自動送信メールシステムの作成(準備)

今日の記録

Cent OS 8 Streamのサーバにメールサーバを拵えて、
SMTPとPOPの設定
SMTPに苦戦した…

https://www.centossrv.com/postfix.shtml

https://www.unix-power.net/networking/post-698#:~:text=Postfix%E3%81%AESMTP%E8%AA%8D%E8%A8%BC%20%E5%90%84%E7%B5%84%E7%B9%94%E3%81%AE%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E3%83%8D%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF%E3%81%8B%E3%82%89%E3%81%AE%E3%81%BF%E3%83%A1%E3%83%BC%E3%83%AB%E3%81%8C%E9%80%81%E4%BF%A1%20%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E8%A8%AD%E5%AE%9A%E3%81%9

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

AlmaLinux OS 9にNode.js 16をインストール（AppStream）

# はじめに

Application Stream(AppStream)を利用してAlmaLinux OS 9にNode.js 16をインストール

## サポート

本手法で導入した場合、[Red Hat Enterprise Linux Application Streams Life Cycle \- Red Hat Customer Portal](https://access.redhat.com/support/policy/updates/rhel-app-streams-life-cycle)より、2024-04がEOLだと思われる。
それ以降に報告された脆弱性や不具合への対応は実施されない可能性がある。

## LOG

### インストール

提供バージョンが増えてモジュール化した場合は `yum module install nodejs:16` のような指定方法になるかもしれない。

“`shell-session
# cat /etc/redhat-release
AlmaLinux release 9.0 (Emerald Puma)

# yum in

メモアプリ開発メモ③　ひとまずMySQLから採ったデータをブラウザで表示

第一回https://qiita.com/pothos/items/7801daffc504ad85f475
前回→https://qiita.com/pothos/items/da0fa78d222c7fdb1383

# 進捗
本日はMySQLからとったデータをブラウザに表示できるようにコードを加筆しました。jsファイルよりejsファイルに、テーブル(questions)内から全行を取得した結果を送り、受け取ったデータの中からidと見出し文(smallQ)を呼び出して表示しています。
“`home.ejs

<% questions.forEach((quests) => { %>
• <%= quests.id %>.

Pulsar Flexを使ってみた

## はじめに

こんにちは。

本稿では、[Pulsar](https://pulsar.apache.org/)のサードパーティのNode.jsクライアントライブラリである、[Pulsar Flex](https://github.com/ayeo-flex-org/pulsar-flex)(以下、pulsar-flex)を使って、簡単なメッセージの送受信をしていきます。

内部でC++クライアントライブラリを使用する[公式のNode.jsクライアントライブラリ](https://github.com/apache/pulsar-client-node)とは異なり、pulsar-flexはC++クライアントライブラリに依存しないライブラリとなっています。

今回は、MacOS 1台の上に以下の環境を構築して試していきます。

* サーバ
* OpenJDK 1.8
* Pulsar(standaloneモード) v2.10.1

* クライアント
* Node.js v16.15.1
* pulsar-flex 1.1.1

## サーバの準備
ここでは、メッセージ