- 1. `npm ERR! code ECONNRESET`が出たので対応した。
- 2. NodeJS: プロファイリング
- 3. prisma db pull→prisma migrate devに失敗する
- 4. TypeScriptのコードが変更されたら自動で再実行させる
- 5. LIFFスターターアプリを試したときのエラーについて
- 6. Ubuntu22.04(Linux)に Node.jsをインストール
- 7. javascriptフレームワークの環境構築
- 8. AIレビューについて(導入方法、使用感、料金)
- 9. npmからpnpmに移行するときビルドが通らない
- 10. SpringBootで包み込むVue.js開発環境 カンタン構築 SPA編
- 11. TypeScriptとNode.jsを使った効率的なAPI開発環境の構築
- 12. Node single executable applicationsでnpmパッケージを使う
- 13. synology NASにコンテナを立ててみた
- 14. Node.js(Express)とRenderでLINEログイン機能を実装する
- 15. 2025 年 3 月での files.upload API 廃止と移行方法について
- 16. 【Hack The Box】Codify【Writeup】
- 17. 【解決】Node.js20系にホットリロード導入しようとしたらめちゃくちゃハマった
- 18. JavaScriptで長い配列を長さnの小さい配列に分割するワンライナー
- 19. Node.jsプロジェクトでの環境変数の扱い方
- 20. 旅した国・街をマップで表示できるサイトを作った。
`npm ERR! code ECONNRESET`が出たので対応した。
# 前置き
とても初歩的な内容ですが、初歩的過ぎて逆に情報が見つかりずらいやつでしたので、備忘録的にメモしておきます。
***
vueを使ってWebアプリを作っている際に、プロジェクト内にFirebaseをinstallしようとしたらエラーが出ました。
エラー文はこちら。
“`
$ npm install firebase //このコマンドに対して下記のエラーnpm ERR! code ECONNRESET
npm ERR! syscall read
npm ERR! errno ECONNRESET
npm ERR! network Invalid response body while trying to fetch https://registry.npmjs.org/@firebase%2fapp-types: read ECONNRESET
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a
NodeJS: プロファイリング
# NodeJSとV8のチューニング
NodeJSの処理のほとんどはV8に依存しているため、V8の状態をプロファイリングすることでパフォーマンス上の問題などを特定できる場合があります。## JITプロファイリング
プロファイラの実行は次のとおりです。
“`
$ NODE_ENV=puroduction node –prof app.js
“`これにより、JITコンパイルのイベントが一連のティックとして記録されます。
“`
code-creation,LazyCompile,0,0x2d5000a337a0,396,”bp native array.js:1153:16″,0x289f644df68,~
code-creation,LazyCompile,0,0x2d5000a33940,716,”hasOwnProperty native v8natives.js:198:30″,0x289f64438d0,~
code-creation,LazyCompile,0,0x2d5000a33c20,284,”ToName native runtime.js:549:1
prisma db pull→prisma migrate devに失敗する
## Prismaとは
PrismaとはNode.jsのORマッパーの1つです。詳しい解説は他記事に譲りますが、下記2つの機能も持っています。– **Introspection**
`npx prisma db pull`
接続しているRDB上のスキーマを取得して、Prisma上のmodelファイルであるschema.prismaファイルにpullできます。– **Prisma Migrate**
`npx prisma migrate dev`
schema.prismaファイルの変更を接続しているRDB上のスキーマに反映できます。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2991958/89fbcb72-c1ee-a27e-8846-3f59cbd48c1c.png)
## prisma db pull→prisma migrate devに失敗
– 既存のMySQLデータをpullし、そのままprisma migrate devしようとすると失敗しました。:
TypeScriptのコードが変更されたら自動で再実行させる
皆さんはTypeScriptの学習であったり、すぐにコードの挙動を確認したい時はどうしてますか?公式のプレイグラウンドを使う方が多いのでしょうか。今回は普段使っているエディターでそれに似た環境を作ってみたのでご紹介します。コードに変更があったら自動で再実行させるため、`nodemon`と`ts-node`を使いました。
**nodemon**
ファイル変更を検知してアプリケーションを再起動するツール**ts-node**
REPLも備えた、TypeScript実行ツールhttps://www.npmjs.com/package/nodemon
https://www.npmjs.com/package/ts-node
### 動作環境
– macOS Sonoma
– Node.js 20.10.0
– TypeScript 5.4.5
– nodemon 3.1.0
– ts-node 10.9.2### ディレクトリ構成
“`
myApp/
├── src/
│ └── index.ts
├── package-lock.json
└── pac
LIFFスターターアプリを試したときのエラーについて
### はじめに
LIFF(LINE内ブラウザで動くWebアプリ)のスターターアプリを試した時にエラーが出たので、それについての備忘録です### 実行環境
– OS: macOS 13.6.6
– Node.js: 18.6.1
– yarn: 1.22.22### エラー内容
“`
Error: error:0308010C:digital envelope routines::unsupported …
“`
下記公式を参考に進めていくと`yarn dev`で上記のエラーが発生しましたhttps://developers.line.biz/ja/docs/liff/trying-liff-app/
### 対応
検索してみたところ、Node.jsがバージョン的に対応していなさそうなことがわかりました
そのため、公式に書いてある動作環境を参考に、バージョン管理ツール「n」を使ってNodeのバージョンを16.13.1へ変更してみることにしました– Node.js: 18.6.1 → 16.13.1
変更後に`yarn dev`を試してみると無事に実行すること
Ubuntu22.04(Linux)に Node.jsをインストール
以前までは以下の記事と同じ方法で行っていました。
[【2023年4月版】Ubuntu に node.js と npm を入れたい(バージョン管理も)](https://qiita.com/nouernet/items/d6ad4d5f4f08857644de)
具体的にはnodeをaptでインストールし、nというnode.js自体のバージョン管理ツールでnode.jsをバージョンアップし、nを削除という方法でした。
ただ、今回公式を見に行ってみると公式が丁寧になっていたので記事にしてみました。
https://nodejs.org/en/download/package-manager
概要としては、nvmというバージョン管理ツールをcurlにて直接インストールし、node.jsを指定のバージョンでインストールする、という手順のようです。
抜粋というか、ほぼコピペですが、コマンドは以下の通りです。
“`shell:bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.s
javascriptフレームワークの環境構築
##### この記事では主にHomebrewを使用した環境構築方法になります。
#### node.jsの環境構築
“`
# node.jsのバージョン管理のためのnodebrewをインストール
$ brew install nodebrew# nodebrewのバージョン確認
$ nodebrew -v# node.jsのインストール
$ nodebrew install-binary stable## 下記のようなエラーが出た時は、、、、
Fetching: https://nodejs.org/dist/v20.3.0/node-v20.3.0-darwin-arm64.tar.gz
Warning: Failed to create the file
Warning: /Users/username/.nodebrew/src/v20.3.0/node-v20.3.0-darwin-arm64.tar.gz
Warning: : No such file or directory# エラーの場合は下記のコードを実行後に最インストール
$ mkdir -p
AIレビューについて(導入方法、使用感、料金)
## 概要
弊社(株式会社コムニコ)でレビュー効率を上げるために、AIレビューの導入を検討しました!
今回ご紹介するのはPR-Agentというライブラリで、無料範囲で十分に成果を上げてくれます。設定方法、料金、実践的な使用感を具体的に解説しているので、さらっと読んでみてください!
Github ActionとBitBucket Pipelineで設定するYAMLテンプレートもご用意しております。
**読了時間目安は約5 ~ 10分**です。
## 目次
– [(3行で)弊社について](#3行で弊社について)
– [PR-Agentでできること](#pr-agentでできること)
– [各機能のレビュー](#各機能のレビュー)
– [前提](#前提)
– [`/describe`について](#describeについて)
– [`/review`について](#reviewについて)
– [`/improve`について](#improveについて)
– [`/ask`について](#askについて)
– [OpenAIにかかったお値段](#
npmからpnpmに移行するときビルドが通らない
場当たり的に解決できたのでメモ。
詳細が分かる方は編集リクエストかコメントください。🙇## TL;DR
“`sh:pnpm install
pnpm install –shamefully-hoist
“`## 環境
**OS**: Windows 11 Home 23H2
**Laravel**: 8.83.27
**Node.js**: v12.19.0
**pnpm**: 5.18.10## 雑な説明
パッケージのインストール時、シンボリックリンクに対応するオプションを指定すると`node_modules/`以下が`npm install`のファイルパスとほぼ同じになる。
SpringBootで包み込むVue.js開発環境 カンタン構築 SPA編
# はじめに
以前、Spring Boot に Vue.js を統合した開発環境の構築手順を説明する記事を書いたのですが、できることをひとつずつ増やそうの精神で、ほぼ同じ構成の SPA バージョンにも挑戦してみました。
https://qiita.com/hiroe-mkk/items/f065a27e924f4d21a715
記事中のソースコードは以下のリポジトリから参照できます。
https://github.com/hiroe-mkk/springboot-vue-spa-tips
誤りなどがありましたら、ご指摘いただけますと幸いです。
# 環境
– Java 17
– Spring Boot 3.2.2
– gradle-node-plugin 7.0.1
– vue 3.4.21
– vite: 5.2.0
– vue-router: 4.3.0
– Node.js 21.6.1
– IntelliJ IDEA 2023.3.3 (Community Edition)
– Windows 11 Pro# プロジェクト構成概要
**前回と同じ点**
– バ
TypeScriptとNode.jsを使った効率的なAPI開発環境の構築
TypeScript, Node.js, Expressを用いたAPI開発は非常に一般的であり、開発環境と本番環境で異なるデータベースを使うことにより、効率的な開発フローが可能になります。ここでは、SQLiteを開発環境で、MySQLを本番環境で使用するセットアップ方法について説明します。
### 環境情報
このセットアップは、以下のバージョンのNode.jsとnpmが前提となります。
– Node.js: v20.12.1
– npm: 10.5.0### 1. プロジェクトの初期設定
まずは、Node.jsプロジェクトの基盤を作成し、必要なライブラリをインストールします。
“`bash
mkdir my-api-project
cd my-api-project
npm init -y
npm install express typescript ts-node @types/node @types/express
npm install sqlite3 mysql2
npm install typeorm reflect-metadata # ORMライブラリ
Node single executable applicationsでnpmパッケージを使う
[Node single executable applications](https://nodejs.org/api/single-executable-applications.html) を使うと簡単にNodeのスクリプトをexe化できる。
しかし、その名の通り、exe化できるのは1つのJavaScriptのみ❗
つまり、 `import` で自作ライブラリを使うことはもちろん、npmパッケージも使えないのだ❗
なんて限定的な機能なんだ❗クソッ❗…とまぁ、分かってる人はこの時点で「アホだな〜」と思われてると思う。
そう、解決策は簡単で、バンドラーを使えば良い。
WebPackとか、esbuildとか、そういうやつ。
バンドラーは複数のJavaScriptファイルを1つにまとめてくれるので、
SEAを作るときにはもってこいってわけだね。っていうか、ドキュメント↓にそう書いてあるんだわ。ちゃんと読もう。
> Node.js supports the creation of single executable applications by allowing the
synology NASにコンテナを立ててみた
前回synologyのサーバーにapiを立てて、「hello world!」を返してみました。
今回は、container managerを使用してコンテナを立ててみようと思います。大まかな流れ
1.container managerのインストール
2.nodeのレジストリをダウンロードする
3.コンテナの設定をして動かす### container managerのインストール
パッケージセンター>すべてのパッケージから「container manager」をインストールしておいてください。![スクリーンショット 2024-04-12 19.37.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3552209/e1709785-e350-9140-562c-4d3d131e9bba.png)
### nodeのレジストリをダウンロードする
container managerを開くと、左側のタブに概要、プロジェクト、イメージ、レジストリ、ネットワーク、ログが出ていると思います。
この
Node.js(Express)とRenderでLINEログイン機能を実装する
## はじめに
[前回](https://qiita.com/course_k/items/4c7faedf11723af9bb6e)はLINEが用意してくれているデモアプリをつかって、LINEログイン機能を試しました。
今回は、Node.jでの実装を通して、内部でどのような処理をしているのかを確かめます。### 前提
本記事は以下のことは完了している想定で進めます。
* Node.jsをインストール済であること
* GitHubアカウントをもっていること
* Renderアカウントをもっていること
* LINE関連の設定が終わっていること(設定詳細は[こちら](https://qiita.com/course_k/items/85bf9cfab971cb5b97ee#line%E9%96%A2%E9%80%A3%E3%81%AE%E8%A8%AD%E5%AE%9A))
* LINEログインチャネルの作成方法がわかっていること(作成方法は[こちら](https://qiita.com/course_k/items/4c7faedf11723af9bb6e#line%E3%83%AD
2025 年 3 月での files.upload API 廃止と移行方法について
こんにちは、Slack の[公式 SDK 開発](https://github.com/slackapi)と日本の Developer Relations を担当している瀬良 (@seratch) と申します 👋
この記事では、本日発表された [files.upload API](https://api.slack.com/methods/files.upload) の deprecation (非推奨) と移行方法について日本語で解説します。アナウンスメント(英語)は、以下のページでご確認いただけます。
https://api.slack.com/changelog/2024-04-a-better-way-to-upload-files-is-here-to-stay
## files.upload API 廃止までの流れ
[files.upload API](https://api.slack.com/methods/files.upload) は、2025 年春に廃止されます。それまでのスケジュールは以下の通りです。
1. 2024 年 5 月 8 日以降、新しく作成
【Hack The Box】Codify【Writeup】
# 初めに
どうも、クソ雑魚のなんちゃてエンジニアです。
本記事は ___Hack The Box___(以下リンク参照) の「___Codify___」にチャレンジした際の ___WriteUp___ になります。
※以前までのツールの使い方など詳細を書いたものではないのでご了承ください。___※悪用するのはやめてください。あくまで社会への貢献のためにこれらの技術を使用してください。法に触れるので。___
https://www.hackthebox.com/
# 初期探索
## ポートスキャン
“`bash
┌──(root㉿kali)-[~/work]
└─# rustscan -a 10.10.11.239 –top –ulimit 5000
.—-. .-. .-. .—-..—. .—-. .—. .–. .-. .-.
| {} }| { } |{ {__ {_ _}{ {__ / ___} / {} \ | `| |
| .-. \| {_} |.-._} } | | .-._} }\ }/ /\
【解決】Node.js20系にホットリロード導入しようとしたらめちゃくちゃハマった
# 起こったこと
Node.js(Express)環境でtypescriptを使ったAPIの開発環境でホットリロードを実装しようとしたところ、めちゃくちゃ詰まった。
最初に試したことはts-nodeとnodemonの組み合わせ。ts-nodeがtsファイルを読み込めず、ずっとエラーを吐いていた。。。以下、解決した方法と環境
## 実行環境
– Node.js 20.0.0
– express 4.19.2
– typescript 5.3.3
– nodemon 3.1.0
– tsx 4.7.2## 解決方法
結論、ts-nodeではなく、tsxをnodemonと一緒に利用することで解決した。
package.jsonのstartコマンドを記載するだけ。tsconfig.jsonなど他のファイルの変更は不要。“`
yarn add -D tsx
“`“`
“scripts”: {
“test”: “echo \”Error: no tes@t specified\” && exit 1″,
“start”: “nodemon –exe
JavaScriptで長い配列を長さnの小さい配列に分割するワンライナー
# やりたいこと
例えば長さ12の配列を、
“`JavaScript:変換前
const src = [‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’, ‘May’, ‘Jun’, ‘Jul’, ‘Aug’, ‘Sep’, ‘Oct’, ‘Nov’, ‘Dec’]
“`
このように、
“`JavaScript:変換前
[
[‘Jan’, ‘Feb’, ‘Mar’],
[‘Apr’, ‘May’, ‘Jun’],
[‘Jul’, ‘Aug’, ‘Sep’],
[‘Oct’, ‘Nov’, ‘Dec’]
]
“`
長さ3など短い複数の配列に分割したいとします。これを実現するワンライナーを紹介します。# 答え(ワンライナー)
“`JavaScript:答え
const dst = Array(Math.ceil(src.length/n)).fill().map((_, i) => src.slice(n*i, n*(i+1)));
“`
– まず、`Math.ceil(src.length/n)`で分割数を求めます。例えば、長さ12を長さ3で分け
Node.jsプロジェクトでの環境変数の扱い方
# はじめに
Node.jsプロジェクトにおいて、環境変数の管理は非常に重要です。このブログでは、.env ファイルと globals.ts モジュールを使用して、環境変数を効率的に管理する方法について説明します。アプリケーションの設定情報をコードから分離することは、セキュリティのベストプラクティスとされています。特に、データベースの接続情報やAPIキーなどの機密情報は、公開されるべきではありません。.envファイルを使用することで、これらの情報を安全に管理し、異なる環境(開発、ステージング、本番)でのアプリケーションの動作を容易に切り替えることができます。
# ステップ 1: 環境変数の設定
.envファイルは、キーと値のペアで構成され、アプリケーションが実行される環境に応じて異なる設定を提供します。dotenvライブラリを使用することで、これらの環境変数をアプリケーションの起動時に読み込み、プロセスの環境変数として利用できるようになります。
“`.env
# okta credentials
SSH_USERNAME=”ssh-username”
SSH_PASSWORD=
旅した国・街をマップで表示できるサイトを作った。
行った国や街を登録してマップに表示できるサイトを作ったので、紹介します。
https://bokenmap.com
## イントロ
今回作ったのは、行ったことのある国と街を登録して、地図に表示することができるWebアプリケーションです。使い方としては、プロフィールページのリンクをSNSに載せたり、地図をiframeタグで他のサイトに埋め込むことを想定しています。
プロフィールページの具体例
[https://bokenmap.com/hikaru](https://bokenmap.com/hikaru)![](https://storage.googleapis.com/zenn-user-upload/1a137814df90-20240408.jpg)
*こういう感じの地図が作れる*[自分の個人ホームページに埋め込んでみた例](https://hikaruimai.vercel.app/travel)
## 課題
僕は旅行が好きなんですが、ウェブ上で「行ったことのある国」をパッと見せたい時に毎回困ります。ブログやSNSなどで自分の旅の経歴みたいなものを公開し