- 1. TypeScriptにおいてCommonJSとES Moduleの両方に対応するパッケージを作る
- 2. 【nodenv】インストールできるバージョンの最新化
- 3. 新しくフォルダを作らずにNext.jsのWebアプリケーションを作成
- 4. Powershell(Win11)でもbundle-analyzerを(無理やり)動かす方法
- 5. symbol-sdk@3.0.7で作るシークレットロック/プルーフトランザクション
- 6. symbol-sdk@3.0.7で作るメタデータトランザクション
- 7. Windows上でDocker越しSonarQubeを起動して、ローカルソースをコード検証する
- 8. 早押しクイズ〜Stable Diffusionが作成した画像を当てろ!〜
- 9. package.json備忘録
- 10. asdf で Node.js をバージョン管理する
- 11. ユーザー体感に近いWebページ表示速度を自動で計測する一案
- 12. スターバックスの黒板アートを生成系AIを使って描かせてみたら…。
- 13. asdfでNode.js 19.7.0をインストール
- 14. 【初心者】Reactで作る勤怠状況管理アプリ(作成中)
- 15. 【npm】本番依存からtypescript関連のパッケージを排除する ~Docker編~
- 16. nodenvでのnode.jsバージョン設定
- 17. Node.jsでAmazon SP-APIをリクエストする方法:初心者奮闘記
- 18. npmライブラリを使うだけではなく、作れる側となるためのスタート
- 19. Node.jsでシンプルなhttpサーバを構築
- 20. ESモジュールとCommonJSと対応したTypeScriptパッケージの(たぶん)正しい作り方
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%程度しかない(みたい)。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372684/ae19b418-ba15-9975-2d4e-35533dfd7abb.png)そこで、今回はライブラリを公開する際に、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が作成した画像を当てろ!〜
![Screenshot 2023-07-21 at 22.11.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2744789/1bd8b494-7e58-18b4-95f5-e46f78811c36.png)
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日、スタバに行くのですが、私がスタバに行く楽しみの一つが黒板アートです。黒板アートというのは、新作のドリンクの紹介などで、入口近くやメニューの横に掲げられている手書きの看板です。手書きゆえに個性や温かさを感じることができ、ついいつも見惚れてしまいます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/217319/33dcc1aa-e6a0-4af3-78ca-fe6eb6d40b0e.png)本当は店員さんの書いた黒板アートが好きなのですが、今、ちょうど画像生成系AIの学習をしていたこともあって、もしかしたらこの黒板アート。AIで描けるかもと思いました。(私の心の中では、店員さんが書いた方が、心の温かさとかいっぱいつまってるから絶対店員さんの絵を推したい人なのですが)、とはいえ私も技術者の端くれですので、今の画像生成AIの実力がどの程度か確認しておかねばという想いも一方でありました。
そこで今回、DALL-Eという画像生成AI
asdfでNode.js 19.7.0をインストール
“`
% asdf plugin add nodejs
% asdf install node.js 19.7.0
“`
【初心者】Reactで作る勤怠状況管理アプリ(作成中)
## こんなの作りました
![無題の動画-Made-with-Clipchamp.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480394/dea83eb1-2be0-8f00-b799-b11338731200.gif)
## はじめに
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 に対しては