- 1. 【Node.js】daisyUI の最も簡単な始め方
- 2. yargsの位置引数の省略と引数名を使用する方法のメモ
- 3. Node.jsで標準入力から情報を取得するコードについて
- 4. nodeコマンドのオプションと環境変数
- 5. 複数ページをまとめてLighthouseで検証する
- 6. Webサイト刷新(ヘッダ編)
- 7. Node.jsのインストールコマンドメモ
- 8. WSL2ディレクトリ コマンドプロンプト アクセス方法
- 9. [eslint] EACCES: permission denied, mkdir ‘/Users/xxxxx’の解決法
- 10. Node.jsのexpress(TypeScript版)でc言語のプログラムをRenderで実行
- 11. Node.jsのexpressでc言語のプログラムをRenderで実行
- 12. Node.js と ws でシンプルな WebSocketサーバー + Node.js v22 でフラグなしで使える WebSocket
- 13. Node.js を使うときには、使用するライブラリのバージョンをピン留めしておきましょう
- 14. Node.js で Readline をシンプルに使う(1桁の数字の入力を扱う)
- 15. cached-providerを作ってみた
- 16. ヴァージョン指定してnpm i libxmljs2 でエラーになる
- 17. 【TypeScript】実はクロージャ外で型ガードしてもクロージャ内部では型判定の結果が無効化されていた
- 18. AmplifyのNodeのVersionを自動で指定する方法について解説
- 19. 【JavaScript】ESMとCJSの違い
- 20. 自作 Cisco Unified IP Phone Services Application を Apache Bench にかけながら改良する
【Node.js】daisyUI の最も簡単な始め方
# 完成イメージ
| |
| :-: |
| ![スクリーンショット 2024-06-17 11.27.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/6df5bb33-0d3e-eeeb-3047-f1f866aff89a.png)|
| daisyUIを導入し、簡単にスタイルを整えることができる |
# この記事についてhttps://qiita.com/kohki_takatama/items/36712702f115f263f6b4
Node.js・Tailwind CSS の導入はこちらの記事で説明しています。
この記事では、さらにdaisyUIを導入する方法を書いていきます。
前回記事の続きとして、ソースコードも引き続き使用しますが、この記事だけを読んでもわかる内容になっています。# 環境
|サービス名称|バージョン|種別等|
|—|—|—|
|VSCode|1.90.0|エディタ|
|macOS|14.5|OS|
|Node.js|20
yargsの位置引数の省略と引数名を使用する方法のメモ
# コマンドライン引数の覚書
コマンドラインって便利だけど、自分で作るとやっぱり面倒な事も多いですよね。
今回は、コマンドラインツールを作ると高確率で起きる面倒毎のメモを残しておこうと思います。## 引数の処理は地味に面倒
毎度ツールを作る時に地味に面倒なのはコマンドライン引数を受ける時の処理です。
使い捨てのツールの場合は、process.argv[]を直接使うか、パラメータになる部分をハードコードしてしまえばいいんですが…。
今後も使うものは、使い方忘れる場合もあり、引数を調べるためにソースを読みたくないのでヘルプもしっかりしておきたいんですがこれが地味に面倒です。## 面倒を解決するためのコマンドライン引数のパーサーのはずが…
コマンドライン引数の処理を簡略化したくて、ライブラリを使う事にしました。
調べた感じ、yargsというライブラリが人気の様なので今回はyargsを使用するようにしました。
そして、今回もしっかりハマりました。## コマンドライン引数に名前を付けられるのですが、引数名が上手く使用できない。
沢山転がっている位置引数(?)を使用したサンプル
Node.jsで標準入力から情報を取得するコードについて
## アジェンダ
以下のコードは、Node.jsを使って標準入力(キーボードなどからの入力)を読み取るために使用されるコードです。“`js
const input = require(“fs”).readFileSync(“/dev/stdin”, “utf8”);
“`このNode.jsの標準入力の書き方について分解してまとめます。
## `require(“fs”)`
`require` は、Node.jsでモジュール(追加の機能)を読み込むための関数です。
`”fs”` は、ファイルシステム(File System)の略で、ファイルやディレクトリを操作するためのモジュールです。## `readFileSync(“/dev/stdin”, “utf8”)`
### `readFileSync`
`readFileSync` は、ファイルを同期的(プログラムが次に進む前に、完全に読み取る)に読み取る関数です。つまり、ファイルの読み取りが完了するまで他の処理はブロックされます。### `”/dev/stdin”`
`”/dev/stdin”` は、UNIX系のシス
nodeコマンドのオプションと環境変数
## コマンドのオプションと環境変数
nodeコマンドにはさまざまなコマンドラインオプションが用意されています。
コマンドラインオプション一覧は **-h** や **–help** をつけてnodeコマンドを実行することで表示できます。
### ヘルプ
“`javascript
node — help
“`![001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544972/25ecdfb5-f166-c1fc-14dc-7e564127984b.png)
### バージョン確認をする
nodeコマンドのバージョンは **-v** オプションで確認できます。
“`javascript
node -v
“`### ワンライナーコードを実行をする
**-e** オプション似続けてJavaScriptのコードを記述すると、そのコードを実行させることが可能です。
ワンライナーコードを実行させる場合に便利です。“`javascript
node -e ‘cons
複数ページをまとめてLighthouseで検証する
## Lighthouseについて
皆さん、Lighthouseは使っていますか?
Google Chrome上で簡単に実行できて、SEOやパフォーマンス、ユーザビリティのチェックまで出来て便利ですね。![ligthouse.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/426622/b42d591b-8221-a3c9-395b-432206527f27.png)
Lighthouseで検出できる課題や改善点をどこまで追求するか、スコアを追い求めるかは案件によって答えが異なると思います。
内部向け業務システムであれば、よっぽどパフォーマンスが悪く、使い勝手に影響しているなどではなければ、それほど注意深くみる必要はないと思いますし、一般的なWebサイトでのレイアウトシフト対応も修正にかかるコストと効果のバランスがとれるのか、というのは意思決定時に注意すべきです。
一方で、案件によってはLighthouseのスコアありきの要求もあるでしょう。
例えば、全ページにおいて、Lighthouseの
Webサイト刷新(ヘッダ編)
こんにちは。Webサイトの刷新と銘打ってシリーズで続けていきたいと思っています!
今回はヘッダ編となります。一番簡単に進められそうなところをチョイスしています。(モチベーション上げるために)現サイトは以下で、当時は頑張って作りましたけど、デザインセンスの欠片が少しだけ感じたい。
https://penta-d-system.com/
![site_before.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3522989/32e6c0ab-1a35-4000-bd6a-f31fd6ab15ab.png)# 環境
– nodejs: 16系
– nuxt: 2.15.6
– @nuxtjs/vuetify: 1.11.2nuxt2系で、vuetifyでコンポーネントを作成しています。
いまはnuxt3系が主流で、3.11.2が最新バージョンとなっています。技術の進歩は凄まじい。# 現状
![site_header_before.png](https://qiita-image-stor
Node.jsのインストールコマンドメモ
Udemyのterraformの講座にて、アプリケーション構築の中のnode.jsのインストール方法が古くて講義の通りだと動かないため、下記手順でインストールした。
“`
EC2ログインリポジトリの追加
curl -fsSL https://rpm.nodesource.com/setup_20.x | sudo bash –インストール
sudo yum install nodejsnode -v
-> v16.20.2
“`
WSL2ディレクトリ コマンドプロンプト アクセス方法
## WSL2上のubuntuで作成したディレクトリにコマンドプロンプトからアクセスする方法
# 背景
* asdfを使用してnode.jsをインストールする際にWSL2上のubuntuのディレクトリにアクセスしようとした際に少しはまってしまったため記事にしようと考えた。# アクセスする方法は2通りある
“`:1コマンドプロンプト上で下記コマンドを実行する
ubuntu
“`
2windowsの検索窓にubuntuと入力をする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3789688/41b015c8-b52b-a559-e540-d6681d7ede29.png)1,2どちらでもWSL2のUbuntuを起動させることができる。
## 参考にした記事
[Windows11 WSL2 Ubuntu の超基本的な使い方]
⇒https://note.com/hiro20180901/n/neb8fdd56f961
[eslint] EACCES: permission denied, mkdir ‘/Users/xxxxx’の解決法
#はじめに
あるreactのプロジェクトでローカルのサーバーを起動させようとすると、見慣れないエラーになりました。。。“`console
$ npm start
[eslint] EACCES: permission denied, mkdir ‘/Users/xxxxx/node_modules/.cache’
ERROR in [eslint] EACCES: permission denied, mkdir ‘/Users/xxxxx/node_modules/.cache’
“``node_modules/.cache`ディレクトリを作成するためのアクセス権が無いようです。
PCを乗り換えた後などにおそらく起こりやすい問題かと、、、。
# 権限を与えるコマンドを実行
Macで権限付与の時にはお馴染みの`chown`コマンドを使います。(`change owner`の意味)
UNIX系のOSでは個々のファイルごとにオーナーが存在し、初期状態ではファイルを作成したユーザーがオーナーとなり、その他のユーザーはファイルを書き換えられないようにモードが設定されています
Node.jsのexpress(TypeScript版)でc言語のプログラムをRenderで実行
# はじめに
さきほど、JavaScript版のexpressでc言語のプログラムを実行するのを書いたばかりですがその続編で、TypeScript版をお届けします。https://qiita.com/yo16/items/108de9889c79313df005
この記事は、c言語とかRenderとかはあまり書かず、JavaScriptでexpressを作ったのと同じことをTypeScriptでやるにはどうするかっていう、基礎に立ち戻った感じになりそうです。
c言語のコンパイルは、JavaScriptのままとします。(そこをTypeScriptにこだわる必要性を感じなかったので)
githubのリポジトリは、JavaScriptと同じで、フォルダを「app-c-lang2-ts」にしました。こちらもRenderで動作確認済み。
https://github.com/yo16/gcc_render_prac/tree/main
# 手順
## 1. 初期処理
“`sh
mkdir app-c-lang2-ts
cd app-c-lang2-ts
npm init -y
Node.jsのexpressでc言語のプログラムをRenderで実行
# はじめに
とあるプログラムがC言語で書かれていて、それをwebシステムとしてnodeで実行したいと思ったのでやり方を調べました。整理すると、大したことはないです。## 概要
準備
1. c言語のソースをコンパイルして、モジュールを作成
1. Webサーバーとして`express`を起動するアクセス時
1. `express`のサーバー処理がモジュールをキックし、標準出力を得る
1. 標準出力を元にクライアントへ返す## 作ったソース
https://github.com/yo16/gcc_render_prac結果を一応貼っておくと、↓こういう文字を返すだけのwebシステムですw
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/4dabc6dd-d932-be8d-4869-039f394f6d05.png)# 詳細
## 全体
フォルダ構成
![image.png](https://qiita-image-store.s3.ap-northeas
Node.js と ws でシンプルな WebSocketサーバー + Node.js v22 でフラグなしで使える WebSocket
## はじめに
以前から利用している「ws」と、Node.js v22 でフラグなしで使えるようになった WebSocket を組み合わせる話です。### ws
以下の ws は WebSocketサーバーを準備するのに使います。●ws – npm
https://www.npmjs.com/package/ws![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/3a8a2f70-48d7-046b-6614-74a3972b5003.png)
### Node.js v22 で WebSocket利用
Node.js v22 でフラグなしで使える WebSocket は、以下に書かれているものです。●Node.js — Node.js 22 is now available!
https://nodejs.org/en/blog/announcements/v22-release-announce#websocket![image.png](https:
Node.js を使うときには、使用するライブラリのバージョンをピン留めしておきましょう
Qiita Engineer Festa 2024 記事投稿2本目!
本記事はQmonus Value Streamの投稿キャンペーン記事ですhttps://qiita.com/official-events/3648bc4e6cedb674491c
## 📌 はじめに
`npm install` コマンドを使用して外部ライブラリのインストールをする際に、バージョンが固定化されなくてもやもやした経験はありませんか?
さらにバージョンが固定化されないのは開発する上では些細な問題だと思い、スルーした経験はないですか?“`json-doc:package.json
// 例
{
“dependencies”: {
// 心の声 (先頭のキャレット(^)いらないけど、大した問題じゃないしそのままでいいか〜)
“express”: “^4.19.0”
}
}
“`私はわりと最近まで、スルーしてきました ///
そんな過去の私を含め、package.json の外部ライブラリを固定化する方法がわからない(もしくは、調べるのをサボっている)方向けに、T
Node.js で Readline をシンプルに使う(1桁の数字の入力を扱う)
Node.js でキー入力をシンプルに取得したい、という状況があり、以下の標準モジュールを使った簡素なプログラムを作ってみました。
●Readline | Node.js v22.3.0 Documentation
https://nodejs.org/api/readline.html## 今回の内容の元にするサンプルプログラム
今回の内容の元にするプログラムは、上記の公式ページ内に書かれているものを使います。具体的には、以下のものです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/f0ed0fc0-430e-db34-9215-d523629afcbc.png)
“`javascript
const readline = require(‘node:readline’);
const { stdin: input, stdout: output } = require(‘node:process’);const rl = readline.crea
cached-providerを作ってみた
# はじめに
キャッシュとは、一度取得したデータを一時的に保存しておき、次回同じデータが必要になったときに再取得せずに素早く提供する仕組みです。例えばAPIからデータを取得する場合、最初のリクエスト時にそのデータをキャッシュに保存しておき、次回からはキャッシュからデータを返すようにすると、処理が速くなります。しかし、初回のデータを取得している間にも次のリクエストが来るかもしれません。ロックを取得して待たせるという選択肢がないTypeScript/JavaScriptの場合、このようなケースを綺麗に扱うのは意外と難しいものです。
その問題を解消するために書いた自作ライブラリの紹介です。
[cached-provider on npm](https://www.npmjs.com/package/cached-provider)
# 基本的な構成
## ObjectIdMapper
JavaScriptのObjectには固有のIDがありません。そのため、Objectに対してロック処理をするためには、Objectを一意に識別する仕組みが必要になります。ObjectIdMapperは
ヴァージョン指定してnpm i libxmljs2 でエラーになる
## libxmljs2のinstallでエラー
Node v20.9.0の環境で“`
npm i libxmljs2@0.29.0
“`をすると、以下のようなエラーが出て詰まったのでメモ。
“`
~ 前略 ~
npm error node-pre-gyp http GET https://github.com/marudor/libxmljs2/releases/download/v0.29.0/node-v115-darwin-arm64-unknown.tar.gz
npm error node-pre-gyp ERR! install response status 404 Not Found on https://github.com/marudor/libxmljs2/releases/download/v0.29.0/node-v115-darwin-arm64-unknown.tar.gz
npm error node-pre-gyp WARN Pre-built binaries not installable for libxmljs2@0.29.
【TypeScript】実はクロージャ外で型ガードしてもクロージャ内部では型判定の結果が無効化されていた
# 問題!!
以下コードを実行すると何が出るでしょうか!?
“`tsx
function getUrls(url: string | URL, names: string[]) {
if (typeof url === “string”) {
url = new URL(url);
}return names.map(name => {
url.searchParams.set(“name”, name)
return url.toString();
});
}console.log(getUrls(“http://localhost:8080”, [“test”]))
“`## 答え!!
クロージャ内で引数urlの型が分からないのにURL型のメソッドを使おうとしてエラーになります。
つまり型判定の結果が無効化されちゃっています…..
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5
AmplifyのNodeのVersionを自動で指定する方法について解説
## 概要
AmplifyのNodeのVersionをコンソール画面から手動で変更するのは手間なので
– amplify.ymlにNodeのversionを直接記載する方法
– .nvmrcファイルを使って指定する方法
– voltaをAmplify内にインストールして指定する方法 <- オススメ の3つについて解説したいと思います ## 前提 - 今回はバージョン20.10.0を例に解説します ## ディレクトリ構成 ``` tree ├── .gitignore ├── Dockerfile ├── README.md └── application ├── src ├── next-env.d.ts ├── next.config.js ├── package-lock.json └── package.json ``` ## amplify.ymlに直接記載する方法 以下のようにnvmを使って使用したいNodeのバージョンを ``` nvm install 20.10.0 nvm use 20.10.0 ``` の順で直接指定する
【JavaScript】ESMとCJSの違い
調べた範囲の📝です。マサカリ歓迎しております_(´ཀ`」 ∠)_
# ざっくりと
ESM(Ecma Script Module):モダン(新しい)。ブラウザはこちらのみ。Node.jsも対応済み。
CJS(Common JS Module):Node.jsの伝統的なモジュールシステム。
# Node.js においてファイル名
– `.mjs` ファイル
– 常にESM(Ecma Script Module)として扱われる
– `.cjs` ファイル
– 常にCJS(Common JS Module)として扱われる`package.json`の`”type”`フィールド
– `”type”: “module”`
– そのディレクトリ内の`.js`ファイルがESMとして扱われる
– `”type”: “commonjs”`
– そのディレクトリ内の`.js`ファイルがCJSとして扱われるモジュールの読み込みメソッド
– `import`
– 非同期的
– 拡張子を明示する(`import ‘./module.js’`)
– ESM・CJSともに読
自作 Cisco Unified IP Phone Services Application を Apache Bench にかけながら改良する
# はじめに
これは[前回の記事](https://qiita.com/CIB-MC/items/b046c23014203b704655)からの続きです。とりあえずやっつけで Cisco Unified IP Phone Services Application (長い) を作ってみましたが、アクセスがあるたびに Node.js で表示用の画像を作ってるのでパフォーマンスが気になります。
ほら、もしかしたら数百人いる環境で使われるかもしれないし。(などと)# テスト先環境
– ProLiant TM200 (Intel(R) Xeon(R) CPU D-1518) から 仮想2コア
– Debian 12.4
– Node.js v18.19.0# Apache Bench で計測してみる
– リクエスト総数: 10000
– 同時リクエスト数: 200
– Lengthエラー報告: 無効※ すなわちコマンドとしては `ab -n 10000 -c 200 -l テスト先URL`
※ Lengthエラー報告を無効にしているのは、アクセスするタイミングでエオルゼア時間