- 1. VSCode に インストール済みの拡張機能をデバッグする
- 2. “Node.jsとExpressでのルートハンドラーのモジュール化
- 3. 【VS Code】Visual Studio Code Dev Containersを使用する
- 4. 【Node.js】Kafka Consumerを作成してみた
- 5. Jira拡張機能開発(プロジェクト作成～Jiraにインストール)
- 6. Boxアプリ統合でフォルダバージョンを戻す
- 7. [ESLint] Node.jsのES Modulesで__filenameや__dirnameを使ったらエラーにする
- 8. Node.jsのutilモジュールを利用する
- 9. npxを実行した後の残骸（キャッシュ）の場所
- 10. [超初心者]yarnがインストールできない
- 11. 【Mac M1】nvmでのnode.jsバージョン管理 とyarnを追加した話
- 12. Node.jsとmysql2/promiseでqueryを使ったデータの取得
- 13. VRCから外部に情報を送信する方法（API編）
- 14. [Node.js] GitHub Actions上でgcloud CLIからFirebaseの秘密鍵を生成する
- 15. 【Node.js Axios】streamのレスポンスを扱うときの注意点
- 16. npxについて正しく理解する
- 17. stand.fmの楽曲利用申請を少し簡単にするために、楽曲利用申請アプリを作った話
- 18. aptでNode.jsが20.5.1からアップデートされなくなったのを解消した
- 19. JavaScript勉強備忘録
- 20. Node.jsでdotenvがいらなくなったっぽいので使ってみる
VSCode に インストール済みの拡張機能をデバッグする
# はじめに
VS Code の拡張機能がなんかおかしい、うまく動いていないといったときにデバッグする方法のメモ
基本的には↓のスレッドに記載のとおり。
https://stackoverflow.com/a/67099176/1868209
# 試した環境は以下の通り
Windows PC で WSL2 上で VS Code が動作している
この VS Code の 拡張機能を、Windows 上の Edge の DevTools でデバッグ
devcontainer は未検証
# 手順
## extension host の プロセスを特定する
VS Code の拡張機能は、extension-host というプロセスで動いているそうです。
https://code.visualstudio.com/api/advance
“Node.jsとExpressでのルートハンドラーのモジュール化
## はじめに
Node.jsとExpressを利用したWebアプリケーション開発において、コードの構造化は非常に重要です。この記事では、ルートハンドラーをモジュール化する一例を紹介します。
## ルートハンドラーの設定
まず、以下のコードスニペットは、Expressのルーターを設定し、`/user`エンドポイントに対するGETリクエストがあった際に、`home`関数が呼び出されるようにしています。
“`javascript
const { home } = require(‘../controllers/user’);
const express = require(‘express’);
const router = express.Router();router.get(‘/user’, home);
module.exports = router;
“`## home関数の定義
次に、ルートハンドラーで実行したい`home`関数を別のファイルで定義し、exportすればokです！
“`javascript
exports.home = (req
【VS Code】Visual Studio Code Dev Containersを使用する
Visual Studio Codeを使用したDev Containersについて記載します。
なお、正確な情報や詳細な情報は[公式ドキュメント](https://code.visualstudio.com/docs/devcontainers/containers)も参照してください。
## Dev Containersとは
公式ドキュメントには以下のように説明されています。
> The Visual Studio Code Dev Containers extension lets you use a container as a full-featured development environment. It allows you to open any folder inside (or mounted into) a container and take advantage of Visual Studio Code’s full feature set. A devcontainer.json file in your project tells VS Code
【Node.js】Kafka Consumerを作成してみた
## 0. 初めに
先日docker上でしたが、postgres-debezium-kafkaのアーキテクチャを構築し、
[Debezium](https://debezium.io/)から[Kafka](https://kafka.apache.org/)に入るメッセージの中で、operationがcで、lotidが空のものをエラーとして検知するKafka consumerを作成しました。
実際kafkaを初めて触れたので、備忘録的に環境構築と作成手順を記事に残します。上記docker上で作成しましたが、説明がややこしくなるので記事ではローカル環境で実施します。
# 前提事項
* 基本的なプログラミング知識
* PostgreSQL, [Kafka](https://kafka.apache.org/), Node.jsについての基本的な理解
* 今回はローカル環境を使用する## 目次
1. [Debeziumとは？](#1-debeziumとは？)
2. [Kafkaとは？](#2-kafkaとは？)
3. [全体アーキテクトの俯瞰図](#3-全体アーキテクトの俯瞰図)
Jira拡張機能開発(プロジェクト作成～Jiraにインストール)
## 初めに
使い方が悪いだけかもしれませんが、Jiraって微妙に使いづらいな…と思った今日この頃。
同じことを思ったそんなあなたに、Jira拡張機能開発をお勧めします。今回はJira拡張機能ってこんなこともできるんだよということを伝えたく、
npmパッケージのforgeを使用して、ReactにてJiraの拡張機能を作成していきます。
この記事ではforgeの導入、プロジェクトの作成、JiraにDeployまでを記載します。## 開発環境
node：18.16.0## 実現方法
### forge導入～プロジェクト作成
1. forge/cliをインストールします。
“`cmd
npm install -g @forge/cli
“`
1. Atlassian API トークンを使用してログインします。
[Atlassian API token](https://id.atlassian.com/manage-profile/security/api-tokens)にて、APIトークンを発行し、以下コマンドにてログインを行います。
Boxアプリ統合でフォルダバージョンを戻す
# 概要
この記事では、Boxアプリの統合機能を使用してフォルダ内のすべてのファイルを一括で以前のバージョンに戻す方法を紹介します。
Boxは、ファイル[バージョン履歴機能](https://support.box.com/hc/ja/articles/360043697054-%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E5%B1%A5%E6%AD%B4%E3%81%B8%E3%81%AE%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9)によって、過去の状態にファイルを復元することができます。
この機能は、操作ミスにより誤ったバージョンがアップロードされてしまった場合だけでなく、[ランサムウェ
[ESLint] Node.jsのES Modulesで__filenameや__dirnameを使ったらエラーにする
# ES Modulesでは`__filename`と`__dirname`は使えない
Node.jsのES Modulesでは、以下のグローバル変数は存在しないため使用できません。
– `require`
– `exports`
– `module`
– `__filename`
– `__dirname`
– `global`しかし、現状ではこれらの変数を使ったコードを**TypeScriptの型チェックで弾く方法はありません**。
詳細は以下のissueやdiscussionを参照してください。
https://github.com/DefinitelyTyped/DefinitelyTyped/issues/42201
https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/66780
現在はDefinitelyTypedが対応するのを待つしかないようです。
# __filenameや__dirnameの使用をESLintで弾く
前述したように、TypeScriptの型チェックで弾くことは
Node.jsのutilモジュールを利用する
## utilモジュールとは
公式の説明では、`このnode:utilモジュールは、Node.js内部APIのニーズをサポートします。`と書かれているが、私にはよく意味がわからなかった。
→ 要は、ユーティリティ関数 (よく使う処理を簡単に呼び出せるように作成される小さな関数) を提供しているモジュールですということで良さそう。## できること
主な関数。シンプルな機能が提供されている。| Method | Description |
|:———–|————:|
| debuglog() | デバッグメッセージを出力する |
| deprecate() | 指定した関数が呼び出されたとき、非推奨としてwarningを出す |
| format() | 指定した引数に応じて文字列をフォーマットする |
| inherits() | 継承をutil.inherits(Child, Parent);の形で手軽に行える |
| inspect() | オブジェクトを文字列化
npxを実行した後の残骸（キャッシュ）の場所
## 結論から書くと
Windowsの場合、
C:\Users\ [user] \AppData\Local\npm-cache\_npx\
配下のフォルダに格納される。
なお、フォルダ名は固定されておらず、「c67e74de0542c87c」のようなハッシュ（？）されたようなフォルダに名になっている。Macの場合
（すみません。調べられてません）## どのフォルダを削除するか？
キャッシュなので全部消しても問題ないような気はする。
ピンポイントで削除したい場合については、上記の通りフォルダ名が意味を持たない英数字の羅列なので判断は難しい。フォルダのタイムスタンプおよびフォルダ内のpackage.jsonの中身を見て判断するしかない。## おわりに
npxを使えば使うほどこのキャッシュがたまっていくので（意外と容量を食っているので）、ディスク容量が少ないなら消すというのも有効な手段のひとつだろう。※削除は自己責任でお願いします！
[超初心者]yarnがインストールできない
# 目次
[1.環境](#-環境)
[2.インストール手順](#-インストール手順)
[3.背景](#-背景)
[4.エラー内容について](#-エラー内容について)
[5.試したこと](#-試したこと)
[6.結論](#-結論)
[7.解決方法](#-解決方法)
[8.yarnのインストール](#-yarnのインストール)
[9.今回のエラーで間違って試したこと](#-今回のエラーで間違って試したこと)
[10.参考URL](#-参考URL)# 環境
・Windows10
・node.js(node-v18.18.0-x64)
・Visual Studio Code# インストール手順
インストーラーは下記です。
[node-v18.18.0-x64](https://nodejs.org/ja/download)
[Visual Studio Code](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)手順は下記を参考にしました。
https://qiita.com/sefoo0104/it
【Mac M1】nvmでのnode.jsバージョン管理 とyarnを追加した話
next.jsでコード書いてる時に、macを久々再起動したら
“`
The engine “node” is incompatible with this module.
“`
エラーがでる原因としては、next.jsのプロジェクトで必要としているnodeバージョンが18以上なのに
それ以下のv16が入っていたから。で、nodenvとかnodebrewとかnvmとか、nodeのバージョン管理をするには色々な方法があるのだけど、
普段nodeのバージョン変更とか滅多にしないので、前どれでやったかを忘れてしまったりする。
今回は結局nvmでやりました。# 最初に
自分の環境で行った手順です。
※Mac M1 13.2
環境によって変わりうる可能性もあるため、
・node.jsのバージョンがうまく変わらない
・node.jsのバージョンを変えたら、yarnが使えなくなった時に、うまくいかない時に試す、くらいの感覚でいていただければと思います。
※また、nvmはすでに入れている前提です。◼️nvm公式
https://github.com/nvm-sh/nvm#set-de
Node.jsとmysql2/promiseでqueryを使ったデータの取得
# はじめに
Node.jsとmysql共に初めたてなのですが、mysql2でのデータ取得ができるまでかなり時間がかかったので、データ取得の方法を共有したいと思います。# コード内容
自分の場合はcreateConnectionをうまく動作させることができなかったためcreatePoolを使っています。
またconnection.queryはそのまま使うとエラーが出るため、async/awaitを使ってconnection.queryでデータを取得しています。
“` js
const mysql = require(‘mysql2/promise’);//host,user,password,databaseの部分は接続したい先によって変えてください
const connection = mysql.createPool({
host: ‘your_host’,
user: ‘your_user’,
password: ‘your_password’,
database: ‘your_database’
});//your_tableの部分
VRCから外部に情報を送信する方法（API編）
# 初めに
今はまだ、どうあがいても動的にURLを生成(*1)したりHTTP POSTをすることは叶わない（2023/09/22時点）。しかし、“`VRCStringDownloader“`等でリクエストを飛ばすことは可能。そこで、今回はリクエストを飛ばすURLのパスやクエリパラメータを介することで情報を送る方法を紹介する。脳筋な事この上ないが、送りたい情報の**全パターンを網羅してリクエストを送れば解決**という事である。
https://creators.vrchat.com/worlds/udon/string-loading/
(*1) プレイヤーに手動でURLを入力させる場合に限り、動的にURLを設定することができる
# 今回作るもの
今回はシンプルなアンケートを作ることにする。雑だが、こんな感じ。
図のように
１．APIサーバー①でAxiosを利用してAPIサーバー②からExcelファイルを取得
２，APIサーバー①で取得したExcelファイルをサーバー上に保存
する処理を実装したときに、取得したExcelファイルを保存できず＊に結構ハマったので、備忘録として残しておきます。
（＊正しくはエクセルファイルとして保存できるが、ファイルが壊れていて開くことができない）# TL;DR
– Axiosでストリームのレスポンスを受け取る際には、Axiosのoptionsで`responseType: stream`と指定すること
– 指定しないと、レスポンスはJSON（デフォルト値）として扱われてしまう# コード（抜粋）
– APIサーバー②のExcelファイルをストリームで返すAPI
“`javascri
npxについて正しく理解する
# 目次
1. npxとは
2. ユースケース
3. 感想# 1. npxとは
– Node Package eXecuteの略
– ### ローカルにインストールされたパッケージを検索し、実行可能ファイルを見つけて実行できる
実行可能ファイルへのフルパスの入力を省略できるため、開発者は簡単かつ確実にパッケージを実行 できます。
## 実行可能ファイルとは
– node_modules/pacakge名/bin配下にあるファイルです。
– ./node_modules/.bin配下にあるのは実行可能ファイルのシンボリックリンクです。
– このシンボリックリンクはnpm install時に作成されます。
– 実際にlsコマンドを実行すると、シンボリックリンクの場所や、それが指す実際の場所を確認できます。
“`terminal
ls node_modules/.bin/prettier
node_modules/.bin/prettier
“`例えば、以下のコマンドでローカルにインスト
stand.fmの楽曲利用申請を少し簡単にするために、楽曲利用申請アプリを作った話
#### stand.fmという音声配信アプリを使ってます。
* 今回stand.fm用楽曲利用申請アプリを作った理由
* stand.fmアプリで、歌を歌った場合、楽曲利用申請という作業をユーザーが実施します。
* JASRACやNexToneなどの権利管理団体から、歌った曲の作品番号、曲名、アーティスト名、作詞者、作曲者を調べて、楽曲利用申請をします。(この作業がおっくうなんです。)
*
* 【楽曲利用申請のステップ】
【ステップ1】 歌った歌の題名をJASRACやNexToneで調べる。
【ステップ2】 stand.fm側の画面から楽曲申請ボタンを押し、楽曲申請用googleフォームを呼び出す。
【ステップ3】 googleフォームで、メルアド、JASRACかNexToneの選択、作品番号、曲名、アーティスト名、作詞者、作曲者を入力して送信。この後、ロボットチェックが必ずある。（チェックボックスをクリックするタイプではなく、写真をクリックするやつ。 僕の知識ではシステム化が無理）* 何度もやっていて、思っていたこと。 作品番号は1曲につき1つなので、作品番号が分かれば、曲名、
aptでNode.jsが20.5.1からアップデートされなくなったのを解消した
Node.js 20.6系や20.7系がリリースされているのに手元の環境のが20.5.1から更新されず不可解に思っていました。
[Nodesource Node.js DEB][nodesource-url]を訪れてみたところ、下記のように書いてありました。
どうやらdistributionを指定するのではなくnodistroを指定せよとのこと。“`shell-session
sudo apt-get update && sudo apt-get install -y ca-certificates curl gnupg
curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | sudo gpg –dearmor -o /etc/apt/keyrings/nodesource.gpg
NODE_MAJOR=20
echo “deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$NODE_
JavaScript勉強備忘録
## JavaScript勉強備忘録
友達の開発の内容を理解するためjsの勉強を始めた。### JavaScriptはどんなプログラミング言語か
・主にWebブラウザの中で動くプログラミング言語。
・WebブラウザだけでなくNode.jsというサーバー側のアプリを作る仕組みでも利用されている。
### プログラミング言語の中での位置付け
・スクリプト言語
・インタプリタ方式### JavaScriptの歴史
1995年 JavaScriptはNetscape Communicationsのブレンダン・アイク(Brendan Eich)によってLiveScriptという名前で開発される。
1995年12月にJavaScriptとして、Netscape Navigator 2.0で実装された。
1996年にInternet Explorer 3.0登場 Netscape Communicationsはライセンスを付与せずにInternet Explorer 3.0には別のJScriptという言語が搭載
1997年 Internet ExplorerとNetscape Navigat
Node.jsでdotenvがいらなくなったっぽいので使ってみる
2023年9月頭にリリースされたNode.js v20.6.0に`built-in .env file support`という記載がありました。
まだフラグが必要ですが、`.env`ファイルをデフォで使えるようになる感じですね。
> https://nodejs.org/en/blog/release/v20.6.0
> 参考: [Using Environment Variables In Node.js 20.6.0](https://browsee.io/blog/using-environment-variables-in-node-js-20-6-0/)
## 従来はdotenvを利用していた
通常環境変数を.envファイルを扱うためにdotenvというライブラリを使うやり方が主流でした。
https://www.npmjs.com/package/dotenv
“`bash
$ npm i dotenv
“`“`js
require(‘dotenv’).config()
console.log(process.env.HOGEHOGE); //.e
