- 1. 【備忘録】nodenvでNode.jsのバージョンが切り替わらない
- 2. 寺社巡りの管理ページを作った
- 3. 【TypeScript】画面表示までの仕組みを図解で理解する
- 4. nohupでnodeがうまく実行出来なかった時
- 5. Proto : JSツールチェインのバージョンマネージャ
- 6. DiscordのWebhookを使ってNode.jsから画像をPOSTする
- 7. nodenvでNode.jsをバージョン管理する
- 8. 札幌市のOpen Dataにアクセスしてみませんか?
- 9. Arduino と node.js で通信してみる
- 10. Node-REDのノードをつくる手順
- 11. Node.jsのバージョン管理ツールを調べてみた
- 12. GCP Cloud Bigtable機能と実装
- 13. Nuxt.jsのv2でsymbol-sdk@3.1.0を使用してトランザクションを送信してみる
- 14. PM2をブラウザから管理する
- 15. webpackでバンドルしてブックマークレットを作ってみた
- 16. 2STEPでNode.jsのプログラムをEXE化する方法
- 17. すぐに出来る!TypeScript実行環境構築
- 18. LambdaからのLambda呼び出し、Instanaでどう見える?
- 19. opnizを使ってみた
- 20. Node.js のインストール方法
【備忘録】nodenvでNode.jsのバージョンが切り替わらない
# 経緯
vueでプロジェクトを作成しようとしたら、failedになりました。
“`shell
% vue create sample-project
error eslint-plugin-vue@8.7.1: The engine “node” is incompatible with this module. Expected version “^12.22.0 || ^14.17.0 || >=16.0.0”. Got “14.16.1”
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
ERROR Error: command failed: yarn
Error: command failed: yarn
at ChildProcess.(/Users/xxx/.config/yarn/global/node_modules/@vue/cli
寺社巡りの管理ページを作った
よく神社やお寺をめぐっているのですが、行ったことのある場所を備忘録として残しておこうと思い、管理ページを作成しました。
特に特別な機能を使っておらず、今まで習得した技術の詰め合わせです。(完全に自分用です ^_^;)こんな感じのページです。
行ったところのある場所にマーカーを表示させるようにしています。数が多くなってきたので、都道府県でフィルタリングできるようにしました。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/c458fee2-afec-cb4b-092b-98c513d1a720.png)
地図の描画にはLeafletを使っています。
マーカーをクリックすると、詳細情報が表示されるようにしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/8457b1e5-8e19-4736-6942-fdd6aaf1c01c.png)
登録は、別の
【TypeScript】画面表示までの仕組みを図解で理解する
# はじめに
先日、下記動画を用いてTypeScriptを勉強したときに、そもそもどうやってTypeScriptで書いたコードを画面で表示させるのか??といった概念理解が難しいなと感じました。勉強する前に、TypeScriptを用いたソースコードを実務で眺めていたのですが、仕組みをほぼ理解していなかったため、「なぜwebpackやNode.jsを途中で使っているのか?」「bundleって何?」など疑問が多く出ていました。
そのため、TypeScriptで書いたコードの画面表示方法(build手順)を図解形式でまとめました。皆さんの理解の一助になれれば幸いです。参考動画:https://www.youtube.com/watch?v=qSHlXcSces8
# 画面表示までの仕組み
TypeScriptファイルを作成して画面を表示させるまでの流れは以下のようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3661690/2d3f0922-eb82-d5e1-2344
nohupでnodeがうまく実行出来なかった時
## 注意
node.js及びnpmを導入している前提で書きます。
あくまでUbuntu初心者が書いてます
ご指摘等はお手柔らかにお願いします。
## 最初に
自分の環境はこんな感じです。
Contabo VPS
Ubuntu 20.04.6LTS
# 自分の場合
Ubuntuでプログラムを常駐させようとして以下のコマンドを実行したんですがターミナルを閉じると終わっちゃうんです
“`console
$ nohup node app.js &
“`
# 対処法
自分がとった対処法は**foreverを使う**です### foreverをインストール
“`console
$ sudo npm install forever -g
“`### foreverを使って起動
> cdを忘れずに!
“`console
$ forever start app.js
“`
これで起動できたかと思います。
## 補足
#### リスト
“`console
$ forever list
“`
#### ストップ
“`console
$ forever stop <リストの番号>
Proto : JSツールチェインのバージョンマネージャ
https://zenn.dev/asip2k25/articles/d8962abf6333f3
DiscordのWebhookを使ってNode.jsから画像をPOSTする
以外とまとまって無かったのでメモ。
DiscordのAPIを使うとクライアントキーとか発生して面倒なのでWebhookの仕組みだけ使って画像を送ってみます。Gyazoとかに上げつつURLをシェアするパターンもありそうですが、今回は直アップロードとなります。
## テキストを送る場合
Fetchでテキストを送るときはこんな感じです。
https://qiita.com/n0bisuke/items/d6970e180355ce0e2fdc
## Fetchのmultipart/form-dataで画像をポストする
https://github.com/otoneko1102/discord-webhook/blob/main/index.js#L17C40-L17C40
こちらのサンプルを見るとmultipart/form-dataを使ってポストしてました。
BloB指定になる模様なのでNode.jsからやる場合はfsモジュールで読み込みます。
`screenshot.png`という名前のファイルが同じ場所にあるイメージです。
“`ts
‘use strict’
nodenvでNode.jsをバージョン管理する
# はじめに
フロントエンド開発の機会が増えてきたので、知識整理も含めて簡単にまとめてみます。nodenvを使用すると、どこでどのバージョンを使用するといったバージョン管理が出来るようになります。
# nodenvをインストール
nodeenvは[Homebrew](https://brew.sh/)を使ってインストール出来ます。“`shell
$ brew install nodenv
“`インストールが完了したら、nodenv自体とnode.jsのバージョンを確認してみます。
nodenv自体のバージョン
“`shell
$ nodenv -v
nodenv 1.4.1
“`node.jsのバージョン
“`shell
$ node -v
v14.16.1
“`## インストール済のNode.jsを確認する
versionsサブコマンドでインストール済のNode.jsを確認出来ます。“`shell
$ nodenv versions
* system => v14.16.1 (set by /Users/xxx/.nodenv
札幌市のOpen Dataにアクセスしてみませんか?
## DATA-SMART CITY SAPPORO
>一般財団法人さっぽろ産業振興財団は、札幌圏地域データ活用推進機構(SARD)の理念と機能を継承し、市民生活の利便性向上や、新たなサービス創出による経済の活性化、行政保有データの活用が容易になることによる行政の信頼性や透明性の向上に資するため、圏域で発生し官民が保有する様々なデータ(いわゆる「官民データ」)を協調して利活用できる環境を整備し、官民がデータ利活用を促進する「データの地産地消」の実現に向け事業を推進しています。
引用:https://data.pf-sapporo.jp/about_site/`DATA-SMART CITY SAPPORO`という[プラットフォーム](https://data.pf-sapporo.jp/)から、官民データにアクセスできるとのことなので、データアクセスを行う`NPM package`を作成してみました。
## 開発手順
手順自体は、以前公開した[投稿](https://qiita.com/i2i3i/items/3938aacc87ac66a119f5)に載せているので、もし気
Arduino と node.js で通信してみる
1.はじめに
Arduino UNO と node.js 間で、シリアルポート経由の通信を行うサンプルは、たくさんありますが、試しにやってみると、「serialport.parsers.readline」がエラーになりました。
調べてみると、serialport の使い方が変わっているようです。
サンプルを書き直して動作するようにしたので、紹介します。
なお、すべての環境や状況で動作を保証するものではありません。2.環境
下記のとおり、環境を構築しました。
① node.js
専用ページからダウンロードして、インストールする。② 作業フォルダ作成
下記フォルダを作成する。
“`
c:\node
“`
③ node_modules
コマンドプロンプトを起動し、作業をカレントフォルダにした後、モジュールを読み込む。
“`
cd c:\node
npm install socket.io
npm install serialport
npm install express
“`3.ソースコード
メッセージを連携するためのソースコードを作成
Node-REDのノードをつくる手順
本記事は、2024年1月5日に開催した下記「Node-REDのノードを作るハンズオン」イベントの資料です。
Node-REDのコントリビュータの横井一仁です。今回は、[公式サイトに掲載されているサンプルノード](https://nodered.jp/docs/creating-nodes/)をもとに、Node-REDのノードを自作する手順について説明します。
現在、Node-REDは月あたり15万回ダウンロードされており、急速に普及しています。また、[reTerminal DM](https://qiita.com/kazuhitoyokoi/items/ecf60f30a15457d48c2b)などの産業向けRaspberry Piの標準ソフトウェアにもなっています。Node-REDが普及が進んでいることの理由の1つとして、「ノードを自由に登録できる」ことによるコミュニティの力が影響していると考えます。現在、[フローライブラリ](http://flows.nodered.org)には、約5000個のノードが登録されており
Node.jsのバージョン管理ツールを調べてみた
## 動機
[JavaScript Primer](https://jsprimer.net/use-case/setup-local-env/)で公開されているTODOリストを作りたいと思ったから
そこで、Node.jsのインストールが必要ということがわかった
少しNode.jsを調べるとバージョンが複数あることが判明
Pythonをやっていたときにバージョン管理をせずに痛い目にあったことを思い出し、調査を始めた## 参考にした記事
– [Node.jsのバージョン管理ツールを改めて選定する【2021年】](https://qiita.com/heppokofrontend/items/5c4cc738c5239f4afe02)
– 河童 エクマさん執筆の記事
– 技術選定の方法から学べる、最もお世話になった記事
– [WindowsでNode.jsバージョン管理ツールをどれにするか](https://zenn.dev/longbridge/articles/ef1cbd17f2f64c)
– piyokoさん執筆の記事
– [Mac→Windowsに
GCP Cloud Bigtable機能と実装
# GCPのCloud Bigtableの概要と機能
## 概要
Google Cloud Platform(GCP)のクラウドデータベースサービスであるCloud Bigtableは、大規模なデータセットをリアルタイムで処理するための高性能なデータベースです。Apache HBaseデータベースのモデルに基づいており、可搬性や拡張性、高可用性を提供します。## 機能 / 詳細
以下にCloud Bigtableの主要な機能と詳細を示します:### 1. スケーラビリティ
Cloud Bigtableは、十億を超えるレコードとペタバイト単位のデータを効率的に処理できるスケーラブルなデータベースです。データマスターとリージョンサーバーと呼ばれるノードによって構成され、自動的に拡張および縮小します。### 2. ヘネシーに基づく分散設計
Cloud Bigtableは、Googleのヘネシーと呼ばれる分散ファイルシステムに基づいています。この設計により、高速なデータの読み込み・書き込みが可能で、データの分散処理も容易になります。### 3. データモデリング
Cloud
Nuxt.jsのv2でsymbol-sdk@3.1.0を使用してトランザクションを送信してみる
# はじめに
以前、symbol-sdk@3を使用してWebアプリを作ろうとした際に、Next.jsならうまくいくことがわかりました。このアプリでは、Webpackを使っているため、他のWebpackを使っているアプリならうまく動かせるんじゃないかと思いました。
そこで今回は、Webpackを使用しているNuxt.jsのv2でやってみようと思います。
# 手順
それではプロジェクトを作っていきます。プロジェクト名は`nuxt2`です。
“`shell
$ npm init nuxt-app nuxt2
“`いろいろオプションを選択します。今回は以下のようにしました。
“`shell
create-nuxt-app v5.0.0
✨ Generating Nuxt.js project in nuxt2
? Project name: nuxt2
? Programming language: JavaScript
? Package manager: Npm
? UI framework: None
? Template engine: HTML
? Nuxt
PM2をブラウザから管理する
npmのpm2-guiが動かなくなっているような気がするので、自作しました。
ブラウザからpm2で管理するプロセスに対して以下ができるようにします。・プロセスの一覧表示
・プロセスの詳細表示
・プロセスを起動・停止
・out/errのログ参照・ファイル取得このようなWebページを作ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/c9286b95-0f78-248d-0751-329b3c6e1d03.png)
ソースコードもろもろはGitHubに上げておきました。
poruruba/pm2_console
https://github.com/poruruba/pm2_console
# pm2のプロセスの構成
pm2の定義ファイルには管理したいアプリのプロセスの定義に加えて、今回作成するプロセス管理用のアプリも定義しておきます。
プロセス管理用のアプリと、管理したいプロセスのアプリを1つにすると、プロセスを停止した時点でプロセス管理用のアプ
webpackでバンドルしてブックマークレットを作ってみた
## はじめに
ブックマークレットを2回クリックするのを1回のクリックにしようと思って、2つのブックマークレットのファイルを1つのファイルにしました。そうしたら「保守性が下がった」と思いました。なぜなら異なる機能で別々のファイルに分かれていた関数が1つのファイルに入ったからです。その対策としてwebpackでバンドルすることで別々のファイルから1つのブックマークレットを作る方法を調べて作ってみました。
## 本記事の対象者
– webpackを使って複数ファイルをバンドルして1つのブックマークレットを作る方法を知りたい方。
– ブックマークレットの規模が大きくなった方。## 調べたURL
webpackの公式ウェブサイトを読みました。次のURLが役に立ちました。
| タイトル | URL |
| —————- | ————————————————— |
| Concepts
2STEPでNode.jsのプログラムをEXE化する方法
# Node.jsでEXE化!?
今回はNode.jsで作ったプログラムをEXE化する方法について書いていきます。
不備等ございましたらコメントにてお手柔らかに指摘お願いします。## 注意
この記事はNode.jsとnpmをインストールしている前提で書いています。# STEP1: Nexeをダウンロード
以下のコマンドを実行してください
“`console
$ npm -g install nexe
“`
# STEP2: Nexeを使ってExe化
“`console
$ nexe -i ファイル名.js -o ファイル名.exe -t windows-x64-14.15.3
“`
# 最後に
Node.jsやTSに関してのブログを他にもいくつか書いているので良かったらご覧ください
すぐに出来る!TypeScript実行環境構築
# TypeScriptの実行環境構築
この記事では素人ながらTypeScritpの実行環境構築に関してまとめていきます。
不備等ございましたらコメント等で優しく教えてください。# 注意
大前提としてNode.jsとnpmが導入されているものとします。
導入していない方は導入をお願いします。
TS→TypeScript# まず最初に
“`console
$ npm install -g typescript @types/node@16 ts-node
“`
このコマンドを実行してください
以下のものがインストールできます
| 名称 | 内容 |
|:———–|————:|
|typescript|TSのコードをJSに変換するための基本ライブラリ|
|@types/node@16|型情報を提供するためのライブラリ|
|ts-node|TSのコードを直接実行するためのライブラリ|# 1: tscで実行
“`console
$ tsc ファイル名.ts
“`
このようにやると同じファイル名のjsファイルが生成されると思いますので、その後は普
LambdaからのLambda呼び出し、Instanaでどう見える?
# はじめに
以前、こちらの記事を投稿しましたが、その後さらにLambdaから別のLambdaを呼び出した際、どの様にInstana側で見えるのか?ちゃんとトレースは追えるのか?を検証する機会があったので記事に起こしました。
https://qiita.com/LgmQue/items/a1e847b9198ffe33846f
:::note warn
前回はPythonでしたが、今回はNode.js(14.x)で試しています。
:::では早速いきましょう
# 子となるLambdaの準備
## Lambdaの作成
関数名を任意のもの、ランタイムを `Node.js 14.x` に設定し、[関数の作成]をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/118463/0b8a1ba2-0d3e-ae55-5d57-e3d5340fde9c.png)このLambdaが呼び出されるたびランダムに正常/異常のレスポンスおよびログ出力を行うように上書きします。
opnizを使ってみた
IoT界隈で話題になっている [opniz](https://github.com/miso-develop/opniz) を使ってみました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2267750/676f03ab-8ce8-c025-9603-4921b8a8050d.png)
opnizを使うとM5Stack系デバイスを遠隔に開発できるとのことで、前から気になってました。今まではArduinoで開発してたのですが、コードを書き換えるたびにデバイスを繋いで転送してたのですが、opnizならばエディタでコードを編集したらすぐに反映されるので便利です
# ハンズオン
今回はこちらにある記事に従ってopnizを動かしてみました。
https://qiita.com/miso_develop/items/e5eba99cfe8593c7ff64## 作業の流れ
大雑把にこれだけのコマンドで完結するので、すごくシンプルに出来ていると思いました。npmでインストール出来るのは良
Node.js のインストール方法
# はじめに
Qiita CLI の利用にあたり、Node.js をインストールする事になったので手順をStep by Step で記録しておきます。
本記事は出来るだけエンジニア以外の方にも分かりやすいように執筆していきます。エンジニアの方にはかえって回りくどい事もあるかよ思いますが、ご承知おきください。# 環境
– Windows11# インストールしたバージョン
– node-v20.10.0-x64# インストール手順
1. [Node.js](https://nodejs.org/en/download) のHPにアクセスし、インストーラーをダウンロードします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/0d2a8fe4-4651-fbfd-ea10-fb644a09768b.png):::note info
システムの種類はバージョン情報から確認できます。
![image.png](https://qiit