- 0.1. corepackを使っていた人こそpnpmをおすすめしたい!
- 0.2. 古いCDKプロジェクトのバージョンアップデートを実施した話
- 0.3. Workload Identity (AWS連携) で gcloud auth からコマンド実行までの流れをスクリプト化した話
- 0.4. 【Mongoose】つながらないMongoDB Node.js Driver の代わりに使ってみた
- 0.5. 【Mongoose / TypeScript】JSからTSへの移行苦戦録もとい参考サイト集
- 0.6. ECMAScriptとCommonJS 文法
- 0.7. TypeError: Keyv is not a constructorの対処法
- 0.8. Node.js 18.3 開発環境を 2 分でデプロイ – ツールのワンクリック デプロイ
- 0.9. Claude Project に github のコードをコピペアップロードするコマンド
- 0.10. TypeScript・Fastify・Prismaで簡単なAPI作成してみた
- 0.11. npxで実行できるオリジナルコマンドラインツールを簡単に作ってみた!
- 0.12. Node.jsを使ってTwitterの特定のキーワードのいいねを自動化
- 1. 作成に至った経緯
- 2. 用意するもの
- 3. プロジェクトの立ち上げ方
- 3.1. ページ読み込みプロセスの動画化ツールを公開
- 3.2. VSCode Remote Developmentで、ホットリロードのできるNode.js開発環境の作り方
- 3.3. 「npm WARN EBADENGINE」が表示される
- 3.4. React & Typescript & Node.js(express) & mysql でのツイッター疑似アプリを作成してみた(2)
- 3.5. React & Typescript & Node.js(express) & mysql でのツイッター疑似アプリを作成してみた(1)
- 3.6. 【hono】Hello, worldした。
- 3.7. JavaScriptを記号だけに(関数名やキーワードも)変換するプログラム
- 3.8. Prismaのテーブル作成
corepackを使っていた人こそpnpmをおすすめしたい!
# corepackを使っていた人こそpnpmをおすすめしたい!
https://qiita.com/oekazuma/items/1e2ee304877efa48c122
以前、上記の記事で書いたように僕はNode.jsに標準搭載されているcorepackを使ってpnpmのバージョン管理をしていました。
しかし、先日 corepackをNode.jsから削除し、標準搭載じゃなくなる方針であることが決定されました。
(反対意見も多いみたいなのでもしかしたら変更されるかもしれない)https://socket.dev/blog/node-js-takes-steps-towards-removing-corepack
そんな中、先月、pnpmがv9.7でcorepackを使わなくても、`package.json`のpackageManagerのフィールドを見て、pnpmのバージョンを切り替えられる機能をリリースしました!
pnpm v9.7 is out!
古いCDKプロジェクトのバージョンアップデートを実施した話
## はじめに
普段はインフラエンジニアとして仕事を実施しているのですが、
CDKをバージョンアップするにあたって色々と手間取ってしまったため、忘れないための備忘録になります。また、NodeJSのプロジェクトを長期管理したこともなかったので、プロジェクト管理についてもあまりよくわかってなかったところのため、これを機に備忘録として残します。
## エラー内容
結論からいうと、CDK コマンドを実行した際古いプロジェクトだった故もあり、AMAZON_LINUX_2023がサポートされていない旨が出力されました。
(CDK始めたてであり、AmazonLinux2023も出たばっかりに作ったプロジェクトだった)“`
$ cdk synth
/path/to/sample_project/node_modules/ts-node/src/index.ts:859
return new TSError(diagnosticText, diagnosticCodes, diagnostics);
^
TSError: ⨯ Unable to compile
Workload Identity (AWS連携) で gcloud auth からコマンド実行までの流れをスクリプト化した話
## これは何?
gcloud authなどの認証から実行までの流れをスクリプトで実現するにはどのように実施するのかについて、特にgoogle-auth-libraryのAwsClientの使い方であまり参考となる資料が無かったため、自分なりに調べてスクリプト化までをした話になります。## 環境構築
下準備として、AWS -> GCP リソースへのアクセスを許可する環境を構築します。
構築には、G-genさんのサイトで掲載されているサイトを参考に、環境を構築しました。
上記の方法で環境を構築することで
– Workload Identity 連携環境を使用して、Amazon EC2 から Service Accountの権限を借用(impersonate)してGCP上のリソースを操作できる
– Service Accountキーを発行せずに一時認証用トークンを使用してAWS連携できるようになりました。
上記のサイトではg
【Mongoose】つながらないMongoDB Node.js Driver の代わりに使ってみた
## 概要
なぜかMongoDB Node.js Driverを使用したNode.jsからMongoDBへの接続ができなかったので、試行錯誤の末に、よくわからないままMongooseを使ったら接続成功した話です。
UbuntuもNode.jsもDBも初心者なので、間違いがあればご指摘いただけると嬉しいです。
### 状況
– 接続が成功した場合はコンソールに「connected」というログを吐き、失敗した場合はエラーが出るはずだが、ログもエラーすらも表示されない
– MongoDBの設定は基本デフォルトのまま、UFWはポート27017を許可
– 確認のためLinuxの`nc`コマンドを使用したところ、こちらでは接続が成功したのでモジュールとの相性が悪いのではと考察
### 実行環境
– MacBook Pro 12,1 – Ubuntu 22.04.4 LTS
– Node.js 20.11.1, npm 10.4.0
– MongoDB Node.js Driver 6.3.0
– Mongoose 8.1.3## 問題のあるコード
“`js:index.js
const Mo
【Mongoose / TypeScript】JSからTSへの移行苦戦録もとい参考サイト集
## 状況と概要
ガバガバJSで開発を続けることに違和感を感じたので、TSに乗り換えてみようと思って既存のスクリプトを修正しようとしたときにぶち当たった壁のことをお話しします。## 1. 実行環境の設定を変更
すばらしきサイト様です。https://azukiazusa.dev/blog/express-typescript-mondodb/#routesindexts
https://qiita.com/katkatprog/items/0205f55377896faace5c
## 2. Mongoose関連
JSからの移行で一番苦しいのが厳しくなった「データ型」問題ですが…。### スキーマちゃん、モデルちゃん問題
JSでMongooseのスキーマやモデルを作るときは`{}`(オブジェクトこと連想配列)を使っておけば万事が解決してました。特に、クエリを実行したときの戻り値やコールバックにとる引数のことですね。
でもTSはそんなガバガバを看過しないので、Mongoose本来のデータ構造である`Document`クラスを継承したインターフェイスを使うことで、安全に弄り
ECMAScriptとCommonJS 文法
##
`Node.js`には2つの異なるモジュール管理システムがあります: **CommonJS** と **ES Modules (ECMAScript Modules)**。あなたが挙げた2つのコードの違いは、このモジュールシステムに基づいています。
### 1. CommonJS (`const express = require(‘express’)`)
– **CommonJS**は、Node.jsのデフォルトのモジュール管理システムです。
– `require()`を使ってモジュールをインポートします。
– ファイル拡張子が`.js`の場合、Node.jsはデフォルトでCommonJSモジュールとして扱います。“`javascript
const express = require(‘express’);
“`– この形式は、Node.js環境で長年使われてきた標準的な書き方です。
### 2. ES Modules (`import express from ‘express’`)
– **ES Modules (ECMAScript Modules
TypeError: Keyv is not a constructorの対処法
今まで普通に使えてたKeyvが動かなくなったので対処法メモ
“`
npm remove keyv
npm remove @keyv/sqlite
npm i @keyv/sqlite@3.6.7
npm i keyv@4.5.4
“`
keyv v5のゴミアプデのせいでうごかなかったっぽいゴミゴミゴミ。
Node.js 18.3 開発環境を 2 分でデプロイ – ツールのワンクリック デプロイ
ServBay は、複数の開発言語とデータベースをサポートする強力な開発環境管理ツールです。以下は、ServBay を使用して Node.js 18.3 をインストールして展開する方法の詳細な手順です。
## 前提条件
1. ServBay のインストール: システムに ServBay がインストールされていることを確認します。ServBay の公式 Web サイトからダウンロードしてインストールできます。2. ネットワーク接続: 必要なコンポーネントをダウンロードできるように、デバイスがインターネットに接続できることを確認します。
### 手順 1: ServBay ダウンロード管理インターフェイス
Servbay を初めてダウンロードする場合は、図に示すように、ダウンロード プロセス中にインストールする node.js 18.x バージョンを直接選択できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3879321/21a0eb34-c02d-2cc4-97d8-cfa
Claude Project に github のコードをコピペアップロードするコマンド
先日 Claude for Enterprise が発表されました。
https://www.anthropic.com/news/claude-for-enterprise
これによって Github repo を直接読み込ませることが出来そうですね。嬉しい✨
![6bd0725018a71761a3eb8a206573f09b068ae9c5-1800×1200.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60131/6b87f9ad-2e93-e0cf-f37c-6a8d3ae258c3.png)
# とは言え、まだ通常プランでは使うことが出来ないので…
最近の僕の仕事では AI を用いた開発について調査・確立しようと様々トライしています。
例えば Claude 3.5 Project を用いて次の様なイテレーション開発プロセスを試してみました。
## Custom Instruction
“`
###あなたの役割:”””
あなたは Web アプリケーション・SaaS を要
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` (ロードショー)をオープンソースとして公開しました。
![ページ読み込み動画](https://notes.ideamans.com/assets/apple.com.DwytDGWA.webp)
動画を並べて、読み込みスピードの比較もできます。
![比較動画](https://notes.ideamans.com/assets/compare.Cs2PEaUn.webp)
# 簡単な使い方
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歳以上のユーザ