React開発環境の用意

## Node.js

推奨版バージョンのNode.js https://nodejs.org/ja をインストールする

# スキャフォールディングにてReact PJを新規作成する
## Create React App

Create React AppはReactが公式に推奨されている、最も使用されているスキャフォールディング

公式サイト https://create-react-app.dev/

### プロジェクトを作成する

TypeScriptを使用する

“`shell
### npx を使用する
npx create-react-app my-app –template typescript

### npm を使用する
npm init react-app my-app –template typescript

### yarn を使用する
yarn create react-app my-app –template typescript
“`

### プロジェクト構造

プロジェクトの入り口 `src/App.tsx`

### プロジェク

（アイデア）ステートフルなチャットボットの実装について

## 概要
– LINEをはじめとするプラットフォーム上で実現するBotは、実体としてはREST APIを提供するサーバーである性質上、一度のやりとりで都度処理が完結する。
– 一方で、実用的なBotを実現するには、状態を保持したうえで複数回のやり取りする必要がある。
– ステートフルなBotを実現するために、一般的なコマンドラインプログラムの実装をお手本に、見通しの良い実装を試みる。

## 単純なチャットボットを考える。
LINEをはじめとするメッセージングプラットフォームにおけるBotは、Webアプリケーションやスマートデバイスのアプリと異なり、画面を開発する必要がないため、機能を実現するための実装の簡略化や工数削減に役に立ちます。
一方、その機能を実現するための構成そのものは、画面を持つアプリケーションと同様にバックエンドのサーバーが存在し、実体としてはRESTインターフェースを持つアプリケーションとして動いています。

プラットフォーム間の違いには目をつぶるとして、構成としては概ね下記のようなものと思われます。
“`plantuml
@startuml
ユーザー ->

GitHub Copilotデビュー: 日本語で命令したらレジ・プログラムができちゃった ?


# はじめに

みなさん！ **GitHub Copilot** 使ってますか！？
実のところ、私は使ったことがありません。。。
ということで、早速、GitHub Copilotデビューをしてみます。

# 準備

GitHub Copilotを使うためにはいくつかの準備作業が必要です。
* GitHub Copilotの申込み
* VS CodeでGitHub Copilotを使えるようにする

の2つ

obnizでタクトスイッチ制御メモ

Node.jsから制御してます。

## 抵抗なしでプルアップ

obnizのプルアップ機能を使います。

“`js
const Obniz = require(‘obniz’);
const obniz = new Obniz(‘1234-5678’); //Obniz_ID

obniz.onconnect = async () => {
obniz.io0.pull(“5v”); //IO0をプルアップ
obniz.io1.output(false); //IO1をGNDに

obniz.io0.input(function(value){
console.log(“changed to ” + value);
});
}
“`

## 抵抗入れるパターン

“`js
const Obniz = require(‘obniz’);
const obniz = new Obniz(‘1234-5678’); //Obniz_ID

obniz.onconnect = async () => {
obni

Nest.jsで複数インスタンスでhttp通信して、トークン更新する

## やりたいこと
– interceptorsを利用して、トークンのキャッシュがある場合はセットする
– interceptorsを利用して、401が返って来た場合は、トークンを取り直す
– トークン取得関数はメモ化する
– APIの取得結果は一定時間キャッシュする

## 参考
– Axios Interceptor を使用して401が返ったときにトークン(JWT)を更新する｜tanoshima　https://zenn.dev/tanoshima/articles/db552b7962086a
– “NestJS tip: how to inject multiple versions of the same provider into one module (e.g.: many Axios instances)” by Micael Levi L. C. https://dev.to/micalevisk/nestjs-tip-how-to-inject-multiple-versions-of-the-same-provider-into-one-module-eg-ma

Node.js REPLでuuid v7を生成する

https://www.npmjs.com/package/ui7

“`
user@USERnoMacBook-Pro ~ % node
Welcome to Node.js v18.16.0.
Type “.help” for more information.
> const uuid = await import(‘ui7’);
undefined
> […Array(10)].map(() => uuid.v7());
[
‘018b26e1-533d-71a1-bb1d-e49ba6999e88’,
‘018b26e1-533e-7772-8eb0-eb6bcc3f1a54’,
‘018b26e1-533e-78d5-bc56-4a7c59de5fa7’,
‘018b26e1-533e-714c-8387-e900239a42be’,
‘018b26e1-533e-78df-af39-67008058b143’,
‘018b26e1-533e-7664-a844-0bfbe248b12b’,
‘018b26e1-533e-7b4f-b93

Node.jsのインストール確認コマンド

# 概要
　Qiita CLIを使用し，記事をGitHubリポジトリで管理しようとした際に躓いたことを記載する。

# 躓いたこと
## 「Node.jsのインストール確認」
参考URL2に記載してあるとおりにインストール後，Node.jsインストール確認のためにコマンドプロンプトから「node-v」や「npm-v」を入力した。しかし，「’node-v’　は，内部コマンドまたは外部コマンド，操作可能なプログラムまたはバッチファイルとして認識されていません。」が表示した。
## 原因
バージョン確認コマンドが間違っていた。
誤：node-v 　(「node」と「-v」の間に半角スペースなし)
正：node -v　(「node」と「-v」の間に半角スペースあり)
誤：npm-v 　(「npm」と「-v」の間に半角スペースなし)
正：npm -v　(「npm」と「-v」の間に半角スペースあり)

# 分かったこと
1. Node.jsやnpmのバージョン確認コマンド：「node -v」と「npm -v」
→「V18.18.0」や「9.8.1」などと出力されればOK

# 参考URL
1. [

`Error: spawn node-gyp ENOENT`の解消方法

# エラー内容

`docker build`時に出たエラーです。

“`
Error: spawn node-gyp ENOENT
at ChildProcess._handle.onexit (node:internal/child_process:284:19)
at onErrorNT (node:internal/child_process:477:16)
at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
Emitted ‘error’ event on ChildProcess instance at:
at ChildProcess._handle.onexit (node:internal/child_process:290:12)
at onErrorNT (node:internal/child_process:477:16)
at process.processTicksAndRejections (node

TJBot zero 再始動 (Node-RED de OpenCV (顔認識まで))

# この記事は
https://qiita.com/ssakaigawa/items/3e7ee0f2de421a3d9a39

2018 年ごろに発足した TJBot コミュニティ。ハンズオンイベントなどを通じて工作や IBM Cloud を体験できるステキなコミュニティです。
しかし、コロナ禍の影響でハンズオンイベントは休止…。さみしい時間を過ごしてるなかで遂に、TJBot zero コミュニティの活動が再開することになりました。

イベントなどを再開するにあたり、TJbot zero 用のSDカードイメージを見直すことになりました。
環境に関する課題は以下の通りです。

– Node-RED のバージョンが低い(Ver 1.0.1)
– すでに利用できない node や クラウドサービスがある

わたしもコミュニティの一員として「 Node-RED のバージョンが低い」の解決にチャレンジしました。
その手順の備忘録になります。

# 準備
[コミュニティーのGitHubレポジトリ](https://github.com/tjbotfan/tjbotzero-raspbian

Dockerでjavascriptの自動テスト環境を作る

# 概要

プログラミングすることがめっきり少なくなったのですが、プログラミングはとても好きで、図書館でこちらの本を借りてきました。

[WSL2 Ubuntu] nvmからasdfへの移行

## nvmによるNode.js及びnpmの削除
– こちらの記事を一部（.bashrcなどに）読み替えればOK！
– 尚、`$ rm -rf $NVM_DIR` により、nvm自体も削除されています

https://zenn.dev/doshimaf/scraps/5d80e1190c8261

## asdfの導入
– 未だ入っていないなら `$ sudo apt install curl git`
– `$ cd` としてホームディレクトリへ移動
– `$ git clone https://github.com/asdf-vm/asdf.git ~/.asdf –branch v0.13.1`（バージョンは下記公式サイトを参照して下さい）
– ~/.bashrc の最後尾に次の記述を追加
“`bash:.bashrc
# asdf setting (Bash & Git)
. “$HOME/.asdf/asdf.sh”
. “$HOME/.asdf/completions/asdf.bash”
“`
– `$ source ~/.bashrc` として反映
– ~/.d

Node.jsでMicrosoft Graph APIのアクセストークンをMicrosoft Entra ID(AzureAD)で作成したアプリケーションのクライアントシークレットを利用して取得する

タイトルが長くなってしまった…。
いきなり余談だが[Azure Active DirectoryがMicrosoft Entra IDに名称変更](https://www.microsoft.com/ja-jp/security/business/identity-access/microsoft-entra-id)したみたいだ…。

Node.jsでMicrosoft GraphのAPIを使う時に、まず前段としてアクセストークを取得する必要があるのだが、[公式のチュートリアル](https://learn.microsoft.com/en-us/azure/active-directory/develop/quickstart-console-app-nodejs-acquire-token)だと[msal-nodeモジュール](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-node)を使う方法しか記載がなく、モジュールを使わずに取得する情報が見当たらなかったの

質問システムのポートフォリオ解説(React+Express)

概要

eduaasという質問システムを作成しました


ソースコード　GitHub:

開発環境

フロントエンド:Node.js フレームワーク:React
バックエンド: Node.js フレームワーク:express
データベース: mysql2
現在ローカル環境で作成しています。

1.質問書き込む

![スクリーンショット 2023-10-09 18.19.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2518441/6ff1a036-7ab9-e27c-e1e2-56dfb96

【メモ】自分のQiita記事のURL取得して、ポートフォリオに載せたい！

## やりたくなった理由

– MERNでの開発方法のチュートリアルをUdemyで見て少し触った。
– Expressで自作も含めてAPIを管理したい。
– Udemyの中でaxiosを使っていたので、実験。
– Qiitaの記事をポートフォリオサイトに載せてみたい。

## 実際にやったこと

１. Express,Reactのセットアップをそれぞれする。＋ axiosも！
２. QiitaのAPIをつくる。=> .envにぶちこみ
３. 仮server.jsを作り書き込む

“`javascript

require(‘dotenv’).config();
const express = require(‘express’);
const cors = require(‘cors’);
const axios = require(‘axios’);

const app = express();
app.use(cors());

const port = 5000;

app.get(‘/fetch-qiita-articles’, async (req, res) => {

【Node.js】ethers.jsでトークンを送信する

最近話題のweb3を使ったアプリケーション作りたいと思い、とりあえずプログラムでトークンを送信することに挑戦しました。

公式のコードを参考にやってみました。
https://ethereum.org/ja/developers/tutorials/send-token-etherjs/

ほぼこの通りなのですが、このままではエラーが出るので修正しました。（後述）

## 動作確認環境
– macOS Ventura
– Node.js v20.0.0

## 準備

### Remix（トークン作成）

作り方はこちら
https://qiita.com/tatsuya1970/items/b68da529bcf1a92c5d10

トークンを作成したら、トークンのコントラクトアドレスを控える。

そして、トークンのABIをコピーし、
AWSのInspectorでSBOM Exportしてみた 前編

## 導入
– 経産省の[「ソフトウェア管理に向けたSBOM（Software Bill of Materials）の導入に関する手引」](https://www.meti.go.jp/press/2023/07/20230728004/20230728004.html)にも記載されている通り、自身が利用するOSSライブラリに対して、依存関係を含むコンポーネントや脆弱性を一覧管理する手段として、SBOMが注目されています。
– 本記事について、
– 前編ではAWSのマネージドサービスである[Amazon Inspector](https://aws.amazon.com/jp/inspector/)のSBOMエクスポート機能を用いて、SBOM ファイルをS3上に出力します。
– 後編では[Amazon Athena](https://aws.amazon.com/jp/athena/)を用いてSBOMファイルに対する分析を実施したいと思います。→[AWSのInspectorでSBOM Exportしてみた 後編](https://qiita.com/asw_hoggge

jestの公式ドキュメント見ながらテストしてたが、エラー出た

こんにちは、ゆせです。
今回は、案件でjestを使用するとのことだったので、勉強としてjestの公式Docを見ながらやっていました。が、エラーが出たので、もし同じエラーにぶち当たった人に向けて参考になればという思いで記事にしようと思います。

## 本題に入る
以下が、エラー文になります。
“`console
$ npm test
> study-jest@0.1.0 test
> jest

Error: Jest: Failed to parse the TypeScript config file /WorkSpace/NextSpace/study-jest/jest.config.ts
Error: Jest: ‘ts-node’ is required for the TypeScript configuration files. Make sure it is installed
Error: Cannot find package ‘ts-node’ i

React 基本的な事項を記録

# npm, yarn
javascript パッケージ管理ツール

npm : node package manager
　ーnode.js
　ーreact.js
　で使用する大半のパッケージをインストールできる。

yarn :
　Facebookで作ったパッケージ管理ツール
　npmよりもキャッシング、保安、信頼性が改善された。
　npm install -g yarn : yarn install できる。

＊node.js download install
https://nodejs.org/en/download/releases

# 駆動方法
node -v : node.js version 確認
npm -v : npm version 確認
yarn -v : yarn version 確認

＊プロジェクトフォルダの中で
npm i -g create-react-app

＊プロジェクトフォルダ abc を作って
npx create-react-app abc

yarn start : react サーバーを実行
ブラウザ localhost:3000

PM2でerroredのまま動かなくなった場合

### PM2
プロジェクト構成を更新した際、何度`pm2 restart`かけても`errored`のまま動かなくなった。
サイト上のHTTPステータスは502で表示されるみたい。


### 結論

一度`pm2 delete $var`する。

pm2は一度起動したサービスは`stop`してもサーバー自体が停止しても覚えているようで、サービス構成用のJSONファイルの中身が更新されていなかったことが原因だった。

デバッグは`pm2 logs`が役に立つ。

https://stackoverflow.com/questions/51300544/getting-error-when-trying-to-launch-node-js-app-with-pm2-cluster

日常業務用にChatGPT(Azure OpenAI Service)とMicrosoft Teamsを連携する。

# はじめに

最近は猫も杓子もChatGPTですね。
本文も、御多分に漏れずChatGPTです。ただし、機密情報を扱えるようにAzure OpenAI Serviceを利用します。
また、最近は日常業務にMicrosoft Teamsをご利用の方も多いと存じます。
本文では、日常業務で手軽にChatGPTをご利用可能なように、TeamsでメンションをするとChatGPTが受け答えをしてくれる仕組みを作ります。

仕組みは簡単。TeamsにメンションをつけるとWebhookしてくれるOutgoing Webhookという仕組みがあるので、Webhoook先にAzure Functionsを用意しておきます。FunctionsからAzure OpenAIをHttp Request経由で呼び出します。言語にはNode.jsを使います。最近のNode.jsでは標準でfetchを使えるから便利。
図にすると以下のような感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25176/094b