- 1. Puppeteerを使ってMoneytreeの口座情報をスクレイピングする
- 2. socket.ioを利用したアプリのデプロイをしたい(攻略編)
- 3. 【Windows/Mac/Linux(Ubuntu)】Node.jsインストール方法
- 4. Next.jsもとい、Node.jsでprofilerを簡単に使う方法
- 5. Node.js でタイムスタンプリクエストを作成する
- 6. 【JavaScript】Node.jsでのfs.readFileSync()の相対パス
- 7. GASでちゃんとしたHTMLパーサーが使いたかったのでライブラリにした
- 8. 【Node.js / Vercel】おまえは今までにプログラミングしたbyte数を覚えているか
- 9. 【Express.JS×PostgreSQL】でテーブルのCRUD機能を実装する。
- 10. npmとnpxの違い説明できますか?
- 11. 【備忘録】Node.js×pnpm×TypeScript
- 12. 【Node.js】Stripeライブラリの入出力がsnake_caseになっているのをどうにかしたい
- 13. WingetでNode.jsインストール
- 14. CognitoユーザープールにAWS SDK for JavaScript v3でアクセス その2 – ユーザ登録
- 15. TypeScriptでコマンドラインパラメーター解析
- 16. Node.jsでハッシュ値を生成する
- 17. Node.jsからLighthouseを使用して認証付きサイトを検証する方法
- 18. Socket.io学習① 簡単なチャットアプリの構築2
- 19. UbuntuにNode.js LTSをインストールする方法
- 20. Socket.io学習① 簡単なチャットアプリの構築1
Puppeteerを使ってMoneytreeの口座情報をスクレイピングする
Moneytreeを使うと銀行口座や証券口座、カードの情報が一元化されてとても便利ですよね。
今回はMoneytreeに連携された口座情報をスクレイピングで引っ張ってくる方法を紹介します。
(引っ張ってきたデータはExcelに積み上げたり、差分をSlackに投稿したり出来ますね)スクレイピングというと、Seleniumを思い浮かべる方も多いかと思いますが、今回はNode.jsのライブラリであるPuppeteer(パペティア)を使います。
理由としては以下の通りいくつか挙げられます。
– Puppeteerをインストール(`npm install puppeteer`)すると、ヘッドレスブラウザのChromiumがセットでインストールされ、手軽にスクレイピングができる。(Seleniumの場合はWebDriverのバージョンを合わせたりPathの設定が必要だったりハードルが若干高い)
– AWSやGCPに乗っける際に苦労が少ない。(こちらの利点がかなり大きいです。)別記事で、PuppeteerをGCPのCloud Functionsで動かす方法を紹介します。
## 各種情報
socket.ioを利用したアプリのデプロイをしたい(攻略編)
昨日、サーバーサイドがあるウェブのデプロイに苦戦したが振り返ると検索の仕方が悪かった。
サーバーサイドがあるウェブサイトの公開という部分がメインでsoket.ioを利用しているという点はメインではない。
ということで、Node.jsを含めての検索に変えてやり方を模索した。
https://yu-teck.com/programming/node-js/node-chat-app/
https://noauto-nolife.com/post/heroku-counter-plan/
上の2つの記事を読んでわかった重要な点が2つある。
・Netlifyはあくまでフロントサイドだけホスティングするサービスであり、サーバーサイドがあるウェブには向かないという点。
・Herokuの無料プランはなくなっており、Herokuでデプロイするにはお金がかかる点。Herokuでデプロイするのが一番簡単そうだが、勉強のためにもAWSで公開したいなと思っている。
ブログの後半にはまた違うことを言っているかもしれない。https://www.youtube.com/watch?v=0oIc
【Windows/Mac/Linux(Ubuntu)】Node.jsインストール方法
# Node.jsインストール方法【Windows】
1. 以下のURLにアクセスする。
– [インストーラー](https://nodejs.org/ja/)
2. 推奨版を押下する
![Node01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/173ab336-bda5-a92f-df04-d69cd01edd22.png)
3. フォルダを開く
![Node02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/f61aebfa-00b3-a777-5990-98278771e367.png)
4. `node-v16.14.0-x64`をダブルクリックする
![Node03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/89dd9db9-6563-6e3b-2b9f-43679d4
Next.jsもとい、Node.jsでprofilerを簡単に使う方法
現在、Chromeを使うことでGUIベースでProfilerを使用することが可能になっています。
その方法の紹介です。# 手順
## Next.jsをProfilerを有効な状態で立ち上げる
Next.jsを立ち上げる際に次のようにNODE_OPTIONSをしてして起動してください。
“`
NODE_OPTIONS=’–inspect’ next dev
“`## ChromeのInspect画面を表示
[chrome://inspect](chrome://inspect) にアクセスすると、inspectorが利用可能です。
Devices > Remote targetにinspectオプションを有効にしたプロセスがリストされているので、`inspect`リンクをクリックしてください## Profilingする
以上
後は開いたウィンドウのProfilerタブからCPUのProfile、MemoryタブからMemoryのProfileを取得できます。# 参考
https://medium.com/@paul_irish/debugging
Node.js でタイムスタンプリクエストを作成する
Node.jsの標準ライブラリにはタイムスタンプリクエストを生成するライブラリは存在しないので、今回は[jsrsasign](https://kjur.github.io/jsrsasign/)を使用してタイムスタンプリクエストを生成します。
## jsrsasign のダウンロード
NPMでダウンロードします。
“`
> npm install jsrsasign jsrsasign-util
“`## サンプルプログラム
[KJUR.asn1.tsp.TimeStampReq](https://kjur.github.io/jsrsasign/api/symbols/KJUR.asn1.tsp.TimeStampReq.html), [KJUR.asn1.tsp.MessageImprint](https://kjur.github.io/jsrsasign/api/symbols/KJUR.asn1.tsp.MessageImprint.html) を使用して、タイムスタンプリクエストを作成します。“`javascript
const {createHash
【JavaScript】Node.jsでのfs.readFileSync()の相対パス
# Node.jsでのfs.readFileSync()
以下のようなディレクトリ構成で作業をしているとしましょう。
“`
│ main.js
│
├─commands
│ callhere.js //fs.readFileSync()を呼ぶファイル
│ other1.js
│ other2.js
└─config
config.json // 読み込みたいjsonファイル
“`
さて、jsonファイルを読み込むためには、どのようにすればいいでしょうか。“callhere.js“で
“`javascript
const jsonData = JSON.parse(fs.readFileSync(“../config/config.json”));
“`
とすればパスが通っていそうですよね。しかし、“Node.js“をインストールしているディレクトリでは、この書き方ではエラーになってしまうのです。どうやら、この書き方では、現在のファイル(例では“callhere.js“)が存在する位置を最上位のディレ
GASでちゃんとしたHTMLパーサーが使いたかったのでライブラリにした
# HTMLパーサーが欲しい
GASでスクレイピングすると誰もが思うこと、「HTMLパーサーが…欲しい…!!」
正規表現でもなんとかなるといえばなるけど柔軟性に欠けるし保守性も低い。
よく紹介されるのはParserだけど個人的には「コレ使うなら正規表現でも変わらなくね?」と思ってしまうし、同一タグのネストを解決するのが大変。ならnodejsから移植すれば良いじゃない。
というわけでライブラリを作りました。下記IDをライブラリ検索で利用できます。
スクリプトID: `1JTLPVXGW6Pq4zSAV5ED9XrWOPydVywumQZSOWN7l6KJ0UtWxtX3RbYO6`
GitHub: https://github.com/kairi003/gas-html-parser# 使い方
本ライブラリはほぼ[node-html-parser](https://www.npmjs.com/package/node-html-parser)そのままです。作ったとか言えないレベル。
細かい利用方法は本家のドキュメントを確認していただくとして、以下のように使えます。
“`js
c
【Node.js / Vercel】おまえは今までにプログラミングしたbyte数を覚えているか
# 覚えていますか?[^1]
ということで、こんなものを作りました。
GitHubのレポジトリのプログラミング言語とそのbyte数を集計して、グラフをSVGとして表示するものです。↓↓ こんな感じ(私のレポジトリ集計結果です)
[![bytes](https://github-repo-bytecounter.vercel.app/api?username=yamaccu&exclude=yamaccu.github.io,Blazor-CharjsTest)](https://github.com/yamaccu/Github-Repo-ByteCounter)# 何に使うの?
独学において、自分の勉強量の見える化はモチベーションにつながります。
勉強時間でもいいのですが、GitHub APIでレポジトリのbyte数が取得できるので、プログラミングしたbyte数も良いモチベーションになるかもと思い、作ってみました。GitHubのプロフィールに貼ると少しだけイケイケになります。
[![githubProfile-min.png](https://qiita-imag
【Express.JS×PostgreSQL】でテーブルのCRUD機能を実装する。
Javascriptフレームワーク「Express.js」を使ってテーブルのCRUD機能を作ってみよう!
【最終目標】の画面はこんな感じの画面です。↓
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/f7ffc85b-0e1a-89f5-25ca-fbdeee163d1e.png)
【開発環境】
OS:Windows11
【ミドルウェア】
PostgreSQL
【Node.jsフレームワーク】
Express.js# 準備
■【Node.js】のインストール
Node.jsは以下からインストール↓
[Node.js](https://nodejs.org/ja/)■PostgreSQLは以下からインストール↓
[PostgreSQL](https://www.postgresql.org/download/)# Express Generatorをインストールする。
ExpressのWebアプリケーションを開発するにあたって便利なソフトウェア「Express G
npmとnpxの違い説明できますか?
![0_wIYZeY_ttgeYFpfA.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852310/5fd83f50-0cb8-4d6d-7a9f-0156e1a978a1.jpeg)
# はじめに
記事をご覧いただきありがとうございます。
現在私は大学に通いながら日々プログラミングの勉強を進めています。
主に領域としましてはフロントエンドをメインに勉強をしてきました。そこでふと疑問に思った部分があります。**それは「npm」と「npx」の違いについてです。**
主にlocalhostを立てる際に使用していましたが突然こんがらがってしまいこれは一度しっかりと理解し直すべきと感じこの記事を書くに至りました。
# 対象の読者
* 一度でも「npm」「npx」コマンドを使用したことがある方
* 日々開発でlocalhostを立てている方
* テンプレとして考えておりしっかりと理解し直したい方
* 一度でも私と同じように「npm」と「npx」でこんがらがったことがある方# 目次
1.そも
【備忘録】Node.js×pnpm×TypeScript
# はじめに
Vue CLIやviteを利用すると設定ファイルを一通り用意してくれてしまうので、学習のためにイチから各種ライブラリを導入して作成してみた。
またpnpmも初めて使ってみた。記事作成時点での最新情報を盛り込んだつもりだがNodeやTSまわりの技術は日進月歩なので古い(または古くなった)情報があったらすみません。
### 開発環境
– macOS Ventura 13.1
– Visual Studio Code 1.74.3
– Node.js 18.13.0### 事前準備
#### pnpm有効化
https://pnpm.io/ja/installation#corepack%E3%81%AE%E4%BD%BF%E7%94%A8
最近のNode.jsにはpnpmがバンドルされているので有効化だけすればよい。
※ドキュメントにはないが自分の環境では`sudo`がないとPermission Deniedになった“`
sudo corepack enable
“`有効化確認&バージョン確認
“`
pnpm -v
“`
>7.25.0
【Node.js】Stripeライブラリの入出力がsnake_caseになっているのをどうにかしたい
## はじめに
Node.jsでStripeを操作する際には、[Stripe Node.js Library](https://github.com/stripe/stripe-node)を利用する事になる。ただ、このライブラリのインターフェースはsnake_caseであり、JavaScriptのcameCaseと乖離があり利用しにくいと感じていた。
そこで今回は、インターフェース(入出力)をcameCaseで行えるようにするために、ライブラリに対しカスタムの拡張を行う実装をやってみたいと思う。
ソースコード全体は以下。
https://github.com/yuta-katayama-23/node-express/commit/3f76584935654a0ca472a7d8f8f42fbfab9dca57
## 実際にやってみる
“`js
import Stripe from ‘stripe’;
import { strict as assert } from ‘assert’;
import snakecaseKeys from ‘snakecase-keys’;
WingetでNode.jsインストール
## Windows11のノートPCにNode.jsをインストールした時のメモ
超簡単な自分用の備忘録メモです。
## 環境
OS:Windows11 Pro
## パッケージマネージャ何使うか
Windowsのパッケージマネージャーは、scoopとかchocolateyとか有名だが、本家が一番良いのでは?ということで、後発ですが、wingetを利用。
* chocolatey うーん。以下2つに対してメリット感じられず。(個人的に触ったことがあったscoopかwin標準のwingetか)
* scoop 以前はこっちをつかっていたこともあるが、Powershellで実行していた
* winget コマンドプロンプトで実行できた## 目的はnode.jsのインストールとnpmの利用
### 以下wingetコマンド実行してあるかなチェック
~~~
winget search nodejs
~~~でこんな結果が返ってくる。(2023/01/16現在)
~~~
名前 ID バージョン
CognitoユーザープールにAWS SDK for JavaScript v3でアクセス その2 – ユーザ登録
https://qiita.com/pilot/items/df8f3091e5ed0e35b4b4
の続き
# Cognitoクライアントの設定確認
1. AWSコンソール→Cognito→MyUserPool→アプリケーションの統合タブ→MyAppClient
1. クライアントIDとクライアントシークレットをメモ ★1# 登録メール受取用gmailアカウント
今回はCognitoから送られるメールについてなりすましとみなされる件(メールのFromのドメインと実際の送信元IPアドレスが異なる)の対応は行わない
そのため、例えばdocomoメアドだとメールを受け取れない
gmailだったら受け取れるのでgmailアカウントを用意する (新規でも既存でも良い) ★2# ユーザ登録 (メール送るまで)
1. 作業フォルダに以下のファイルを作成 → 使用クラス https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/clients/client-cognito-identity-provider/classes/signup
TypeScriptでコマンドラインパラメーター解析
Node.jsのCLIなツールをいくつかTypeScriptで作っています。
毎回コマンドラインパラメーターの解析が似たような処理になるので、関数にして使い回していました。
せっかくなのでパッケージとして公開しています。
– [optionalist](https://www.npmjs.com/package/optionalist)
## 特徴
– コマンドラインパラメーターの解析として、当然指定されたパラメーターの情報に合わせて解析します。
TypeScript用なので解析結果は指定した名前と型のプロパティを持つオブジェクトとして返します。
このときのオブジェクトの型は可能な限り指定されたパラメーターの情報を反映したものにしてあります。
– 指定されたパラメーター情報からヘルプ用の文字列を生成します。
CLIに指定されたパラメーターにエラーがあれば自動的にヘルプ用文字列を表示するようにもできます。
– プロパティの型情報にはパラメーターのヘルプ用の文字列や制約などの情報を載せています。`VS Code`などの型を表示してくれるエディターであれば、プロパティに
Node.jsでハッシュ値を生成する
Node.js でSHA1, SHA256のハッシュ値を作成するには、[Web Cryptography APIのdigest メソッド](https://w3c.github.io/webcrypto/#subtlecrypto-interface)を使用します。
もう一つの方法は、[Node.js の Crypto モジュールのcreateHash メソッド](https://nodejs.org/api/crypto.html) を使用します。
## サンプルプログラム(Web Cryptography API版)
SHA1, SHA256アルゴリズムでハッシュ値を生成し、出力するプログラムです。
“`javascript
//Web Crypto APIを使用した場合
const { subtle } = require(‘crypto’).webcrypto;subtle.digest(‘SHA-1’, ‘Hello World’).then(function(result) {
const hex = Buffer.from(new Uint8Arr
Node.jsからLighthouseを使用して認証付きサイトを検証する方法
## 目的
Node.jsからLighthouseを使って認証付きサイトの測定を自動化しようとして色々調べていたが、情報が散らばっていて構築するのにすごく手間がかかったので、メモがてら残しておく## 環境
nodeがインストールされていることが前提
node v16.13.1## 準備
まずは`Lighthouse`とブラウザ操作をするために`Puppeteer`、パスワードなど環境変数を使用するために`dotenv`をインストールする“`
npm install lighthouse
npm install puppeteer
npm install dotenv
“`## Node.jsで動かすためのコード
.envやコンフィグファイルを使用して、ユーザー名やパスワードをフォームに入力し、狙いのURLをLighthouseで検証するコードは以下となる。
Basic認証を通している。“`lighthouse.js
const fs = require(“fs”);
const puppeteer = require(“puppeteer”);
cons
Socket.io学習① 簡単なチャットアプリの構築2
前回の続きを書いていく。
“`
const express = require(“express”);
const app = express();const http = require(“http”);
const server = http.createServer(app);
const { Server } = require(“socket.io”);
const io = new Server(server);const PORT = 5000;
server.listen(PORT, () => console.log(`server is running on ${PORT}`));
“`この部分の解説をしていく。
const なになに という部分ではインストールしたモジュールをインスタンス化している。インスタンス化は分かったつもりにはなるが意外と説明するのは難しい概念である。
一応、インスタンス化は何なのか調べてみる。調べてみると、オブジェクト指向で出てくる表現の1つでクラスから実体を作ることと書かれている。
自分なりの噛み砕き方で説
UbuntuにNode.js LTSをインストールする方法
UbuntuにNode.jsのLTS版をインストールする方法を個人的なメモとしてここに置いておきます。
2023年1月13日現在、LTS版は、v18.xになります。“`
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash – &&\
sudo apt-get install -y nodejs
“`
Socket.io学習① 簡単なチャットアプリの構築1
マルチプレイのオンラインゲーム開発に向けてsocket.ioの勉強をしている。
その中で見つけた良い参考動画がこちらこれを参考にして簡単なチャットアプリを構築しつつ、socket.ioとnode.jsの勉強をしていこうと思った。
まず、ネックになるのはそもそもnpmが何なのかである。
node.jsなどを始める際に必要になるパッケージ管理システムであるがそのインストール方法は複雑に見えた。
さらにMacについての説明は多く見られたがWindows用を探すのにも一苦労した。結局こちらのサイト
https://zenn.dev/antez/articles/a9d9d12178b7b2
を参考にしてインストールした。割と簡単で
https://github.com/coreybutler/nvm-windows/releases
こちらのサイトからインストーラー(nvm-setup.zip)をダウンロードして実行すれば良い。
そうすれば最低限の動作はするようになった。
そして、