Windows10のNode.js環境でVue3 + Vuetify3 + TypeScript構成のアプリケーションを開発できるようにする

# 本記事の内容
– Windows10のWSL(Ubuntu)を利用してNode.js環境を用意し、Vue3 + Vuetify3 + TypeScript構成のアプリケーションを開発出来るように開発環境を構築します。

# 実施環境
– Windows 10
– VSCode
– WSL2
– Ubuntu 22.04
– Vue3
– VUuetify3
– TypeScript

# 実施した作業
1. WindowsにNode.js環境を構築する
2. Yarnコマンドをインストールする
3. Vuetify3のサンプルPJ(Vue3 + Vuetify3 + TypeScript)をインストールし起動する

## 1.WindowsにNode.js環境を構築する

本記事の前提条件として、Windows10にWSL(Ubuntu)がインストールされている状態からスタートするので、WSL(Ubuntu)を未インストールの場合は、こちらの記事「[Windows10でWSL2を利用したUbuntu環境構築時にエラー](https://qiita.com/kanamekun/ite

オンラインPRG「REDSTONE」（赤石）をウェブ移植してみた

#### REDSTONE（レッドストーン）という懐かしのMMORPGをウェブでプレイできるようにしてみた話

（移植できたのはまだ一部です）


## ブラウザでプレイできるデモ公開

とりあえず、**触ってみてもらうのが一番**なのでデモを置いておきます！
（ブラウザで開くだけでDLとか不要です）

#### Demo：https://rs.sigr.io/

https://rs.sigr.io/

—–

プロジェクトのソースコードも全部公開してます
#### Github

【GCP】Cloud Taskへのキュー登録メモ（＋Cloud Functionsをコールする）

自分用のメモ。

# Cloud Taskの作成

まずCloud Taskの画面から「PUSHキューの作成」を押してCloud Taskそのものを作成する。ちなみに作成後に名前は変えられないみたい。


詳細設定がいろいろ指定できるがよくわからんので全部初期設定のままとする。


と思ったんだが「最大試行回数」はデフォの100からもう少し下げてもいいかもしれない。ちょっとミスってタスク登録してしまってコール先のCloud Functionsがエラーになり、それが無邪気に100回繰り返されてログが結構えらい

Node.jsでd3.jsを使うミニマムな手順

d3.jsは、グラフのようなデータ可視化を行うためよく利用されているライブラリである。
通常Webフロントエンドに組み込まれて使われるが、画像生成をバックエンドでも使えるようにしてみたい。

ここでは、Node.jsでd3.jsを使うミニマムな手順をまとめる。
d3.jsの現行バージョンはESMのみ対応になっているため、ESMに対応した手順にする。
まずJavaScriptの場合の手順をまとめ、それに続いてTypeScriptを使う場合の手順も記載する。

## 環境
– Node.js 18.13.0
– Ubuntu 20.04 LTS (WSL2)
– Visual Studio Code 1.73.0

## JavaScriptの場合の手順

“`sh
touch package.json
“`

package.jsonに以下を記入

“`sh
{
“dependencies”: {
“d3”: “^7.8.2”,
“jsdom”: “^21.0.0”
},
“type”: “module”
}
“`

“`sh
npm install

docker-composeでDBコンテナに別コンテナからアクセスしたい

## 前提
docker-composeとSQL系のデータベースを使用したことがなかったので、これらの技術を利用して
ハンズオンをしようとしていた際にエラーに直面。調べてもなかなか解決しなかったので議事録を残します。
DB:MySQL
API:Node.js
Node.jsなのでSequelizeで接続を試みています。

## 環境

“`yml:docker-compose.yml
version: “3”

services:
api:
build: ./
container_name: todo-api
environment:
DB_HOST: db
DB_USER: todo
DB_PASS: todo
DB_DATABASE: todo
DEBUG: todoapi:server
tty: true
ports:
– 5001:5001
volumes:
– ./api:/home/node
networks:
– t

音声認識で動くDiscord音楽botを作った

前書き

ディスコードで音楽かけてくれるbotありますよね？
よく見かけるのって「!play　”URL”」という感じでテキストチャンネルに文字とURLを打って再生すると思うんですが、今回はボットをボイスチャンネルに参加させ、音声認識で音楽を流そうという試みです。

Discordで喋っている時に友達が「Alexa、音楽かけて」と言っているのを聞いて、ディスコード上で喋って動く音楽botあったら良いなと思い今回に至ります。

実現イメージ

・音声認識で動くDiscordBot
・Botがボイスチャンネルに参加した状態でユーザが「〇〇かけて」と言うと、Botが反応してその曲が流れるイメージ
※今回はアーティスト名や曲名を直接言う形で実装しています。

開発説明

通常のnode.js開発環境に加え、ffmpegというソフトウェアが必要になります。（音声ファイル形式をいじるので）

ライブラリ・環境

・Speech-to-Text: Googleクラウ

Ubuntu 22.10にNode.jsとnpmをインストール

“`bash
sudo apt install -y npm
“`

環境

“`bash
$ cat /etc/os-release
PRETTY_NAME=”Ubuntu 22.10″
NAME=”Ubuntu”
VERSION_ID=”22.10″
VERSION=”22.10 (Kinetic Kudu)”
VERSION_CODENAME=kinetic
ID=ubuntu
ID_LIKE=debian
HOME_URL=”https://www.ubuntu.com/”
SUPPORT_URL=”https://help.ubuntu.com/”
BUG_REPORT_URL=”https://bugs.launchpad.net/ubuntu/”
PRIVACY_POLICY_URL=”https://www.ubuntu.com/legal/terms-and-policies/privacy-policy”
UBUNTU_CODENAME=kinetic
LOGO=ubuntu-logo
“`

lodashはメソッドによってファイルサイズが全然違っていた

# 概要

Lodashは便利なnpmパッケージですが、ファイルサイズが非常に大きいです。
圧縮前で71.5kB、圧縮後で25.2kBなので、`import _ from ‘lodash’` をフロントエンド開発でやってしまうと、画面のJSロード時間に影響が出てしまいます。
解決策として、`import range from ‘lodash/range’`のように、1つのメソッドだけをインポートすることが知られています。
しかし、実はメソッドによってファイルサイズが異なります。
例えば、`lodash/max` は 1.6kB ですが、`lodash/omit` は 21.5kBもあります。これは `lodash/omit` がいくつかの内部メソッドをインポートしているためで、特に `_baseClone.js` のファイルサイズが大きいからです。
このようにインポートする内部メソッドによってファイルサイズがかなり異なるため、全てのメソッドのファイルサイズを計算してみました。

# メソッドごとのファイルサイズ
| Function Name | File Size(kB) | G

Node.jsでタイムゾーンを指定する

# Javascriptのタイムゾーン
最近ではクラウド環境を利用することも多くなり、ローカルはJSTでクラウドはUTCの設定になっていることなどがよくあると思います。
この影響でローカルではうまく動いていたのにデプロイすると日付がちがーう！！！なんてことも・・・
ということで今回はサーバー側にNode.jsを利用していた場合にはタイムゾーンを固定することができるようだったので備忘として残そうと思います。

# タイムゾーンの指定
日付を扱うためのnpmライブラリには[Moment.js](https://www.npmjs.com/package/moment)や[date-fns](https://www.npmjs.com/package/date-fns)、[cdate](https://www.npmjs.com/package/cdate)、[luxon](https://www.npmjs.com/package/luxon)など様々なものがあるようです。
正直どれもよくわかってないのですが、、、今回のタイムゾーンを固定するという目的からするとライブラリは使用せずに環境変

Express＋Typescriptプロジェクトのひな形をささっと作る

普段Angularを書いていて、CLIに任せることが多いので1からTypescriptプロジェクトを作ったメモ。
ExpressのAPIサーバが急遽必要になったので、ささっと作ってみました。

# 環境
* Windows10 + WSL2
* Node v18.14.0

# 手順
#### プロジェクト作る
“`
mkdir my-app
cd my-app
npm init
“`

#### 必要なものインストール
“`
npm install express
npm install -D typescript @types/express rimraf@3.0.2 @types/rimraf@3.0.2 cpx @types/node
npm install -D ts-node nodemon
“`
rimrafはちゃんと調べてないですがバージョン指定せずに入れるとbuildでエラー吐いたためバージョンを落としてます。
ts-nodeはトランスパイルせずTypescriptのまま実行したいために。
nodemonはソースコードの変更を検知してホットリロードしたいために

AZ-400：Azure Artifacts フィードへの npm パッケージ公開

この記事は、Designing and Implementing Microsoft DevOps Solutions（AZ-400）の受験勉強の中で、自分が間違えやすい、覚えにくいと思ったポイントの一つをまとめたものです。同じく資格取得に向けて勉強されている方の参考になれば幸いです。

## Azure Artifacts

Azure DevOps の Artifacts を使うと、開発者はフィードに NuGet や npm などのパッケージを発行し、同じチーム、組織、パブリックに共有することができます。

### アクセス制限

フィードの操作については、Azure DevOps のプロジェクト、その上の組織の 2 種類のスコープでアクセス制限を行うことができます。
ブラウザから操作して設定する場合は、プロジェクトのフィードに対してアクセスレベルを設定する形式となります。
アクセスレベルには下記があります。

– Reader
– Collaborator
– Contributor
– Owner

Reader/Collaborator でもパッケージの一覧表示/インストール

冷やし中華じゃなくてYouTube始めました、なぜか。

YouTubeチャンネルを開設しました。そのお知らせのざっくり記事です。
（冷やし中華全く関係ないですごめんなさい）
# 経緯
自分は約7年ほどフリーランスで生計をたてた後、数年前に法人成りしたソフトウェアエンジニアで、主にwebアプリ開発をメインにお仕事させて頂いています。
開発業務の他にも、これまでに初学者メインの学習会等を運営した経緯があり、現在もDiscord上で毎週火曜夜に交流会を主催しています。

自分のメインフィールドは、JavaScript/TypeScript、Node.js、Reactなので扱うトピックはこれらが主になります。現在開催している交流会では、フロントエンド開発の話題を中心に参加者の発表や質疑応答等を実施しています。

Discordはこちらです:wave:
[discord.gg/zPhh4KeBm5](https://discord.gg/zPhh4KeBm5)

前置きが長くなりましたが、この交流会において自分の好みでピックアップした世界中の話題を延々と喋るということをやっています。
話題のジャンルはもちろん上記の技術ネタです。

これまでは数人に対

Oracle Linuxで公式が対応していないバージョンのNode.jsに対応させる

## 公式のサポートについて
* 今のところNode.js16までしか対応していない。
https://yum.oracle.com/oracle-linux-nodejs.html


Oracle linux側が用意している「oracle-nodejs-release-el7 」とか入れる必要があるが、これの代わりに普通に指定したバージョンのNode.jsを入れようとするとうまくいかない。
いったんそのままNode.js16のやつが入ってから、指定したバージョンものを入れ直すとうまくいくことが分かった。

## 解決の流れ
※oracle-nodejs-release-el7、nodejsをそれぞれyumでインストールするが、ここで直接Node.jsのバージョンを指定できない。ちなみに僕は「オラクルLinux7」のイメージを使用している。

nvm 使用方法


# 概念説明

## nvm

node Version Manager、省略してnvmと呼びます。nodeのバージュン管理ツールです。

nvmを利用する事で、任意バージュンのnodeを簡単にインストール、削除、切り替わって使用や設定ができます。

例えば、Aにnode12を使わせて、Bにnode14を使います。

## node

node.js、省略してnodeとも言います。

Chrome の V8 エンジンで動作する JavaScript 環境です。オープンソースかつ高性能で JavaScript 環境 中の TOP です。

## npm

node Package Manager、またはnpmとも言います。nodeのパッケージ管理システムです。

簡単に説明すると、App Storeみたいなものです。他の人が開発したnode.j

どうしてもラズパイZeroWで最新(v3.4.4)のなでしこ３を動かしたい！

# 発端
　Raspberry Pi ZeroWになでしこ３をインストールする、あるいはarmv6lがサポート外となったv12以降のnode.jsの非公式ビルドをインストールをしてみた件については以前も書きました。

https://qiita.com/snowdrops89/items/2378046916f0cfb9fbd1

　しかし、それから一年半ほど経過し、なでしこ側の状況も大きく変わっています。
　当時は、node.js v12以上が**推奨**だったのですが、現在の最新バージョンv3.4.4ではv16以上が**必要**になっているようです。（2023/2/9現在）

　windows版も、v3.3.3以降、旧バージョンのnodeでは起動出来なくなっちゃっており、当時ワタクシのPCがwin7だったために、これまた苦労したものでした。

https://qiita.com/snowdrops89/items/eb90af3500a99ee5ceda

　以前はラズパイZeroWに標準で入るnode v10でも、なでしこ３インストール時に赤や黄色のWARNの嵐になりはするもの

【Express】express-generatorで作成した雛形でHTTPSサーバーを起動する【Node.js】

## はじめに
Node.jsとかExpressの公式ドキュメントは基本的にhttpサーバーの立ち上げ方しか解説されておらず、httpsサーバーはどうやって立ち上げるんじゃ？と思ったので、それをやります。
## やること
いつもの雛形に
①証明書配置用のディレクトリを作成して秘密鍵と証明書を配置
②bin/wwwを修正してhttpsサーバーを作成
の2点のみ。

## 環境
– Node,js：18.12.0
– npm：9.2.0
– Express：4.18.2
– EJS：3.1.8（別に必要ない）

## 1.雛形を作成
いつものやつ（テンプレートエンジンはejs）。
“`
$ npx express-generator –view=ejs <アプリ名>
$ cd <アプリ名>
$ npm install
“`
## 2.SSL証明書を配置
証明書配置用のディレクトリを作成し、
“`
$ mkdir .ssl
“`
秘密鍵と証明書を配置。
※証明書の作成方法は割愛
“`
$ ls .ssl
server.crt server.key
“`
## 3.bin/ww

NodeのVersionUP

“`
sudo npm install -g n
sudo n stable
“`

このコマンド。
参考記事：https://qiita.com/kerupani129/items/60ee8c8becc2fe9f0d28

Node.js: setTimeout の使い方

## プログラム

“`js:timeout_test.js
#! /usr/local/bin/node
// timeout_test.js
//
// Feb/08/2023
//
// —————————————————————
‘use strict’
// —————————————————————
function first_function(aa,bb)
{
console.error(“This is the first function”)
console.error(“aa = ” + aa)
console.error(“bb = ” + bb)
const sum = aa + bb
console.error(“first: sum = ” + sum)
}

// —————————————————-

blastengineのバルクメール編集リミットに達した場合の対応

blastengineはエンジニアフレンドリーなメール送信サービスです。メールを即時配信するトランザクションと、一括配信するバルクメールに対応しています。

バルクメールでは、まずテンプレートを保存します。そして、そのテンプレートに対して宛先情報を登録して送信を行います。その際、以下のようなエラーメッセージが出る場合があります（エラーメッセージは加工済み）。

`Exception: Error in main: number of EDIT statuses exceeds 10.`

これは、EDIT（メール送信されていない状態）のメールテンプレートは10個までしか保存できないことに起因して発生するものです。こうした状態のメールは適宜削除、または送信処理を行う必要があります。

## 削除対応について

今回はNode.js SDKを使って削除してみます。インストールは `npm` コマンドで行います。

“`
npm i blastengine
“`

### ライブラリのインポート

ライブラリをインポートします。TypeScriptなので、実行時には `ts-node`

express-validatorでJSONのデータ型をチェックする

## 要旨
JSON形式のリクエストボディについて`express-validator`でデータ型をチェックする場合、以下のようにvalidatorを実装する。

“` json
{
“string”: “abc”,
“int”: 123,
“float”: 123.456,
“boolean”: true,
“object”: { “key”: “value” },
“array”: [“a”, “b”, “c”]
}
“`

“` js
[
// 文字列
body(‘string’).isString(),
// 数値(整数）
body(‘int’).isInt().not().isString(),
// 数値(浮動小数点数)
body(‘float’).isFloat().not().isString(),
// 真偽値
body(‘boolean’).isBoolean({ strict: true }),
// オブジェクト
body(‘ob