- 1. Reactに星評価UIを実装する
- 2. SequelizeのonUpdateはPostgreSQLで機能しない
- 3. Mongo リストの合計数、条件付き範囲のクエリー
- 4. Azure Static Web Apps(Node.js) で、ストリームなChatGPTを構築する
- 5. nvmコマンドでNodeのバージョンを簡単に切り替える方法
- 6. Next.jsをGitHub挟んでCloudflare Pagesにデプロイする
- 7. Node.jsとは何か
- 8. 【toio】toio.jsでサンプルプログラムを動かすまでの手順について
- 9. WSL Ubuntuにnodenvにinstallする方法
- 10. 同じexpressのプロセスでドメインごとに違うページを表示する
- 11. nodejsサーバーをsystemdに登録する!
- 12. Docker上で動かしているWebサーバーのログが見たい
- 13. [初心者向け]Nest.jsでSwaggerを使ってAPIドキュメントを自動生成する方法について徹底解説!便利なデコレータの使用方法も解説
- 14. SendGrid Webhookを用いて送信失敗メールをキャッチする
- 15. Lambda Node.js serverlessを使うほどでもないちょっとした関数を書きたいときのDocker環境を作ってみた
- 16. nodeでテンプレートエンジンっぽいものを作った
- 17. express-sessionとMemcachedでセッション管理する方法
- 18. Discord.jsでプログラムがエラーを吐いても起動させ続ける
- 19. Node.jsでGmailAPI認証設定
- 20. Node.js でタイプスクリプトを導入する早見表
Reactに星評価UIを実装する
## Reactに星評価UIを実装する
Reactで簡単に星評価UIを実装する方法を紹介します。この記事では、`react-icons`パッケージを使用して星のアイコンを表示し、`react-bootstrap`パッケージを使用してスタイリングを行います。
完成イメージ
![スクリーンショット 2024-03-19 053434.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3680988/974d1529-8a49-ae63-2de9-3df97d772c74.png)#### ユーザによる星評価:
– ユーザが星をクリックして評価を変更できます
– 通常はクリック可能な星アイコンを表示します#### 星評価表示:
– ユーザの評価を表示するだけであり、評価を変更することはできません
– 通常はクリック不可能な星アイコンを表示します### 1. `react-icons`のインストール
まず、`react-icons`パッケージをインストールします。
“`bash
npm ins
SequelizeのonUpdateはPostgreSQLで機能しない
## 今回、罠にハマった問題
データベースがPostgreSQL、ORMにsequelizeを使った環境で、migrate機能を使ってテーブルを作成しました。
データの更新日時を記録したかったので、updated_atのカラムを追加したのですが、UPDATE文を発行してもupdated_atは更新されませんでした。“` migration.js
updated_at: {
allowNull: false,
type: Sequelize.DATE,
defaultValue: Sequelize.literal(‘CURRENT_TIMESTAMP’),
onUpdate: Sequelize.literal(‘CURRENT_TIMESTAMP’)
}
“`(onUpdateがあるので日時は自動更新されそうな雰囲気ですが)
## 原因
PostgreSQLには、データの変更時に日時を更新する機能が備わっていない為、Sequelizeのmigrationファイルで設定してもデータベースには何も反映されていないと考えられます。## 解決
Mongo リストの合計数、条件付き範囲のクエリー
“`javascript:user.js
$project: {
_id: 1,totalQuestClearCount: {
$reduce: {
input: { $ifNull: [“$quests”, []] },
initialValue: 0,
in: {
$cond: [{ $eq: [“$$this.storyId”, 0], $eq: [“$$this.totalClearCount”, 1] },
{ $add: [“$$value”, 1] },
“$$value”
]
}
Azure Static Web Apps(Node.js) で、ストリームなChatGPTを構築する
# はじめに
ChatGPTなシステムを作るときに、Azure Static Web Appsは最善の方法の1つですが、これまではストリームができないという課題がありました。(.NETならできるんですが)と、つい最近以下のアナウンスが出ました。
[Azure Functions: Support for HTTP Streams in Node.js is now in Preview](https://techcommunity.microsoft.com/t5/apps-on-azure-blog/azure-functions-support-for-http-streams-in-node-js-is-now-in/ba-p/4066575)
これで、Node.JSのFunctionでStreamが扱えるようになったので、その動作をざっくり検証してみます。(Pythonも早くできるようになるといいですよねぇ)上記ブログにもありますが、以下の前提条件が必要です。古い場合は適宜更新してください。
> – Version 4 of the Node.js programmin
nvmコマンドでNodeのバージョンを簡単に切り替える方法
## 概要
– nvm(Node version manager)とは、Node を複数バージョン管理するためのユーティリティです
– この記事では、nvm を使用して Node のバージョンを追加・切り替方法について記載します
– [nvm](https://github.com/nvm-sh/nvm?tab=readme-ov-file#installing-and-updating)の GitHub をベースに記載しています
– バージョンを簡単に切り替えられことによって、異なるバージョンでの動作確認や、異なるバージョンでの開発が可能になります## 手順
1. nvm をインストールする
“`bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
“`
2. 環境変数を設定する
– 下記コマンドをそのまま実行する
“`bash
export NVM_DIR=”$([ -z “${XDG_CONFIG_HO
Next.jsをGitHub挟んでCloudflare Pagesにデプロイする
# はじめに
色々詰まったので解決までかかった内容を全て書いておきます。Cloudflare C3を使ってプロジェクトを構築し、あとからGitHubを挟んだデプロイに変更してみます。
詳しくは理解していないので間違っている点あるかもしれないです。https://developers.cloudflare.com/pages/framework-guides/nextjs/deploy-a-nextjs-site/
# 環境
* Ubuntu 22.04
* VirtualBox(PC自体はWindows 11を使用)
まず最初にPowershellを試して、次にWSLを使ってみたがどちらも失敗してしまった。WSLについてはUbuntuを使ったが、“`npm create“`を行うとCMD.exeが起動してしまい、なんやかんやよくわからなかった。
ということでVirtualBoxにした。関連するエラーは以下のリンクに示す。https://stackoverflow.com/questions/77152589/cannot-find-npm-on-appdata-ro
Node.jsとは何か
Node.jsに関連する、npm、nvmが似たような言葉ばかりで理解しづらい。
大体の環境系トラブルはここに集約する(と思っている)ので、ほぼ自分用にまとめてみることにしました。## 環境
– WSL 2
– Ubuntsu 20.04.6 LTS## Node.jsとは
Javascriptをサーバーサイドでも使えるようにしたもの。ブラウザ側、サーバー側、双方で同じ言語が使えると効率が良いためよく使われている。
ただ、主に私がRuby on Railsを学習する中でよく出てくるNode.jsの役割とは、開発環境の補佐的な役割として使っていることが多いです。
– Node
JavaScriptを実行するためのエンジン。– npm
Node.jsのパッケージを管理するためのツール。Node Package Managerの略。
npmを介して様々なパッケージをインストールできる。RailsでいうところのGemと同じような役割。– nvm
バージョン切り替えツール。Node Version Managerの略。
【toio】toio.jsでサンプルプログラムを動かすまでの手順について
## はじめに
「Node.jsって何?」というレベルのプログラミング初心者がtoioのJavaScriptライブラリで開発を始めるまでに、時間がかかったので、手順を備忘録としてまとめておきます。参考にして頂ければ幸いです。## 動作環境
Windows11
Node.js:v20.11.0
npm:10.2.4
yarn:1.22.21## 必要なもの
– Bluetooth USBアダプタ
Windowsで環境構築する場合、toio.jsが使用している「noble」ライブラリの関係で、内蔵Bluetoothではなく、**別途Bluetooth4.0 USBアダプタが必要**になります。
今回は、エレコムのアダプタを使用しましたが、問題なく動作しました。
[Bluetooth(R) USBアダプター LBT-UAN05C2](https://www.elecom.co.jp/products/LBT-UAN05C2.html)詳細は[nobleの前提条件](https://github.com/noble/noble?tab=readme-ov-file#wind
WSL Ubuntuにnodenvにinstallする方法
# WSL Ubuntuにnodenvにinstallする方法
WSL Ubuntuに[nodenv](https://github.com/nodenv/nodenv)をinstallする方法
## updateとupgrade
“`bash
sudo apt update && sudo apt upgrade -y
“`## nodenvのinstall
“`bash
git clone https://github.com/nodenv/nodenv.git ~/.nodenv
cd ~/.nodenv && src/configure && make -C src
# 環境変数の設定
echo ‘export PATH=”$HOME/.nodenv/bin:$PATH”‘ >> ~/.bashrc
echo ‘export PATH=”$HOME/.nodenv/bin:$PATH”‘ >> ~/.bash_profile
echo ‘eval “$(nodenv init -)”‘ >> ~/.bashrc
“`## pluginのinstall
同じexpressのプロセスでドメインごとに違うページを表示する
# はじめに
– expressでサーバーを起動
– example1.jpとexample2.jpで別のサイトを表示したい
– おなじNodeJSのプロセスで複数ドメインを扱う方法で悩んだ# 解決策
Routerというもので分岐ができるらしい
ドメインでも分岐できないか?
→使い方が正しいかわからないけど下のコードで解決!# コード
“` index.js
const express = require(“express”);
const app = express();// ドメインごとに読み込む
const domain1 = require(“./example1.js”);
const domain2 = require(“./example2.js”);app.use( (req, res, next) => {
// アドレスのホスト名(ドメイン)
var host = req.hostname;if( host == “example1.jp” ) {
// routerに飛ばす
domain1(req, res,
nodejsサーバーをsystemdに登録する!
# はじめに
– linuxにSSHを使って接続中
– コマンドでサーバーの起動・停止をしたい
– 再起動したときにサーバーを自動で起動するようにしたい!
– nodejsのサーバーをコマンドラインで起動していて、再起動するときに毎回`Ctrl+C`→`node index.js`はめんどくさい!# 1. systemdへの登録
nanoなどで下のファイルを作成して編集します
`sudo nano /etc/systemd/system/myNodeServer.service`“` sh: /etc/systemd/system/myNodeServer.service
[Unit]
# プログラムの名前
Description= Node.js Server[Service]
Type=simple
User=username
# nodejsの動いているディレクトリ
WorkingDirectory=/home/username/Desktop/node/
# 起動するためのスクリプトの配置先
ExecStart=/home/username/Desktop/nod
Docker上で動かしているWebサーバーのログが見たい
# 前提
– DockerはDocker composeを使用
– WebサーバーはNode.js + pm2# 結論
“`sh
$ docker compose logs [サービス名]
“`# ハマったとこ
Docker間で通信を行っている処理があり、その通信が失敗していたためその検証がしたかった。
しかし、Docker内でのログの出し方が分からず、余計な時間を割いてしまったため、記録しておく。### ハマった原因
– 自分がそもそもDockerで動いているNode.jsのログの見方を分かってなかった### 解決した経緯
– pm2を利用していることを知っていたので、pm2のログが出せることを知ったため– 最初に上記の方法でログが出せることを確認した
– `$ docker compose log`でも同じようにログを出せることがわかったhttps://matsuand.github.io/docs.docker.jp.onthefly/engine/ref
[初心者向け]Nest.jsでSwaggerを使ってAPIドキュメントを自動生成する方法について徹底解説!便利なデコレータの使用方法も解説
## 概要
Swaggerを使ってNest.jsのAPIのドキュメントを自動生成する方法について解説します## 前提
– Nest.jsのアプリケーションを作成済み
– APIを作成済## 必要なパッケージのインストール
@nestjs/swaggerをインストールします“`
npm install @nestjs/swagger
“`## Swaggerの設定
main.tsに以下のようにSwaggerの初期設定を行います
今回は127.0.0.1:8000/api/docsへアクセスするとSwaggerが起動します“`main.ts
import { NestFactory } from ‘@nestjs/core’;
import { SwaggerModule, DocumentBuilder } from ‘@nestjs/swagger’;
import { AppModule } from ‘./app.module’;async function bootstrap() {
const app = await NestFactory.c
SendGrid Webhookを用いて送信失敗メールをキャッチする
## はじめに
SendGrid APIを用いて送信したメールのうち、送信失敗したメールをキャッチしたかったので、方法を模索し実装しました。
実用性のあるメソッドだと思うので、記事として残そうと思います。## SendGridとは
サーバーを構築せずにAPIベースでメール送信をできるプラットフォームです。
導入はとても簡単です。詳しくは下記ページを参照。## Webhookとは
外部アプリケーション連携手段の一つです。
APIと異なり、こちらから通信を行うのではなく、外部アプリケーション側から情報を送ってもらいます。
API通信の場合はこちらから都度通信を行わないと情報を取得できません。したがって、外部アプリケーション側でトリガーを持っており、リアルタイムで情報を取得したいときにWebhookが有用です。
下記記事の説明がわかりやすかったです。https://qiita.com/soarflat/items/ed970f6dc59b2ab76169
## SendGridでのメール送信
SendGridでメー
Lambda Node.js serverlessを使うほどでもないちょっとした関数を書きたいときのDocker環境を作ってみた
## 概要
Lambdaにて小規模なコードを記載したい場合にちょっと楽できるようなDocker環境を作ってみました。
## 発端
小規模な処理(例えばSESのバウンス情報をSNSからLambdaを経由してSlack通知したい場合)をLambdaで使いたい場合、下記のようなジレンマがある。
– Lambdaのブラウザのエディタで書くのはなんかテンションが上がらない、普段から慣れてるエディタを使いたい。。。
– serverlessだとリッチ過ぎる、学習コストもかかる。。。
– 慣れてるエディタで書こうとしてローカルPCのNode.jsを使って書くと、複数の開発者がいる場合バージョン合わせが大変。。。Dockerならこの辺を一挙に解決できるのではと思い今回環境を作ってみました。
## 御託はいい、早くその環境をよこせ
もちろんどうぞ!
↓こちらから取得いただけます。完全にフリーで利用いただけます。おそらく利用方法はREADMEを呼んでいただければ大丈夫だと思います!https://github.com/miriwo0104/nodejs_20_lambda_local_d
nodeでテンプレートエンジンっぽいものを作った
## 背景
同じようなページを複製したいけど、それだけのためにEJSやPugを入れるのも面倒。。。
じゃあ自分でサクッと作ろう!## 環境
node 20.10.0
npm 10.2.3## 前提
以下のポケモン151匹のデータが入ったJSONをもとに、 (JSONは記事最下部に記載)
“`pokeData.json
[
{
“no”: 1,
“name”: “フシギダネ”,
“abilities”: [“しんりょく”],
“stats”: {
“hp”: 45,
“attack”: 49,
“defense”: 49,
“spAttack”: 65,
“spDefense”: 65,
“speed”: 45
}
},
{
“no”: 2,
“name”: “フシギソウ”,
“abilities”: [“しんりょく”],
“stats”: {
“hp”: 60,
“attack”: 62,
express-sessionとMemcachedでセッション管理する方法
Node.jsのExpressでセッションを管理したい場合、”express-session”パッケージを使用します。また、サーバー側のセッション情報の保存はMemcachedを使用します。
ローカルの開発環境で動作させるには、Memcachedをインストールして、サービスを起動しておく必要があります。
Macで環境を構築する方法は前回の記事を参照してください。前回:[Macにmemcachedをインストールする](https://qiita.com/SolitaireEgg/items/01c88221fd4a9fc6d36a “Macにmemcachedをインストールする”)
## インストール
Node.jsおよびExpressはインストールされている前提で、新たに下記3つのパッケージをインストールします。
“` console.sh
npm install express-session
npm install memcached
npm install connect-memcached
“`## Expressに設定を追加する
“` app.js
c
Discord.jsでプログラムがエラーを吐いても起動させ続ける
# 前置きの前置き
何と
“`js
process.on(‘uncaughtException’, err => console.log(err))
“`
**このコードをどこかに書いておけば大丈夫だそうです**
(つまりこれはただのライブラリ紹介)
# 前置き
多分初投稿のumisoraです
PCの起動時に.batでbotも起動できるかなーとか思いながら調べていましたら
pm2というライブラリを見つけたので忘備録 + 紹介です…!
# 仕組み(ざっくりと)
どうやらエラーを吐いたプロセスをもう一度起動する仕組みのようです
もっと詳しく知りたい方は調べてみるといいかもしれません
# 結局どうやるの?
やり方はいたって簡単
まずはnpmでpm2をインストールします
“`bash
npm install pm2 -g
“`
そしたら皆さんいろんなランタイムを使ってるかもしれませんが起動コマンドを
“`cmd
pm2 start [botが起動するファイル名(拡張子省略不可)]
“`
とします(一応cdかなんか使ってbotが起動するファイルのあるディレクトリで実行してください
Node.jsでGmailAPI認証設定
## 概要
– Gmailアプリを簡単に作成する方法を書いておく
– ほかのGoogleAPI系の参考になればなおよい## Google Cloude上の操作
Google Cloud上の操作については、こまごまとしたUIの変更が速いため本記事では明確に扱わない。
参考までに、以下の記事を提供しておくがボタンが消失しているものもあるため注意が必要である。https://dotstud.io/blog/gmail-api-from-nodejs/
:::note warn
クライアントIDを作成する際に「その他」がなくなっているため、本記事ではそこを **「WEBアプリケーション」** として進めていく
:::
:::note alert
リダイレクトurlを何かしら設定しないと後の認証が通らないため、**http://localhost** を設定する必要がある
:::## ライブラリのインストール
適当なフォルダを準備したのち、必要なライブラリをインストールする
“`
npm i googleapis google-auth-library –save
“`
現
Node.js でタイプスクリプトを導入する早見表
## 概要
– 新規プロジェクトを始める際に簡単に導入ができるようにコピペ用のスターターを作成する## 1. フォルダ作成とnpmの初期化
“`sh
# フォルダの作成
mkdir myproject
# 作成したフォルダに移動
cd myproject
# npm の初期化
npm init -y
“`
## 2. TypeScriptのインストール
“`sh
# コンパイラの導入と型定義の追加
npm install –save-dev typescript @types/node
“`
## 3. TypeScriptの設定ファイルの作成
“`json:tsconfig.json
{
“compilerOptions”: {
“target”: “es6”,
“module”: “commonjs”,
“rootDir”: “./src”,
“outDir”: “./dist”,
“esModuleInterop”: true,
“strict”: true
},
“include”: [
“./