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

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

🔰TypeScriptの環境構築をまとめてみた

## TypeScriptでコーティングするために必要な環境構築についてまとめていきます。
※Udemyの内容を噛み砕いて私なりにまとめました。

### TypeScript(TS)とは
JavaScript(JS)のスーパーセット(上位互換)
* 型を指定することができ堅牢なコードを書ける
* 古いWebページにも対応できる
などなど、さまざまな便利な機能が搭載されています。

TSで書いたコードはJSにコンパイル(変換)され、JSで動的なWebページを実現します。

### 環境構築
1. VS-Codeで開発用フォルダを開く
1. ターミナルを開く `⌘ + J`
1. packege.jsonファイルの作成 `npm init`
1. 3実行時に設定についていくつか問われるが、全てEnterでOK
1. lite-serverをpackege.jsonに追加 `npm install dev-server lite-server`
1. packege.jsonの`scripts`オブジェクトに手動で`”start”: “lite-server”`を追加
* オブジェ

元記事を表示

Array.fromAsync()とPromise.all()の違い【JavaScript】

ようわからんかったのでメモ
# TL;DR

– Array.fromAsync()は順次実行
– Promise.all()は同時実行

“`javascript
const sleep = delay => new Promise(resolve => setTimeout(resolve, delay))

console.time()
await Array.fromAsync([200, 100, 300], sleep)
console.timeEnd()
// elapsed: 600ms

console.time()
await Promise.all([200, 100, 300].map(sleep))
console.timeEnd()
// elapsed: 300ms
“`

https://qiita.com/mellbrother/items/715ff5dce5845381eeee#comment-202a45c5d467a5dd67dc

cc @juner

## 戻り値

どちらも解決した値が入ってくる。HTTPリクエストを投げたいときに

元記事を表示

ポート3000を占領する不届き者を倒せ!WindowsユーザーのためのローカルURL奪還作戦

こんにちは、みんな。今日はローカル開発で頻繁に遭遇する問題について話すわ。特に、`http://localhost:3000/`を使おうとしたら、何者かに占領されていた時の対処法よ。

ふんっ、大切なポート3000が使えないなんて、本当に迷惑よね。でも心配しないで。この記事を読めば、あなたもその謎を解き明かせるわ。Windows PCでポート3000を占領している犯人を特定して、安全に解放するまでの手順を解説するわ。

## 1. コマンドプロンプトを開く
まずは、Windows PCでコマンドプロンプトを開くわよ。

1. Windowsキー + Rを押して「ファイル名を指定して実行」ウィンドウを開く
2. `cmd`と入力して実行

これでコマンドプロンプトが開くわ。準備はいい?次に進むわよ。

## 2. 占領者を調査する
次に、ポート3000を占領している不届き者を特定するわ。以下のコマンドを入力して:

“`bash
netstat -ano | findstr :3000
“`

これで、ポート3000を使っているプロセスのリストが表示されるはずよ。例えば:

元記事を表示

CLIのプログレスバーを作ってみた

## はじめに

皆さん、こんにちは。株式会社BTMの風間と申します。

今回はCLIで動くプログレスバーを作成してみました。
実際に作ったのはこちら。

![progressbar_animation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3826118/6caf04ef-c5b2-864b-2d4f-bad5ed6f6801.gif)

コンソール(ターミナル)で、yum、apt、brewなどを利用したパッケージのインストールをされたことがある方は、こういった進行状況の表示をよく見ていると思います。

この進行状況の表示方法に以前から興味があったので、実際に作ってみて、使った方法をまとめてみました。

:::note info
本記事で紹介する実装・実行は以下の環境にて行いました。
・Windows11
・WSL2(Ubuntu 22.04.3 LTS)
・Node.js 20.11.1
・Git Bash(推奨ウインドウサイズ Columns:80 x Rows:20)
:::

## 実

元記事を表示

node.jsのDocker環境を作成する

### はじめに

こんにちは,Mottyです。今回はnode.jsのDocker環境を作っていく手順を説明します。

### Dockerで環境構築するためのモチベーション

Dockerではコンテナ内にNode.jsと依存ライブラリがすべて閉じ込められているので、どの環境でも一貫して動する。開発者のローカル環境に依存せず、すべての依存関係が同一バージョンで実行されるため、”It works on my machine”問題を防ぐことができる、とのこと。

### 構築方法

WSL上のどこかのプロジェクトのルートディレクトリに以下2つを作成
・Dockerfile
・package.json

### Dockerfileの構築方法

“`Dockerfile
# ベースイメージとしてNode.jsの公式イメージを使用
FROM node:16

# 作業ディレクトリを設定
WORKDIR /usr/src/app

# package.jsonをコピーして依存関係をインストール
COPY package*.json ./
RUN npm install

#コンテナを終了させな

元記事を表示

「現代魔術JS×Web設計」のイメージと概念〜ビルド編〜

# はじめに
半年前ぐらい前にアニメ「葬送のフリーレン」を見て、この際にふとエンジニアとして見過ごせない概念がありました。
**「魔術はイメージの世界」**
私はジュニアプログラマーながら激しく同意したのを覚えてます。
Web設計はどんどん肥大化と複雑化していくもので、それに抗うための技術が発生するなどして…中々イメージが捉えづらいと思います。
本記事はそんな捉えづらい概念をご紹介していければと思います。

:::note info
初投稿のジュニアプログラマーです。
ご指摘がありましたら、ビシバシお願いします。
:::

# Node.js

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3690326/dac32338-d511-13dd-dd55-901cd23ca070.png)

Node.jsとは…単にGoogle Chromeをサーバーサイドで動かしてしまおうという技術です。
今までJavaScriptはブラウザサイドで動くものとして扱ってきました。
しか

元記事を表示

ガチ初学者の落書き ノード

多分いろいろ間違っている覚書です。

# ターミナルよく使うコマンド
ls:ディレクトリ一覧表示
pwd:今いるパス表示
cd:ディレクトリ移動
mkdir:ディレクトリの作成
touch:ファイルの作成

# Nodeのターミナル操作
jsファイルの結果の出力: node jsファイル名

## npm
– npm:パッケージ(他の人が作った便利ツール)が使えるようになるもの
– ノードモジュール:パッケージをインストールしたときにそのパッケージと、依存関係のあるパッケージを格納するディレクトリ
– package.json:自分のプロジェクトでインストールしたパッケージ情報などが記載されたjsonファイル
– package-lock.json:インストールしたパッケージの情報が記載されたjsonファイル

“npm init“:プロジェクト初期化。package.jsonとjsファイルが作成される。
“npm install パッケージ“:ノードモジュールにパッケージがインストールされる。package-lock.jsonも。
“npm install“:packag

元記事を表示

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:[viteでReact×TypeScript環境を爆速で作る最小版](https://qiita.com/t

元記事を表示

サーバーをまたいで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
“`
サンプルでは特に外部モジュールを使用していませんが、必要なモジュールがあればサーバー2側にインストールします。

## サーバー1
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__10"><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__11"><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__12"><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__13"><a href='https://qiita.com/sghr2020/items/120d22435397215851cd'>【個人開発】ChatGPTのプロンプト投稿アプリを作ってみた【React,Express.js,Node.js,MongoDB,Vercel,GitHub】</a></h3> <blockquote><p>転職活動のためにポートフォリオを作成しました。<br /> ご覧いただけると幸いです。<br /> ユーザー登録、投稿等自由にしていただいて大丈夫です。<br /> フィードバックいただけると幸いです。</p> <p>スクールを使わずに、すべて個人で作成しました。<br /> MERNスタック(MongoDB、Express.js、React、Node.js)でアプリを制作しております。</p> <p>## アプリ紹介<br /> サイトはこちら<br /> https://menlo.vercel.app/</p> <p>※自由に書き込みや登録いただいて大丈夫です。<br /> ※ポートフォリオの役割があるため、場合によっては投稿を削除する可能性がございます。予めご了承ください。</p> <p>Githubはこちら<br /> https://github.com/yusukesugahara/menlo</p> <p>## サービス概要<br /> ChatGPTについて、プロンプトに関する記事を投稿し共有するアプリです。ChatGPTをさらに有効活用できるようにノウハウや知識を学び共有する場として作成しました。</p> <p>## 開発背景<br /> ### 1、自身がプロンプトに関する情報をもっと知りたかったため<br /> 私自身、ChatGPTを活用してアプリ制作の学習を</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__14"><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__15"><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__16"><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__17"><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__18"><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__19"><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__20"><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> </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%2F19%2Fpost-36876%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%2F19%2Fpost-36876%2F&url=https%3A%2F%2Fmiofactor.com%2F2024%2F09%2F19%2Fpost-36876%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%2F19%2Fpost-36876%2F" target="_blank" title="LINEで送る"></a></li></ul> </aside> <!-- /記事下シェアボタン --> <!-- 記事下エリア[widget] --> <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> <!-- /記事下エリア[widget] --> <!-- 関連記事 --> <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/2021/12/09/post-14992/" title="JavaScript関連のことを調べてみた2021年12月09日"> <img src="https://miofactor.com/wp-content/uploads/2019/10/js-150x150.png" alt="JavaScript関連のことを調べてみた2021年12月09日" width="150" height="150" > </a> <h3 class="related__title"> <a href="https://miofactor.com/2021/12/09/post-14992/">JavaScript関連のことを調べてみた2021年12月09日</a> <span class="icon-calendar">2021.12.09</span> </h3> <p class="related__contents">目次 1. 【Harmoware-VIS】移動体アイコンを複数レイヤーで表示2. 【Harmoware-VIS】独自のActionを追加する3. 【H[…]</p> </li> <li class="related__item"> <a class="related__imgLink" href="https://miofactor.com/2020/05/14/post-4959/" title="Python3関連のことを調べてみた2020年05月14日"> <img src="https://miofactor.com/wp-content/uploads/2019/10/python-150x150.png" alt="Python3関連のことを調べてみた2020年05月14日" width="150" height="150" > </a> <h3 class="related__title"> <a href="https://miofactor.com/2020/05/14/post-4959/">Python3関連のことを調べてみた2020年05月14日</a> <span class="icon-calendar">2020.05.14</span> </h3> <p class="related__contents">目次 1. Colab Proを2ヶ月ほど使ってのメモ(良い点 / イマイチな点)2. Gdalのインストールとコマンドによる利用例3. 京都大学のP[…]</p> </li> <li class="related__item"> <a class="related__imgLink" href="https://miofactor.com/2020/03/01/post-3077/" title="iOS関連のことを調べてみた2020年03月01日"> <img src="https://miofactor.com/wp-content/uploads/2019/10/ios-150x150.png" alt="iOS関連のことを調べてみた2020年03月01日" width="150" height="150" > </a> <h3 class="related__title"> <a href="https://miofactor.com/2020/03/01/post-3077/">iOS関連のことを調べてみた2020年03月01日</a> <span class="icon-calendar">2020.03.01</span> </h3> <p class="related__contents">目次 1. iOSアプリの審査状況変更を、Slackに自動通知する(GAS + Slack Webhook)2. monacaで作成したios向けne[…]</p> </li> </ul></aside> <!-- /関連記事 --> <!-- コメント --> <!-- /コメント --> <!-- PVカウンター --> <!-- /PVカウンター --> </main> <!-- /l-main --> <!-- l-sidebar --> <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/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> <!-- /l-sidebar --> </div> <!-- /l-wrapper --> <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/09/19/post-36890/"> <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.09.19</li> </ul> <h2 class="heading heading-archive "> <a class="hc-darkgray" href="https://miofactor.com/2024/09/19/post-36890/">JavaScript関連のことを調べてみた</a> </h2> </li> <li class="categoryBox__item"> <div class="eyecatch eyecatch-archive"> <a href="https://miofactor.com/2024/09/19/post-36891/"> <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.09.19</li> </ul> <h2 class="heading heading-archive "> <a class="hc-darkgray" href="https://miofactor.com/2024/09/19/post-36891/">JAVA関連のことを調べてみた</a> </h2> </li> <li class="categoryBox__item"> <div class="eyecatch eyecatch-archive"> <a href="https://miofactor.com/2024/09/19/post-36894/"> <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.09.19</li> </ul> <h2 class="heading heading-archive "> <a class="hc-darkgray" href="https://miofactor.com/2024/09/19/post-36894/">iOS関連のことを調べてみた</a> </h2> </li> <li class="categoryBox__item"> <div class="eyecatch eyecatch-archive"> <a href="https://miofactor.com/2024/09/19/post-36888/"> <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.09.19</li> </ul> <h2 class="heading heading-archive "> <a class="hc-darkgray" href="https://miofactor.com/2024/09/19/post-36888/">Rails関連のことを調べてみた</a> </h2> </li> <li class="categoryBox__item"> <div class="eyecatch eyecatch-archive"> <a href="https://miofactor.com/2024/09/19/post-36884/"> <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.09.19</li> </ul> <h2 class="heading heading-archive "> <a class="hc-darkgray" href="https://miofactor.com/2024/09/19/post-36884/">Lambda関連のことを調べてみた</a> </h2> </li> <li class="categoryBox__item"> <div class="eyecatch eyecatch-archive"> <a href="https://miofactor.com/2024/09/19/post-36886/"> <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.09.19</li> </ul> <h2 class="heading heading-archive "> <a class="hc-darkgray" href="https://miofactor.com/2024/09/19/post-36886/">Python関連のことを調べてみた</a> </h2> </li> </ul> </div> </div> <!-- schema --> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Article ", "mainEntityOfPage":{ "@type": "WebPage", "@id": "https://miofactor.com/2024/09/19/post-36876/" }, "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-19T16:40:57+0900", "dateModified": "2024-09-19T16:40:57+0900", "author": { "@type": "Person", "name": "editor" }, "publisher": { "@type": "Organization", "name": "f@ctor", "logo": { "@type": "ImageObject", "url": "", "width": "", "height":"" } }, "description": "目次 1. 🔰TypeScriptの環境構築をまとめてみた2. Array.fromAsync()とPromise.all()の違い【JavaScript】3. ポート3000を占領する不届き者を倒せ!WindowsユーザーのためのローカルURL奪還作戦4. CLIのプログレスバーを作ってみた5. node.jsのDocker環境を作成する6. 「現代魔術JS×Web設計」のイメージと概念〜ビルド […]" } </script> <!-- /schema --> <!--l-footer--> <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> <!-- /l-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>