- 1. Node.js便利パッケージ集
- 2. 「Glitch Sync From GitHub」を使ってみた(mainにPushでGlitchに自動更新する方法)
- 3. Puppeteerで自動入力を図ろうとしたときのTips
- 4. Lambda関数からAmazon SQSにデータを送信する時ハマったこと
- 5. コーディング時間を節約できる JavaScript1行コード20点
- 6. 【別アカウントのLambda】を実行可能なLambdaをNode18 + AWS SDK for JavaScript v3で構築してみる
- 7. Firestoreでドキュメントに一括で書き込む(500件を超える場合にも対応)
- 8. Node.js のバージョン管理を fnm から Volta に乗り換えました(Windows)
- 9. Rails×MySQL dockerで開発環境を構築する
- 10. expoで作成したテンプレートが何もしていないのに動かない!
- 11. XSERVER BusinessでLaravelとNode.jsを動かす
- 12. Dockerとdocker-composeを使ってReactのコンテナを作成してみよう!
- 13. Hexabaseでアイテムの更新時にアクションスクリプトを実行する
- 14. Hexabaseのアクション拡張プログラムを使って、サーバーサイドでスクリプトを実行する
- 15. Node.jsで無料のタイムスタンプサービスに接続する
- 16. TechBlog: PreloadResolverという仕組みを作ってGraphQLのN+1問題に対応した話
- 17. AWS SDK V3 のSQS(Simple Queue Service)で、いくつか動作確認した話(AWS SDK V2 → V3 移行Tips)
- 18. PrismaでWhere条件を動的かつ型安全に実装する方法
- 19. npm install -g {packageName}は古いと言われた
- 20. Json Server役立ちサイトメモ
Node.js便利パッケージ集
# 私の推しパッケージ集
### chalk
コンソール装飾
https://npm.im/chalk
### chalk-animation
chalkのアニメーション
https://npm.im/chalk-animation
### express
言わずもがなのWebサーバー
https://npm.im/express
### express-session
Expressのアドオンのような感じ。
https://npm.im/express-session
### body-parser
リクエスト解析用
https://npm.im/body-parser
### ytdl-core
YouTubeダウンロード
https://npm.im/ytdl-core
### youtube-search
YouTube検索
https://npm.im/youtube-search
### puppeteer
Chromium操作
https://npm.im/puppeteer
### prism-media
Disco
「Glitch Sync From GitHub」を使ってみた(mainにPushでGlitchに自動更新する方法)
Node.jsを使ってWebアプリを作成しており、デプロイ先に [Glitch](https://glitch.com/) を活用しています。本記事では、GitHubの更新が即座にGlitchに反映されるようにする方法をまとめます。
## 内容
– GitHubにSecretを登録する
– GitHub Actionsを活用する### 必要な PROJECT_ID と AUTH_TOKEN を取得し、GitHub に Secret を登録する
https://github.com/kanadgupta/glitch-sync#inputs
にある通りです。
まずはGlitch にアクセスし、「Ctrl+Shift+I」で開発者ツールを有効にしてください。
その後、「Network」タブを開いてください
※「Preserve log」と「Disable cache」はチェックを入れなくても大丈夫です
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/3fd1a
Puppeteerで自動入力を図ろうとしたときのTips
## はじめに
郵便番号, 都道府県, 住所, 建物名, 氏名, フリガナ, メールアドレス, 生年月日…など一通りのユーザー情報を入力するフォームの動作確認で、大量の `input` を何度も入力するシーンが出てきます。
手入力で対処しようとすると **動作確認NGを繰り返すたびに心が折れます。**
そこで、Puppeteerのみを含めたNode.jsの簡単なプロジェクトを立ち上げて、自動入力するツールを作り突破しようとしました。同様なソリューションとしてCypressも考えられますが、Puppeteerは自身とローカルにインストールしたChromeで完結するためこちらを採用しました。
この記事ではフォームの自動入力でPuppeteerを用いた際に役立ったTipsを紹介します。
自動入力の対象はjQuery + JavaScriptのプロジェクトを想定しています。## インストール・実行
“`console
$ npm install puppeteer-core
“`https://github.com/YusukeIwaki/ggrks-puppet
Lambda関数からAmazon SQSにデータを送信する時ハマったこと
# はじめに
Lambda関数からAmazon SQSにデータを送信する時、ハマったことがあったので備忘録として残しておく。# 前提条件
– Lambda関数からAmazon SQSにデータを送信する
– Lambda関数はVPC内のプライベートサブネットに設置している
– Lambda関数のIAMロールはAmazon SQSに対してフルアクセス権限を付与している
– Lambda関数はNode.jsで作成# 起こったこと
上記前提条件のもとLambda関数を実行するとタイムアウトしてしまった。
そのときのソースと実行結果はこちら
AWS公式サンプルソースのほぼコピペ
https://docs.aws.amazon.com/ja_jp/sdk-for-javascript/v2/developer-guide/sqs-examples-send-receive-messages.html“`js
var AWS = require(‘aws-sdk’);
AWS.config.update({region: ‘ap-northeast-1’});var sqs = n
コーディング時間を節約できる JavaScript1行コード20点
はじめましてこんにちは、ひょうどうです。
今回は、コーディング時間を節約できる1行のJavaScriptコード20点を紹介します。
> 1)配列内の数値の最大値を取得する(配列が小さい場合)
“`
Math.max(…array)
“`
> 2)配列から重複を削除する
“`
[…new Set(array)]
“`
> 3)1 から 100 までの乱数をする
“`
Math.floor(Math.random() * 100) + 1
“`
> 4)文字列が有効な数値かどうかを確認する
“`
!isNaN(+string)
“`
> 5)現在の日時を取得する
“`
new Date().toString()
“`
> 6)変数が配列かどうかを確認する
“`
Array.isArray(variable)
“`
> 7)変数がオブジェクトかどうかを確認する
“`
typeof variable === “object”
“`
> 8)配列を文字列に変換する
“`
array.join(“,”)
“`
> 9)変数が関数かどうかを確認する
“`
【別アカウントのLambda】を実行可能なLambdaをNode18 + AWS SDK for JavaScript v3で構築してみる
## 先に結論だけ知りたい人のために (クロスアカウントでLambdaからLambdaをコールする方法)
この記事の要点を列挙するよ。
– 実行環境がNode18のLambdaにはAWS SDK for JavaScript v3が最初からインストールされていて便利だよ
– Invoke APIで別アカウントのLambdaをコールするよ
– コールされる対象の【別アカウントのLambda】には、リソースベースのポリシーが必要だよ
– コールする側のLambdaには、アイデンティティベースのポリシーが必要だよ“`json:コールされる対象の【別アカウントのLambda】に付与するリソースベースのポリシー
{
“Version”: “2012-10-17”,
“Id”: “default”,
“Statement”: [
{
“Sid”: “[任意の名前]”,
“Effect”: “Allow”,
“Principal”: {
“AWS”: “arn:aws:iam::[呼び出す側のAWSアカウントI
Firestoreでドキュメントに一括で書き込む(500件を超える場合にも対応)
# batch処理で一括書き込みできる
Firestore の batch write を使用することで、500件ずつのドキュメントの更新を行うことができます。以下は Node.js でのサンプルコードです。
“`javascript
const admin = require(‘firebase-admin’);admin.initializeApp();
const firestore = admin.firestore();async function updateDocuments(collectionName, batchSize = 500) {
const collectionRef = firestore.collection(collectionName);
const query = collectionRef.orderBy(‘timestamp’).limit(batchSize);
const documents = await query.get();let batch = firestore.batch();
docu
Node.js のバージョン管理を fnm から Volta に乗り換えました(Windows)
Node.js のバージョン管理は fnm (Fast Node Manager) を利用していましたが、
* シェルセットアップが面倒…:pensive:
* コマンドプロンプトで利用できない…:confounded:という不満がありました。
ちなみに、fnm のインストール方法と使い方については以前投稿しました。
https://qiita.com/taqumo/items/b25d486e6ead9f38a13d
そんな中、以下記事と出会い、Volta が良さげ:smirk:
https://zenn.dev/aiueda/articles/7dcecaa05d4f24#%E6%97%A2%E3%81%AB%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8Bnode.js%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E7%AE%A1%E7%90%86%E3%83%84%E3%8
Rails×MySQL dockerで開発環境を構築する
# 今回指定したバージョン
– Rails version 6.1.7.1
– Ruby version 2.7.7
– MySQLは最新version
– nodejsは互換性のある version16
# 条件
– docker-compose upでrails serverを起動できるようにすること
– ホストのファイルシステムとコンテナのファイルシステムを同期させること## Dockerfile
– まずは、apt-getでyarnを入れたもの
“`ruby
# Node.js & Yarn
FROM node:16-buster-slim
RUN yarn installFROM ruby:2.7.7
RUN apt-get update
RUN apt-get install -y \
build-essential \
libpq-dev \
nodejs \
default-mysql-client \
yarn
default-mysql-clientWORKDIR /rails-docker-mysql
expoで作成したテンプレートが何もしていないのに動かない!
# 問題
エラーが出てExpo startが失敗する
`
Error: Cannot find module ‘@expo/config/paths’
`
# 原因エラーの詳細を見ると
“`
Error: Cannot find module ‘@expo/config/paths’
Require stack:
– /Users/hogehoge/node_modules/@expo/webpack-config/webpack/index.js
– /Users/hogehoge/node_modules/@expo/webpack-config/webpack.config.js
– /Users/hogehoge/Documents/Expo/nest-navigation/node_modules/@expo/cli/build/src/start/server/webpack/resolveFromProject.js
– /Users/hogehoge/Documents/Expo/nest-navigation/node_modules/@expo/cli/bu
XSERVER BusinessでLaravelとNode.jsを動かす
XSERVER Business (エックスサーバー社が提供する法人向けレンタルサーバサービス)にLaravelアプリケーションを新規導入した際の手順メモです。
# 制約事項
– レンタルサーバなので、root権限がない。
– 対象のサーバが、かつて存在したシックスコアを継承したものであるため、最新ハード/ソフトが導入されたサーバに移行できない。という制約があります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236222/a02ac8d2-a39b-3693-5ee5-2d9c34ce9482.png)
また、ディストリビューションなどの仕様は非公開となっています。https://support.xserver.ne.jp/faq/service_server_os.php
# 手順
## サーバーパネルでの操作
XSERVER Business のサーバーパネルにログインします。
![image.png](https://qiita-image-store.s3.ap
Dockerとdocker-composeを使ってReactのコンテナを作成してみよう!
## はじめに
– Dockerfile
– docker-compose.yml
– .gitignoreを作成します
ディレクトリ構成は以下の通りです
“`
tree
.
├── .gitignore
├── Dockerfile
└── docker-compose.yml
“`## 必要なファイルの作成
### Dockerfile
今回はNodeJSの16.17.0のDocker imageから作成します
今回はワークディレクトリを`/code`にします
“`Dockerfile:Dockerfile
FROM node:16.17.0-bullseye
WORKDIR /code
“`### docker-compose.yml
“`yml:docker-compose.yml
version: ‘3.8’
services:
# サービス名はfront
front:
# コンテナ名はフロント
container_name: front
# ビルドコンテキストはカレントディレクトリ
build:
co
Hexabaseでアイテムの更新時にアクションスクリプトを実行する
[Hexabase](https://www.hexabase.com/)はエンタープライズ向けのBaaS(Backend as a Service)を提供しています。主な機能としてはデータベース、ファイルストレージ、認証、リアルタイム通信などを提供しています。
データベースに関連した機能として紹介したいのがアクションスクリプトです。作成時、更新時などにスクリプト(Node.js)を実行する機能になります。トリガーとして利用できます。
今回はそのアクションスクリプトの使い方と、blastengineを使って更新通知メール送信を行う(ネットワーク通信を行う)方法を解説します。
## 開発者機能を有効にしてください
アクションスクリプトを使う場合には、Hexabaseの個人設定で `開発者向け機能` を有効にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/02e868fa-a23f-011c-50df-9d8f49eed241.png)
## アクションス
Hexabaseのアクション拡張プログラムを使って、サーバーサイドでスクリプトを実行する
[Hexabase](https://www.hexabase.com/)はエンタープライズ向けのBaaS(Backend as a Service)を提供しています。主な機能としてはデータベース、ファイルストレージ、認証、リアルタイム通信などになりますが、それだけで全ての開発要件を満たせる訳ではありません。
そこで、足りない機能を開発し、コードをサーバーサイドで実行できるアクション拡張プログラムが用意されています。いわゆるFaaS(Function as a Service)のようにして、スケーラブルにコードを実行できます。
今回はそのアクション拡張プログラムの使い方と、[blastengine](https://blastengine.jp/)を使ってメール送信を行う(ネットワーク通信を行う)方法を解説します。
## 開発者機能を有効にしてください
アクション拡張プログラムを使う場合には、Hexabaseの個人設定で `開発者向け機能` を有効にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.am
Node.jsで無料のタイムスタンプサービスに接続する
## タイムスタンプサービス
無料でタイムスタンプトークンを発行するサービス、[Free TSA Project](http://eswg.jnsa.org/sandbox/freetsa/) に接続します。タイムスタンプリクエスト、タイムスタンプレスポンス、タイムスタンプトークンの出力、解析には[jsrsasign](https://kjur.github.io/jsrsasign/)を使用します。
## jsrsasign のダウンロード
NPMでダウンロードします。
“`
> npm install jsrsasign jsrsasign-util
“`## タイムスタンププロトコル
タイムスタンプに関わる仕様は、[RFC3161](https://datatracker.ietf.org/doc/html/rfc3161)、[RFC5816](https://datatracker.ietf.org/doc/html/rfc5816) で 定義されています。
HTTP通信で行う際の仕様が [RFC3161 の 3.4 Time-Stamp Protocol
TechBlog: PreloadResolverという仕組みを作ってGraphQLのN+1問題に対応した話
エクサウィザーズのテックブログでGraphQLでのN+1問題対策についての記事を書きました。
https://techblog.exawizards.com/entry/2022/12/01/154745
AWS SDK V3 のSQS(Simple Queue Service)で、いくつか動作確認した話(AWS SDK V2 → V3 移行Tips)
# はじめに
https://qiita.com/Syoji_Yonemoto/items/09883e57643583ef39af
引き続いて、今度は、SQS(Simple Queue Service)についても確認しました。
やはり初回(Firehose)の運が悪かっただけで、基本は互換できてそうだという感触になりつつありますが、自分のメモも兼ねてるので確認できた範囲をまとめていきます。# 結論
SQS(Simple Queue Service)に関しては、私が普段使うメソッド群については、問題ありませんでした。# V2 と同じ使い方で問題なく動作確認できたメソッド
+ sendMessage
+ receiveMessage
+ deleteMessage
+ getQueueAttributes# 余談(雑多な感想)
受信・送信・削除・状態確認、一通りLambdaからSQSを活用する際に利用するAPIは試しましたが、V2の時と変わらぬ使い方ができて良かったです。https://qiita.com/Syoji_Yonemoto/items/e619d
PrismaでWhere条件を動的かつ型安全に実装する方法
# はじめに
WebAPIの仕様としてリクエスト時に与えられたパラメータに応じて、WHERE句を動的に生成するケース(検索など)はよくあるが、それをPrismaで型安全に実装する方法について。# 環境
– TypeScript:4.7.4
– Prisma:4.8.0
– Provider:MySQL# テーブル定義
usersテーブルに名前(name)と年齢(age)がカラム定義されている。
“`schema.prisma
model User {
id Int @id @default(autoincrement()) @db.UnsignedInt
name String
age Int@@map(“users”)
}
“`# WebAPIとしての抽出条件の仕様
オプショナルで以下の条件が指定可能なユーザー一覧のWebAPIを想定する。
– 名前(name)に特定の文字列が含まれているか?
– 年齢(age)がn歳以上か?
– 年齢(age)がn歳以下か?参考実装用の仮想定義だがこのような型のオブジェクトが与えられるイメージ
`
npm install -g {packageName}は古いと言われた
先日、モブプロで開発作業中にnpm install -gを実行しようとして先輩に「npm install -gはもう古い。[npx](https://www.npmjs.com/package/npx)を使った方がいい」と言われた。
“`
npm install -g {packeageName} # インストールしたらディスク上残る上にインストール後に実行する必要があるnpx {packageName} # インストール、実行、削除、を全部やってくれる
“`npxは node package executerの略でパッケージの実行ツールらしい。
パッケージを探してインストールして実行、処理が終わればパッケージを消してくれる優れもの。便利だなぁ~
Json Server役立ちサイトメモ
https://swfz.hatenablog.com/entry/2016/12/06/024342
https://wing-degital.hatenablog.com/entry/2019/05/08/234119
https://www.cyokodog.net/blog/use-well-json-server/
https://deep.tacoskingdom.com/blog/151
https://gist.github.com/juanbrujo/efdcf6ab9eacbd5b5d69884233d0a3ce
https://silurus.dev/articles/4GtXZIAR3mqEduLkgoM1Z2