@antfu/niのniコマンドがPowerShell上で実行できない問題を解決する

[@antfu/ni](https://github.com/antfu/ni) は `npm install` を `ni` に短縮してくれる便利なコマンドですが、WindowsのPowerShell上では**初期状態だと `ni` を使用できません**。
New-Itemコマンドレットのエイリアスとして `ni` が設定されているためです。

“`
PS> ni

コマンド パイプライン位置 1 のコマンドレット New-Item
次のパラメーターに値を指定してください:
“`

そこで、下記の通り設定を行うことにより、PowerShellでもniコマンドを使用することができます。

# 設定の概要

PowerShell起動時、Remove-Aliasで`ni`のエイリアスを削除するように設定します。
ただし、Remove-Aliasは**PowerShell 6.0以降でないと使えない**ため、合わせてPowerShellも最新版にバージョンアップします。

# 設定手順

(1) PowerShellのバージョンを確認

“`
PS> $PSVersionTable

No version is set for command npm Consider adding one of the following versions in your config file at nodejs

## 概要

‘npm install’コマンドを行おうとした際、下記のエラーが起きたので、自分の備忘録としても記載
「No version is set for command npm Consider adding one of the following versions in your config file at nodejs ~version~」

### 結論
インストールしたnode.jsをグローバルに設定できていなかったため。

### 解決策
“`
asdf global nodejs <バージョン>
“`

これにより、Node.jsの指定のバージョンに設定され、プロジェクトを作成する際にデフォルトでこのバージョンが使用されるようになる。
### 補足
**asdf**
複数のプログラミング言語のバージョンを管理するツールの1つ。
asdfを使用することで、異なるバージョンのプログラミング言語を簡単に切り替えることが可能。
asdfは、Node.js、Ruby、Python、Javaなどのプログラミング言語のバージョン管理に広く使用されている。
asdfを

Infisicalを使ってみる

# Infisicalを使ってみる

Twitterで唐突に流れてきた記事にふと目が止まりました。
[記事](https://twitter.com/k1_c_/status/1683825202076213249)

AWSを封じられた環境下ではいつも『ParameterStoreを使えたらなぁ。。。』と思う機会が多いので、
OSSで似たようなことができるのは個人的にかなり興味ありありです。

# Infisicalってなに？

公式より引用

* .envをやめて環境依存値を一元管理しよう
* Dockerとかkubernetesとかの定義ファイルのパラメータ参照にも利用できるよ（まじ？）
* OSSで便利なUI付きのSecretManagerだよ
* ありとあらゆるCI/CDと連携できるよ
* 色んな言語向けにSDKを提供しているよ（Node/Python/Java/etc…）

[公式サイト](https://infisical.com/)

# 期待すること

* VSCodeとかIntelliJで各環境定義(env/application.properties/over

TypeScriptにおいてCommonJSとES Moduleの両方に対応するパッケージを作る

## はじめに

最近ではNode.jsのライブラリでも、[pure ESM](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c)の考え方でES Moduleのみでしか利用できないものも出てきている。とはいえ、[npm-esm-vs-cjs](https://github.com/wooorm/npm-esm-vs-cjs/tree/main#data)というリポジトリのデータによると、以下のようにCommonJSのライブラリのほうが圧倒的に多く、ES Moduleのみはまだ10％程度しかない（みたい）。

そこで、今回はライブラリを公開する際に、CommonJSとES Moduleの両方をサポートするようなプロジェクトの設定についてみていきたいと思う。

【nodenv】インストールできるバージョンの最新化

## はじめに

今日 Node.jsのLTSバージョンを調べたところ`18.17.0`だったので、`nodenv`を利用してインストールを試みたところ、バージョン一覧に表示されませんでした。
そこで`nodenv`でインストールできるバージョンを最新化します。

### 環境

– Intel Mac 13.4.1(c)

### 前提

– `nodenv`が利用できること

## 手順
### 対応前の状態

対応前に`v18`でインストール可能なバージョンは以下のようになってました。(`18.17.0`が無い)

“`sh
# nodenvのバージョン
$ nodenv –version
nodenv 1.4.1

# node-buildのバージョン
$ node-build –version
node-build 4.9.117

# 18系でインストール可能な一覧
$ nodenv install –list | grep -e “^18”
— 省略 —
18.16.0
18.16.1
“`

### 最新化

#### `nodenv`を`Home

新しくフォルダを作らずにNext.jsのWebアプリケーションを作成

# 新しくフォルダを作らずにNext.jsのWebアプリケーションを作成したい！！

## 動作環境
– Linux
– Node.js
– Next.js

## フォルダを作成してWebアプリケーションを作成する場合

exampleAppフォルダを作成してNext.jsのWebアプリケーションを作成する場合は次のコマンドを実行する

“`
app# npx create-next-app exampleApp
“`

“`
app
|- exampleApp
|- .next
|- node_modules
|- public
|- src
…
“`
exampleAppフォルダ作成後、アプリケーションが作成される

## フォルダを作成してWebアプリケーションを作成する場合

現在のディレクトリにWebアプリケーションを作成する場合は次のコマンドを実行する
“`
app # npx create-next-app –use-npm .
“`
“`
app
|- .next
|- node_modules
|- public

Powershell(Win11)でもbundle-analyzerを(無理やり)動かす方法

# 動かし方
“`posh
npx env-cmd -f .env.analyze next build
“`

本当はもっと効率のいいやり方や環境変数を活用する方法などはありますが、個人的にはこれが一番手っ取り早いです。

ボトルネックは早く特定したいですからね。

ちなみにNextJsのサーバーを止めないとPermittion errorになるのでお気を付けて?

ではー

symbol-sdk@3.0.7で作るシークレットロック／プルーフトランザクション

# はじめに

こんにちは。

symbol-sdkの3系、トランザクションシリーズ第七弾です。

今回はシークレットロック・シークレットプルーフをやっていきます。

https://www.npmjs.com/package/symbol-sdk/v/3.0.7

## 注意事項

書いてあるコードについて、正確性や完全性を保証するものではありません。あくまで参考程度として頂き、最新情報は公式ドキュメンテーションをご確認ください。

# デッドラインと鍵ペア

まずはデッドラインと鍵ペアです。

“`jsx
import symbolSdk from ‘symbol-sdk’;

const network = symbolSdk.symbol.Network.TESTNET;
const deadline = network.fromDatetime(new Date(Date.now() + 7200000)).timestamp;

const facade = new symbolSdk.facade.SymbolFacade(network.name);

const p

symbol-sdk@3.0.7で作るメタデータトランザクション

# はじめに

こんにちは。

symbol-sdkの3系、トランザクションシリーズ第六弾です。

今回はメタデータをやっていきます。

https://www.npmjs.com/package/symbol-sdk/v/3.0.7

## 注意事項

書いてあるコードについて、正確性や完全性を保証するものではありません。あくまで参考程度として頂き、最新情報は公式ドキュメンテーションをご確認ください。

# デッドラインなど

まずは各トランザクションで共通となる個所について。デッドラインと鍵ペアです。

“`jsx
import symbolSdk from ‘symbol-sdk’;

const network = symbolSdk.symbol.Network.TESTNET;
const deadline = network.fromDatetime(new Date(Date.now() + 7200000)).timestamp;

const facade = new symbolSdk.facade.SymbolFacade(network.name);

co

Windows上でDocker越しSonarQubeを起動して、ローカルソースをコード検証する

# 概要

Windows環境で、Dockerイメージを用いて簡単にSonarQubeサーバーを起動して、
ローカルのソースのコード検証を行う方法を説明する。

今回の検証対象のコードはNode.js（JavaScript / Vue.js）とする。

## 目的

SonarQubeによるコード検証を、Windowsのローカル環境で簡単に試すことを目的とする[^1]。
SonarQubeサーバーの起動には**Docker版**を用いるものとする。
Docker Desktop for Windows WSLバックエンドをインストール済みの環境、を前提とする。

Dockerを用いる理由は、「SonarQubeサーバーの**Zip版**を取得して起動する方式」でも手順自体は簡単だが[^2]、
一方でその公式ガイドを見に行くと「`Download and install Java 17 on your system.`」の記載があり[^3]、
Java 17と既存環境との整合を考慮するのが面倒だったため（2023-07-04時点）。

[^1]: 公式が、ローカル インスタンスをインス

早押しクイズ〜Stable Diffusionが作成した画像を当てろ！〜


ControlNet(Stable Diffusion)を使った早押しクイズアプリを作りました．
ノイズがかかった画像から綺麗な画像が生成するまでの流れに着目し，分かり次第回答する「早押しクイズアプリ」です．

https://github.com/ysenkun/quiz-stable-diffusion

## 目次
– 遊び方
– 環境構築
– バックエンド
– フロントエンド
– 動かす

## 環境
– Ubuntu 22.04
– GPU memory 12GB以上 (NVIDIA GeForce RTX 3090 Ti 使用)

## 遊び方
![Screenshot 2023-07-21 at 21.54.47.png](https://qiita-ima

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で作る勤怠状況管理アプリ（作成中）

## こんなの作りました


## はじめに

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