package.json備忘録

# 本記事について
package.jsonの機能について個人的に役に立ちそうなものを備忘録的にまとめてみたものになります。
過不足等あるかと思いますが随時メンテしていければと思っております。

# package.jsonとは？
package.jsonとはNode.js上でインストールするパッケージの指定やメタデータの設定、スクリプト
の記述等を行うことができるjson形式のファイルです。
インストールされたパッケージと依存関係はpackage-lock.json(yarnの場合yarn.lock)として生成されます。

# 使用するバージョンの指定方法
ライブラリのバージョン管理には[Semantic Versioning](https://semver.org/lang/ja/)という管理手法が用いられており、後方互換性や機能追加、バグ修正などの影響範囲ごとに`major` `minor` `patch`とし`○○.xx.□□`のようにピリオドで区切られた数字でバージョンを表記しています。

各パッケージのバージョン表記の前に `^(キャレット)`もしくは`~(チルダ)`をつけ

asdf で Node.js をバージョン管理する

## 昔々あるところに

大昔にこの記事を書いたのですが、結局現在はanyenvは使っておらずasdfを使用しています。

https://qiita.com/ucan-lab/items/ce35bcaf2562054917a8

まぁ、乗り換えた理由は今のプロジェクトでasdfが使われてるから合わせておこうといったモチベーションでしたが、使った感じ良さげだったので共有します。

## asdf を使うメリット

anyenv のように nodenv を入れて、node を入れてとする必要がなく、
asdf 入れたら node を入れることができます。(もちろんバージョン管理ができます)

`.tool-versions` ですべてのツールのバージョンを共有できます。
`.nvmrc`, `.node-versions`, `.ruby-version` と管理していたのを1つのファイルで管理できます。

## asdf とは

The Multiple Runtime Version Manager
https://asdf-vm.com

色んなツールや言語のバージョン管理ツール

ユーザー体感に近いWebページ表示速度を自動で計測する一案

# はじめに
Webページの表示速度計測にはさまざまな方法や指標があり、たとえばGoogleのWeb Vitalsを使うことでユーザー体験を定量的に計測できたりSEO対策に役立つと言われています[^1]。
ユーザーが体感する表示時間に相当する指標としてLCPなどで計測をしてみたのですが、今回対象としたアプリケーションでは実環境で操作してみた際の体感時間とで大きなギャップがありました[^2]。
そこで、ユーザーが体感する表示時間を「アクションを起こしてからプログレスバーが消えるまで」と定義し、自動計測できるようにしてみた記録です。
各画面でプログレスバー（ローディングアニメーション）が表示されるという前提があるのでご了承ください。

# 計測の目的
– 性能に関する潜在的なリスクを見つけ出し、改善を通じて品質を高めること。
– 表示速度の面で良好なユーザー体験を提供できているか、開発中アプリケーションの現在地を知ること。

# 試行環境
以下の環境で計測を行いました。

OS：Windows 10 Pro
実行環境：Node.js v18.16.0
自動操作フレームワーク：Playwri

スターバックスの黒板アートを生成系AIを使って描かせてみたら…。

## 作ろうと思ったきっかけ
私はスタバが好きで週6～8日、スタバに行くのですが、私がスタバに行く楽しみの一つが黒板アートです。黒板アートというのは、新作のドリンクの紹介などで、入口近くやメニューの横に掲げられている手書きの看板です。手書きゆえに個性や温かさを感じることができ、ついいつも見惚れてしまいます。

本当は店員さんの書いた黒板アートが好きなのですが、今、ちょうど画像生成系AIの学習をしていたこともあって、もしかしたらこの黒板アート。AIで描けるかもと思いました。(私の心の中では、店員さんが書いた方が、心の温かさとかいっぱいつまってるから絶対店員さんの絵を推したい人なのですが）、とはいえ私も技術者の端くれですので、今の画像生成AIの実力がどの程度か確認しておかねばという想いも一方でありました。

そこで今回、DALL-Eという画像生成AI

asdfでNode.js 19.7.0をインストール

“`
% asdf plugin add nodejs
% asdf install node.js 19.7.0
“`

【初心者】Reactで作る勤怠状況管理アプリ（作成中）

## こんなの作りました

coming soon

## はじめに

React・Javascriptを勉強し始めて、何か作てっみたいなと思い、「どうせなら業務で役に立つものを作ろう」ということで今回のアプリを作成しました。

本記事は、プログラミング初学者が、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。

そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。

## スキルレベル（筆者自身）

– HTML,CSSの知識はある（実務経験2年）
– JSで簡単なコードなら書ける、読める
– Reactで基本的なチュートリアルは済んでいる

## ゴール

現在、部署内では勤務状況をスプレッドシートを使用して管理しています。

**現状の問題点**

> – 操作しずらい
> – 挙動が不安定
> – 見た目がださい

現状の機能を維持しつつ、上記問題点を解決できるようなアプリを作る！というのが今回のゴールになります。

## 設計

必要な機能

【npm】本番依存からtypescript関連のパッケージを排除する ~Docker編~

## 結論
Dockerのマルチステージビルドを利用すると楽に実現できる

## 効果
– イメージサイズの削減
– 環境の分離
– アプリケーションのビルドと実行がそれぞれ異なる環境で行われる

## 差分
### マルチステージビルド導入前
“`package.json
{
…
“scripts”: {
“build”: “tsc”,
“start”: “node dist/index.js”,
“dev”: “nodemon”
},
…
“dependencies”: {
“express”: “^4.18.2”,
“typescript”: “^5.1.6”,
“@types/express”: “^4.17.17”
},
“devDependencies”: {
“nodemon”: “^3.0.1”,
“ts-node-dev”: “^2.0.0”
}
}
“`

“`dockerfile:dockerfile.production
FROM node:18.1

nodenvでのnode.jsバージョン設定

nodenvでのnode.jsバージョン設定を記しておきます。
安定版は[こちらのNode.js®公式サイト](https://nodejs.org/ja/download)にてご確認ください。
（今回の例では、v15.14.0からv18.16.0へアップデートした例になります。）

“`
$ node -v
v15.14.0 #現在の古いバージョンが表示されます

$ nodenv install -l
# ローカルにあるリストを確認します

$ brew update && brew upgrade node-build
# もしリストに使用したいバージョンがなければ、これで更新できます

$ nodenv install 18.16.0
# 使用したいバージョンをインストールします

$ nodenv local 18.16.0
# globalに設定すると不具合の起きるリポジトリも出てくるかもしれないので、localに設定
# もしglobalに設定したい場合は、$ nodenv global 18.16.0と入力します

$ node -v
v18.16.0 #指定した新し

Node.jsでAmazon SP-APIをリクエストする方法：初心者奮闘記

記事の概要

Node.jsでAmazonSP-APIのデータをリクエストして、取得できる用にするまでの手順を記載。
私が設定時に手こずった点などを共有できればと思います。

私のスペック

Amazonでの物販事業を運営している個人事業主で、プログラミングを学習し始めて約500時間の初心者です。
自分のビジネスで使うツールを自分で開発したく学習を始めました。

当記事執筆時点ではRecursionという学習サイトでコンピューターサイエンスの基礎を学んでおり、何らかのアプリケーションを自分で開発した経験はありません。

ターミナルコマンドも実践しながら覚えている段階、モジュール、パッケージ、ライブラリって何？とChatGPTに聞いているそんなレベル感の人間が書いています。
(用語の間違った使い方や理解があればご指摘いただけると嬉しいです)

やりたいこと

北米Amazonの売上、在庫情報、注文情報をAmazonのSP-APIを使って取得し、Googleスプレッドシートに反映されるようにしたい。

なぜNode

npmライブラリを使うだけではなく、作れる側となるためのスタート

# 概要と対象読者
`npm install XXXXX`
Javascriptである程度開発を積まれた方々は、一度は目にしているコマンドでしょう。

これまでは利用するだけで、作る方法すら知らない身分でした。
すぐに何かライブラリを公開する、といった予定はないですが、最近色々実装する機会があり、いずれ公開するときがくる、、、ような気もしています。

**今回の記事では、作成から公開して使用してみるまでの流れ、これを理解するところから取り組んでみました。**

:::note
**以下のような方々に向けた記事です！**

– Javascriptの基本的な文法を理解している方
– 普段使っている`npm install XXX`の反対側（作る側）がどんなことをするのか気になる方
– npmのライブラリ公開に興味がある方
:::

## npmのアカウント登録

https://www.npmjs.com/

まずは、ライブラリを公開するためにnpmに自分の情報を登録するところから始めます。
ユーザ名・メールアドレス・パスワードを入力して
アカウントを作成してみました。（作成後の画面）

Node.jsでシンプルなhttpサーバを構築

## httpとは
WebサーバとWebブラウザの間でWebの情報を受け渡しするときに使う約束事(プロトコル)のこと。

## httpサーバとは
Webブラウザから要求されたリクエスト(「あのページをおくれ」)に対し、レスポンス(「どうぞ、このページだよ」)を返却するサーバのこと。(＝Webサーバと一緒)
httpでやりとりするサーバなのでhttpサーバと呼ばれることがあるものの、基本的にWebサーバーと同じと考えて良いはず。

## 作るもの
localhost:3000で待機するwebサーバ。

仕様: 画面のロード時に表示されるフォームのinput内に名前を入力し、submitすると’Hello <名前>！’が表示される

## 手順
まずはモジュールの読み込みから
httpモジュールはhttpサーバを構築する上で必要な機能を提供するモジュールで、Node.jsがインストールされていれば利用可能。
“`
const http = require(“http”);
“`

httpサーバの構築はcreateServer()メソッドを使用。
ここではリクエストを受け取った際

ESモジュールとCommonJSと対応したTypeScriptパッケージの（たぶん）正しい作り方

先日、[JTC-utils](https://www.npmjs.com/package/jtc-utils) という CommonJS と ESM に対応したデュアルパッケージを公開したのですが、**とてつもなく**苦労したのでここにメモを残しておくことにします。

https://www.npmjs.com/package/jtc-utils

デュアルパッケージに対応するという記事はいくつかありますが、この記事は次の条件の時に役に立つと思います。

1. ソースコードは TypeScript で作りたい。
2. CommonJS と ESモジュールの両方に対応したい。
3. サブモジュール[^1]を作りたい。（←**ここ重要**）

[^1]: `import * from “main/sub”` 形式の階層型モジュール構成

:::note warn
2023/07/18 コメントを受け、一部訂正をいれています。
2023/07/19 さらに調べたところ、TypeScript の公式見解としては、[たとえ型宣言ファイル（.d.ts）の内容が同じであっても、.cjs に対しては

firebaseプロジェクトでmonorepo構成（npm workspace）

一般的なfirebaseプロジェクトでのmonorepo構成を作ってみます。
いきなり全体を作らず、順に構成していきます。

以下の4つを達成したらゴールとします。

– [ ] 共通コードを読み込んだ状態でreactのローカル環境が動く
– [ ] firebase hostingのデプロイが完了し期待通りの出力結果
– [ ] 共通コードを読み込んだ状態でfirebase functionsのローカル環境が動く
– [ ] firebase functionsのデプロイが完了し期待通りの出力結果

## Reactのテンプレート作成

“`
npx create-react-app my-monorepo –template typescript
“`

作成すると以下の構成になります。

“`
├── package-lock.json
├── package.json
├── src
│ └── App.tsx
└── tsconfig.json
“`

## packages/commonを作成

“`
npm init -w packages/common

Volta で Node.js のバージョン管理を行うメモ

## はじめに

筆者は今まで Node.js のバージョン管理には 「 nvm 」 と 「 asdf 」 を利用して来ましたが、ここ最近のトレンドはどれだろう？と思い調べたところ 「 [Volta](https://volta.sh/) 」 なるものが人気になりつつあるようです。

Volta の以下の点に魅力を感じたので、今回は Volta を導入し利用する流れを備忘録として残したいと思います。

1. package.json の独自フィールドにバージョン定義が記載される
`.tool-versions` や `.nvmrc` のように別ファイルに分かれず、 `package.json` ひとつで済むのでファイルがごちゃつかない。

1. プロジェクトごとに自動で Node.js のバージョンが切り替わる
`package.json` の独自フィールドに応じて自動的に Node.js のバージョンが切り替わるため、切り替えにコマンドを打つ手間が省ける。また、 `npm` や `yarn` のバージョン管理も可能。

1. 更新が活発
2020/12 にリリー

vue.jsのCI/CD環境を構築してアプリケーション開発に集中する#2

# 目標
前記事はこちら→[vue.jsのCI/CD環境を構築してアプリケーション開発に集中する#1](https://qiita.com/kekkepy/items/8116722c9d7764aaafd8)

GitHub Actionsを用いてVue.jsをS3の静的ウェブサイトホスティングとして公開する
この際AWSマネジメントコンソールでの作業を限りなく0にする
今回使ったGitHubのリポジトリのリンクは[こちら！](https://github.com/keitasato/vuejs-on-s3-oidc)

## 前記事からの修正点
GitHub ActionsからS3へリソースをデプロイするためには、OpenID Connectの設定が必要だが、これをAWSマネジメントコンソールで行った。
この設定もTerrafor

【Express】Node.jsファイルをルーティングする

## この記事の内容

以前の投稿では、Node.jsでWebページをホスティングする方法を紹介しました。

https://qiita.com/watsony/items/a6790d932d2f59589965

ここでは、Node.jsとExpressを用いてWebページのホスティングとルーティングをする方法を紹介します。

## Expressとは

> [Express](https://expressjs.com/)は、Node.jsのための軽量なWebアプリケーションフレームワークです。Expressを使用することで、簡単かつ効率的にWebサーバーを構築できます。ルーティングやミドルウェアの管理、HTTPリクエストとレスポンスの処理など、Webアプリケーション開発に必要な機能を提供します。Expressはシンプルで柔軟な設計が特徴であり、多くの開発者によって広く使用されています。

## 事前準備

– Node.jsをインストール
[Node.js](https://nodejs.org/ja)の公式サイトにアクセスして、インストーラーをダウンロードおよびインス

[node.js][pm2][ts-node]PM2をOS起動時に自動起動する(core dumpを作成しないようにする）

## 概要
PM2で管理しているnode.jsアプリケーションのOS起動時に自動起動する設定を行います。

自動起動スクリプトをそのまま使用した際、OSのユーザー設定でデフォルトがcore dumpファイルを作成しないようになっていても、作成されてしまう事があったので、作成しないよう修正をします。
(amazon linux2だとデフォルトはコアダンプを作らないようなっているっぽい？）

core dumpファイル(core.xxx)：
クラッシュした内容などが書かれているファイル。
数百MBや1GBくらいをポンっと作ってしまうので、PM2で自動起動→停止→自動起動→停止を知らず繰り返しているとサーバーのディスク容量がいっぱいになるので、注意が必要になります。

詳細を調べたいときや（OSクラッシュ時など）容量に十分空きがあればよいですが、nodeアプリケーション停止でPM2が出力するエラーログ以上のものが不要でしたら作らなくてもよいのかなと思いました。

## 環境
– サーバー：amazon linux 2
– node：16.13.1
– pm2：5.3.0
– viでファイルの

[node.js][pm2][ts-node]PM2を使ってアプリケーションを永続化・ログローテーションでログを管理する

## 概要
node.js / expressで構築し、ts-nodeで起動しているアプリケーションのプロセス終了を感知して再起動してくれるPM2のインストールメモです。

ログの肥大化を防ぐために、ログローテーションも行うようにします。

メモリ不足などの場合、nginxやapacheのWebサーバーが反応しなくなる的なイメージを持っていましたが、nodeはプロセスがパタっと止まってしまうんですね。勉強になりました。

PM2のアプリケーションをOS自動起動設定にした場合、コアダンプ(core dump)ファイルを作成しないようにする設定は[こちらの記事](https://qiita.com/t-son-wk/items/c61f55c865812f0c49d8)をご確認ください

公式サイト
https://pm2.keymetrics.io/

## 留意点
ホットリロードをするわけではなく、登録しているアプリケーションのプロセスが落ちたら、起動をしてくれるものになります。
そのため、プロセスが起動するまでの間はアプリケーションへ接続が出来なくなります。
(私の環境ではts-no

【Node.js】インストールとHelloWorld（Windows・Mac・Linux・AWS EC2）

## この記事の内容

Node.jsを各OSにインストールする方法と簡単な使い方を紹介します。

– [Node.jsとは](#nodejsとは)
– [1. Node.jsのインストール](#1-nodejsのインストール)
– [2. Node.jsでWebサイト作成](#2-nodejsでwebサイト作成)

## Node.jsとは

[Node.js](https://nodejs.org/ja)は、JavaScriptでサーバーサイドのアプリを作るためのプラットフォームです。
ApacheやNginxなどようなhttpサーバー機能が備わっています。

## 1. Node.jsのインストール

Node.jsをインストールする方法は以下の2通りがあります。
* **① [Node.jsの公式サイト](https://nodejs.org/ja)から**
* **② ターミナルのコマンドから**

**Windows、Mac、GUI操作できるLinuxにインストールする場合は ▶︎ ①**
**Linuxコマンドでインストールする場合は ▶︎ ②**
の方法でインストール

Reactの開発環境を作る手順を残しました

# まずは設定(していない人)
### node.jsをインストール
https://nodejs.org/ja/download

### Yarnをインストール
~~~
brew install yarn
~~~

### バージョンが確認できたら成功
~~~
node -v
yarn -v
~~~

## アプリ作成

開発するディレクトリで以下のコマンドを実行
~~~
npx create-react-app react-test
~~~

## コンポーネントを作成
以下のディレクトリにコンポーネントを作成
~~~
– src
– Header.js
– About.js
– Services.js
~~~
~~~md:Header.js
import React from ‘react’;

const Header = () => {
return (

My

);
};

export default Header;
~~~
~~~md:About.js
import Rea