Node.js関連のことを調べてみた

2024年におすすめのMac開発ツール（超使いやすい）

仕事をうまくやるには、まず道具を磨かなければならないと言われています。有用なツールは私たちをより効率的にすることができ、美しいインタフェースは私たちを喜ばせることができます。そのため、使いやすく視覚的に魅力的な開発ツールは私たちの開発ツールです。
そこで今日は、2024年のMacに適した開発ツールをお勧めしたいと思います。それらはあなたにとって実用的で役に立つものです。
1.TablePlus

TPはデータベース管理ツールであり、ここで記述されていますが、NaviCatを使用して可用性を高めることをお勧めします。Navicatは有料ですが、「ラーニング版」を選択することができます。私がTPを使ったのは、NavicatがすべてのTPをアンインストールするように会社に手紙を送ったからです。だから私はこの代替案を見つけて、それもとても良いです。
複数のデータベース接続をサポート
![対応していない形式のファイルです。]()
界面レイアウトはnavicatに劣らず、なかなかいいです。
![対応していない形式のファイルです。]()

2.テメウス

このSSHとSFTP接続ツールも私が最も大切

[paiza]と～う！！

# 塔とか大砲とかってなんかいいよね
バベルの塔　とか
塔の上のゲフンゲフン（著作権怖い）　とか　
結晶塔の帝王 ENTEI（個人的にはSUIKUN派）　とか
ネオアームストロングサイクロンジェットアームストロング砲（完成度たけーなオイ）　とか

https://paiza.jp/works/mondai/real_event/hanoi

# 面倒くさいので画面パタメータをListでもらった後のFunctionだけ
ちなみに引数のListを作ってる箇所は[こっちの記事](https://qiita.com/AsilHatake/items/842548e48ae4a0eae119)に書いてあるYO!!

“`javascript:hanoi.js
// [問題文（原文）]
// ハノイの塔というパズルがあります。
//
// 3つの杭があり、左から順にA,B,Cの杭とします。
// 杭Aに円盤が下から大きい順に n 個重なって置かれています。
// この円盤は必ず1つ上の円盤は下の円盤より小さくなくてはいけないルールがあります。
//
// このルールを守りながらAの杭からCの

[paiza]山あり谷ありラジバンダリ

# ありおりはべりいまそかり
`最近、ひたすら紙を折り続けるということがマイブームとなっているあなたは、今日もひたすら紙を折り続けています。それも、折り紙のような凝った折り方ではなく、紙の右辺が上から左辺に重なるような二つ折りを、ただひたすら繰り返すだけです。
`

おいおいおい、プログラムのし過ぎで頭おかしくなったんか？
刺し身にたんぽぽ載せる仕事とかに転職したほうがいいんじゃない？
かと不安になる問題文の冒頭。。。

https://paiza.jp/works/mondai/real_event/origami

# 面倒くさいので画面パタメータをListでもらった後のFunctionだけ
ちなみに引数のListを作ってる箇所は[こっちの記事](https://qiita.com/AsilHatake/items/842548e48ae4a0eae119)に書いてあるYO!!

“`javascript:origami.js
// [問題文（原文）]
// 最近、ひたすら紙を折り続けるということがマイブームとなっているあなたは、今日もひたすら紙を折り続けています。それも、折り紙

Voltaのインストール手順（macOS, zsh）

## アジェンダ
JavaScriptツールチェインを簡単に管理できるVoltaのインストール手順を以下に説明します。この手順では、macOSのzshを使用しています。

## インストール手順
### 方法1: 公式インストールスクリプトを使用

1. **Voltaのインストール**:
Voltaは公式インストールスクリプトを使用して簡単にインストールできます。ターミナルを開き、以下のコマンドを実行してください。

https://docs.volta.sh/guide/getting-started

“`sh
curl https://get.volta.sh | bash
“`

### 方法2: Homebrewを使用

1. **Voltaのインストール**:
Homebrewを使ってVoltaをインストールするには、以下のコマンドを実行します。

“`sh
brew install volta
“`

**—–　!!!ここから共通手順!!!　—–**

2. **インストール後の確認**:
インストールが完了したら、ターミナルを再起動するか、以下のコ

[paiza]本の整理 (paizaランク A 相当)

# なんだかんだでAランクまで来ちゃったよ。。。
最初にSランクの簡単そうなやつを1問解いてから、Dランクで無双がしたいという浅はかな理由で始めて、C・Bと特に面白いことも言えずにダラダラ解いて来たけど、とうとうAランク問題に突入しました。

https://paiza.jp/works/mondai/real_event/book_sort

# 面倒くさいので画面パタメータをListでもらった後のFunctionだけ
ちなみに引数のListを作ってる箇所は[こっちの記事](https://qiita.com/AsilHatake/items/842548e48ae4a0eae119)に書いてあるYO!!

“`javascript:bookSort.js
// [問題文（原文）]
// あなたはパイザ図書館で働く図書館員です。
//
// パイザ図書館には N 冊の蔵書があります。この蔵書はすべて 1 段からなる本棚で管理されています。そして、それぞれの本には 1 から N までの相異なる整数の ID がついています。本棚の本は ID 順に並んでいます。
//
// しかし、

【Node.js】MySQL と接続して CRUD 機能を実装する

# はじめに
この記事では、Node.js / TypeScript / MySQL を使ってユーザーの CRUD 機能を実装する手順について記載します。

# 開発環境
開発環境は以下の通りです。

– Windows11
– VSCode
– Talend API Tester
– Docker Engine 27.0.3
– Docker Compose 2
– MySQL 9.0.0
– Node.js 20.15.1
– npm 10.8.2
– @types/node 20.14.11
– ts-node 10.9.2
– TypeScript 5.5.3

# 開発環境構築
以下の手順で開発環境を構築します。

https://qiita.com/Yasushi-Mo/items/f0b5b7350db4598e9573

# 実装方針
`src/index.ts` でルーティングを行い、`src/users.ts` で CRUD 処理を行います。
各 CRUD 処理は以下の流れで行います。

1. DB接続
1. CRUD クエリ実行
1. DB接続切断
1. レスポン

[paiza]【殿堂入りキャンペーン】名刺バインダー管理 (paizaランク B 相当)

# 力こそパワー
いい感じの公式だったりアルゴリズムが思いつかない時に大事なのは？

**そうだね、筋肉だね!!**

https://paiza.jp/works/mondai/b_rank_skillcheck_archive/name_card

# 面倒くさいので画面パタメータをListでもらった後のFunctionだけ
ちなみに引数のListを作ってる箇所は[こっちの記事](https://qiita.com/AsilHatake/items/842548e48ae4a0eae119)に書いてあるYO!!

“`javascript:nameCard.js
// [問題文（原文）]
// あなたはこれまでに出会った人たちの名刺を集めています。
// 名刺は、複数枚のファイルを閉じることができるバインダーに保存されています。
//
// 1枚のファイルには、n個のポケットが横に並んでおり、表と裏の両面から名刺を眺めることができます。
// このため、1つのポケットには、2枚の名刺が背中合わせに入っています。
//
// 各名刺には1から順に通し番号が付いているため、この番

[paiza]長テーブルのうなぎ屋 (paizaランク B 相当)

# 江戸っ子への偏見がすごいw
“`text
ただしお客さんは江戸っ子なので、それら座席のうち、いずれか一つでも既に先客に座られている座席があった場合、
一人も座らずにグループ全員で怒って帰ってしまいます。江戸っ子は気が早いんでぃ。
“`
この問題の世界の住人はヤベェ奴らしかおらんのか。。。

https://paiza.jp/works/mondai/b_rank_skillcheck_sample/long-table

# 面倒くさいので画面パタメータをListでもらった後のFunctionだけ
ちなみに引数のListを作ってる箇所は[こっちの記事](https://qiita.com/AsilHatake/items/842548e48ae4a0eae119)に書いてあるYO!!

“`javascript:longTable.js
// [問題文（原文）]
// 東京の下町に長テーブルで有名な老舗うなぎ屋がありました。
//
// そのうなぎ屋にはとても大きい長テーブルがあり、テーブルの周りにn個の座席が配置されています。
// 座席には、時計回りに1, 2, …,

[paiza]みんなでしりとり (paizaランク B 相当)

# 条件がめんどくせぇんよ
指定された単語リストがあるのに、そのリストから選ばない（入力例2）とかサイコパス集団がしりとりしとるんか？
もう少しルールわかる奴らでしりとりあえよ。

https://paiza.jp/works/mondai/b_rank_skillcheck_archive/word_chain

# 面倒くさいので画面パタメータをListでもらった後のFunctionだけ
ちなみに引数のListを作ってる箇所は[こっちの記事](https://qiita.com/AsilHatake/items/842548e48ae4a0eae119)に書いてあるYO!!

“`javascript:wordChain.js
// [問題文（原文）]
// あなたは友達たちと N 人でしりとりを行うことにしました。
// 1 人目、 2 人目、…、 N 人目、 1 人目、2 人目、… という順序で発言をします。
//
// ここで、それぞれの人は、次に挙げる 4 つのしりとりのルールを守って発言をする必要があります。
//
// 1. 発言は、単語リストにある K

Node.jsのBufferを使って、画像をbase64のバイナリ形式に変換してHTMLに埋め込む

Puppeteerというライブラリを使ってHTMLからPDFを作成していた時に、画像ファイルが表示されない（読み込まれない）という問題が発生
→ローカルのファイルは読み込めないのでバイナリで埋め込む必要がある、とのことだった

Bufferを使って変換する方法が簡単にできたのでメモ

まず、画像をバイナリに変換する方法
“`JS:logic.js
// 画像ファイルを読み込む
//../../assets/image.pngは読み込むファイルのパス
const imageBuffer = fs.readFileSync(path.resolve(__dirname, ‘../../assets/image.png’));
// BufferをBase64文字列に変換
const base64String = imageBuffer.toString(‘base64’);
“`

HTMLの実装
“`HTML:template.html

“`

バイ

[paiza]神経衰弱 (paizaランク B 相当)

# 問題文を読み解くのがめんどい。。。

https://paiza.jp/works/mondai/b_rank_skillcheck_archive/concentration

# 面倒くさいので画面パタメータをListでもらった後のFunctionだけ
ちなみに引数のListを作ってる箇所は[こっちの記事](https://qiita.com/AsilHatake/items/842548e48ae4a0eae119)に書いてあるYO!!

“`javascript:concentration.js
// [問題文（原文）]
// 神経衰弱と呼ばれるトランプゲームのシミュレーションをしましょう。
// 今回は数字が書かれたトランプのみを考え、ジョーカーは考えません。
//
// まず、トランプを縦 H 枚、横 W 枚の長方形の形に並べた状態でスタートします。
// H × W 枚のトランプには 1 〜 13 の数字のうちどれか1つが書かれています。
// また、同じ数字が書かれたトランプが複数あります。
//
// プレイヤーが N 人おり、それぞれ 1 〜 N で番号付

APIのテストをStepCIで実装した際のナレッジ

APIのリグレッションテストが元々はJMeterで実装されていたが、人によりJAVAの環境が違って動かなかったり、スクリプトがjavascriptで書かれていたり(古いJAVAでしか動かない)など運用が面倒になっていたので、StepCIで実装しなおす事に。

– StepCI
https://stepci.com/

テストコードがyamlで記述でき可読性、メンテ性も良くなる。かつCIの実装も簡単になるのでヨシ。
ただ動的なテストデータを使用したい場合は多少スクリプトを書く必要があるため、それを書いた際のナレッジ。

##### 以下、実装サンプル　
“`js:stepci.js
import { run } from ‘@stepci/runner’

// Workflow定義
const workflow = {
version: “1.0”,
name: “Sample Test Workflow”,
// includeしているworkflow共通で使用する変数
env: {
host: “localhost:8080”,
header: {

Azureのfreeプランでnodeアプリをホストする際に容量不足になった場合の対処方法

AzureWebAppsのフリープランで試しにホストする際、node.jsアプリだと度々デプロイに失敗します😥
その時、フリープランは1GBのストレージしかなく、デプロイ時にあげたzipファイルサイズやら、展開後のファイルサイズやら、node_modulesのサイズやらで容易に上限に達してしまいます、、(remixアプリをあげたときの所感です)
わざわざリソースを作り直すのも面倒なので、以下の手順でクリーニングを行って対処しました

:::note info
1. Azure Web Appsの高度なツールに接続する
2. bash接続を選び、`npm cache clean -force`を実行する
:::

上記によりストレージ内のnpmキャッシュがクリアされ、容量に余裕が出ると思います
検証はしていませんが`~/site/wwwroot`配下を`rm -r`することでも容量を削減でき、再度デプロイできるんじゃあないかと思います
~~時間がとれなかったので記事作成ちょっと手抜きしました~~

VSCodeでデバックができるPlaywrightの自動ソース生成(所要時間5分)

## Playwrightとは
Webサイトの自動テストツールです。Microsoft製のツールでブラウザの操作からソースを自動生成する機能があります。

Node.jsのプロジェクトをローカルに環境を作るのでPCを汚すことが少なくとも少ないと思っています。
(不要の場合はプロジェクトフォルダを削除で解決。npxでインストールするブラウザのプラグインは$HOME/.npm/_npxや他の場所に保存されていないのではと思っています)


## 前提条件
・Node.jsがパソコンに入っていること。
入っていれば5分で実用できます。
(Macの場合のインストール方法は[こちら](https://qiita.com/ryouta33/items/193b43a524f11c045ed3))

## PlaywrightのTest

TypescriptでMermaidシーケンス図を作るプログラムを作ってみたかった

# 前置きと挫折
Javaへのマイグレーション業務にてシーケンス図やクラス図などのUMLを作るかの検討を行なっており、ソースなどからUML起こすことを自動化できないか、を考えたのがきっかけ。

VSCodeの拡張機能などでないか探したが、なさそうだったので自分で作るか、といったん決意。

ただ、調べていくと、Javaのソースコードの構文解析を一から作成するのは無理そうだったので、せめてファイル設定値に従ってMermaid記法のシーケンス図を作るプログラムを作るか…ということで作業開始。

将来的にVSCodeの拡張機能化したいと考えていたため、Typescriptを選んだ。

# Mermaidとは
https://mermaid.js.org

上記にリンク添付、端的に説明すると、
Markdownテキストでクラス図やシーケンス図グラフを作成できるダイアグラムツール。
使えると便利。

# Repository
https://github.com/ryoheiY/create-sequence-diagram-by-ts

# 概要
以下のようなYamlファイルから
~~~ya

wsl(Windows Subsystem for Linux)事始め

# はじめに
本資料はmac普段使ってた人がwinで開発環境をちょっと作る為にやった作業のメモですほぼ。

# 目標
– Windowsでモダンな開発環境を作りたい
– ほしいのはとりあえずNode.jsさえあればいったんOK

# 作業

## WSLの初期設定

詳しくはここを参照
https://zenn.dev/dyoshy/articles/04d6bf3822b6ff

WSLのインストール
“`
wsl –install
“`

WSLのバージョン指定
“`
wsl –set-default-version 2
“`

Visual Studio Code を入れてVSCode remote Developmentをインストール。
これで、wsl上のUbuntu内のファイルを触ることができる

## Dockerインストール

Dockerはいったん不要な気もしたけど…
VS Code上でWSLを開き、Ctrl+@でターミナルを開いて以下を実行していく

“`
$ sudo apt update
$ sudo apt install ca-certifica

TypeScriptの中級コース～TypeScriptにどっぷり浸かろう！～

## TypeScriptを極めよう！

TypeScriptは次世代のVBAになるほどMicrosoftがプッシュしています。
TypeScriptからファイルシステムにアクセスすることはできませんが
PowerAutomateと一緒に使うことで高度な処理が実現できます。

それではいきましょう！

## 1. 型推論の高度な使用法

TypeScriptの型推論は非常に強力です。複雑な型推論の例を見てみましょう。

“`typescript
function createPair(v1: T, v2: U): [T, U] {
return [v1, v2];
}

let pair = createPair(“hello”, 42);
// pairの型は [string, number] と推論されます
“`

## 2. 条件付き型の応用

条件付き型を使用して、入力に基づいて型を動的に選択できます。

“`typescript
type TypeName =
T extends string ? “string” :
T ex

SeleniumでWebDriverを自動取得し、スクリーンショットをGitHub Actionsで撮影して格納するNode.jsサンプルコード

# 本サンプルが提供する内容

* Seleniumを用いたブラウザーの自動操作に置いて、Webドライバーのインストール管理を不要とする実装方法（Selenium公式が**webDriverの実装の自動取得に対応**したので、その機能を利用）
* ブラウザー自体が無い環境で、ブラウザーも含めて自動取得してSeleniumによるブラウザーを介したE2Eテストをする方法

* 合わせて、GitHub Actionsで実行して撮影したスクリーンショットをArtifactに格納するワークフローも実装してある
* なお、GitHub Actionsそのものの解説はしない

# サンプルコード

以下のGitHubリポジトリを参照。

* [https://github.com/hoshimado/selenium-automated-driver-management-sample-nodejs](https://github.com/hoshimado/selenium-automated-driver-management-sample-nodejs)

なお、GitHub Ac

TypeScriptの入門コース: 汗かいて学ぶTypeScript

## はじめに

TypeScriptは、JavaScriptに静的型付けを追加した強力なプログラミング言語です。本記事では、TypeScriptの基本的な概念と使い方を、サンプルコードを交えながら解説していきます。

## 1. TypeScriptとは

TypeScriptは、Microsoftが開発したオープンソースの言語で、JavaScriptのスーパーセットです。つまり、既存のJavaScriptコードはそのままTypeScriptとして動作します。

TypeScriptの主な特徴:

– 静的型付け
– クラスベースのオブジェクト指向プログラミング
– モジュールシステム
– 最新のECMAScript機能のサポート

## 2. 開発環境のセットアップ

TypeScriptを使い始めるには、Node.jsとnpmをインストールする必要があります。

1. Node.jsをインストール: https://nodejs.org/
2. TypeScriptをグローバルにインストール:

“`bash
npm install -g typescript
“`

3.

マッチングアプリを作るときにTypeScriptとPythonのFlaskが重宝する理由

## TypeScriptを使ってマッチングアプリを作る！

こんにちは！今回は、TypeScriptとFlaskを使ってマッチングアプリを作成する方法をご紹介します。このガイドでは、フロントエンドにTypeScript、バックエンドにFlaskを使用し、step by stepで開発プロセスを説明していきます。

## 1. プロジェクトのセットアップ

まず、プロジェクトの基本構造を作成しましょう。

“`
matching-app/
├── frontend/
│ ├── src/
│ ├── public/
│ ├── package.json
│ └── tsconfig.json
└── backend/
├── app.py
├── requirements.txt
└── venv/
“`

### フロントエンドのセットアップ

フロントエンドではReactとTypeScriptを使用します。

“`bash
npx create-react-app frontend –template typescript
cd f