- 0.1. VSCode の dev-container を使って、React + TypeScript の開発環境を構築する方法
- 0.2. ChatGPTのプロンプト投稿アプリを作ってみた【React,Express.js,Node.js,MongoDB,Vercel,GitHub】
- 0.3. MERNスタックアプリをVercelにデプロイしてみた
- 0.4. ngrokのインストールと使い方
- 0.5. Node.js 14.17 開発環境を 2 分でデプロイ
- 0.6. axiosの使い方の初歩的なミス
- 0.7. WSL上のnpmコマンドがある日突然見つからなくなった件
- 0.8. Git何もわからん。ReactのフォルダをPushさせてくれ。
- 0.9. [Next.js]App Routerにおける動的ルーティング
- 0.10. corepackを使っていた人こそpnpmをおすすめしたい!
- 0.11. 古いCDKプロジェクトのバージョンアップデートを実施した話
- 0.12. Workload Identity (AWS連携) で gcloud auth からコマンド実行までの流れをスクリプト化した話
- 0.13. 【Mongoose】つながらないMongoDB Node.js Driver の代わりに使ってみた
- 0.14. 【Mongoose / TypeScript】JSからTSへの移行苦戦録もとい参考サイト集
- 0.15. ECMAScriptとCommonJS 文法
- 0.16. TypeError: Keyv is not a constructorの対処法
- 0.17. Claude Project に github のコードをコピペアップロードするコマンド
- 0.18. TypeScript・Fastify・Prismaで簡単なAPI作成してみた
- 0.19. npxで実行できるオリジナルコマンドラインツールを簡単に作ってみた!
- 0.20. Node.jsを使ってTwitterの特定のキーワードのいいねを自動化
- 1. 作成に至った経緯
- 2. 用意するもの
- 3. プロジェクトの立ち上げ方
VSCode の dev-container を使って、React + TypeScript の開発環境を構築する方法
## はじめに
一緒に働いている方から「VSCode の dev-container を使えば、ローカル環境を汚さずに特定の開発環境だけ作れるよ」と聞いたので、実際に環境構築を行なった手順をまとめました。
今回は、Node.js をベースに React + TypeScript の開発環境を構築しました。
## 事前準備
dev-container は docker 用いて使用する必要があるため、docker のインストールを行なっておいてください。(今回は割愛します。)
—
## 手順 1: プロジェクトの作成
まず、Vite を使って新しい React プロジェクトを作成します。
1. **Vite のプロジェクト作成**
“`bash
npm create vite@latest my-react-app — –template react
“`– `my-react-app` はプロジェクト名です。
※ **TypeScript を使いたい場合**
TypeScript を使用する場合は、テンプレートを `react
ChatGPTのプロンプト投稿アプリを作ってみた【React,Express.js,Node.js,MongoDB,Vercel,GitHub】
未経験転職ということもあり、ポートフォリオを作成して転職活動に挑もうとしています。
## このアプリを作ろうと思った理由
ChatGPTのプロンプト投稿サイトを見ていたが、UIが私の好みに合わなかったため作ってみようと思いました。## MERNスタックにした理由
前職JAVA等の営業をしていたため、モダンなプログラム言語を使いたく、MERNスタックにしました。
今後、どんどん普及していくと考えているため。## 制作物
Githubはこちら
https://github.com/yusukesugahara/menloサイトはこちら
https://menlo.vercel.app/
※自由に書き込みや登録いただいて大丈夫です。
※ポートフォリオの役割があるため、場合によっては投稿を削除する可能性がございます。予めご了承ください。構成図
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/426016/f56585ae-9b08-b403-e0e8-c42cd725de2f.
MERNスタックアプリをVercelにデプロイしてみた
こんにちは
エンジニア転職のために、MERNスタックアプリを作りデプロイしました。
いろいろ考えた結果Vercelにデプロイしました。失敗したことも含めて皆様に共有させえていただきます。
今ポートフォリオを作って、無料でデプロイしようと考えていらっしゃる方には特に参考になるかと思います。## Vercelにデプロイしようと思った理由
結論、無料だったからです。
昔は、AWSのFC2やHerokuという選択があり、それらにデプロイをしていました。
しかし、AWSの無料枠は使い切っているようで、、、さらにいつのまにかHerokuは有料化になってしまい、、、、Next.jsをお使いの方はよくご存じのVercelにデプロイしようということになりました。
※Vercelの前にRailwayというサービスも使いましたがデプロイがうまく行かず、、、Vercelにしました。Vercelは↓こちら
https://vercel.com/
## Vercelへのデプロイのやり方
MERNスタックのブルスタックアプリのフォルダ構成は下記です。
frontend
└フロントエンドのフ
ngrokのインストールと使い方
# ngrokのインストールと使い方
ngrokは、ローカルで動作しているWebサーバーをインターネットに簡単に公開するためのツールです。これを使うと、例えば開発中のAPIを他の開発者やテスターにすぐにシェアすることができます。今回は、ngrokのインストールから、ローカルサーバーを公開し、最後にngrokを切断するまでを詳しく説明します。
## 1. ngrokとは?
**ngrok**は、ローカルで動いているアプリケーションやサーバーを外部のネットワーク(インターネット)上に一時的に公開できるツールです。開発中のAPIやWebアプリケーションを外部からテストしたり、クライアントに見せたりする際にとても役立ちます。セキュリティも担保され、アクセスのログを簡単に確認することもできます。
—
## 2. インストール手順
### Windowsの場合
1. **ngrok公式サイト**([ngrok.com](https://ngrok.com)) にアクセスし、Windows用のバイナリをダウンロードします。
2. ダウンロードしたZIPファイルを解凍し、`ngro
Node.js 14.17 開発環境を 2 分でデプロイ
[ServBay](www.servbay.com) は、複数の開発言語とデータベースをサポートする強力な開発環境管理ツールです。 ServBay を使用して [Node.js 14.17](www.servbay.com) をインストールおよびデプロイする詳細な手順は次のとおりです。
## 前提条件
ServBay のインストール: システムに ServBay がインストールされていることを確認してください。 ServBay の公式 Web サイトからダウンロードしてインストールできます。
ネットワーク接続: 必要なコンポーネントをダウンロードするために、デバイスがインターネットに接続できることを確認してください。
### ステップ 1: 管理インターフェイスをダウンロードする
ServBay を初めて使用する場合は、次の図に示すように、ダウンロード プロセス中に、インストールする Node.js 14.x バージョンを直接選択できます。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/
axiosの使い方の初歩的なミス
こんにちは。
`Node.js`を学習している際に、フロント側からバックエンド側に通信しようとした際につまずきました。
もう少し詳しく書くと、フロント側で`axios`を使ってバックエンド側APIにアクセスし、APIの中で`res.redirect()`によって画面遷移するのに失敗しました。ファイル構成は下記のようになっています。
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3532036/d4b3a64a-8ae5-4901-4483-9b790d8bf25d.png)それぞれのファイルの中身は下記のようになっています。
“`javascript:index.js
const express = require(‘express’)
const path = require(‘path’)const app = express()
app.set(‘views’, path.join(__dirname, ‘views’))
app.set(‘view engin
WSL上のnpmコマンドがある日突然見つからなくなった件
WSL上のUbuntu24.04LTSにNode.jsをインストールして使っていたnpmコマンドが、ある日突然実行できなくなりました。
fnmを使ってインストールしたものなのですが、シェル起動時のランコマンドにパスを追加する処理があり、その中でエラーが起きていました。
“`sh:.bashrc
# fnm
FNM_PATH=”/home/kr/.local/share/fnm”
if [ -d “$FNM_PATH” ]; then
export PATH=”$FNM_PATH:$PATH”
eval “`fnm env`”
fi
“`
“`
error: Can’t create the symlink for multishells at “/run/user/1002/fnm_multishells/11058_1726029612715”. Maybe there are some issues with permissions for the directory? Permission denied (os error 13)
“`上記のエラーが原因で
Git何もわからん。ReactのフォルダをPushさせてくれ。
## GithubにローカルフォルダをPushをしたい
GithubにPushすれば、何かいいことがあるらしい。
今回はローカルで作成していたReactアプリのフォルダをPushした。## 手順
ブランチを移動・なければ作成する。
“`
git checkout ブランチ名#ブランチの作成されてない場合は以下。
git checkout -b ブランチ名
“`ローカルフォルダの準備
すでに作成したReactプロジェクトのフォルダに移動します。
“`
cd フォルダ名
“`
Gitリポジトリを初期化します。
“`
git init
“`
GitHubで作成したリポジトリをローカルリポジトリに紐づけます。
“`
git remote add origin https://github.com/あなたのユーザー名/リポジトリ名.git
“`
ReactプロジェクトをGitHubにpushする
すべてのファイルをステージングエリアに追加します。
“`
git add .
“`
ファイルをコミット(保存)します。
“`
git commit -m “初め
[Next.js]App Routerにおける動的ルーティング
# App Routerでの動的ルーティング方法
以下の構成で`/test/[id]`の形式で動的ルーティングが可能
## ディレクトリ構造
“`
ルートディレクトリ
└apps
└test
└[id]
├page.tsx
└layout.tsx
“`
## page.tsx
“`
export default function Home() {
return (
動的ルーティング可能
);
}“`
## layout.tsx
“`
import type { Metadata } from “next”;
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のゴミアプデのせいでうごかなかったっぽいゴミゴミゴミ。
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