- 0.0.1. CKEditor5の開発環境を構築する
- 0.0.2. tiny sqlite3 + node + sqlite_web
- 0.0.3. 期待の新星@clack/promptsで作る対話型CLI
- 0.0.4. CommonJSとESModuleの設定ミスでSlackアプリを実行できなかった話
- 0.0.5. Node.jsではmysqlよりmysql2を使うべき理由
- 0.0.6. [初心者向け] Cacheを使ったNode.jsのパッケージのインストールの方法と仕組みについて徹底解説
- 0.0.7. MongoDBのコネクションプールがわからなかったので調査
- 0.0.8. Cloudflare Pagesでデプロイ時のNode.jsバージョンを指定する
- 0.0.9. yarnのインストール方法
- 0.0.10. Ubuntu 22.04.1 LTS にnpmとnodeをインストールする方法
- 0.0.11. (無料)Twitter API v2 を用いたブックマークの取得
- 0.0.12. Ubuntu 22.04にMongoDB 6.0とfree5GC WebUIをインストールする
- 0.0.13. Ubuntu 22.04にMongoDB 6.0とOpen5GS WebUIをインストールする
- 0.0.14. GitHub Actionsでメタデータファイル(action.yml)を作成してワークフローを共通化しよう!
- 0.0.15. Windows10のNode.js環境でVue3 + Vuetify3 + TypeScript構成のアプリケーションを開発できるようにする
- 0.0.16. オンラインRPG「REDSTONE」(赤石)をウェブ移植してみた
- 0.0.17. 【GCP】Cloud Taskへのキュー登録メモ(+Cloud Functionsをコールする)
- 0.0.18. Node.jsでd3.jsを使うミニマムな手順
- 0.0.19. docker-composeでDBコンテナに別コンテナからアクセスしたい
- 0.0.20. 音声認識で動くDiscord音楽botを作った
- 1. 前書き
- 2. 実現イメージ
- 3. 開発説明
CKEditor5の開発環境を構築する
### CKEditor5の開発環境を構築する
“`bash
$ git clone -b stable https://github.com/ckeditor/ckeditor5
$ cd ckeditor5/packages/ckeditor5-build-classic
$ npm install
$ yarn run build# 動作確認用にHTTPサーバを立ち上げる
# ※ インストールされていない場合はインストール
# npm install http-server -g
$ cd sample
$ http-server
“`
—– 参考
– https://ckeditor.com/docs/ckeditor5/latest/installation/plugins/installing-plugins.html
tiny sqlite3 + node + sqlite_web
#tiny sqlite sample
## node + sqlite3
– create workspace“`bash
mkdir your-directory-id
cd your-directory-id
npm init -y
touch index.js
“`
– install npm package [sqlite3]
“`bash
npm install sqlite3
“`– copy code to index.js
“`javascript
const sqlite3 = require(“sqlite3”);
const db = new sqlite3.Database(“./somedb.db”);db.serialize(() => {
db.run(“drop table if exists sometable”);
db.run(“create table if not exists sometable(id,number)”);
db.run(“insert int
期待の新星@clack/promptsで作る対話型CLI
## 概要
2023/2/13に[@clack/prompts](https://github.com/natemoo-re/clack/tree/main/packages/prompts#readme)がリリースされました。
Build beautiful command-line apps in minutes with `@clack/prompts` ?
? Only 4 kB gzip (80% smaller than `prompts`)
? Beautiful, minimal UI
✅ Simple API
? Comes with text, confirm, select, and spinner pic.twitter.com/lLRIOWm1Lx— Nate Moore (@n_moore) February 13, 2023
筆者は今まで対話型CLIで有名な[prompts](https://www.npmjs.com/package/prompts)を使ってきましたが、@clack/promptsは評判も上々(1.9k Stars)なので実際に触ってみたいと思います。
## @clack/promptsとは
– 対話型CLIを作るためのAPI
– [prompts](https://www.npmjs.com/package/prompts)より機能は少ないが **80%** 小さいサイズ
– UIが少し**カッコいい**✨## できること
– テキスト入力
– テキストのバリデーション
– 確認分岐
– 単一選択
– 複数選択
– スピナーの表示
– イント
CommonJSとESModuleの設定ミスでSlackアプリを実行できなかった話
`@slack/bolt`と`chatgpt`を組み合わせて、Slackアプリを開発しようとしていた。
https://github.com/transitive-bullshit/chatgpt-api
このときの**tsconfig.json**では、`module`は`CommonJS`を示していて、`target`は`ES2017`を指していた。
“`tsconfig.json
{
“compilerOptions”: {
“module”: “CommonJS”,
“target”: “ES2017”,
…
},
…
}
“`そして、`tsc`を使って**src/index.ts**のビルドを行い、`node`を使って生成された**build/index.js**を実行しようとした。
ビルドは通ったものの、`node`での実行に失敗した。
“`shell
> tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json/Users/takag
Node.jsではmysqlよりmysql2を使うべき理由
mysql2が一番Weeklyダウンロードが多い
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3127414/1b2a339a-a99a-6b47-34ec-8c622bda733d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3127414/2528898b-49d3-bac5-ea35-63214f68e3e5.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3127414/06c341f9-d4c0-3b60-30ea-c5d874181d50.png)
[初心者向け] Cacheを使ったNode.jsのパッケージのインストールの方法と仕組みについて徹底解説
## 概要
Node.jsの必要なパッケージをインストールする際はワークフローを実行するたびに新しいrunnerを使用する関係でパッケージを1からインストールします
パッケージが少ないうちはいいものの、プロジェクトが大きくなるにつれてパッケージが多くなるとパッケージのインストール時間分ワークフローの実行時間が長くなってしまいます
そこでパッケージをインストールする際はCacheを使うとパッケージがどんなに多くてもインストール作業を数秒以内に終わらせることができます
今回はGitHubの公式で公開されている
– actions/cache
– actions/setup-nodeについて解説していきます
## actions/cache
公式が出しているActionで今回使用するNode.js以外の言語やDockerのCacheも扱うことができます
詳細は以下の公式ドキュメントに記載されていますhttps://github.com/actions/cache
以下を例に説明します
“`yml
– name: Cache dependencies
MongoDBのコネクションプールがわからなかったので調査
恥ずかしながらMongoDBなどNoSQL系は業務経験がなく、最近勉強中の身です。
[Express+Typescriptプロジェクトのひな形をささっと作る](https://qiita.com/tomoyanp/items/8f039493570c7d29ae86)で作成したExpressからMongoDBに接続する形でやってます。MongoDB公式のドライバを使用してますが、dbの接続部分は下記のような記述をよく見かけます。
“`javascript
MongoClient.connect(‘mongodb://localhost:27017/db’, (err, db) => {
db.collection(‘mycollection’).insertOne(xxxxxx);
db.close();
})
“`シンプルに、毎回connectしてcloseするの???コネクションプールとかないの???となったので実機で試してみた記事です。
なんとなく調べていると、MongoClientにプール数を指定することは可能で、connectメソッドを呼んでも毎回接続して
Cloudflare Pagesでデプロイ時のNode.jsバージョンを指定する
# はじめに
:::note info
この記事で記載するバージョンは執筆当時のものです。参考にする場合は参照を辿って差分を吸収してください。
:::Cloudflare Pagesではデフォルトでバージョン12.18.10のNode.jsを利用してビルドコマンドの実行を行います([参照](https://developers.cloudflare.com/pages/platform/build-configuration/#language-support-and-tools))。
最近のフレームワークやビルドツールではこのバージョンで動かすことが出来ないことが多いです。例えばAstroはバージョン16.13.0以上が必要ですし、Viteでもバージョン14.18、16以上が必要となっています([参照1](https://docs.astro.build/en/install/auto/#prerequisites)、[参照2](https://ja.vitejs.dev/guide/#%E6%9C%80%E5%88%9D%E3%81%AE-vite-%E3%83%95%E3%8
yarnのインストール方法
### 問題
– `yarn run build`でエラーになる。
“`bash
$ yarn run build
00h00m00s 0/0: : ERROR: [Errno 2] No such file or directory: ‘run’
“`### 解決策
– yarnのバージョンが古いだけ。
– 最新のyarnをインストールすればよい。
“`bash
# 古いyarnを削除
$ sudo apt remove yarn
$ sudo apt remove cmdtest
$ sudo apt autoremove# 最新のyarnをインストール
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add –
echo “deb https://dl.yarnpkg.com/debian/ stable main” | sudo tee /etc/apt/sources.list.d/ya
Ubuntu 22.04.1 LTS にnpmとnodeをインストールする方法
### 問題
– 色々なインストール方法が散見されるが、インストール後`npm -v`コマンドを打っただけでエラーになったりする。### 解決策
– 素直に [公式](https://github.com/nodesource/distributions/blob/master/README.md#rpminstall) に書いてあるコマンドでインストールをすればいい。
“`bash
curl -fsSL https://deb.nodesource.com/setup_19.x | sudo -E bash – &&\
sudo apt-get install -y nodejs
“`以上。
(無料)Twitter API v2 を用いたブックマークの取得
# (無料)Twitter API v2 を用いたブックマークの取得
## はじめに
Twitter API v2 を用いて、自分のブックマークの棚卸しシステムを作りました。
データは、NeDB を使って保存しています。
OAuth2 については今回必要なんですが、本旨とは関係ないので割愛します。パッケージとして、[twitte-api-v2](https://www.npmjs.com/package/twitter-api-v2)を利用します。
今回はベアラートークンを利用していて、ユーザーごとの読み取りには制限がかからないので、無料枠の API でも利用できます。
## パッケージ
nedb-promises は、NeDB の Promise 対応版のスーパーセットです。
![パッケージ構造](https://cdn.discordapp.com/attachments/1068315061099175966/1074909289103228958/npmlist.png)## レートリミットについて
Twitter API では、各 API エンドポイントに
Ubuntu 22.04にMongoDB 6.0とfree5GC WebUIをインストールする
本記事は、2023.01.26にリリースされたMongoDB 6.0.4がUbuntu 22.04に対応したことを受けて、Ubuntu 22.04にMongoDB 6.0とfree5GC WebUIをインストールする手順を簡単に説明します。
—
## 目次
– [MongoDB 6.0インストール](#mongodb-60インストール)
– [Ubuntu 20.04の場合](#ubuntu-2004の場合)
– [Ubuntu 22.04の場合](#ubuntu-2204の場合)
– [free5GC WebUIインストール](#free5gc-webuiインストール)
– [Ubuntu 20.04の場合](#ubuntu–2004の場合)
– [Ubuntu 22.04の場合](#ubuntu–2204の場合)
– [最後に](#最後に)
– [主な変更履歴](#主な変更履歴)—
## MongoDB 6.0インストール
Ubuntu 22.04では、`apt-key`が非推奨になり、`gpg`を使用します。そこで、この差異をインストール
Ubuntu 22.04にMongoDB 6.0とOpen5GS WebUIをインストールする
本記事は、2023.01.26にリリースされたMongoDB 6.0.4がUbuntu 22.04に対応したことを受けて、Ubuntu 22.04にMongoDB 6.0とOpen5GS WebUIをインストールする手順を簡単に説明します。
—
## 目次
– [MongoDB 6.0インストール](#mongodb-60インストール)
– [Ubuntu 20.04の場合](#ubuntu-2004の場合)
– [Ubuntu 22.04の場合](#ubuntu-2204の場合)
– [Open5GS WebUIインストール](#open5gs-webuiインストール)
– [最後に](#最後に)
– [主な変更履歴](#主な変更履歴)—
## MongoDB 6.0インストール
Ubuntu 22.04では、`apt-key`が非推奨になり、`gpg`を使用します。そこで、この差異をインストール手順で示します。
### Ubuntu 20.04の場合
“`
# apt update
# apt install wget gnupg softwar
GitHub Actionsでメタデータファイル(action.yml)を作成してワークフローを共通化しよう!
## 概要
複数以上のワークフローを実行する際に
– パッケージのインストール
– Cacheの設定など、複数のワークフローで共通で使用できるものを1つのファイルにまとめる方法について解説していきたいと思います
今回はNode.js関連の設定を共通化してテストをビルドを実行します作成するファイルの構成は以下の通りです
“`
tree
└──.github
├── actions
│ └── set-up-node
| └── action.yml
└── workflows
├── build.yml
└── jest.yml
“`## メタデータファイル
GitHub Actionsではメタデータファイルというファイルに共通の処理を記載することができます
その際はaction.ymlファイルを作成し、記載しますhttps://docs.github.com/ja/actions/creating-actions/metadata-syntax-for-github-actions
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
オンラインRPG「REDSTONE」(赤石)をウェブ移植してみた
#### REDSTONE(レッドストーン)という懐かしのMMORPGをウェブでプレイできるようにしてみた話
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576748/b252e6f7-490d-6eb7-e66b-d046fdd84b8b.png)
(移植できたのはまだ一部です)![rs-web-showcase.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576748/21a018fe-2b9b-8d7e-84ba-4fadcd6b8819.gif)
## ブラウザでプレイできるデモ公開
とりあえず、**触ってみてもらうのが一番**なのでデモを置いておきます!
(ブラウザで開くだけでDLとか不要です)#### Demo:https://rs.sigr.io/
https://rs.sigr.io/
—–
プロジェクトのソースコードも全部公開してます
#### Github
【GCP】Cloud Taskへのキュー登録メモ(+Cloud Functionsをコールする)
自分用のメモ。
# Cloud Taskの作成
まずCloud Taskの画面から「PUSHキューの作成」を押してCloud Taskそのものを作成する。ちなみに作成後に名前は変えられないみたい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392942/6e92300f-c140-48b9-4c30-7e986cd0aa9b.png)
詳細設定がいろいろ指定できるがよくわからんので全部初期設定のままとする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392942/a6c3b494-bd5a-e7b6-d447-175a363957dd.png)
と思ったんだが「最大試行回数」はデフォの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クラウ