- 1. [paiza]足し算するだけの簡単なお仕事
- 2. [paiza]文字列をつなげるだけの簡単なお仕事
- 3. Electron+Vue3でマルチウィンドウを理解したい
- 4. error: We can’t find the necessary environment variables to replace the Node version.
- 5. TypeScriptを初めて触ってみた
- 6. Lambda関数で日本語ファイルを処理する際にエラーが出た
- 7. Discord.jsでselfbotを作りたい。
- 8. 【Express.js】簡易なOAuth認可サーバを実装してみた
- 9. [paiza]1番小さい数字
- 10. [paiza]すごく普通に書いてみた
- 11. 【Prisma】findManyで100万規模のデータを取得する
- 12. discord.js v14での権限設定、確認
- 13. 複数ブラウザを同時に起動して、フォーム登録を行い負荷テストを行う方法(PlayWright)
- 14. kintone 秘密鍵からプラグインID取得
- 15. [Node.js] [nodebrew] [Mac] nodebrewを使用してMacにNode.jsをインストールする
- 16. Reactのプロジェクト作成
- 17. ノーションクローンアプリ
- 18. Node.jsとBunのDockerイメージを使った開発環境について備忘録
- 19. Nodeのパッケージ管理を管理したい話
- 20. 【Node.js】初心者必見!ゼロから学べる実践入門
[paiza]足し算するだけの簡単なお仕事
# Dランクをわかりにくく解く
https://paiza.jp/works/mondai/d_rank_skillcheck_sample/addition# 面倒くさいので画面パタメータをListでもらった後のFunctionだけ
ちなみに引数のListを作ってる箇所は[こっちの記事](https://qiita.com/AsilHatake/items/842548e48ae4a0eae119)に書いてあるYO!!“`javascript:add.js
// [問題文(原文)]
// 2つの正の整数 a, b が半角スペース区切りで入力されるので a と b を足した数を出力してください。
// ※「掛け算」の問題では入力が改行区切りで与えられましたが、今回は半角スペース区切りで与えられます。
function add(lines) {
if (!Array.isArray(lines) || lines.length !== 1) {
console.log(“1行入れろや!”);
return;
}
const vals = lines[
[paiza]文字列をつなげるだけの簡単なお仕事
# でぇベテランだけど、Dランク解いてイキりたい
https://paiza.jp/works/mondai/d_rank_skillcheck_archive/email_address
# 面倒くさいので画面パタメータをListでもらった後のFunctionだけ
ちなみに引数のListを作ってる箇所は[こっちの記事](https://qiita.com/AsilHatake/items/842548e48ae4a0eae119)に書いてあるYO!!“`javascript:createMailAddress.js
// [問題文(原文)]
// Eメールアドレスとはローカル部とドメインを「@」を繋いだ文字列で表されます。
// ローカル部を s ,ドメインを t として、それぞれ長さ n の文字列が改行区切りで入力されます。
// 以下の構文に沿った文字列を出力してください。
//
// s(ローカル部)@t(ドメイン)
//
// 例えば
// info
// paiza.jp
// のような入力の場合
// info@paiza.jp
// と出力して下さい。
f
Electron+Vue3でマルチウィンドウを理解したい
:::note info
viviONグループでは、DLsiteやcomipoなど、二次元コンテンツを世の中に届けるためのサービスを運営しています。
ともに働く仲間を募集していますので、興味のある方は[こちら](#一緒に二次元業界を盛り上げていきませんか)まで。
:::# Electronでマルチウィンドウを制御したい
知り合いの自転車屋さんに、商品のポップを簡単にデザインできるツールを作れないか相談を受けたので、Electronを使ったデスクトップアプリで作ってみることにしました :bike:
ポップのプレビュー画面が必要になるのですが、その際のマルチウィンドウ制御に少し悩まされたので、自身の備忘録も兼ねて検証内容をまとめてみました。# 検証環境
Windows10
Node:20.10.0
Vue CLI:5.0.8# 環境構築
ある程度これに倣えば同じように検証ができるように記載しています。今回は、VueでElectronを利用するために[Vue CLI Plugin Electron Builder](https://nklayman.github.io/vu
error: We can’t find the necessary environment variables to replace the Node version.
# 事象
Windows環境にて、fnmを使用してnode.jsのアップグレードを実行しようとしたところ、タイトルどおりのエラーが発生した。
https://nodejs.org/en/download/package-manager
# 原因
環境変数が設定されていない模様。
“`
error: We can’t find the necessary environment variables to replace the Node version.
You should setup your shell profile to evaluate `fnm env`, see https://github.com/Schniz/fnm#shell-setup on how to do this
Check out our documentation for more information: https://fnm.vercel.app
“`# 対処
環境変数を追加するコマンドを実行した。
“`
fnm env –use-on-cd | Out-String
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` を設定してみますが、結果は変わらず。
![スクリーンショット 2024-07-29 15.15.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3687813/fc945b3b-4e9d-94cd-144c-6edab6db41ab.png)
Amazon Linux 2023のDockerコンテナを起動して確認してみると、そもそもデフォルトで日本語のロケールデータが存在していませんでした。
“`bash
$ docker run
Discord.jsでselfbotを作りたい。
どーも、りょうです。
Discord.jsでセルボを使ってるのみて自分も作ってみようと思いまして。
でも調べてもあんまり情報が出てこないんでね..一応書いておきます## Selfbotとはなんぞや。
selfbotとゆーのは通常の**ユーザーアカウント**をbotとして使うやつです。
こんな感じのイメージ↓![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818367/0d6102c0-e33a-7fe2-a652-66d700cdee6f.png)
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
~~~
![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-
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`: 指定したパッケージをアンインストールします