- 1. Nest(Node.js), Vue3, MySQL(Prisma), GraphQLで動かしてみる
- 2. NodeJSからAPI Gateway SDK Javascript版を使ってみる
- 3. Node.jsのworker_threadsモジュール（スレッドプール）
- 4. 【JavaScript】Promiseと非同期処理について
- 5. discord.js v13 のみでスラッシュコマンドを登録する
- 6. Node.js: Cognito から Access Token を取得
- 7. 【初学者】Herokuデプロイ時に詰まったこと【Webアプリ開発の道~その2~】
- 8. ReactとNode.js(express)でAPIの通信を確立する
- 9. Herokuでアプリを作るのをもっと簡単にしよう
- 10. Cloud FunctionsにSecretを環境変数として渡したが、デプロイ時に環境変数がなぜか取得できずデプロイエラーとなった件の解決
- 11. Puppeteerでヘッドレス Chromeのフルページスクリーンショットを撮る
- 12. 2021年版 Expoまとめ
- 13. Day.jsをいい感じに共通化する
- 14. Next.jsアプリケーションをIISにデプロイしたかったのでIIS上でホストしてみた
- 15. Netlify にデプロイする時、node.js のバージョンを指定する
- 16. Error : npm does not support Node.js v10.19.0
- 17. Node.js/Expressを使用して簡単なWebAPIを構築
- 18. imageminをrequireして怒られる
- 19. 【Chrome拡張】続編：Qiitaの記事を見ているエンジニアとリアルタイムに交流できる拡張機能作った
- 20. Notionで作成したテーブルに対して追加/検索/更新/削除を行う
Nest(Node.js), Vue3, MySQL(Prisma), GraphQLで動かしてみる
## 環境構築
– Docker-compose## Nest.js
– dockerコンテナ内で`npx nest new {APP_NAME}` で新規プロジェクトを作成
– prismaの設定
– `yarn add -D prisma`
– `yarn add @prisma/client`
– `yarn init` で、生成されたファイルにテーブルの定義をしていく
– 定義後に`npx prisma migrate dev`でデータベース作成
– Nest.jsにデータを読み込ませるために、テーブルを更新したら、毎回マイグレーション後に`npx prisma generate`をする
– GraphQLの設定
– [参考 Nest/GraphQL/schema-first](https://docs.nestjs.com/graphql/quick-start)### error: GraphQLのversionは15系じゃないとうまく動かなかった
– リファレンス通りに実行すれば問題ない## Vue3 (Vite)
– dockerコンテナ内で
NodeJSからAPI Gateway SDK Javascript版を使ってみる
“`Node.js
// eval(fs.readFileSync(“apiGateway-js-sdk/lib/axios/dist/axios.standalone.js”, ‘utf-8’));
const axios = require(‘axios’); //npm install axios
eval(fs.readFileSync(“apiGateway-js-sdk/lib/CryptoJS/rollups/hmac-sha256.js”, ‘utf-8’));
eval(fs.readFileSync(“apiGateway-js-sdk/lib/CryptoJS/rollups/sha256.js”, ‘utf-8’));
eval(fs.readFileSync(“apiGateway-js-sdk/lib/CryptoJS/components/hmac.js”, ‘utf-8’));
eval(fs.readFileSync(“apiGateway-js-sdk/lib/CryptoJS/components/enc-base64.js”, ‘utf-8
Node.jsのworker_threadsモジュール（スレッドプール）
# はじめに
node.jsでマルチスレッドを実現するworker_threadsについて、実例を交えて説明します。# 参考
– ハンズオンNode.jshttps://github.com/oreilly-japan/hands-on-nodejs/blob/master/ch04/samples.txt
# worker_threadsモジュール
例として、http\://localhost:3000/10へのアクセスに対して10番目のフィボナッチ数を返すような簡易Webアプリケーションを構築していきます。
パフォーマンスを担保するために生成するスレッドをプールして使い回すような仕組みにしたいです。
以下の３ファイルで実現できます。~~~thread-pool.js
‘use strict’
const { Worker } = require(‘worker_threads’)module.exports = class ThreadPool {
// 空きスレッド、キューを初期化
availableWorkers = []
queue = []
【JavaScript】Promiseと非同期処理について
こんばんは。今回はJavaScriptの非同期処理について書いていきます。
##非同期処理とは？
非同期処理とは、ある処理を実行をしている際に、他のタスクが別の処理を実行できる方式をいいます。
DBから値をとってくるなど、他の処理と比べて時間がかかる処理があった場合、この非同期処理の仕組みがないと、DBから値をとってくる処理が終わるまで待っていなければなりません。
非同期処理の場合、DBから値をとってくる処理を行ってるとき、別のイベントが発生すると、一旦DB処理を中断してそのイベントを処理します。そしてまたDB処理を再開します。しかし非同期処理にも不便な点があります。例えばDBから値を取得し、そのデータをreturnする関数があったとします。普通にこの関数を実行すると、DBから値を取得する処理が行われている間にreturnが実行され、正常に値が返されなくなってしまいます。
そのような問題を解決するための方法はいくつかありますが、今回はPromiseを使った方法をご紹介します。##非同期処理を順番に実行する
非同期処理を順番に実行する場合、Promiseを使うと便利です。
discord.js v13 のみでスラッシュコマンドを登録する
## はじめに
スラッシュコマンドとは，下の図のようなコマンドのことであり，v13系のdiscord.jsでbotに実装できるようになりました．
従来botがコマンドを受け取るには，サーバー（ギルド）に書き込まれる文章を監視し続け，任意のコマンドを含む文字列を取得した場合はプログラムを実行させることでコマンドのような機能を実装していました．
しかし，スラッシュコマンドが導入されることでユーザーは使いやすく，開発側は（実装方法にもよるが）プログラムが読みやすく書きやすくなりました．
しかし，たいていのスラッシュコマンドの記事では，登録はREST APIを自分で叩いて行う方法が紹介されています．
（[公式のガイド](https://discordjs.guide/interactions/registering-slash-commands.
Node.js: Cognito から Access Token を取得
AWS の Cognito から JWT Access Token を取得する方法です。
ライブラリーのインストール
“`bash
sudo npm install amazon-cognito-identity-js
“`“`js:get_token.js
// —————————————————————
//
// get_token.js
//
// Feb/19/2022
// —————————————————————
‘use strict’console.error(“*** start ***”)
var cognito = require(‘amazon-cognito-identity-js’)
const dotenv = require(‘dotenv’)
dotenv.config()
const user_pool_id = `${process.env.US
【初学者】Herokuデプロイ時に詰まったこと【Webアプリ開発の道~その2~】
# はじめに
こんにちは。「塵も積もれば山となる」精神で日々学習しながら、Webアプリ開発に取り組んでいます。# 何を書いたか
今回はローカル環境で作成したRails6アプリ（Hello,Worldの出力）をHerokuにデプロイする際に詰まったことについて書きます。Railsチュートリアル（第6版）では1章と3章前半部分の内容です。# なぜ書いたか
RailsチュートリアルどおりにAWSのCloud9を開発環境として、Herokuにデプロイしたときにはすんなり上手くいったのですが、ローカル環境からHerokuにデプロイしようとすると、まぁまぁ大量のエラーが発生しました笑前回の[ローカル環境構築](https://qiita.com/kosukein38/items/aff73fda16a1447e6db3) に続き、こちらも一日がかりでデバッグして、ようやくデプロイ成功したので、エラーデバッグ方法を備忘録として記事にしました。同じような境遇になった方の参考になれば幸いです。
エラーのデバッグが経験値を上げると信じて、できるだけエラーの意味を解釈しながら進めていったつもり
ReactとNode.js(express)でAPIの通信を確立する
## 概要
サーバーを立ち上げてAPIを叩くという一連の流れを確認してみたかったので、ローカルでフロントエンドとしてReact, バックエンドとしてNode.js(express)を立ち上げてAPI（Fetch）叩いてみる。
フロント側としてはわざわざReactでやる意味はないが慣れているため採用しました。## 1. Node.js(Express)でサーバーを立ち上げる
1. `cd backend`
2. `yarn init`でpackage.jsonを初期化。色々質問されるけど、とりあえずデフォルトでok
2. `yarn add express`でexpressのパッケージをインストール
2. index.jsをbackend配下に作成する
2. index.jsは以下のように記述する“`js
const express = require(“express”);
const app = express(); //express のインスタンス
const port = 3001; // listenするport番号app.get(“/”, (
Herokuでアプリを作るのをもっと簡単にしよう
[Herokuの[Node.js getting started]](https://github.com/heroku/node-js-getting-started/)
Heroku公式のリポジトリは、ムダがあります。– 不必要なモジュールの導入
– テンプレートの説明やタイトルなど、無駄があります。(2回言っちゃう)
ということで、無駄を無くしたものを作ってみました！[Bellomakerの[Node.js getting started]](https://github.com/heroku/nodepack/)
やばいです！めちゃ無駄省きました！
使ってみてね※あえて語彙力は低めで書いております
Cloud FunctionsにSecretを環境変数として渡したが、デプロイ時に環境変数がなぜか取得できずデプロイエラーとなった件の解決
## 前提
* Cloud Functions(Node.js) + Express.js + TypeScript
* 異なるプロジェクトのFirestoreにアクセスする必要がある
* Service Account Keyのclient_email, private_keyを用いてinitializeApp()する
* Secret Managerにclient_email, private_keyを保存
* Cloud FunctionsにSecretを環境変数として渡している## 最初作った構成
下記のソースだと、`firebase deploy –only functions`時にエラーを吐いた
client_emailをハードコードすると、private_keyで同様のエラー。
private_keyもハードコードするとうまく動いた。“`
Error: Error occurred while parsing your function triggers.
Error: Service account object must contain a string
Puppeteerでヘッドレス Chromeのフルページスクリーンショットを撮る
Webページのスクリーンショットを大量に取りたいという時に、便利なのがヘッドレス Chrome。
ヘッドレスとは、GUIからではなくCUIからChromeを使用するモードのことで、Chrome 59以降から搭載されました。
ヘッドレス Chromeを使うと、ブラウザで行う様々な操作をコマンドラインから行い、自動化することもできるようになります。今回はこのヘッドレス ChromeをNode.jsのプログラムで制御するためのライブラリである[Puppeteer](https://github.com/puppeteer/puppeteer)を使って、Webページ全体のスクロールショットを撮る方法を模索してみました。
まずはPuppeteerをインストール
“`
npm i puppeteer
“`Puppeteerをインストールする際、自動でChromiumもインストールされますが、ローカルにあるChromeを使いたい場合には、puppeteer-coreのみでインストールすることもできます。
“`
npm i puppeteer-core
“`puppeteer
2021年版 Expoまとめ
https://github.com/expo/expo
https://blog.expo.dev/expo-sdk-43-aa9b3c7d5541
– Expoのここ３年くらいの動きが慌ただしかったため、用語整理も兼ねてまとめる
# Expoのリリース履歴
| SDK | Date | Highlight |
| — | — | — |
| [33](https://blog.expo.dev/expo-sdk-v33-0-0-is-now-available-52d1c99dfe4c) | 2019/6 | Bare Workflow
Expo Web(React Native Web)ベータ版
|
| [34](https://blog.expo.dev/expo-sdk-34-is-now-available-4f7825239319) | 2019/7 | `Android App Bundle(.app)`をサポート |
| [35](https://blog.expo.dev/expo-sdk-35-is-now-available-beee
Day.jsをいい感じに共通化する
Day.jsは、軽くてMoment.jsと互換が効くのでよくプロジェクトで使っています。
そこで困ってくるのがlocaleやtimezoneの共通化ではないでしょうか？
Day.jsをimportする度に設定するのは、抜け漏れしそうですしね。僕の場合は以下のようにして、Global設定（共通化）しています。
## React
“` index.tsx
import dayjs from “dayjs”;
import utc from ‘dayjs/plugin/utc’;
import timezone from ‘dayjs/plugin/timezone’;
import “dayjs/locale/ja”;
dayjs.extend(utc);
dayjs.extend(timezone);
dayjs.tz.setDefault(‘Asia/Tokyo’);
dayjs.locale(“ja”);
“`## NestJS
“` src/util/dayjs.ts
import dayjs from ‘dayjs’;
import utc from ‘day
Next.jsアプリケーションをIISにデプロイしたかったのでIIS上でホストしてみた
Next.jsをデプロイするならVercelが推奨されているけど、
どうしてもIISでやりたいっていう人向け。IIS拡張モジュール「HttpPlatformHandler」を使うと、
IISからnode.exeを起動してHTTP要求をNodeプロセスに処理させることができます。
下記サイトを参考にさせていただきました。
https://nodejs.keicode.com/nodejs/using-platformhandler-to-host-nodejs-on-iis.php##事前準備
IIS拡張モジュールが必要なのでインストールします。
https://www.iis.net/downloads/microsoft/httpplatformhandlerあとは、Next.jsアプリを普通に作成して、ビルドまで済ませておきます。
私はcreate-next-appで作りました。IISのWebアプリケーションで
http://localhost/nextapp
というURLでアクセスできるようにしたいので、
next.config.jsにbasePathの指定を入
Netlify にデプロイする時、node.js のバージョンを指定する
Nuxt で作っていたWebサイトを久々に改修していて、yarn install 等をやり直して Netlify にデプロイした際、失敗した。
Netlify のログを見てみると、“`
error chalk@4.1.2: The engine “node” is incompatible with this module. Expected version “>=10”.
error Found incompatible module
“`chalk@4.1.2というモジュールについて、node.js と互換性がないと言われていた。（[chalk](https://www.npmjs.com/package/chalk)は、ターミナルのスタイリングをしてくれるモジュールらしい。）
というわけで、node.js のバージョンを指定する。
プロジェクトのルートディレクトリに、以下のコマンドで、.nvmrcファイルを作成する。
.nvmrcファイルは、node.jsのバージョンのみが記載されており、このファイルを置いておくと Netlify が認識してくれる。“`sh
Error : npm does not support Node.js v10.19.0
>Error : npm does not support Node.js v10.19.0
上記エラーが出る場合、Nodejsのバージョンを上げることによって解決する。
“`
$ curl -fsSL https://deb.nodesource.com/setup_12.x | sudo -E bash –
$ sudo apt install -y nodejs
“`
Node.js/Expressを使用して簡単なWebAPIを構築
# はじめに
https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/7-bank-project
Microsoftの出している**Web-Dev-For-Beginners**という教材に取り組んでいた時のことです。
銀行を模したWebアプリを作るレッスンの中で、[銀行API](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/7-bank-project/api/translations/README.ja.md)のページに以下のような記載が。> しかし、このような API の構築方法に興味があるのであれば、このシリーズのビデオを見ることができます: [https://aka.ms/NodeBeginner](https://aka.ms/NodeBeginner) (ビデオ 17 から 21 では、この API を正確にカバーしています)。
> また、こちらのインタラクティブなチュートリアルもご覧ください: [https://aka
imageminをrequireして怒られる
## はじめに
`imagemin`をnode.jsで実行すると怒られた。
“`js:imagemin.js
const imagemin = require(‘imagemin’)
const imageminMozjpeg = require(‘imagemin-mozjpeg’)
const imageminPngquant = require(‘imagemin-pngquant’)imagemin(…略)
“`“`
const imagemin = require(‘imagemin’)
^
Error [ERR_REQUIRE_ESM]: require() of ES Module
Instead change the require of index.js in imagemin.js to a dynamic import() which is available in all CommonJS modules.
“`「`import`で読み込んでね」と怒られている。
`import`で読み込んで実行する
【Chrome拡張】続編：Qiitaの記事を見ているエンジニアとリアルタイムに交流できる拡張機能作った
**本記事は、MMOBrowser(ver0.1.0)の追加機能を使ったQiitaの利用例を紹介する記事になります。
MMOBrowserの概要・利用方法は[こちらの記事](https://qiita.com/Hylia221/items/6142bdc527cc6b3c9fe5)をご参照ください。**# こんなことを思ったことはありませんか
– Qiitaで見つけた面白い記事の感想を共有したい…
– 自分が投稿した記事を見ている人に感想を聞きたい…
– 記事にあるコードや数式が分からないのでエンジニアに質問したい…## そんなときにはMMOBrowserを活用しよう！
MMOBrowserを導入することで、同じWebサイトにアクセスしている人たちのマウスカーソルがブラウザ上に表示され、自由にコミュニケーションを取ることができるようになります（下図）。
Qiit
・Notionのテーブルイメージ
カラム構成はキー(key)・値(value)・タイムスタンプ(timestamp)です。
・各カラムのNotionにおけるタイプについて、キーはtitle、値はrich_text、タイムスタンプはnumberにしています。
# 書いたもの
### 準備
“
