Node.js関連のことを調べてみた │ f@ctor

1. Web Application開発者向けロードマップ
2. サーバーをまたいでPHPからnode.jsを動かすサンプルコード
3. 【Node.js】カスタムエラークラスを書く
4. axious エラーハンドリングについて考える
5. VSCode の dev-container を使って、React + TypeScript の開発環境を構築する方法
6. ChatGPTのプロンプト投稿アプリを作ってみた【React,Express.js,Node.js,MongoDB,Vercel,GitHub】
7. MERNスタックアプリをVercelにデプロイしてみた
8. ngrokのインストールと使い方
9. Node.js 14.17 開発環境を 2 分でデプロイ
10. axiosの使い方の初歩的なミス
11. WSL上のnpmコマンドがある日突然見つからなくなった件
12. Git何もわからん。ReactのフォルダをPushさせてくれ。
13. [Next.js]App Routerにおける動的ルーティング
14. corepackを使っていた人こそpnpmをおすすめしたい！
15. 古いCDKプロジェクトのバージョンアップデートを実施した話
16. Workload Identity (AWS連携) で gcloud auth からコマンド実行までの流れをスクリプト化した話
17. 【Mongoose】つながらないMongoDB Node.js Driver の代わりに使ってみた
18. 【Mongoose / TypeScript】JSからTSへの移行苦戦録もとい参考サイト集
19. ECMAScriptとCommonJS 文法
20. TypeError: Keyv is not a constructorの対処法

Web Application開発者向けロードマップ

# 開発者ロードマップ

以下をベースにウェブアプリケーション開発者として
プロダクトリリースに必要な習得しておきたい知識や技術

– [GitHub](https://github.co.jp/)
– [TypeScript](https://www.typescriptlang.org/)
– [React](https://legacy.reactjs.org/)
– [Node.js](https://nodejs.jp/)
– [AWS](https://aws.amazon.com/jp/)

言語をTypeScript統一することでFE、BE、DB間での型を一貫できる構成となり、
継続的に安定したWebシステム開発ができるのと枯れた技術になりつつある（情報が豊富）なため、
不変な概念も多く、早々にパラダイムシフトが起きないと考えているため。

## プロダクトリリース棲み分け

プロトタイプ、MVP、プラットフォームの順

– FEだけ無料Github Pages：[React](https://legacy.reactjs.org/)
– API有り無料Heroku：[

元記事を表示

サーバーをまたいでPHPからnode.jsを動かすサンプルコード

## 備忘録メモとして
レンタルサーバーに設置したフロントエンドから、別サーバー（VSP）に置いてあるNode.jsを動かしてデータを返すサンプルコード

テスト環境：XAMPP

### ファイル構成
“`
サーバー1（レンタルサーバー）
C:\xampp\htdocs\test1
call_run_node.php
index.php

サーバー2（VPSサーバー）
C:\xampp\htdocs\test2
run_node.php
script.js
“`
サンプルでは特に外部モジュールを使用していませんが、必要なモジュールがあればサーバー２側にインストールします。

## サーバー１
index.php：フロントエンド表示部分と実行ボタン
“`php

サーバー2のNod</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>PHP</div> <div class='tag-cloud-link'>Node.js</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/Kasiri-git/items/27f7a58682782a8466cf'>元記事を表示</a></div> <h3 id="outline__3"><a href='https://qiita.com/oizumi-yuta/items/d81725bffbff9582259c'>【Node.js】カスタムエラークラスを書く</a></h3> <blockquote><p>エラークラスを独自に実装したい場合, 次のように記載する.</p> <p>“`js<br /> class NotFoundError extends Error {<br /> constructor(message) {<br /> super(message);<br /> this.name = ‘NotFoundError’;<br /> this.status = 404;<br /> }<br /> }<br /> “`</p> <p>これをテストしてみよう. 上記コードで test.js というファイルを作成し, 最後に以下を記述する.</p> <p>“`js<br /> // ここに上記エラークラスを記載</p> <p>throw new NotFoundError(‘カスタムエラークラスが呼び出されました’);<br /> “`</p> <p>実行する.</p> <p>“`bash<br /> $ node test.js<br /> /home/oizumi/next-blog-app-backend/test.js:9<br /> throw new NotFoundError(‘カスタムエラークラスが呼び出されました’);<br /> ^</p> <p>NotFoundError: カスタムエラークラスが呼び出されました<br /> …スタックトレースは省略… </p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>Node.js</div> <div class='tag-cloud-link'>errorhandling</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/oizumi-yuta/items/d81725bffbff9582259c'>元記事を表示</a></div> <h3 id="outline__4"><a href='https://qiita.com/ryusukeyasiro/items/8880b71ada77e8a754ab'>axious エラーハンドリングについて考える</a></h3> <blockquote><p> 今回対象となるコード<br /> “`typescript<br /> const handleSubmit = async(event : React.FormEvent<HTMLFormElement>) => {<br /> event.preventDefault();<br /> setFieldErrors({});<br /> try {<br /> const response = await axios.post(‘http://localhost:4000/signUp’, formData);<br /> console.log(“this is response of form” , response);<br /> console.log(“response is received”);<br /> setFormData({<br /> username : “”,<br /> password : “”,<br /> retypePassword : “”<br /> });<br /> } catch (error) {<br /> //ここのエラーハンドリングについて考える。<br /> //またフ</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>Node.js</div> <div class='tag-cloud-link'>TypeScript</div> <div class='tag-cloud-link'>axios</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/ryusukeyasiro/items/8880b71ada77e8a754ab'>元記事を表示</a></div> <h3 id="outline__5"><a href='https://qiita.com/T-Kobam/items/a832d34833e227761831'>VSCode の dev-container を使って、React + TypeScript の開発環境を構築する方法</a></h3> <blockquote><p>## はじめに</p> <p>一緒に働いている方から「VSCode の dev-container を使えば、ローカル環境を汚さずに特定の開発環境だけ作れるよ」と聞いたので、実際に環境構築を行なった手順をまとめました。</p> <p>今回は、Node.js をベースに React + TypeScript の開発環境を構築しました。</p> <p>## 事前準備</p> <p>dev-container は docker 用いて使用する必要があるため、docker のインストールを行なっておいてください。(今回は割愛します。)</p> <p>—</p> <p>## 手順 1: プロジェクトの作成</p> <p>まず、Vite を使って新しい React プロジェクトを作成します。</p> <p>1. **Vite のプロジェクト作成**</p> <p> “`bash<br /> npm create vite@latest my-react-app — –template react<br /> “`</p> <p> – `my-react-app` はプロジェクト名です。</p> <p>※ **TypeScript を使いたい場合**</p> <p>TypeScript を使用する場合は、テンプレートを `react</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>Node.js</div> <div class='tag-cloud-link'>環境構築</div> <div class='tag-cloud-link'>TypeScript</div> <div class='tag-cloud-link'>React</div> <div class='tag-cloud-link'>VSCode</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/T-Kobam/items/a832d34833e227761831'>元記事を表示</a></div> <h3 id="outline__6"><a href='https://qiita.com/sghr2020/items/120d22435397215851cd'>ChatGPTのプロンプト投稿アプリを作ってみた【React,Express.js,Node.js,MongoDB,Vercel,GitHub】</a></h3> <blockquote><p>未経験転職ということもあり、ポートフォリオを作成して転職活動に挑もうとしています。</p> <p>## このアプリを作ろうと思った理由<br /> ChatGPTのプロンプト投稿サイトを見ていたが、UIが私の好みに合わなかったため作ってみようと思いました。</p> <p>## MERNスタックにした理由<br /> 前職JAVA等の営業をしていたため、モダンなプログラム言語を使いたく、MERNスタックにしました。<br /> 今後、どんどん普及していくと考えているため。</p> <p>## 制作物</p> <p>Githubはこちら<br /> https://github.com/yusukesugahara/menlo</p> <p>サイトはこちら<br /> https://menlo.vercel.app/<br /> ※自由に書き込みや登録いただいて大丈夫です。<br /> ※ポートフォリオの役割があるため、場合によっては投稿を削除する可能性がございます。予めご了承ください。</p> <p>構成図<br /> ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/426016/f56585ae-9b08-b403-e0e8-c42cd725de2f.</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>Node.js</div> <div class='tag-cloud-link'>ポートフォリオ</div> <div class='tag-cloud-link'>React</div> <div class='tag-cloud-link'>Mern</div> <div class='tag-cloud-link'>ChatGPT</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/sghr2020/items/120d22435397215851cd'>元記事を表示</a></div> <h3 id="outline__7"><a href='https://qiita.com/sghr2020/items/22f5386e322b15473031'>MERNスタックアプリをVercelにデプロイしてみた</a></h3> <blockquote><p>こんにちは<br /> エンジニア転職のために、MERNスタックアプリを作りデプロイしました。<br /> いろいろ考えた結果Vercelにデプロイしました。失敗したことも含めて皆様に共有させえていただきます。<br /> 今ポートフォリオを作って、無料でデプロイしようと考えていらっしゃる方には特に参考になるかと思います。</p> <p>## Vercelにデプロイしようと思った理由<br /> 結論、無料だったからです。<br /> 昔は、AWSのFC2やHerokuという選択があり、それらにデプロイをしていました。<br /> しかし、AWSの無料枠は使い切っているようで、、、さらにいつのまにかHerokuは有料化になってしまい、、、、</p> <p>Next.jsをお使いの方はよくご存じのVercelにデプロイしようということになりました。<br /> ※Vercelの前にRailwayというサービスも使いましたがデプロイがうまく行かず、、、Vercelにしました。</p> <p>Vercelは↓こちら</p> <p>https://vercel.com/</p> <p>## Vercelへのデプロイのやり方</p> <p>MERNスタックのブルスタックアプリのフォルダ構成は下記です。<br /> 　frontend<br /> 　　└フロントエンドのフ</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>Node.js</div> <div class='tag-cloud-link'>Express</div> <div class='tag-cloud-link'>デプロイ</div> <div class='tag-cloud-link'>Mern</div> <div class='tag-cloud-link'>Vercel</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/sghr2020/items/22f5386e322b15473031'>元記事を表示</a></div> <h3 id="outline__8"><a href='https://qiita.com/Wadachan69/items/590b5b9c1c916b59a54c'> ngrokのインストールと使い方</a></h3> <blockquote><p> # ngrokのインストールと使い方</p> <p>ngrokは、ローカルで動作しているWebサーバーをインターネットに簡単に公開するためのツールです。これを使うと、例えば開発中のAPIを他の開発者やテスターにすぐにシェアすることができます。今回は、ngrokのインストールから、ローカルサーバーを公開し、最後にngrokを切断するまでを詳しく説明します。</p> <p>## 1. ngrokとは？</p> <p>**ngrok**は、ローカルで動いているアプリケーションやサーバーを外部のネットワーク（インターネット）上に一時的に公開できるツールです。開発中のAPIやWebアプリケーションを外部からテストしたり、クライアントに見せたりする際にとても役立ちます。セキュリティも担保され、アクセスのログを簡単に確認することもできます。</p> <p>—</p> <p>## 2. インストール手順</p> <p>### Windowsの場合</p> <p>1. **ngrok公式サイト**([ngrok.com](https://ngrok.com)) にアクセスし、Windows用のバイナリをダウンロードします。<br /> 2. ダウンロードしたZIPファイルを解凍し、`ngro</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>Node.js</div> <div class='tag-cloud-link'>localhost</div> <div class='tag-cloud-link'>ngrok</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/Wadachan69/items/590b5b9c1c916b59a54c'>元記事を表示</a></div> <h3 id="outline__9"><a href='https://qiita.com/corrosive4354/items/2744a003db3950b39652'>Node.js 14.17 開発環境を 2 分でデプロイ</a></h3> <blockquote><p>[ServBay](www.servbay.com) は、複数の開発言語とデータベースをサポートする強力な開発環境管理ツールです。 ServBay を使用して [Node.js 14.17](www.servbay.com) をインストールおよびデプロイする詳細な手順は次のとおりです。</p> <p>## 前提条件<br /> ServBay のインストール: システムに ServBay がインストールされていることを確認してください。 ServBay の公式 Web サイトからダウンロードしてインストールできます。<br /> ネットワーク接続: 必要なコンポーネントをダウンロードするために、デバイスがインターネットに接続できることを確認してください。<br /> ### ステップ 1: 管理インターフェイスをダウンロードする<br /> ServBay を初めて使用する場合は、次の図に示すように、ダウンロードプロセス中に、インストールする Node.js 14.x バージョンを直接選択できます。</p> <p>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>Node.js</div> <div class='tag-cloud-link'>xampp</div> <div class='tag-cloud-link'>Web</div> <div class='tag-cloud-link'>Docker</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/corrosive4354/items/2744a003db3950b39652'>元記事を表示</a></div> <h3 id="outline__10"><a href='https://qiita.com/ngq299/items/fb34d5b8e01bfa525f02'>axiosの使い方の初歩的なミス</a></h3> <blockquote><p>こんにちは。</p> <p>`Node.js`を学習している際に、フロント側からバックエンド側に通信しようとした際につまずきました。<br /> もう少し詳しく書くと、フロント側で`axios`を使ってバックエンド側APIにアクセスし、APIの中で`res.redirect()`によって画面遷移するのに失敗しました。</p> <p>ファイル構成は下記のようになっています。<br /> ![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3532036/d4b3a64a-8ae5-4901-4483-9b790d8bf25d.png)</p> <p>それぞれのファイルの中身は下記のようになっています。</p> <p>“`javascript:index.js<br /> const express = require(‘express’)<br /> const path = require(‘path’)</p> <p>const app = express()</p> <p>app.set(‘views’, path.join(__dirname, ‘views’))<br /> app.set(‘view engin</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>Node.js</div> <div class='tag-cloud-link'>Express</div> <div class='tag-cloud-link'>axios</div> <div class='tag-cloud-link'>ページ遷移</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/ngq299/items/fb34d5b8e01bfa525f02'>元記事を表示</a></div> <h3 id="outline__11"><a href='https://qiita.com/kotaro-miura/items/4aecf20f80391c4a2dae'>WSL上のnpmコマンドがある日突然見つからなくなった件</a></h3> <blockquote><p>WSL上のUbuntu24.04LTSにNode.jsをインストールして使っていたnpmコマンドが、ある日突然実行できなくなりました。</p> <p>fnmを使ってインストールしたものなのですが、シェル起動時のランコマンドにパスを追加する処理があり、その中でエラーが起きていました。</p> <p>“`sh:.bashrc<br /> # fnm<br /> FNM_PATH=”/home/kr/.local/share/fnm”<br /> if [ -d “$FNM_PATH” ]; then<br /> export PATH=”$FNM_PATH:$PATH”<br /> eval “`fnm env`”<br /> fi<br /> “`<br /> “`<br /> 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)<br /> “`</p> <p>上記のエラーが原因で</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>Bash</div> <div class='tag-cloud-link'>Windows</div> <div class='tag-cloud-link'>Node.js</div> <div class='tag-cloud-link'>npm</div> <div class='tag-cloud-link'>WSL</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/kotaro-miura/items/4aecf20f80391c4a2dae'>元記事を表示</a></div> <h3 id="outline__12"><a href='https://qiita.com/Silver-Duck/items/879eca2673d17af3fcb8'>Git何もわからん。ReactのフォルダをPushさせてくれ。</a></h3> <blockquote><p>## GithubにローカルフォルダをPushをしたい<br /> GithubにPushすれば、何かいいことがあるらしい。<br /> 今回はローカルで作成していたReactアプリのフォルダをPushした。</p> <p>## 手順<br /> ブランチを移動・なければ作成する。<br /> “`<br /> git checkout ブランチ名 </p> <p>#ブランチの作成されてない場合は以下。<br /> git checkout -b ブランチ名<br /> “`</p> <p>ローカルフォルダの準備<br /> すでに作成したReactプロジェクトのフォルダに移動します。<br /> “`<br /> cd フォルダ名<br /> “`<br /> Gitリポジトリを初期化します。<br /> “`<br /> git init<br /> “`<br /> GitHubで作成したリポジトリをローカルリポジトリに紐づけます。<br /> “`<br /> git remote add origin https://github.com/あなたのユーザー名/リポジトリ名.git<br /> “`<br /> ReactプロジェクトをGitHubにpushする<br /> すべてのファイルをステージングエリアに追加します。<br /> “`<br /> git add .<br /> “`<br /> ファイルをコミット（保存）します。<br /> “`<br /> git commit -m “初め</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>Git</div> <div class='tag-cloud-link'>Node.js</div> <div class='tag-cloud-link'>React</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/Silver-Duck/items/879eca2673d17af3fcb8'>元記事を表示</a></div> <h3 id="outline__13"><a href='https://qiita.com/ouma001/items/d6a31a7fddda6e7d6bfd'>[Next.js]App Routerにおける動的ルーティング</a></h3> <blockquote><p># App Routerでの動的ルーティング方法<br /> 以下の構成で`/test/[id]`の形式で動的ルーティングが可能<br /> ## ディレクトリ構造<br /> “`<br /> ルートディレクトリ<br /> └apps<br /> └test<br /> └[id]<br /> ├page.tsx<br /> └layout.tsx<br /> “`<br /> ## page.tsx<br /> “`<br /> export default function Home() {<br /> return (</p> <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]"> <main><br /> 動的ルーティング可能<br /> </main> </div> <p> );<br /> }</p> <p>“`<br /> ## layout.tsx<br /> “`<br /> import type { Metadata } from “next”;</p> </blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>Node.js</div> <div class='tag-cloud-link'>Next.js</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/ouma001/items/d6a31a7fddda6e7d6bfd'>元記事を表示</a></div> <h3 id="outline__14"><a href='https://qiita.com/oekazuma/items/c972b1e071047f30d1ec'>corepackを使っていた人こそpnpmをおすすめしたい！</a></h3> <blockquote><p># corepackを使っていた人こそpnpmをおすすめしたい！</p> <p>https://qiita.com/oekazuma/items/1e2ee304877efa48c122</p> <p>以前、上記の記事で書いたように僕はNode.jsに標準搭載されているcorepackを使ってpnpmのバージョン管理をしていました。</p> <p>しかし、先日 corepackをNode.jsから削除し、標準搭載じゃなくなる方針であることが決定されました。<br /> (反対意見も多いみたいなのでもしかしたら変更されるかもしれない)</p> <p>https://socket.dev/blog/node-js-takes-steps-towards-removing-corepack</p> <p>そんな中、先月、pnpmがv9.7でcorepackを使わなくても、`package.json`のpackageManagerのフィールドを見て、pnpmのバージョンを切り替えられる機能をリリースしました！</p> <blockquote class="twitter-tweet"> <p lang="en" dir="ltr">pnpm v9.7 is out!<br</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>Node.js</div> <div class='tag-cloud-link'>npm</div> <div class='tag-cloud-link'>pnpm</div> <div class='tag-cloud-link'>corepack</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/oekazuma/items/c972b1e071047f30d1ec'>元記事を表示</a></div> <h3 id="outline__15"><a href='https://qiita.com/atw0_0w/items/a5849609acd1b84decd8'>古いCDKプロジェクトのバージョンアップデートを実施した話</a></h3> <blockquote><p>## はじめに<br /> 普段はインフラエンジニアとして仕事を実施しているのですが、<br /> CDKをバージョンアップするにあたって色々と手間取ってしまったため、忘れないための備忘録になります。</p> <p>また、NodeJSのプロジェクトを長期管理したこともなかったので、プロジェクト管理についてもあまりよくわかってなかったところのため、これを機に備忘録として残します。</p> <p>## エラー内容<br /> 結論からいうと、CDK コマンドを実行した際古いプロジェクトだった故もあり、AMAZON_LINUX_2023がサポートされていない旨が出力されました。<br /> (CDK始めたてであり、AmazonLinux2023も出たばっかりに作ったプロジェクトだった)</p> <p>“`<br /> $ cdk synth<br /> /path/to/sample_project/node_modules/ts-node/src/index.ts:859<br /> return new TSError(diagnosticText, diagnosticCodes, diagnostics);<br /> ^<br /> TSError: ⨯ Unable to compile</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>Node.js</div> <div class='tag-cloud-link'>AWS</div> <div class='tag-cloud-link'>CDK</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/atw0_0w/items/a5849609acd1b84decd8'>元記事を表示</a></div> <h3 id="outline__16"><a href='https://qiita.com/atw0_0w/items/303fccad415bf2194176'>Workload Identity (AWS連携) で gcloud auth からコマンド実行までの流れをスクリプト化した話</a></h3> <blockquote><p> ## これは何?<br /> gcloud authなどの認証から実行までの流れをスクリプトで実現するにはどのように実施するのかについて、特にgoogle-auth-libraryのAwsClientの使い方であまり参考となる資料が無かったため、自分なりに調べてスクリプト化までをした話になります。</p> <p>## 環境構築<br /> 下準備として、AWS -> GCP リソースへのアクセスを許可する環境を構築します。<br /> 構築には、G-genさんのサイトで掲載されているサイトを参考に、環境を構築しました。<br /> <iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" title="キーを使用せずに AWS から Google Cloud にアクセスする方法 - G-gen Tech Blog" src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fblog.g-gen.co.jp%2Fentry%2Fusing-workload-identity-federation-with-aws#?secret=Dz96TGDdYB" data-secret="Dz96TGDdYB" scrolling="no" frameborder="0"></iframe></p> <p>上記の方法で環境を構築することで</p> <p>– Workload Identity 連携環境を使用して、Amazon EC2 から Service Accountの権限を借用(impersonate)してGCP上のリソースを操作できる<br /> – Service Accountキーを発行せずに一時認証用トークンを使用してAWS連携できる</p> <p>ようになりました。</p> <p>上記のサイトではg</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>Node.js</div> <div class='tag-cloud-link'>AWS</div> <div class='tag-cloud-link'>GoogleCloud</div> <div class='tag-cloud-link'>WorkloadIdentity</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/atw0_0w/items/303fccad415bf2194176'>元記事を表示</a></div> <h3 id="outline__17"><a href='https://qiita.com/PopCorn-Xeno/items/9cde82a331211a7866e3'>【Mongoose】つながらないMongoDB Node.js Driver の代わりに使ってみた</a></h3> <blockquote><p>## 概要<br /> なぜかMongoDB Node.js Driverを使用したNode.jsからMongoDBへの接続ができなかったので、試行錯誤の末に、よくわからないままMongooseを使ったら接続成功した話です。<br /> UbuntuもNode.jsもDBも初心者なので、間違いがあればご指摘いただけると嬉しいです。<br /> ### 状況<br /> – 接続が成功した場合はコンソールに「connected」というログを吐き、失敗した場合はエラーが出るはずだが、ログもエラーすらも表示されない<br /> – MongoDBの設定は基本デフォルトのまま、UFWはポート27017を許可<br /> – 確認のためLinuxの`nc`コマンドを使用したところ、こちらでは接続が成功したのでモジュールとの相性が悪いのではと考察<br /> ### 実行環境<br /> – MacBook Pro 12,1 – Ubuntu 22.04.4 LTS<br /> – Node.js 20.11.1, npm 10.4.0<br /> – MongoDB Node.js Driver 6.3.0<br /> – Mongoose 8.1.3</p> <p>## 問題のあるコード<br /> “`js:index.js<br /> const Mo</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>Node.js</div> <div class='tag-cloud-link'>MongoDB</div> <div class='tag-cloud-link'>mongoose</div> <div class='tag-cloud-link'>初心者</div> <div class='tag-cloud-link'>Ubuntu22.04</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/PopCorn-Xeno/items/9cde82a331211a7866e3'>元記事を表示</a></div> <h3 id="outline__18"><a href='https://qiita.com/PopCorn-Xeno/items/67ab8bf2494283b8d7dd'>【Mongoose / TypeScript】JSからTSへの移行苦戦録もとい参考サイト集</a></h3> <blockquote><p>## 状況と概要<br /> ガバガバJSで開発を続けることに違和感を感じたので、TSに乗り換えてみようと思って既存のスクリプトを修正しようとしたときにぶち当たった壁のことをお話しします。</p> <p>## 1. 実行環境の設定を変更<br /> すばらしきサイト様です。</p> <p>https://azukiazusa.dev/blog/express-typescript-mondodb/#routesindexts</p> <p>https://qiita.com/katkatprog/items/0205f55377896faace5c</p> <p>## 2. Mongoose関連<br /> JSからの移行で一番苦しいのが厳しくなった「データ型」問題ですが…。</p> <p>### スキーマちゃん、モデルちゃん問題<br /> JSでMongooseのスキーマやモデルを作るときは`{}`（オブジェクトこと連想配列）を使っておけば万事が解決してました。特に、クエリを実行したときの戻り値やコールバックにとる引数のことですね。<br /> でもTSはそんなガバガバを看過しないので、Mongoose本来のデータ構造である`Document`クラスを継承したインターフェイスを使うことで、安全に弄り</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>Node.js</div> <div class='tag-cloud-link'>mongoose</div> <div class='tag-cloud-link'>TypeScript</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/PopCorn-Xeno/items/67ab8bf2494283b8d7dd'>元記事を表示</a></div> <h3 id="outline__19"><a href='https://qiita.com/daichitt/items/572bae6911057834c1b5'>ECMAScriptとCommonJS 文法</a></h3> <blockquote><p>## </p> <p>`Node.js`には2つの異なるモジュール管理システムがあります: **CommonJS** と **ES Modules (ECMAScript Modules)**。あなたが挙げた2つのコードの違いは、このモジュールシステムに基づいています。</p> <p>### 1. CommonJS (`const express = require(‘express’)`)<br /> – **CommonJS**は、Node.jsのデフォルトのモジュール管理システムです。<br /> – `require()`を使ってモジュールをインポートします。<br /> – ファイル拡張子が`.js`の場合、Node.jsはデフォルトでCommonJSモジュールとして扱います。</p> <p>“`javascript<br /> const express = require(‘express’);<br /> “`</p> <p>– この形式は、Node.js環境で長年使われてきた標準的な書き方です。</p> <p>### 2. ES Modules (`import express from ‘express’`)<br /> – **ES Modules (ECMAScript Modules</p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>Node.js</div> <div class='tag-cloud-link'>ECMAScript</div> <div class='tag-cloud-link'>CommonJS</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/daichitt/items/572bae6911057834c1b5'>元記事を表示</a></div> <h3 id="outline__20"><a href='https://qiita.com/raidenverse/items/87ce65035d4b0f880f9a'>TypeError: Keyv is not a constructorの対処法</a></h3> <blockquote><p>今まで普通に使えてたKeyvが動かなくなったので対処法メモ<br /> “`<br /> npm remove keyv<br /> npm remove @keyv/sqlite<br /> npm i @keyv/sqlite@3.6.7<br /> npm i keyv@4.5.4<br /> “`<br /> keyv v5のゴミアプデのせいでうごかなかったっぽいゴミゴミゴミ。 </p></blockquote> </blockquote> <aside class='widget widget-post'> <div class='tag-cloud-link'>JavaScript</div> <div class='tag-cloud-link'>Node.js</div> <div class='tag-cloud-link'>keyv</div> </aside> <div><a style='width:100%;' class='btn__link' href='https://qiita.com/raidenverse/items/87ce65035d4b0f880f9a'>元記事を表示</a></div> </div> </section>  <aside> <ul class="socialList"> <li class="socialList__item"><a class="socialList__link icon-facebook" href="http://www.facebook.com/sharer.php?u=https%3A%2F%2Fmiofactor.com%2F2024%2F09%2F15%2Fpost-36768%2F&t=Node.js%E9%96%A2%E9%80%A3%E3%81%AE%E3%81%93%E3%81%A8%E3%82%92%E8%AA%BF%E3%81%B9%E3%81%A6%E3%81%BF%E3%81%9F" target="_blank" title="Facebookで共有"></a></li><li class="socialList__item"><a class="socialList__link icon-twitter" href="http://twitter.com/intent/tweet?text=Node.js%E9%96%A2%E9%80%A3%E3%81%AE%E3%81%93%E3%81%A8%E3%82%92%E8%AA%BF%E3%81%B9%E3%81%A6%E3%81%BF%E3%81%9F&https%3A%2F%2Fmiofactor.com%2F2024%2F09%2F15%2Fpost-36768%2F&url=https%3A%2F%2Fmiofactor.com%2F2024%2F09%2F15%2Fpost-36768%2F" target="_blank" title="Twitterで共有"></a></li><li class="socialList__item"><a class="socialList__link icon-line" href="http://line.naver.jp/R/msg/text/?Node.js%E9%96%A2%E9%80%A3%E3%81%AE%E3%81%93%E3%81%A8%E3%82%92%E8%AA%BF%E3%81%B9%E3%81%A6%E3%81%BF%E3%81%9F%0D%0Ahttps%3A%2F%2Fmiofactor.com%2F2024%2F09%2F15%2Fpost-36768%2F" target="_blank" title="LINEで送る"></a></li></ul> </aside>   <aside class="widgetPost widgetPost-bottom"><aside class="widget widget-post"><h2 class="heading heading-primary">タグ</h2><div class="tagcloud"><a href="https://miofactor.com/tag/%e3%81%9d%e3%81%ae%e4%bb%96/" class="tag-cloud-link tag-link-13 tag-link-position-1" style="font-size: 8pt;" aria-label="その他 (1個の項目)">その他</a></div> </aside></aside>   <aside class="related"><h2 class="heading heading-primary">関連する記事</h2><ul class="related__list"> <li class="related__item"> <a class="related__imgLink" href="https://miofactor.com/2020/09/24/post-7685/" title="JAVA関連のことを調べてみた2020年09月24日"> <img src="https://miofactor.com/wp-content/uploads/2019/10/java-150x150.jpg" alt="JAVA関連のことを調べてみた2020年09月24日" width="150" height="150" > </a> <h3 class="related__title"> <a href="https://miofactor.com/2020/09/24/post-7685/">JAVA関連のことを調べてみた2020年09月24日</a> <span class="icon-calendar">2020.09.24</span> </h3> <p class="related__contents">目次 1. Javaの配列について2. アリババのオープンソースのトラブルシューティングツール「Archas 」3. AnsibleとJenkins[…]</p> </li> <li class="related__item"> <a class="related__imgLink" href="https://miofactor.com/2021/10/07/post-13368/" title="iOS関連のことを調べてみた2021年10月07日"> <img src="https://miofactor.com/wp-content/uploads/2019/10/ios-150x150.png" alt="iOS関連のことを調べてみた2021年10月07日" width="150" height="150" > </a> <h3 class="related__title"> <a href="https://miofactor.com/2021/10/07/post-13368/">iOS関連のことを調べてみた2021年10月07日</a> <span class="icon-calendar">2021.10.07</span> </h3> <p class="related__contents">目次 1. 【Swift】HTTP通信時のコネクションの再利用2. iOS長期インターンに参加してから４ヶ月経って、学んだこと3. 【Swift5】キ[…]</p> </li> <li class="related__item"> <a class="related__imgLink" href="https://miofactor.com/2024/08/30/post-36328/" title="今さら聞けないHTML　"> <img src="https://miofactor.com/wp-content/uploads/2019/11/PAK_MT9V9A6975-150x150.jpg" alt="今さら聞けないHTML　" width="150" height="150" > </a> <h3 class="related__title"> <a href="https://miofactor.com/2024/08/30/post-36328/">今さら聞けないHTML　</a> <span class="icon-calendar">2024.08.30</span> </h3> <p class="related__contents">目次 1. 【初心者向け】モールス信号でプログラミングをしてみる2. Claude.aiのArtifactsのプレビューは一体どういう仕組なの？3. […]</p> </li> </ul></aside>      </main>   <div class="l-sidebar"> <aside class="widget"> <div class="searchBox"> <form class="searchBox__form" method="get" target="_top" action="https://miofactor.com/" > <input class="searchBox__input" type="text" maxlength="50" name="s" placeholder="記事検索"><button class="searchBox__submit icon-search" type="submit" value="search"> </button> </form> </div></aside><aside class="widget"><h2 class="heading heading-widget">Category</h2> <ul> <li class="cat-item cat-item-1"><a href="https://miofactor.com/category/other/">OTHER</a> </li> </ul> </aside><aside class="widget"><h2 class="heading heading-widget">Back number</h2> <ul> <li><a href='https://miofactor.com/2024/11/'>2024年11月</a></li> <li><a href='https://miofactor.com/2024/10/'>2024年10月</a></li> <li><a href='https://miofactor.com/2024/09/'>2024年9月</a></li> <li><a href='https://miofactor.com/2024/08/'>2024年8月</a></li> <li><a href='https://miofactor.com/2024/07/'>2024年7月</a></li> <li><a href='https://miofactor.com/2024/06/'>2024年6月</a></li> <li><a href='https://miofactor.com/2024/05/'>2024年5月</a></li> <li><a href='https://miofactor.com/2024/04/'>2024年4月</a></li> <li><a href='https://miofactor.com/2024/03/'>2024年3月</a></li> <li><a href='https://miofactor.com/2024/02/'>2024年2月</a></li> <li><a href='https://miofactor.com/2024/01/'>2024年1月</a></li> <li><a href='https://miofactor.com/2023/12/'>2023年12月</a></li> <li><a href='https://miofactor.com/2023/11/'>2023年11月</a></li> <li><a href='https://miofactor.com/2023/10/'>2023年10月</a></li> <li><a href='https://miofactor.com/2023/09/'>2023年9月</a></li> <li><a href='https://miofactor.com/2023/08/'>2023年8月</a></li> <li><a href='https://miofactor.com/2023/07/'>2023年7月</a></li> <li><a href='https://miofactor.com/2023/04/'>2023年4月</a></li> <li><a href='https://miofactor.com/2023/03/'>2023年3月</a></li> <li><a href='https://miofactor.com/2023/02/'>2023年2月</a></li> <li><a href='https://miofactor.com/2023/01/'>2023年1月</a></li> <li><a href='https://miofactor.com/2022/12/'>2022年12月</a></li> <li><a href='https://miofactor.com/2022/11/'>2022年11月</a></li> <li><a href='https://miofactor.com/2022/10/'>2022年10月</a></li> <li><a href='https://miofactor.com/2022/09/'>2022年9月</a></li> <li><a href='https://miofactor.com/2022/08/'>2022年8月</a></li> <li><a href='https://miofactor.com/2022/07/'>2022年7月</a></li> <li><a href='https://miofactor.com/2022/06/'>2022年6月</a></li> <li><a href='https://miofactor.com/2022/05/'>2022年5月</a></li> <li><a href='https://miofactor.com/2022/04/'>2022年4月</a></li> <li><a href='https://miofactor.com/2022/03/'>2022年3月</a></li> <li><a href='https://miofactor.com/2022/02/'>2022年2月</a></li> <li><a href='https://miofactor.com/2022/01/'>2022年1月</a></li> <li><a href='https://miofactor.com/2021/12/'>2021年12月</a></li> <li><a href='https://miofactor.com/2021/11/'>2021年11月</a></li> <li><a href='https://miofactor.com/2021/10/'>2021年10月</a></li> <li><a href='https://miofactor.com/2021/09/'>2021年9月</a></li> <li><a href='https://miofactor.com/2021/08/'>2021年8月</a></li> <li><a href='https://miofactor.com/2021/07/'>2021年7月</a></li> <li><a href='https://miofactor.com/2021/06/'>2021年6月</a></li> <li><a href='https://miofactor.com/2021/05/'>2021年5月</a></li> <li><a href='https://miofactor.com/2021/04/'>2021年4月</a></li> <li><a href='https://miofactor.com/2021/03/'>2021年3月</a></li> <li><a href='https://miofactor.com/2021/02/'>2021年2月</a></li> <li><a href='https://miofactor.com/2021/01/'>2021年1月</a></li> <li><a href='https://miofactor.com/2020/12/'>2020年12月</a></li> <li><a href='https://miofactor.com/2020/11/'>2020年11月</a></li> <li><a href='https://miofactor.com/2020/10/'>2020年10月</a></li> <li><a href='https://miofactor.com/2020/09/'>2020年9月</a></li> <li><a href='https://miofactor.com/2020/08/'>2020年8月</a></li> <li><a href='https://miofactor.com/2020/07/'>2020年7月</a></li> <li><a href='https://miofactor.com/2020/06/'>2020年6月</a></li> <li><a href='https://miofactor.com/2020/05/'>2020年5月</a></li> <li><a href='https://miofactor.com/2020/04/'>2020年4月</a></li> <li><a href='https://miofactor.com/2020/03/'>2020年3月</a></li> <li><a href='https://miofactor.com/2020/02/'>2020年2月</a></li> <li><a href='https://miofactor.com/2020/01/'>2020年1月</a></li> <li><a href='https://miofactor.com/2019/12/'>2019年12月</a></li> <li><a href='https://miofactor.com/2019/11/'>2019年11月</a></li> <li><a href='https://miofactor.com/2019/10/'>2019年10月</a></li> </ul> </aside> </div>  </div>  <div class="categoryBox"> <div class="container"> <h2 class="heading heading-primary"> <span class="heading__bg u-txtShdw bgc-darkgray">OTHER</span>カテゴリの最新記事 </h2> <ul class="categoryBox__list"> <li class="categoryBox__item"> <div class="eyecatch eyecatch-archive"> <a href="https://miofactor.com/2024/11/09/post-38262/"> <img src="https://miofactor.com/wp-content/uploads/2019/10/ios-554x410.png" alt="iOS関連のことを調べてみた" width="554" height="410" > </a> </div> <ul class="dateList dateList-archive"> <li class="dateList__item icon-calendar">2024.11.09</li> </ul> <h2 class="heading heading-archive "> <a class="hc-darkgray" href="https://miofactor.com/2024/11/09/post-38262/">iOS関連のことを調べてみた</a> </h2> </li> <li class="categoryBox__item"> <div class="eyecatch eyecatch-archive"> <a href="https://miofactor.com/2024/11/09/post-38258/"> <img src="https://miofactor.com/wp-content/uploads/2019/10/java.jpg" alt="JAVA関連のことを調べてみた" width="540" height="270" > </a> </div> <ul class="dateList dateList-archive"> <li class="dateList__item icon-calendar">2024.11.09</li> </ul> <h2 class="heading heading-archive "> <a class="hc-darkgray" href="https://miofactor.com/2024/11/09/post-38258/">JAVA関連のことを調べてみた</a> </h2> </li> <li class="categoryBox__item"> <div class="eyecatch eyecatch-archive"> <a href="https://miofactor.com/2024/11/09/post-38259/"> <img src="https://miofactor.com/wp-content/uploads/2019/10/js-554x410.png" alt="JavaScript関連のことを調べてみた" width="554" height="410" > </a> </div> <ul class="dateList dateList-archive"> <li class="dateList__item icon-calendar">2024.11.09</li> </ul> <h2 class="heading heading-archive "> <a class="hc-darkgray" href="https://miofactor.com/2024/11/09/post-38259/">JavaScript関連のことを調べてみた</a> </h2> </li> <li class="categoryBox__item"> <div class="eyecatch eyecatch-archive"> <a href="https://miofactor.com/2024/11/09/post-38256/"> <img src="https://miofactor.com/wp-content/uploads/2019/10/rails-725x410.png" alt="Rails関連のことを調べてみた" width="725" height="410" > </a> </div> <ul class="dateList dateList-archive"> <li class="dateList__item icon-calendar">2024.11.09</li> </ul> <h2 class="heading heading-archive "> <a class="hc-darkgray" href="https://miofactor.com/2024/11/09/post-38256/">Rails関連のことを調べてみた</a> </h2> </li> <li class="categoryBox__item"> <div class="eyecatch eyecatch-archive"> <a href="https://miofactor.com/2024/11/09/post-38253/"> <img src="https://miofactor.com/wp-content/uploads/2019/10/lambda.png" alt="Lambda関連のことを調べてみた" width="360" height="230" > </a> </div> <ul class="dateList dateList-archive"> <li class="dateList__item icon-calendar">2024.11.09</li> </ul> <h2 class="heading heading-archive "> <a class="hc-darkgray" href="https://miofactor.com/2024/11/09/post-38253/">Lambda関連のことを調べてみた</a> </h2> </li> <li class="categoryBox__item"> <div class="eyecatch eyecatch-archive"> <a href="https://miofactor.com/2024/11/09/post-38252/"> <img src="https://miofactor.com/wp-content/uploads/2019/10/python-640x410.png" alt="Python関連のことを調べてみた" width="640" height="410" > </a> </div> <ul class="dateList dateList-archive"> <li class="dateList__item icon-calendar">2024.11.09</li> </ul> <h2 class="heading heading-archive "> <a class="hc-darkgray" href="https://miofactor.com/2024/11/09/post-38252/">Python関連のことを調べてみた</a> </h2> </li> </ul> </div> </div>  <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Article ", "mainEntityOfPage":{ "@type": "WebPage", "@id": "https://miofactor.com/2024/09/15/post-36768/" }, "headline": "Node.js関連のことを調べてみた", "image": { "@type": "ImageObject", "url": "https://miofactor.com/wp-content/uploads/2019/10/python-640x410.png", "height": "410", "width": "640" }, "datePublished": "2024-09-15T16:40:58+0900", "dateModified": "2024-09-15T16:40:58+0900", "author": { "@type": "Person", "name": "editor" }, "publisher": { "@type": "Organization", "name": "f@ctor", "logo": { "@type": "ImageObject", "url": "", "width": "", "height":"" } }, "description": "目次 1. Web Application開発者向けロードマップ2. サーバーをまたいでPHPからnode.jsを動かすサンプルコード3. 【Node.js】カスタムエラークラスを書く4. axious エラーハンドリングについて考える5. VSCode の dev-container を使って、React + TypeScript の開発環境を構築する方法6. ChatGPTのプロンプト投稿アプ […]" } </script>   <footer class="l-footer"> <div class="container"> <div class="pagetop u-txtShdw"><a class="pagetop__link" href="#top">Back to Top</a></div> <div class="widgetFoot"> <div class="widgetFoot__contents"> </div> <div class="widgetFoot__contents"> <aside class="widget widget-foot"><h2 class="heading heading-footer">タグ</h2><div class="tagcloud"><a href="https://miofactor.com/tag/%e3%81%9d%e3%81%ae%e4%bb%96/" class="tag-cloud-link tag-link-13 tag-link-position-1" style="font-size: 8pt;" aria-label="その他 (1個の項目)">その他</a></div> </aside> </div> <div class="widgetFoot__contents"> </div> </div> <div class="copySns "> <div class="copySns__copy"> © Copyright 2024 <a class="copySns__copyLink" href="https://miofactor.com">f@ctor</a>. <span class="copySns__copyInfo u-none"> f@ctor by <a class="copySns__copyLink" href="http://fit-jp.com/" target="_blank">FIT-Web Create</a>. Powered by <a class="copySns__copyLink" href="https://wordpress.org/" target="_blank">WordPress</a>. </span> </div> </div> </div> </footer>  <script type="text/javascript" src="https://miofactor.com/wp-includes/js/comment-reply.min.js?ver=6.4.1" id="comment-reply-js" async="async" data-wp-strategy="async"></script> <script type="text/javascript" src="https://miofactor.com/wp-includes/js/wp-embed.min.js?ver=6.4.1" id="wp-embed-js" defer="defer" data-wp-strategy="defer"></script> <script> function toggle__search(){ extra__search.className="l-extra"; extra__menu.className="l-extraNone"; menuNavi__search.className = "menuNavi__link menuNavi__link-current icon-search "; menuNavi__menu.className = "menuNavi__link icon-menu"; } function toggle__menu(){ extra__search.className="l-extraNone"; extra__menu.className="l-extra"; menuNavi__search.className = "menuNavi__link icon-search"; menuNavi__menu.className = "menuNavi__link menuNavi__link-current icon-menu"; } </script><script>Array.prototype.forEach.call(document.getElementsByClassName("css-async"),function(e){e.rel = "stylesheet"});</script> </body> </html>