- 1. TypeScriptを初めて触ってみた
- 2. Lambda関数で日本語ファイルを処理する際にエラーが出た
- 3. Discord.jsでselfbotを作りたい。
- 4. 【Express.js】簡易なOAuth認可サーバを実装してみた
- 5. [paiza]1番小さい数字
- 6. [paiza]すごく普通に書いてみた
- 7. 【Prisma】findManyで100万規模のデータを取得する
- 8. discord.js v14での権限設定、確認
- 9. 複数ブラウザを同時に起動して、フォーム登録を行い負荷テストを行う方法(PlayWright)
- 10. kintone 秘密鍵からプラグインID取得
- 11. [Node.js] [nodebrew] [Mac] nodebrewを使用してMacにNode.jsをインストールする
- 12. Reactのプロジェクト作成
- 13. ノーションクローンアプリ
- 14. Node.jsとBunのDockerイメージを使った開発環境について備忘録
- 15. Nodeのパッケージ管理を管理したい話
- 16. 【Node.js】初心者必見！ゼロから学べる実践入門
- 17. ArrayQueryでオブジェクト配列をタイプセーフORMっぽく扱う
- 18. Node.jsによるURLからのパラメータの受け取り
- 19. axiosやfetchに替わるKyのススメ
- 20. Azure FunctionsでPrismaを使おうとしたらcli からのデプロイでドハマりしたメモ
TypeScriptを初めて触ってみた
# 概要
今までJavaScriptは多少触ってきましたが、近年のTypeScriptの勢いを見て、そろそろ触らないといけないなぁ、と思ったエンジニアの備忘録です。# 目的
何事もまずは動かしてみる、の精神で、まずは最低限TypeScriptが実行できる環境をvscode上で整え、簡単なコードを実行するまでを目的とします。# 想定読者
・JavaScriptを触ったことがあり、TypeScriptはなんとなく聞いたことがあるがよくわからない方
・コマンド実行に苦手意識が無い方# 全体の流れ
環境構築
・Node.js、npmインストール
↓
JSONファイルの作成
├package.json
└tsconfig.json
↓
サンプルコード作成
↓
実行
↓
デバッグ
└ブレイクポイントの設定
↓
ESLint設定
↓
感想# 環境
・Windows 11
・Visual Studio Code(以下、「vscode」)
・Node.js v20.16.00
・Node Package Manager(以下、npm) 10.8.2# 環境構築
### Node.j
Lambda関数で日本語ファイルを処理する際にエラーが出た
# はじめに
Lambda関数でAWS CLIコマンドを使用して、日本語ファイル名のファイルをS3にアップロードしようとしたところ、エラーが出ました。
“`
‘utf-8’ codec can’t encode characters in …
“`Lambda関数のランタイムは `Node.js20.x (OS: Amazon Linux 2023)` です。
# エラーの原因
まずは、環境変数設定で `LANG` に `ja_JP.utf8` を設定してみますが、結果は変わらず。
Amazon Linux 2023のDockerコンテナを起動して確認してみると、そもそもデフォルトで日本語のロケールデータが存在していませんでした。
“`bash
$ docker run
Discord.jsでselfbotを作りたい。
どーも、りょうです。
Discord.jsでセルボを使ってるのみて自分も作ってみようと思いまして。
でも調べてもあんまり情報が出てこないんでね..一応書いておきます## Selfbotとはなんぞや。
selfbotとゆーのは通常の**ユーザーアカウント**をbotとして使うやつです。
こんな感じのイメージ↓
discord.pyのほうにもselfbot用のはあるらしいので気になる人は調べてみてください。
基本的に通常のbotのコードとほとんど変わらないのでそんなにむずかしくないです。
ただし、自動化は利用規約的にまずいので使わないことをおすすめします。
今回はこういうのがあるよって記事です。では内容へごー👍## tokenの取得
selfbotを作るためには自分のアカウントのtokenを取得する必要があります。
今回は3個取得方法を
【Express.js】簡易なOAuth認可サーバを実装してみた
OAuth 2.0 の勉強のために認可コードグラントに対応した簡易認可サーバをExpress.jsで実装してみました。
https://github.com/fcf-koga/oauth-authz-server-express
## エンドポイント
下記のエンドポイントを実装しています。
– 認可エンドポイント
– トークンエンドポイントトークンエンドポイントでは、リフレッシュトークンの発行にも対応させました。
“`javascript:config.js
const authzServer = {
authorizationEndpoint: serverAddress + “/authorize”,
tokenEndpoint: serverAddress + “/token”,
responseType: [“code”, “token”],
};
“`
## クライアント
クライアント情報は静的に登録しています。“`javascript:config.js
const clients = [
{
client_id: “client
[paiza]1番小さい数字
# 初心に返って
どんどん、解いていこうね～https://paiza.jp/works/mondai/d_rank_skillcheck_sample/min_num
# これからも解いていく可能性を信じて
まだまだ問題いっぱいあるっぽいので、やろうという気持ちがあるうちに。。。
全問題で共通となるパラメータの取得部分はもうindex.jsに書いてしまって、
処理の部分をmodule化してindex.jsから呼び出すようにしてみた“`javascript:index.js
process.stdin.resume();
process.stdin.setEncoding(‘utf8’);const lines = [];
const reader = require(‘readline’).createInterface({
input: process.stdin,
output: process.stdout
});reader.on(‘line’, (line) => {
lines.push(line);
});
// paizaで公開されてる
[paiza]すごく普通に書いてみた
# こういう問題大好き
[コレ](https://paiza.jp/works/mondai/s_rank_skillcheck_sample/mod7)に挑戦https://paiza.jp/works/mondai/s_rank_skillcheck_sample/mod7
# Node(index.js)で正攻法で書いてみた
ちなみに標準出力から値を取得するって部分は、[paizaで公開されてるサンプル](https://paiza.jp/guide/samplecode.html)をそのまま使いました。
“`javascript:index.js
// [問題文（原文）]
// 整数が書かれた複数のカードの中から3枚を選び、
// そこに書かれた整数の和が7で割り切れるかどうかで運勢を決めようというものです。
// カードは必ず異なる3枚を選ぶ必要があり、
// 全てのカードには全て異なる数字が書かれています。
// — ここから paizaで公開されてるサンプル
process.stdin.resume();
process.stdin.setEncoding(‘
【Prisma】findManyで100万規模のデータを取得する
# :sunny: はじめに
今回は約100万件ほどのデータを**生SQLクエリ**ではなく**Prisma（ORM）でデータ取得をする**というところに焦点を当てて、実装までに当たった問題点や内容のご共有ができたらと思います。
# :four_leaf_clover: 環境
* TypeScript：4.7.4
* Prisma：5.9.0
* Provider：MySQL# :gear: 実装したコード
“`TypeScript:service.ts
type DataType = {
id: number
name: string
createdAt: Date
}async getData(): Promise<{ result: DataType[] }> {
const batchSize = 150000
let lastId = 0
let results: DataType[] = []
let specificData:
discord.js v14での権限設定、確認
りょうです。
今回はdjs v14の権限の設定、確認とうについての記事です。
それではれっつごー👍## PermissionsBitField
discord.js v13で使われていた`Permissions`がv14で**PermissionsBitField**に変更されました。“`diff_javascript
– const { Permissions } = require(‘discord.js’);
+ const { PermissionsBitField } = require(‘discord.js’);
“`内容的には特に変更はありません。
よく使われる奴ら置いときます。
この形で使うようにしてください。↓
“`
Permissions.BitField.Flages.権限名
“`
|権限名|内容|
|:-:|:-:|
|Administrator|管理者|
|KickMembers|メンバーのキック|
|BanMembers|メンバーのBAN|
|ViewChannels|チャンネルの閲覧|
|SendMessages|メッセージの送信|
複数ブラウザを同時に起動して、フォーム登録を行い負荷テストを行う方法(PlayWright)
## はじめに
[PlayWright](https://playwright.dev/)を利用して、フォーム入力＋POSTを複数ブラウザから同時に実行した際のレスポンス時間を計測するスクリプトです複数ブラウザ起動＋指定回数のフォーム登録部分(共通部分)を`stress-script.mjs`で実装
別途フォーム登録スクリプトを用意し、共通部で`dynamic import`して呼び出す仕組みです
### ex. フォーム登録するスクリプト(test-testplanisphere.mjs)を、 3ブラウザ同時 × 2回繰り返しアクセス（合計6回）した場合
* 引数でスクリプト、同時にブラウザを起動する数、リピート回数を指定します
* 初回に3.1秒、2回目に1.2秒程度かかかったことがわかります
“`
$ node stress-script.mjs test-testplanisphere.mjs 3 2
param1 script : test-testplanisphere.mjs
param2 open : 3 browsers
param3 re
kintone 秘密鍵からプラグインID取得
秘密鍵からkintoneプラグインのプラグインIDを生成するツールです。
# 概要
kintone-plugin-packer で、ppk オプションを指定しないと、プラグインID の名称で秘密鍵ファイルが作成されますが、規定で private.ppk の名称を指定しています。
そのため、kintone 環境にプラグインをアップロードするまでプラグインIDがわかりません。
そこで、作成された秘密鍵からプラグインID取得するスクリプトを作成しました。https://www.npmjs.com/package/@rex0220/kintone-get-pluginid
# インストール
“`bash
npm install -g @rex0220/kintone-get-pluginid
“`# 使用方法
– コンソールに表示
“`bash
rex0220-get-pluginid -i private.ppk
“`– ファイル出力
“`bash
rex0220-get-pluginid -i private.ppk -o pluginId.txt
“`
[Node.js] [nodebrew] [Mac] nodebrewを使用してMacにNode.jsをインストールする
# 目次
– [Hoebrewでnodebrewをインストール](#homebrewでnodebrewをインストール)
– [nodebrewでNode.jsをインストール](##homebrewでnodebrewをインストール)# Homebrewでnodebrewをインストール
1. brewでnodebrewを検索する
~~~sh
brew search nodebrew
~~~
1. インストールする
~~~sh
brew install nodebrew
~~~1. セットアップを行う
~~~sh
nodebrew setup
~~~PATH情報が出力される。
Reactフレームワークから何かを選んで使用することを
ノーションクローンアプリ
# アプリのURLとソースコード
アプリのURL
https://notion-clone-692f82db0b79.herokuapp.com/ソースコード
https://github.com/keisukematsuka/notion-clone### 技術選定
・フロントエンド react
・バックエンド node.js
・データベース mongoDB
・ソース管理 github# 使用したライブラリー
### React Libraries1. **react**
– **概要**: フロントエンドライブラリで、UIコンポーネントを構築するために使用される。コンポーネントベースのアーキテクチャを提供し、状態管理やDOM操作を効率的に行える。
2. **axios**
– **概要**: HTTPクライアントライブラリで、ブラウザやNode.js環境で使用できる。APIとの通信を簡便に行えるようにし、GETやPOSTリクエストをサポートする。
3. **mui (Material-UI)**
– **概要**: React向けのUIフ
Node.jsとBunのDockerイメージを使った開発環境について備忘録
後発のJSランタイム兼パッケージマネージャことBunについての勉強メモ
BunについてホストPCへのグローバルインストールをせずにDockerを用いた環境構築を行います
対比する目的でNodeを使った環境も併せて構築します## 環境情報
|項目|内容|
|—|—|
|PC本体のOS|Windows 10 Pro|
|PC本体のメモリ|32GB|
|WSL2|Ubuntu 20.04|
|WSL2のメモリ|16GB|
|エディタ|VSCode 1.91.1|
|Docker|20.10.14|## NodeとBunのコンテナを作成
まず、NodeとBunについてまっさらなコンテナ環境を作成します### Node.jsのDockerイメージについて
https://hub.docker.com/_/node
上記リンクのTagsページより `20.16.0-slim` というイメージを使用しました
“`dockerfile:.docker/node/Dockerfile
FROM node:20.16.0-slimENV TZ Asia/Tokyo
WOR
Nodeのパッケージ管理を管理したい話
## はじめに
Nodeのパッケージ管理ツールって複雑なのです。いわゆる”yarn”や”npm”とか。聞いたこと、実行したことあるのではないのでしょうか。
結局どっちで管理してるの？すべきなの？いやいや他にもパッケージ管理ツールってあるんだよ。というお話をします。## パッケージ管理ツール
そもそもパッケージ管理ツール、ってなんなのよ。このパッケージ管理ってなんで必要なのという話からです。ソフトウェア開発では複数のパッケージが必要になります。
例えばこんなコードを書きたいとします。ReactのHooksらを用いてルーティングし、MUIでコンポーネントを構成します。
すると書きたいコードの上にこのようなimport文を書きます“`typescript
import { Box, Typography } from “@mui/material”;
import { useEffect, useState } from “react”;
import { useNavigate, useParams } from “react-router-dom”;
“`これは
【Node.js】初心者必見！ゼロから学べる実践入門
Node.jsとは？
—
Node.jsは、GoogleのV8 JavaScriptエンジン上に構築された、イベント駆動、非同期I/Oを備えたJavaScriptランタイムです。
これにより、高いパフォーマンスを保ちながら非同期処理を行うことができます。Node.jsインストール
—
https://nodejs.jp/npm（Node Package Manager）
—
Node.jsのためのパッケージ管理ツールです。
これにより、JavaScriptのライブラリやツールを簡単にインストール、管理、共有することができます。
npmは、依存関係の管理やバージョン管理を行い、開発プロジェクトを効率的にサポートします。基本的なnpmコマンド
—
`npm init`: 新しいNode.jsプロジェクトのためのpackage.jsonファイルを作成します。
`npm install`: 指定したパッケージをインストールします。
`npm uninstall`: 指定したパッケージをアンインストールします
ArrayQueryでオブジェクト配列をタイプセーフORMっぽく扱う
## ArrayQueryとは
[ArrayQuery](https://array-query.vercel.app/)は2024年7月18日にローンチされた、タイプセーフORMライクにオブジェクト配列を扱えるように設計された強力なTypeScriptライブラリです。
軽量でありながら機能豊富なライブラリで、オブジェクト配列に対して複雑な操作を簡単に実行できます。特に、メモリ内の大規模データセットを操作する際や、フロントエンドアプリケーションで高度なフィルタリング、並べ替え、ページネーションを実装する場合に便利です。
https://array-query.vercel.app/
## 主な特徴
– **ページネーション**: 大規模データセットを簡単にページ分割できます。
– **全文検索**: データ内の複数フィールドにわたる柔軟で強力な検索ができます。
– **高度なフィルタリング**: 複雑なフィルタを適用して正確なデータ取得ができます。
– **柔軟な並べ替え**: 昇順と降順の両方をサポートし、任意のフィールドでの並べ替えが可能です。
– **型安全な操作**:
Node.jsによるURLからのパラメータの受け取り
# Node.jsでのURLからのパラメータの受け取り
:::note info
URLでクエリパラメータ(?id=~)を使うか直接書くかによって、req.queryとするかreq.paramsとするかが異なります
:::クエリパラメータを使って、article?id=4のように記載する場合、
getの後の第一引数にクエリパラメータを記載する必要はなく、勝手に取得してくれるのでreq.queryで使います。
“`js:queryを使う場合
const express = require(‘express’);
const app = express();app.get(‘/article’, (req, res) => { // ‘/article?id=4’のようなURL
res.render(‘article.ejs’, {req.query.id});
});
“`クエリパラメータではなく、article4のように直接記載する場合、
getの後の第一引数にパラメータをコロンで指定すると取得してくれるのでreq.paramsで使います。
“`js:query
axiosやfetchに替わるKyのススメ
### Kyとは
**Ky**は、Sindre Sorhusが開発したJavaScript向けの軽量かつ多機能なHTTPクライアントです。ネーミングの意図はよくわかりませんが、AxiosやネイティブのFetch APIに代わる、より効率的で使いやすい選択肢として設計されています。
https://github.com/sindresorhus/ky
## Kyの利点
1. **軽量で効率的**: Kyのコアは非常に小さく（約2 KB）、パフォーマンスが重要なアプリケーションにとっては特に大きなメリットとなります。
2. **Promiseベース**: Fetch APIと同様に、KyはPromiseを基盤としており、async/await構文との組み合わせが容易です。
3. **シンプルなAPI**: Kyが提供するAPIは非常にシンプルなので、学習コストが抑えられます。
4. **再試行機能**: Kyには、失敗したリクエストの再試行する機能が組み込まれており、エラーハンドリングの実装コストを減らします。
5. **JSON処理**: Kyは自動的にJSONリクエストとレスポ
Azure FunctionsでPrismaを使おうとしたらcli からのデプロイでドハマりしたメモ
## 概要
[前回](https://qiita.com/hibohiboo/items/a678e8af01b6fef21709)の続き。Azure Functionsは`func start`で動いても`func azure functionapp publish hoge`で何も言わずに死んでいくの本当によくないと思う。
設定ミスの箇所を探すのに苦労したのでメモ。結論からいうと[Deploy to Azure Functions](https://www.prisma.io/docs/orm/prisma-client/deployment/serverless/deploy-to-azure-functions)に従って`binaryTargets = [“native”, “debian-openssl-1.1.x”]`をschema.prismaの`generator client`ブロックに追加してあげればよかった。
[ソースコード](https://github.com/hibohiboo/async-ttrpg/blob/c112b1b39bf1d3e147f0
