- 1. React 基本的な事項を記録
- 2. PM2でerroredのまま動かなくなった場合
- 3. 日常業務用にChatGPT(Azure OpenAI Service)とMicrosoft Teamsを連携する。
- 4. shift-jisのURLにaxiosでpostする
- 5. Thirdwebで作成したスマートコントラクトをデプロイするスクリプト作成方法
- 6. Python と Java と Go と Node.js と PHP と Ruby のサポート状況について (2023.10)
- 7. NVSを使ってNode.jsのバージョン管理を簡単に
- 8. 【IBM Cloud】CodeEngineで改行を含む環境変数を扱う
- 9. stand.fmの楽曲利用申請のアプリをgithubにアップロードしました
- 10. JavaScript エラースタックトレース(コールフレーム)を理解し、デコレータのエラー位置を捉える
- 11. passport.deserializeUser が呼ばれません(初心者です。)
- 12. Promise.all()を使って反復処理を速く実行
- 13. Lambda実装で意識すべきこと
- 14. yarnコマンド実行時のエラー「code: ‘ERR_OSSL_EVP_UNSUPPORTED’」の解決法
- 15. Bunかる〜く触ってみた[Bunの実行, nodeとの比較]
- 16. 【Node.js】sharp でサクッと「AVIF」「WebP」生成
- 17. vitest-openapiというjest-openapiのマッチャーをVitestで利用可能にするライブラリを公開した話
- 18. コマンドラインで、手元のCSV一式からGoogleスプレッドシートを作成・更新する
- 19. expressとNode.jsでAPIを作ってみる
- 20. Power VSのリソースサイズ変更スケジューリングを実現した
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 : CRA install
yarn start : react サーバーを実行
ブラウザ localhost:3000 で画面確認
src/index.js :
PM2でerroredのまま動かなくなった場合
### PM2
プロジェクト構成を更新した際、何度`pm2 restart`かけても`errored`のまま動かなくなった。
サイト上のHTTPステータスは502で表示されるみたい。![status:errored](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/990851/d48bf0c1-1852-82bd-b872-03aff71a1b49.png)
### 結論
一度`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
shift-jisのURLにaxiosでpostする
“`js
const axios = require(‘axios’);
const Encoding = require(‘encoding-japanese’);function toSJIS(keyword) {
const unicodeArray = Array.from(keyword, char => char.charCodeAt(0));
const sjisArray = Encoding.convert(unicodeArray, { to: ‘SJIS’, from: ‘UNICODE’ });
return Encoding.urlEncode(sjisArray);
};async function test() {
const keyword = ‘あああ’;
const sjisKeyword = toSJIS(keyword);
const data = `param1=${sjisKeyword}¶m2=2`;
const response = await axios.post(‘http
Thirdwebで作成したスマートコントラクトをデプロイするスクリプト作成方法
# はじめに
Tihirdwebを使うとパパッとスマートコントラクトを作成、デプロイできて非常に便利ですね。
しかしスマートコントラクトのConstructorにパラメータがある場合、毎度GUIで設定するのは結構めんどくさくなってきます。特に複雑なパラメータを持ったコントラクトだったり、デプロイタイミングで初期設定用のトランザクションを流したい場合などはもはや苦行としか言えない状態になります。
そこで、デプロイスクリプトからデプロイする方法を紹介します。# 環境
Node.js、npmが必要になります。作業は以下バージョンで行いました。
“`
# node -v
v18.18.0
# npm -v
9.8.1
“`# Thirdwebでコントラクト作成
まずはThirdwebで適当なスマートコントラクトを作成します。
今回はERC20で作成しました。
“`
# npx third web create
“`実行すると作成するコントラクトの種類や名前の入力をせがまれるので以下で入力しました。
“`
# npx thirdweb create
Python と Java と Go と Node.js と PHP と Ruby のサポート状況について (2023.10)
オープンソース系のプログラム言語のセキュリティサポートの期限をまとめました。他の方の参考になれば幸いです。
# Python のサポート状況
サポートが有効な Python のバージョンは **Python 3.8, 3.9, 3.10, 3.11, 3.12** です。
3.8 は1年以内にサポート終了の予定です。|バージョン系列|最新バージョン|リリース日|バグ修正の対応期間|セキュリティ修正の対応期間|
|—|—|—|—|—|
|**Python 3.12**|3.12.0|[2023年10月2日](https://peps.python.org/pep-0693/)|[**サポート内**](https://peps.python.org/pep-0693/#bugfix-releases)|[**2028年10月**](https://peps.python.org/pep-0693/#lifespan)|
|**Python 3.11**|3.11.6|[2022年10月24日](https://peps.python.org/pep-0664/#
NVSを使ってNode.jsのバージョン管理を簡単に
# はじめに
Node.jsは多くのプロジェクトで用いられていますが、プロジェクトごとに必要なNode.jsのバージョンが異なることも少なくありません。このような場合に便利なのがNode Version Switcher(NVS)です。
# NVS(Node Version Switcher)とは
NVS(Node Version Switcher)はNode.jsのバージョンを簡単に切り替えられるツールです。
複数のNode.jsのバージョンをローカルにインストールし、プロジェクトごとに簡単にバージョンを切り替えることができます。# NVSのインストール手順
“`terminal: 環境変数の設定とリポジトリのクローン
$ export NVS_HOME=”$HOME/.nvs”
$ git clone https://github.com/jasongin/nvs “$NVS_HOME”
$ . “$NVS_HOME/nvs.sh” install
“`“`terminal: インストールされたNVSのバージョンを確認
$ nvs -v
1.7.0
“`
【IBM Cloud】CodeEngineで改行を含む環境変数を扱う
# 発生した問題
Node.jsで開発したアプリで認証ありのRedisサーバーに接続しようとした際、ローカルで動作させて接続できていたものが、CodeEngineにデプロイしたアプリでは正常に接続されなかった。
正確には接続する際の認証に失敗していたようだ。
“`
REDIS_CERTIFICATE=”—–BEGIN CERTIFICATE—–
MIIDHTCCAgWgAwIBAgIUFIO1EGeecAJjDhDdmSdOfCWPboYwDQYJKoZIhvcNAQEL
…
FTel34h4s8q8kPTaEWuohkoV80IYKLSZthAzzXtJpTW1
—–END CERTIFICATE—–”
“`
証明書を上のような形で環境変数に入れることでローカルでは動作していたが、CodeEngineの環境変数にはこのまま突っ込んでも認識されないようだった。
stand.fmの楽曲利用申請のアプリをgithubにアップロードしましたただそれだけです。
https://github.com/sinzy0925/standfm_shuuekika
app_gakkyokushinsei.js
JavaScript エラースタックトレース(コールフレーム)を理解し、デコレータのエラー位置を捉える
## 要約
本記事では、JavaScript で呼び出しコードの位置情報、特にデコレータ関数の位置情報を取得する方法について探求します。JavaScript のエラースタックトレースに深入りし、`Error.captureStackTrace` を使用してコールフレームの位置を捉える方法を学び、エラー位置を特定する方法を理解します。
JavaScript のエラースタックトレースには通常、コード呼び出しの階層構造情報が含まれますが、しばしば多くの無関係な関数呼び出しも含まれます。デコレータパターンなどのシナリオでは、クラスに適用されるデコレータ関数の位置を捉えたいことがあります。この目標を達成するには、エラースタックの構造を理解し、呼び出し位置を正確に取得する方法を知る必要があります。
## 使用事例
特定のエラータイプをスローするためにカスタマイズされたエラークラスがあります。デバッグ目的でエラーがスローされたときにエラー位置を記録するログシステムが必要です。このシナリオでは、最初は `console.log` を使用してエラーの詳細を取得しました。しかし、すべてのエラークラ
passport.deserializeUser が呼ばれません(初心者です。)
passport.js を使いログイン、ログアウト処理をしています。
ローカルサーバーでは上手くログイン処理ができました。
しかし、別PCでサーバーを立ち上げた所、passport.deserializeUser が呼ばれなくなり、認証、認可処理ができなくなりました。
localhost:3166 と 192.168.1.4:3166 だと cookie のセッションID保存は変わってくるのでしょうか?
宜しくお願い致します。
![スクリーンショット 2023-10-04 144908.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570410/1ee2bd37-8690-37d2-aad0-737fc59a9fe0.png)
![スクリーンショット 2023-10-04 144939.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570410/6f3fa274-1ef5-bc13-2e39-247148f
Promise.all()を使って反復処理を速く実行
## はじめに
JavaScriptにおいて、for文中で同期処理を利用したい場合にasync/awaitでなくPromise.all()というメソッドを用いると良い、という話です。
自分自身がasync/awaitで反復処理を行い非常に実行に時間を要して困っていたため、記事にしてみました。## そもそもJavaScriptの同期/非同期処理とは
そもそも、JavaScriptは同期処理であり、非同期処理でもあるプログラミング言語です。
基本的にはコードを上から実行しますが、時間がかかる処理は終了を待たずに進んでいきます。
有名な事例ですが……“`js
console.log(“A”);
setTimeout(() => {
console.log(“B”);
}, 1000);
console.log(“C”);
“`上記の場合、”A”が出力され、次にsetTimeout関数が実行され、1秒後にBが出力されることになります。
待ってる間もプログラムの実行が進むので、先に”C”の出力が行われ、最後に1秒後の”B”が出力されます。## Promis
Lambda実装で意識すべきこと
実行頻度が低ければ、あまり問題になることはないかもしれません。
ですが負荷試験をやるようなシステムの場合、途端にエラー祭りとなる可能性があります。自身が経験したことも踏まえ、紹介したいと思います。
:::note warn
Lambdaの実行環境は Node.js 前提で話しています(これしか経験ない)
時折紹介するコード例は全て typescript です
:::# ライフサイクル
Lambdaはサーバーレスのコンピューティングサービスです。
そのため、といっていいかわかりませんが、開発したコードが実行されるサーバーが常時起動されているわけではないです。
(後述しますが、常時起動設定が可能な`Provisioned Concurrency`という機能も存在します)以下の流れでLambdaは実行されます。
1. 関数実行のリクエストが送信されると**実行環境の初期化**が行われる
2. **ハンドラ関数**として定義し export した箇所が実行される
3. 関数の呼び出し後、しばらく放置されると(確か5分くらい)**実行環境が破棄**される補足:ハンドラ関数
yarnコマンド実行時のエラー「code: ‘ERR_OSSL_EVP_UNSUPPORTED’」の解決法
## ファイル構成
– index.html
“`html
…
…
“`
– package.json
“`json
{
“license”: “MIT”,
“scripts”: {
“webpack”: “webpack”
},
“dependencies”: {
“webpack”: “5.22.0”,
“webpack-cli”: “4.5.0”
}
}“`
– webpack.config.js
“`js
const path = require(‘path’);module.exports = {
entry: ‘./src/index.js’,
output: {
path: path.r
Bunかる〜く触ってみた[Bunの実行, nodeとの比較]
こんにちは!ゆせです。
今回は、最近注目を集めているJavaScriptランタイム“`Bun“`が気になっていたので、興味本位でかる〜く触ってみました。最初に申し上げておきますが、本記事において、こと細かい解説はしません。ただ、– 「Bunってざっくりどんなものなのか知りたい」
– 「聞く機会増えてきたし気になってたけど、なんだかんだ知らん」
– 「軽く手元で実行してみたい」みたいな方には、是非読んでいただきたいものになっております!
実際に手元で動かしたことをそのまま再現しておりますので、実行してみたい方は参考にしてみてください。言葉選びが間違ってる部分もあるかもですが、ご了承下さい。。笑
## Bunってナニ
先日,JavaScriptランタイム「Bun 1.0」正式版がリリース。
一言でよく表現されているのは、「速くてAll in OneなJavaScriptランタイム」。
とにかく「速い」。そんなイメージを持たれている方も多いと思います。Bunの代替としては、“`node“`や“`Deno“`があげられます。![スクリーンショット 2023-10-
【Node.js】sharp でサクッと「AVIF」「WebP」生成
次世代画像形式といわれる「AVIF」と「WebP」。
WEBサイトに組み込むことで、表示速度を大幅に向上させることができます。とっても魅力的な「AVIF」と「WebP」ですが、画像を生成するのが課題となります。
対応しているグラフィックソフトがほとんどないんです…利用する場合は、プロジェクトごとに自動生成の仕組みを導入することになるかと思います。
でも、自動生成の仕組みが導入されていないプロジェクトでも使いたい…:tired_face:というわけで、Node.js の画像処理モジュール sharp を使って、サクッと「AVIF」と「WebP」を生成できるようにしてみました!
## 仕様
事前に「JPEG」または「PNG」で書き出した画像を、「AVIF」と「WebP」に変換します。
* 変換前画像
* `src` ディレクトリに格納(デフォルト)
* ディレクトリ名は変更可能(オプション)
* 配下にディレクトリを含む場合でも再帰的に変換
* 変換後画像
* `dest` ディレクトリに生成(デフォルト)
* ディレクトリ名は変更可能(オプシ
vitest-openapiというjest-openapiのマッチャーをVitestで利用可能にするライブラリを公開した話
## はじめに
Jestがテストライブラリとしてはメジャーで多く利用されていると思うが、ES Moduleとの相性でいうとゼロコンフィグとはいかず歯がゆい感じもある。そこで私個人としてはVitestを利用してテストを実行することが多くなってきた。
ただ、[jest-openapi](https://github.com/openapi-library/OpenAPIValidators/tree/master/packages/jest-openapi)という便利な機能は利用したいなと思った。今回はVitestの[Extending Matchers](https://vitest.dev/guide/extending-matchers.html)の機能を利用してVitesにおいてjest-openapiのマッチャーを利用できるようにするライブラリを作成する事にした。
今回はその実装時に少しハマったことなどを備忘録として残す。
※ちなみに、JestにおけるESMサポートは実験的である
https://jestjs.io/ja/docs/ecmascript-modules
コマンドラインで、手元のCSV一式からGoogleスプレッドシートを作成・更新する
ローカル環境にあるCSVファイルをディレクトリ単位で一式、Google Drive内の指定したフォルダにGoogleスプレッドシートとして変換・アップロードするCLIツール「**csv2gsheets**」を作成しました。
https://github.com/ttsukagoshi/csv2gsheets
指定したDriveフォルダ内に、同じファイル名の既存スプレッドシートがあれば、それを上書き更新する(ファイルIDを変更することなく内容を更新する)こともできるので、**Googleスプレッドシートを簡易データベースとして使いたい場合など、データの流れを自動化することができます**。
こんな感じ:
“`
c2g convert –config-file-path /Users/username/path/to/c2g.config.json –browse –dry-run
“`
Node.js/npm環境での動作なので、バージョン管理も簡単です。以下では[csv2gsheets v1.1.0](https://github.com/ttsukagoshi/csv2
expressとNode.jsでAPIを作ってみる
# expressとNode.jsでAPIを作ってみる
後輩に「APIとは何ですか?」と質問されたのですが、あまり明確に答えることができませんでした。
「Webサーバが外部とデータのやり取りをするための出入り口だよ」とか「受け取ったリクエストをもとにDBにアクセスして結果をレスポンスで返すことができるよ」とかあいまいな回答をしてしまいました。
実際にAPIを作ってみるのがわかりやすいと思うので今回はローカル環境で簡単なAPIを作り、Postmanで呼び出して使てみるところまでをやってみようと思います。## 今回実施すること
Node.jsとExpressを使ってAPIを作成し、ローカル環境で起動、Postmanを使用してAPIをテストする方法を紹介します。## フロントエンドとバックエンド
Webアプリは、大きくフロントエンドとバックエンドの2つに分けられます。
今回作るAPIは主にバックエンド側で提供し、フロントエンド側がそのAPIを使用してDBの情報にアクセスして画面の内容を動的に変えてくれるようなイメージです。
それぞれの簡単な役割と説明を記載します。### フロン
Power VSのリソースサイズ変更スケジューリングを実現した
# はじめに / Introduction
[先の記事](https://qiita.com/katahiro/items/25d91d3d20d7241d1c4e)でPower VSのリソースサイズ変更を行うことで、なるべく費用が増加しない形でサーバーの運用を行える可能性を紹介しました。
一方、残念ながら現在のIBM Cloudのポータルから対象とするPower VSのリソース変更をスケジューリングする機能はありません。これを実現するためには、利用者でPower VSのリソースサイズを変更するAPIを実行するスクリプトを作成し、それを何かしらのジョブスケジューラーで定期実行する必要があります。
それをPower VSを利用する各々の利用者で全てゼロから作成するのは時間が勿体ないので、今回紹介するツールをそのまま、あるいは参考にして頂ければ、時間短縮、費用短縮できると思います。In the [previous article](https://qiita.com/katahiro/items/25d91d3d20d7241d1c4e), I introduced the possi