- 1. Payment APIで支払い用のQRコードを発行するメモ PayPay for Developers
- 2. windowsでUbuntu,homeblew,nodebrewをインストール、VSCodeでTypeScript環境を構築する
- 3. Node.js+React+Herokuでアプリ開発環境を構築する
- 4. async/awaitを一言で説明する
- 5. DRY原則に効く！Node.js+ExpressによるAPIのMiddleware化
- 6. チュールのうたを圧電スピーカーで音階設定して、動画BGMを作成した話。
- 7. VSCode remote containersでnodejs環境を構築する
- 8. M1,2(arm64)でnode-sassを使用するには
- 9. Javascriptでもアローラロコンをアーロンにする
- 10. yarn startでサーバーが立ち上がらない
- 11. 人形使い（puppeteer）
- 12. docker compose環境でvite起動時、Cannot start service: Host version “0.14.49” does not match binary version “0.14.50”エラーが発生する時の対策
- 13. React 18の新機能と並行レンダリング革命
- 14. nvmとnpmの違いをまとめてみた(ついでにyarnも
- 15. nodejs で import がシンタックスエラーを吐く
- 16. Node.jsのfetchでバイナリデータをダウンロードする
- 17. GASからシンプルにLINE Notifyにポストするライブラリを作ってみた #LINEDC #LINENotify
- 18. フロントエンド開発 Next.js、TypeScriptのインストールと初期設定
- 19. Mac に node.js（と Python2）をインストール。時々 ncu。
- 20. AWS LambdaでPostgreSQLのRDSプロキシを使用する方法 – Node.js
Payment APIで支払い用のQRコードを発行するメモ PayPay for Developers
## はじめに
この記事は、PayPay の Payment APIを利用して、決済用のQRコードを発行するまでの手順メモです。
## ドキュメント
https://developer.paypay.ne.jp/products/docs/webpayment
## インストール
“`bash
npm i request
“`## コード
下記のコードを`qr.js`として保存する。
“`js
var request = require(“request”);
var options = {
method: POST,
url: /v2/codes,
headers: {
‘Authorization’: ‘hmac OPA-Auth:‘,
‘X-ASSUME-MERCHANT’:,
‘Content-Type’: ‘application/json’,
},
body: { “amount”: 1000, “codeType”: “ORDER_QR”, “merchantPay
windowsでUbuntu,homeblew,nodebrewをインストール、VSCodeでTypeScript環境を構築する
## はじめに
windowsでubuntuを用いてhomebrew,nodebrewをインストール、nodeをインストールしてVSCodeでTypeScriptの環境構築を行うまで、調べたこと、作業したことをまとめました。
コマンドはすべて、WSL上で実行します。## Ubuntu、Homebrewをインストール
Ubuntuとは、Linux系のOS
Homebrewとは、パッケージ管理システム1. WSL（Windows Subsystem for Linux）の有効にする
1. Ubuntuをタウンロード、セットアップを行う
1. Homebrewをインストールする参考記事
・[HomebrewをWindows上で使えるようにする](https://www.techgaku.com/setup-homebrew-on-wsl/)
・[【完全版】Homebrewとはなんぞや](https://zenn.dev/sawao/articles/e7e90d43f2c7f9)## nodebrew、node.js、npmをダウンロードする
nodebrewとは、node.
Node.js+React+Herokuでアプリ開発環境を構築する
# 概要
フロントエンドにReact、バックエンドにNode.js(expressサーバー)を使ってアプリを構築し、それをHerokuにデプロイする開発環境を構築する# 目次
[1. Node.jsのインストール](#1-nodejsのインストール)
[2. Herokuのアカウント登録とインストール](#2-herokuのアカウント登録とインストール)
[3. gitをインストールする](#3-gitをインストールする)
[4. expressサーバーの準備](#4-expressサーバーの準備)
[5. reactの準備](#5-reactの準備)
[6. ローカル環境での起動](#6-ローカル環境での起動)
[7. Herokuへのデプロイ手順](#7-herokuへのデプロイ手順)
[8. アプリ実行](#8-アプリ実行)# 1. Node.jsのインストール
Node.js公式ページから推奨版のインストーラーをダウンロードする
[Node.js公式](https://nodejs.org/ja/ “Node.js公式”)
※2022/07/29現在の推奨版は16.16
async/awaitを一言で説明する
丁寧な説明は多いが結局なんだっけ？となったので一言にしてみた。
要するにasync/awaitとは、## asyncの中でawaitを使うと、promiseが返ってくるまで待ってくれる仕組みのこと
“`test.js
async function test(){
console.log(‘1’);
await setTimeout(() => {console.log(‘2 (非同期処理)’)}, 1000);
console.log(‘3’);
};
“`出力結果
“`
1
2 (非同期処理) // awaitしたので非同期処理でも記述順に実行される。
3// awaitしないと132となる。
“`## ということは、awaitを使いたくなったら最後にpromiseを返せばOK
“`testPromise.js
function testPromise(){
return new Promise(function(resolve){
// 何らかの非同期を含む処理
//
DRY原則に効く！Node.js+ExpressによるAPIのMiddleware化
こんにちは。GMSのバックエンドエンジニアの@yuyasan-goです。
Node.js のWeb Frameworkとしては古株ではあるものの、利用されている方もまだまだ多いExpress関連についてです。
軽量フレームワークであり新規導入のしやすさがメリットですが、サービスも成長して徐々にコードベースも大きくなるにつれて、エラー処理や同様処理が増えてくるケースも目にすることも多くなってくるのではないでしょうか。
今日はそういった状態になってきた際の「DRY原則に効く！Node.js+ExpressによるAPIのMiddleware化した」話について紹介します。# 全体構成
全体構成の概要図はこのような形となっています。
バックエンドの主な技術スタックは、Node.js + Express + MySQL(Amazon Aurora) + DynamoDBを採用しています。
 July 24, 2022
私の多少の音痴がチュールのうたにも出ているし、
obnizが映ってないから2回撮影しましたが、
こっちゃんは喜んで対応してくれました笑## 使用したもの
* [obniz](https://
VSCode remote containersでnodejs環境を構築する
VSCode remote containersでnodejs環境を構築する
# 目指すもの
VSCode remote containersを使ってホスト側の環境を汚すことなく、コンテナ側でnodejsの環境構築をします。
その際に、extensionでLintツールをインストールしたり、VSCodeの設定も行います。これは開発メンバー間で同一の環境を作成することを想定しています。## VSCode remote containersとは？
Dockerコンテナに開発環境を構築し、ホスト側のディレクトリをマウントすることで、開発者がホスト側のVSCode上でコンテナ側のファイルを書き換えることができる機能(extension)です。
[VSCodeドキュメントより](https://code.visualstudio.com/docs/remote/containers)より##
M1,2(arm64)でnode-sassを使用するには
### はじめに
最近、intel macからM2 macに変更したのですが、環境構築等を行っているときにnode-sassに関してのエラーが発生し、解決に時間がかかったので備忘録として残しておきます。
### エラー内容
プロジェクトをyarn install した際に以下のエラーが発生しました。
“`
…/node_modules/node-sass: Command failed.
Exit code: 1
Command: node scripts/build.js
Arguments: …
Directory: …
…
gyp info using node-gyp@3.8.0
gyp info using node@14.17.0 | darwin | arm64
gyp verb command rebuild []
gyp verb command clean []
gyp verb clean removing “build” directory
gyp verb command configure []
gyp verb check pyt
Javascriptでもアローラロコンをアーロンにする
# やる事
タイトルの通り。入力された文字列を2文字づつ飛ばした文字列にして出力する。Pythonほど楽じゃないけどPHPよりは簡単そう。Typescriptで[もっとすごいこと](https://qiita.com/schrosis/items/1835c8e5787837eb2199)をやってる人がいたけど、こういうのは勢いが大事なのでやっていく。# 元ネタ
アローラロコンを1文字飛ばしで読むと…
>>> "アローラロコン"[::2]
'アーロン'— 清原弘貴@ShodoでAI校正 (@hirokiky) July 27, 2022
## 触発された記事
[PHPでアローラロコンをアーロンにする](https://qiita.com/tadsan/items/828cf43ec902440255cb)# コード
“`javascript:arora.js
function arora(str){
return new Array(…str).filter((_,i)=>(i+1)%2===1).join(“”)
}function main(){
const str = “アローラロコン”
console.log
yarn startでサーバーが立ち上がらない
# 概要
UdemyでReact Hooksの講座を学習中、環境構築で詰まったのでまとめるhttps://www.udemy.com/course/react-hooks-101/
# エラー文
Error: error:0308010C:digital envelope routines::unsupported# 解決策
https://qiita.com/yuzu_283879391/items/8e9acaea257d64231037こちらの記事と同様の問題と判明。
使用しているNodeのバージョンが新しすぎたことが原因らしい。
講座で使用しているバージョンに変更したところ、無事にサーバーが立ち上がった。
変更方法は以下の記事を参考。https://qiita.com/k3ntar0/items/322e668468716641aa5c
人形使い（puppeteer）
Puppeteer は Chrome を制御するノードライブラリ。
RPA（ロボティクプロセスオートメーション）として、Webの定型作業を自動化・代行できる。
もちろん Webのテストを自動化することも可能。
# Get Start
## 初期化と Puppeteer インストール
“`
# プロジェクトを初期化する。
% npm init -y
# インストール
% npm i puppeteer
“`
## スクリプト作成
Googleのトップページのスクショを撮る簡単なサンプル。
index.js
“`
const puppeteer = require(‘puppeteer’);(async () => {
const browser = await puppeteer.launch({
headless: true // 画面表示 true:なし / false:あり
});
const page = await browser.newPage(); // ブラウザの新しいページを開く
await page.goto(‘https://www
docker compose環境でvite起動時、Cannot start service: Host version “0.14.49” does not match binary version “0.14.50”エラーが発生する時の対策
# 前置き
dockerとviteには初心者でして、今回のエラーを解決する方法が多少雑で遠回りになります。
ご覧いただいて不足する部分や間違っているところがありましたら、ご指摘いただけると嬉しいです。# 現象
docker-composeでdockerを起動すると、以下のメッセージがコンソールに表示されます。“`
app_frontend | ✘ [ERROR] Cannot start service: Host version “0.14.49” does not match binary version “0.14.50”
app_frontend |
app_frontend | 1 error
app_frontend | failed to load config from /app/some_app/vite.config.ts
app_frontend | error when starting dev server:
app_frontend | Error: The service was st
React 18の新機能と並行レンダリング革命
## 概要
本記事ではReactのメジャーバージョンアップであるReact 18で実装された新機能についてご紹介します。このアップデートによりReactはレンダリングを並行化するという大きな革命に挑戦しています。この並行レンダリングという概念を解き明かしながら新機能の使い方やメリットについて解説していきます。
## React 18とは
React 18は2022年3月にリリースされたReactのメジャーバージョンアップです。基本的なアップデート内容については以下の記事に詳しく書かれています。
https://reactjs.org/blog/2022/03/29/react-v18.html
Reactはバージョン16のリリース以来ここ数年大きな機能追加を行いませんでした。一つ前のメジャーバージョンである17では「新機能なし」とされています。
https://reactjs.org/blog/2020/10/20/react-v17.html
その裏では並行モード(Concurrent Mode)と呼ばれる新しい仕組みの開発が進められていました。それが結実したのがRea
nvmとnpmの違いをまとめてみた(ついでにyarnも
## 概要
毎回あやふやになってしまうので備忘録として残しておきます。## nvmはnode.jsのバージョン管理ツール
nvmはnode.jsのバージョンを管理するツールです。
主に,`nvm install “10.17.0”`みたいな感じでインストールしたりします。
さらに`echo ‘10.17.0’ > .nvmrc`みたいにするとそのディレクトリで`nvm use`でバージョン切り替えるみたいなことができます。## npmはnode.jsの公式パッケージ管理ツール
一方、npmの用途はパッケージ管理です。
JavaScript公式のやつです。
Expressとか、asyncとかnode.jsの有名なパッケージを管理できます。## yarnはnode.jsの非公式パッケージ管理ツール
yarnもnpmと同じnode.jsのパッケージ管理ツールです。
非公式だけどこっちの方が早くて優秀？らしいです。（今はあんまり変わらないみたい
nodejs で import がシンタックスエラーを吐く
ある`nodejs`のコードを実行しようとしたら以下のようなエラーを吐かれた
“`jsoutput
import pkg from ‘‘;
^^^^^^SyntaxError: Cannot use import statement outside a module
“`https://bobbyhadz.com/blog/javascript-syntaxerror-cannot-use-import-statement-outside-module#:~:text=The%20%22SyntaxError%3A%20Cannot%20use%20import,json%20for%20the%20Node%20apps.
によると、どうもJavascriptのバージョン`ES6`からの機能を使ったコードが含まれている場合にこのようなことが起きるらしい。
`Nodejs`の場合には`package.json`の中に以下のような記述を追加すればよいらしい。“`json
{
“type”: “module”,
}
“`
Node.jsのfetchでバイナリデータをダウンロードする
Node.jsはv18でデフォルト利用出来るようになったFetch APIで
バイナリデータをダウンロードする方法でハマったので備忘録として記事にする。## バイナリデータをダウンロードする方法
`res.arrayBuffer()`メソッドを使うのが正解。
そのままではNode.jsでは扱えないので、
適宜`Buffer.from()`でバッファー型に変換してやる必要がある。“`js
const fs = require(“fs”);const main = async () => {
const res = await fetch(“https://example.com/path/to/image.png”);// バイナリデータはarrayBufferメソッドを叩いて取り出す
const arrayBuffer = await res.arrayBuffer();// Uint8ContentsのArrayBuffer型 -> Buffer型に変換
const buffer = Buffer.from(arrayBuffer);
GASからシンプルにLINE Notifyにポストするライブラリを作ってみた #LINEDC #LINENotify
Google Apps ScriptからLINE Notifyにポストするライブラリを作ってみました。
LINE NotifyはLINEに通知を送れる仕組みです。
> https://notify-bot.line.me/ja/
## 使い方
### LINE Notifyのトークンを取得する
https://notify-bot.line.me/ja/
### ライブラリのインストール
GASのエディタ画面でライブラリのメニューの`+ボタン`を押します。
> 
スクリプトIDを求めらるので以下をコピペして利用します。
> `1L4uz6F_w_o0RZsH-W6oR-eXklMmGvHddVjA4FrU6V
フロントエンド開発 Next.js、TypeScriptのインストールと初期設定
# はじめに
フロントエンドの環境構築で
TypeScript、next.jsを使用するために行ったことについてまとめます。## 仕様技術、環境
OS → Windows
エディター → VSCode## Node.jsとは
サーバーサイドでJavaScriptを動かすための動作環境。参考記事↓
・[Node.jsとはなにか？なぜみんな使っているのか？](https://qiita.com/non_cal/items/a8fee0b7ad96e67713eb)## TypeScriptとは
JavaScriptを元にしたプログラミング言語。
私の認識だとJavaScriptの進化版参考記事↓
・[TypeScriptを入門者向けに解説！JavaScriptとの違いや勉強法までわかりやすく](https://udemy.benesse.co.jp/development/system/typescript.html)## Next.jsとは
JavaScriptのライブラリであるReactを元にしたフロントエンドフレームワーク。参考記事↓
・[Next.js
Mac に node.js（と Python2）をインストール。時々 ncu。
## nodebrew のインストール
### nodebrew は node のバージョンを切り替えて使うことができる管理ツール。
環境によっては、node の特定のバージョンでしか動かせない場合があり、バージョンを切り替えたいケースがあるため。
brew を使うには、予め [homebrew](https://qiita.com/nekyo/items/46ab6ae5d875b932cfbc) をインストールしておく必要がある。（[インストール方法はこちら](https://qiita.com/nekyo/items/46ab6ae5d875b932cfbc))“`
% brew install nodebrew
“`### リモートのバージョンを一覧
既に用意されているインストール元のバージョンが一覧できる。
このバージョンを指定してインストールする。
“`
% nodebrew ls-remote
v0.0.1 v0.0.2 v0.0.3 v0.0.4 v0.0.5 v0.0.6
:
io@v1.0.0 i
AWS LambdaでPostgreSQLのRDSプロキシを使用する方法 – Node.js
はいさい！ちゅらデータぬオースティンやいびーん。
# 概要
RDSデータベースへの接続を管理してくれるRDSプロキシを介して、AWSのLambda関数でPostgreSQLのデータベースに接続する方法を紹介します。今回は、Node.js用のLambda関数を使います。
## 背景
Lambda関数でコネクションを張ると、パフォーマンスの問題が大きく関わってくるので、直接に接続するのは避けた方がいいです。そこで、RDSプロキシを使用すると、Lambda関数の中で効率よくデータベースにアクセスできます。
前回の記事で、PostgreSQLのRDSプロキシの作り方を紹介しましたが、それを元に今回の記事を書いていきます。
https://qiita.com/tronicboy/items/c982eb046907b2965d08
# 目次
1. Node.jsのLambda関数のソースコードを書く
1. Lambda関数を作成する
1. RDSプロキシを設定する
1. 実行してみる# Node.jsのLambda関数のソースコードを書く
ローカルで作成したLambda関数
