- 1. [paiza]すごく普通に書いてみた
- 2. 【Prisma】findManyで100万規模のデータを取得する
- 3. discord.js v14での権限設定、確認
- 4. 複数ブラウザを同時に起動して、フォーム登録を行い負荷テストを行う方法(PlayWright)
- 5. kintone 秘密鍵からプラグインID取得
- 6. [Node.js] [nodebrew] [Mac] nodebrewを使用してMacにNode.jsをインストールする
- 7. Reactのプロジェクト作成
- 8. ノーションクローンアプリ
- 9. Node.jsとBunのDockerイメージを使った開発環境について備忘録
- 10. Nodeのパッケージ管理を管理したい話
- 11. 【Node.js】初心者必見!ゼロから学べる実践入門
- 12. ArrayQueryでオブジェクト配列をタイプセーフORMっぽく扱う
- 13. Node.jsによるURLからのパラメータの受け取り
- 14. axiosやfetchに替わるKyのススメ
- 15. Azure FunctionsでPrismaを使おうとしたらcli からのデプロイでドハマりしたメモ
- 16. 🌟 エキサイティングなニュース: ServBay 1.3.9がリリースされました!
- 17. Node.jsについて
- 18. 【DevContainer入門①】チュートリアルをやってみた
- 19. サポーターズ(Docker)イベントに参加 2024.07.23
- 20. kintone スペース管理コマンド操作例
[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をインストール](#nodebrewでNode.jsをインストール)# Homebrewでnodebrewをインストール
1. brewでnodebrewを検索する
~~~sh
brew search nodebrew
~~~
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2955010/2a1e3afd-2138-aa7c-b477-25eeacde16be.png)1. インストールする
~~~sh
brew install nodebrew
~~~1. セットアップを行う
~~~sh
nodebrew setup
~~~PATH情報が出力される。
![image.png](https://qiita-image-st
Reactのプロジェクト作成
# Reactのプロジェクト作成コマンド
`my-app`という名称のプロジェクトを作成するときのコマンド
“`
npx create-react-app my-app
“``npx`はパッケージを一時的にインストールするためのコマンド。グローバルに何かをインストールしたくない時とかに使う。`create-react-app`はプロジェクト作成時にしか使わないし、グローバルにインストールするほどでもないので、毎回使うたびに`npx`で呼び出す感じ。
# 役目を終えたcreate-react-app
純粋なReactのプロジェクト作成するのであれば、上記のコマンドで良いが、今はもうReactの公式ドキュメントにはcreate-react-appは使われていない。公式ドキュメントの記載
[フレームワークなしで React を使うことは可能?](https://ja.react.dev/learn/start-a-new-react-project#can-i-use-react-without-a-framework)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
🌟 エキサイティングなニュース: ServBay 1.3.9がリリースされました!
最新のServBayアップデートを発表できることを嬉しく思います。開発ワークフローを加速させる新機能が満載です!バージョン1.3.9で期待できることは次のとおりです
### 1.3.9の新機能
– **クイックサーチマジック:** 新しい検索機能でホストやDNS設定を素早く検索—必要なものを瞬時に見つけることができます!⚡
– **お気に入りを手元に:** よく使うホストやメニューバーアイテムにスターを付けて、すぐにアクセス。あなたのワークフロー、お気に入りに合わせて!🌟
– **メニューバーの刷新:** メニューバーを整理して、簡単にナビゲートできるようにしました。シンプルさと効率性が全てです。
– **UIアップグレード:**
– 新しい「フォルダを開く」ボタンでプロジェクトに直行。
– ダッシュボードのテキストがあなたの言語で表示され、よりローカルな感じに。
– アップデート後すぐに新機能を発見—最先端を簡単にキャッチアップ。
– 最適化されたUIディテールで滑らかな操作を体験。
![image.png](https://qiita-image-store.s3
Node.jsについて
自分の得た情報を整理した記事です。
間違った情報を載せていたらご指摘お願いします。# Node.jsとは
### JavaScriptをサーバ側で動作させる開発環境のこと(実体はない。概念)## package.json
### パッケージを管理するために使われるファイル
“scripts”にはシェルスクリプト(コマンド)のエイリアスを記述できる。
npm initでそのディレクトリ内にpackage.jsonを配置(初期化)できる。## npm
### Node.jsで外部パッケージをローカルにインストールして実行するためのマネージャー#### インストールコマンド→npm i (-g) (任意のパッケージ名)
#### 実行コマンド→npm run (package.jsonの”scripts”内に記述したシェルスクリプトのエイリアス)
(このコマンドで何かを実行するにはpackage.jsonの”scripts”内にシェルスクリプトのエイリアスとその定義を記述しなければならない)## npx
### インストールされていないパッケージを実行(インストール→
【DevContainer入門①】チュートリアルをやってみた
気になっていたdevcontainerのチュートリアルをやってみた記録
## 実施するチュートリアル
:::note info
Dockerのインストールはスキップ
:::https://code.visualstudio.com/docs/devcontainers/tutorial
## 1. devcontainer拡張機能をインストトール
– チュートリアルの内容に従ってインストール
## 2. MSが提供しているサンプルdevcontainer環境を開く
– VSCodeのウィンドウが開きなおされてコンテナの立ち上げが行われる
– しばらくまつ
## 3. ターミナルを立ち上げる
1. `ctrl + shift + @`を押すとターミナルが起動する
2. コンテナに接続された状態でターミナルが起動する
3. 以下バージョン確認コマンドを打つとコンテナ内にインストールされたnodeとnpmのバージョンが確認できる
“`bash
node –version; npm –version
“`## 4. nodeアプリケーションを起動する
サポーターズ(Docker)イベントに参加 2024.07.23
本日もサポーターズのイベントに参加した。
内容は、初心者向けのDockerについての解説とアウトプットの実施であった。
## Dockerとは
コンテナ型の仮想環境を気軽に構築、実行できるプラットフォーム。
Dockerはチーム開発にとても向いている。なぜなら、全く同じ環境で作ることができ、削除も簡単なためである。ゲストOSは必要なく、ホストOS上で作成できる。ホストOSは仮想環境を動かす土台となっているOSである。
自分のPCのOSはWindowsなので、ホストOSはWindowsである。イベントの中で注目していた3つのワードについての解説もあった。
## イメージ
イメージとは、コンテナを作るための設計図で、プロジェクトの名前、使用する技術のバージョンの指定などが記されている。## コンテナ
コンテナとは、アプリケーションの実行環境のことで、プロジェクトのようなものである。
コンテナを作成、起動、削除が可能である。## ボリューム
データの永続化を担う場所であり、外部HDDのようなもの。ボリュームを使わずにコンテナを削除するとデータが消えてしまうので、コン
kintone スペース管理コマンド操作例
kintone スペース管理コマンドで、実際にスペース作成・照会・更新・削除操作を行なってみます。
# 概要
[chatGPT で kintone スペース管理コマンド作成](https://qiita.com/rex0220/items/2b0cbf91e07e20698515)で作成したコマンドを実際に使ってみます。
簡単にコマンドで、スペーステンプレートからアプリを含むスペースを作成できます。– 環境
– kintone: 開発環境
– OS: mac
– 今回は、mac ですが windows でも同様にできます
– ターミナルで操作# kintone 環境
kintoneシステム管理のアップデートオプションで開発中の新機能の下記を有効にする必要があります。
– 「スペースの情報を取得できるJavaScript API」を有効にする
– 「テンプレートを指定せずにスペースを作成できるREST API」を有効にする
ただゲストスペースについては、スペーステンプレート無しでは、スペース作成できませんでした。# インストール