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

TypeScript・Fastify・Prismaで簡単なAPI作成してみた

こんにちは。

FastifyとPrismaに関する記事があまりなかったので、書いてみました。

新しくキャッチアップする方は環境構築等々にご利用してみてください！

## 1.セットアップ
“`bash
mkdir fastify-prisma-todo
cd fastify-prisma-todo
npm init -y
“`

次に必要な依存関係をインストール
“`bash
npm install fastify prisma @prisma/client fastify-plugin
“`

次にtypescriptの設定を行う
“`bash
npm install typescript ts-node @types/node –save-dev
“`
“`bash
npx tsc –init
“`

tsconfig.jsonファイルが作成されるので以下のようにします
“`json
{
“compilerOptions”: {
“target”: “ES2020”,
“module”: “commonjs”,
“strict

npxで実行できるオリジナルコマンドラインツールを簡単に作ってみた！

## はじめに

Node.jsとTypeScriptを使って、`npx`コマンドで実行可能なコマンドラインインターフェース（CLI）ツールを作成する方法を紹介します。この記事では、プロジェクトのセットアップから、簡単なCliツールの作成までの手順をとりあえず作れることを目的にざっくり解説します。

## 前提条件

– Node.js（バージョン12以上）がインストールされていること
– npm（Node.jsに付属）がインストールされていること

## 手順

### 1. プロジェクトの初期化

まず、新しいディレクトリを作成し、プロジェクトを初期化します。

“`bash
mkdir my-cli-tool
cd my-cli-tool
npm init -y
“`

### 2. 必要な依存関係のインストール

TypeScriptと、コマンドライン引数を解析するためのライブラリ（例：commander）をインストールします。

“`bash
npm install -D typescript @types/node
npm install commander
“`

Node.jsを使ってTwitterの特定のキーワードのいいねを自動化

こんにちは！今回は、Node.jsとOpenAIのAPIを利用して、X（旧Twitter）のボットを作成しました。

作成に至った経緯

SNS運用のアルバイト経験から感じた効率化の必要性: 私は大学時代、Twitter運用のアルバイトをしていた経験があります。その中でいいね周りを手動で行うことが多く、手作業では非効率的だと感じていました。これを自動化してみたいなと思い、botの作成に至りました。

APIの活用を通じてフロントエンドエンジニアとしての知識をつけたい: 筆者は2025年の4月に新卒で自社開発の企業に入社予定であり、エンジニアとしての知識がまだまだ浅いのでAPI関連の知識を身に付けたいと思い勉強も兼ねて作成したいと思いました。

用意するもの

• Twitterアカウントと開発者用のアカウント（APIの取得のため）
• Open AIのAPI（無料）
• Node.jsとnpmのインストール

プロジェクトの立ち上げ方

n

ページ読み込みプロセスの動画化ツールを公開

# loadshow

URLを指定すると、そのページの読み込みプロセスをこんな感じの動画にするNode.js製のCLIツール `loadshow` (ロードショー)をオープンソースとして公開しました。


動画を並べて、読み込みスピードの比較もできます。


# 簡単な使い方

GitHubプロジェクトはこちら。Apache 2.0ライセンスです。

https://github.com/ideamans/loadshow/

Node.js(>=20)、Chrome、ffmpegがインストールされていれば、

“`bash
npm i -g loadshow
loadshow record https://apple.com/ ./apple.com.mp4
“`

でお試しになれます。

NPMはこちら。

VSCode Remote Developmentで、ホットリロードのできるNode.js開発環境の作り方

# はじめに
VSCode Remote Developmentで開発環境をコンテナ化しているのですが、ファイルシステムの変更通知がうまく機能しないらしく、ホットリロードができなくて困ったので、その改善方法のまとめです。

結論としては、Docker volumeを使用すればよいです。

本記事では、DockerやNode.jsがなんとなくわかる人向けに、シンプルなNode.js開発環境の作成方法をご紹介します。

# 環境
– Windows11
– Docker Desctop for Windows v4.34.1 (on WSL2)
– Visual Studio Code
– [Remote Development Extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack)

# ディレクトリ構成
ファイルの中身や作り方は後述しますが、最終的に目指すディレクトリ構成は以下のようになります。
“`:環境設定情報のディレク

「npm WARN EBADENGINE」が表示される

# 問題

コンソールから`$ npm i`を実行時、以下のワーニングが表示される

“`bash
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: ‘@eslint/config-array@0.17.1’,
npm WARN EBADENGINE required: { node: ‘^18.18.0 || ^20.9.0 || >=21.1.0’ },
npm WARN EBADENGINE current: { node: ‘v18.16.0’, npm: ‘9.5.1’ }
npm WARN EBADENGINE }
# 以下同様のワーニングが多数
“`

# 原因

Node.jsのバージョンが違うことが原因でした。

“`bash
npm WARN EBADENGINE Unsupported engine {
# インポート対象のパッケージ
npm WARN EBADENGINE package: ‘@eslint/config-array@0.17.1’,

React & Typescript & Node.js(express) & mysql でのツイッター疑似アプリを作成してみた(2)

# Node.js(express) , mysql の設定

今回は前回から続いて環境構築です。

今回tsを使うので型のインポートとモジュールシステムはrequireではなく、推奨の**import**を使います。

ではmysqlの設定からです。今までmysqlを使ったことはなかったので、最初はmysqlの導入になります。

“`bash
mysql -u root -p
“`
rootユーザーとして入ります。

mysqlサーバーのdb一覧は
“`sql
show databases;
“`
で見ることができます。

dbの作成は
“`sql
CREATE DATABASE todo-app;
“`
ここでのtodo-appは例です。上記の**show**を使えば、適切に作れているのかを確認できます。

テーブルの作成は
“`
CREATE TABLE テーブル名 (
カラム名1 データ型 [NOT NULL | NULL],
カラム名2 データ型 [NOT NULL | NULL],
カラム名3 データ型 [NOT NULL | NULL

React & Typescript & Node.js(express) & mysql でのツイッター疑似アプリを作成してみた(1)

# React , tsの導入

フロントのReacctではcreate react appを使用して,環境構築をします

create react app の作成

今回はnode.jsの環境がある前提です。

“`
npx create-react-app {自身のプロジェクト名} –template typescript
“`
今回tsも使いたいので、–template typescriptを使用します

バックエンドに移動して、

“`bash
npm init -y
npm install express cors mysql2 ts-node
npm install typescript @types/express @types/cors @types/node nodemon
“`

それぞれ
1. express: Webサーバーフレームワーク。
2. cors: フロントエンドとの通信を許可するためのミドルウェア。
3. mysql2: MySQLデータベースとの接続に使用。
4. typescript: TypeScriptを使用。
5. ts-n

【hono】Hello, worldした。

はじめまして。新卒1年目エンジニアのいちたです。

初投稿はhonoで「hello, world」を表示するところをまとめてみたいと思います。
ほぼ、公式ドキュメントでできる内容にはなってしまいますが、ご容赦ください。

# hono:fire:とは
honoは、JavaScriptのWebフレームワークです。**めっちゃ軽量で高速**に動くそうです。実際、Nuxtに比べて、プロジェクト作成や起動が高速でした。すごい…
（Webフレームワーク自体の開発にも興味が…）

さまざまなJavaScript Runtimeに対応しているのもすごい…

# 実際に動かす
「さまざまなJavaScript Runtimeに対応している」とは言いましたが、今回はNode.jsを使います。また、パッケージマネージャは”pnpm”です。
## プロジェクト作成
以下のpnpmコマンドでプロジェクトを作成します。
“`sh
pnpm create hono@latest
“`

こちらを実行するとアプリケーション名、JavaScript Runtimeを選択できます。
選択後、すぐに作成

JavaScriptを記号だけに(関数名やキーワードも)変換するプログラム

[JavaScript で Hello,world! に挑戦 (ただし記号だけを使って)](https://blog.mudatobunka.org/entry/2024/09/02/140311)という記事をみて、記号だけ(アルファベットを使わない)でプログラムができることを知りました

例えば、こんな`hello world!`プログラムが
“`javascript
alert(‘Hello,world!’)
“`
こんな形に変換します
“`javascript
_= ({}+[])[-~-~-~-~-~[]]+({}+[])[-~[]]+([][”]+[])[-~[]]+(![]+[])[-~-~-~[]]+(!![]+[])[+[]]+(!![]+[])[-~[]]+([][”]+[])[+[]]+({}+[])[-~-~-~-~-~[]]+(!![]+[])[+[]]+({}+[])[-~[]]+(!![]+[])[-~[]];__= (!![]+[])[-~[]]+({}+[])[-~-~-~-~[]]+(!![]+[])[+[]]+([][”]+[])[+[]

Prismaのテーブル作成

## はじめに
普段バックエンドの言語はRuby(Rails)を使用しているのですが、そちらを使わずにテーブルを作成する方法ってあるのか？
わたし、気になります！

選ばれたのはPrismaでした。

## Prismaとは？
### 特徴
[直感的なデータ モデル、自動移行、型安全性、自動補完を備えた Node.jsおよびTypeScript ORM です。](https://www.prisma.io/docs/orm)

### ORMとは?
オブジェクト関係マッピング(Object-Relational Mapping)の略で、データベースとオブジェクト指向プログラミング言語を結びつけるための技術です。
ORMを使用すると、SQLを直接記述せずにプログラミング言語でデータベースを操作するコードを記述することができます。

#### ORMを使用しない場合（生のSQLを書く）
以下はRailsでORM（[ActiveRecord](https://railsguides.jp/active_record_basics.html)）を使用しない場合です。

（例）25歳以上のユーザ

AlmaLinuxにWiki.js2.5.303をインストール

# 0.はじめに
リッチなUIのwikiツールとしてよさげなwebシステムにwiki.jsというものがあります。↓これが公式ドキュメントなのですが、これがそもそもwiki.jsで動作しているようで、つまりこんな感じのwikiが作れるようになります。

https://docs.requarks.io/

自分のナレッジツールとして今までいくつかを試して評価してきたのですが、今回wiki.jsを使ってみたかったのでAlmaLinux9.xにWiki.js 2.5.303をインストールし、まとめました。

構築にあたって参考にしたのはこちら↓です。

https://docs.requarks.io/install/linux

今の流行りっぽくdockerで構築する手順もあるので、手早くコンテナで済ませたい人や、マイクロサービス的に稼働させたい人にもおすすめかと思います。

各種ソフトとバージョンは次の通りです。
|Software|Version|
|-|-|
|OS|AlmaLinux9.4 (Seafoam Ocelot)|
|Wiji.js|2.5.303|
|nodejs|v2

AlmaLinuxにNode.js22をインストール

# 1. はじめに
node.jsをインストールする場合はざっくり2通りあるようです。

1. NodeSourceリポジトリを使用
– システム全体でNode.jsを利用する際に適している。バージョンの切り替えを頻繁に行わない環境（特に本番環境）での使用が推奨される。NodeSourceという団体が用意した手順。

https://github.com/nodesource/distributions?tab=readme-ov-file#enterprise-linux-based-distributions

2. nvm（Node Version Manager）を利用
– ユーザーレベルでのインストールが可能で、バージョン変更がしやすい。主に開発環境向けだが、本番環境でも利用可能。node.js公式の手順はこっち。

https://nodejs.org/en/download/package-manager

# 2.インストール手順
#### 1. NodeSourceリポジトリを使用してインストール

**手順:**
“`bash
# curlがない場合は事前にcur

WebSocketを使ったチャットアプリを作って、Renderにデプロイする

## デプロイしたもの
https://ws-example-client.onrender.com/

牧歌的、低機能な匿名チャット。


## コード
基本的にはAIに書いてもらう。

Server（Node）

“`js
const WebSocket = require(‘ws’);
const { Buffer } = require(‘buffer’);

// WebSocketサーバーをポート8080で作成
const wss = new WebSocket.Server({ port: 8080 });

// メッセージ履歴を保存する配列（最大10件）
const messageHistory = [];

const MAX_HISTORY = 1000;

wss.

Railsでwebpack-dev-serverが起動できないエラー

## はじめに
デイトラWeb開発コースを進めている中でwebpack-dev-serverが実行できず、めちゃくちゃ解決に時間をかけてしまったため、原因と解決策を残しておきます。
時間はたくさん使ってしまいましたが、一方で理解が深まった面もあるので、その点も最後にアウトプットします。

## 問題
Railsのプロジェクトで`bin/webpack-dev-server`を実行すると、`Command “webpack-dev-server” not found.`のエラーが出る

## 原因
node.js,rails/webpacker,webpack,webpack-dev-server,webpack-sliの互換性がない

## 解決策
package.jsonに以下を記載
“`
“engines”: {
“node”: “14.16”
},
“devDependencies”: {
“webpack”: “4.x.x”,
“webpack-cli”: “3.x.x”,
“webpack-dev-middleware”: “3

Vercelでフルスタックアプリをデプロイする方法（ReactJS | Vite | NodeJS | TypeScript | Neon | PostgreSQL）

この記事では、Vercelを使ってフルスタックアプリケーションをデプロイする方法をステップバイステップで紹介します。

具体例として、実際にデプロイしたプロジェクトを本記事下部の[ （参考）](#参考実際にデプロイしたプロジェクト)から確認できます。

## 前提条件

デプロイを始める前に、以下の条件を満たしていることを確認してください。

– GitHub上にリポジトリがあり、`frontend`フォルダーと`backend`フォルダーに分けられていること
– GitHubとVercelの連携ができていること
– フロントエンド・バックエンド・DB間の接続がテスト環境上で確認できていること

## バックエンドをVercelにデプロイする
まずはじめに、バックエンド側をデプロイします。

### Step1. Vercelにログイン
まず、Vercelに[ログイン](https://vercel.com/login)、またはアカウント未登録の場合は[サインアップ](https://vercel.com/signup)してください。

### Step2. 新しいプロジェクトの追加

onMounted直後に処理を呼び出す方法

# まとめ
setTimeoutで処理をタイマー設定しておき、onMounted内での処理は全て終わったように見せることで対応した。
“`typescript
onMounted(() => {
setTimeout(() => {
isOpen.value = true; // ここにmounted直後に呼び出す処理を記述
}, 0);
});
“`

### 追記：コメントでアドバイスいただきました

#### 1. queueMicrotask
> マイクロタスク (microtask) とは、現在のタスクが完了し実行コンテキストの制御がブラウザーのイベントループへ戻る前、他に保留中のコードがなくなった時点で走る短い関数です。

現在のイベントループ内でのタスク完了後に自動で処理を走らせてくれる。
setTimeoutよりも軽量。

“`typescript
onMounted(() => {
queueMicroTask(() => {
isOpen.value = true; // ここにmounted直後に呼び出

古いバージョンのNodeやRubyで作ったアプリをherokuでデプロイする際の設定

## この記事の内容
### 起きたこと
herokuを使って講座で作成したWebアプリをデプロイしようしたところ、なにやらたくさんエラーが起こりました。
おきたエラーの詳細はエラー詳細に記載しています。

### 前提（バージョンなど）
– Ruby：2.7.7
– Rails：6.0.6.1
– Node.js：14.15.0
– Windows11でUbuntu(WSL2)を導入

### 原因
– Rubyのバージョンがherokuの最新バージョンに対応していなかった
– Nodeのバージョンがherokuが標準で使用するバージョンと異なっていた
– buildpackを導入していなかった

## エラー詳細1
### エラーメッセージ
“`
!
! The Ruby version you are trying to install does not exist on this stack.
!
! You are trying to install ruby-2.7.7 on heroku-22.
!
! Ruby ruby-

【VSCode】npmのpackage.jsonに勝手にdependenciesが追加される

　アホほど時間を溶かしたので備忘録を。
　自分の場合、springbootで構築したプロジェクトのカレントフォルダで`npm init`した後にこれが起こった。

## 自動的にdependenciesがもりっと追加される
　なぜか`npm init`した後、自動生成される`package.json`にinitしたプロジェクト全体が依存関係として追加される。
“`json:package.json
{
“name”: “my_project”,
“version”: “1.0.0”,
“description”: “例”,
“main”: “index.js”,
“scripts”: {
“sass”: “sass –watch styles.scss styles.css”
},
“keywords”: [],
“author”: “”,
“license”: “ISC”,
“dependencies”: {
“my_project”: “file:”
},
“devDependencies”: {
“sas

Voltaを使ってNode.jsやnpmのバージョンをpackage.jsonに記載する方法

## 概要

Node.jsのバージョン管理ツールであるVoltaを使ってNode.jsやnpmのバージョンをpackage.jsonに記載する方法を簡単にまとめる。

## 方法

### Node.jsのバージョンを記載

下記コマンドを実行

“`terminal
volta pin node
“`

### npmのバージョンを記載

下記コマンドを実行

“`terminal
volta pin npm
“`

## メモ

ちなみに、Voltaが入っており、package.jsonにNode.jsやnpmのバージョン情報が記載されていた場合、そのディレクトリに移動したときにVoltaがよしなにバージョンを変更してくれるらしい。