- 1. 【Node.js入門】いままで避けてきたから特徴だけはおさえておきたい
- 2. node.jsのアプリケーションをAWS ElasticBeanstalkにデプロイしてみる。
- 3. Node.jsのインストールが失敗した原因と解決方法
- 4. node.jsでブラウザーテストをするselenium-webdriverのセットアップ
- 5. Discord.js これだけはするな！もしくは陥りやすい間違い集
- 6. SDKを使わずにNode.jsからAzure IoT HubへMQTT接続する
- 7. ES Lintの導入
- 8. ElasticBeanstalkのUnknown or duplicate parameter: NodeCommandの対処法
- 9. cpxが更新されないのでfsで置き換えてみる
- 10. SvelteKitでPostgresSQLへデータの登録・取得をしてみる
- 11. Rails7 のフロントエンド関連の Gem を分類
- 12. Puppeteerを使ってMoneytreeの口座情報をスクレイピングする
- 13. socket.ioを利用したアプリのデプロイをしたい(攻略編)
- 14. 【Windows/Mac/Linux（Ubuntu）】Node.jsインストール方法
- 15. Next.jsもとい、Node.jsでprofilerを簡単に使う方法
- 16. Node.js でタイムスタンプリクエストを作成する
- 17. 【JavaScript】Node.jsでのfs.readFileSync()の相対パス
- 18. GASでちゃんとしたHTMLパーサーが使いたかったのでライブラリにした
- 19. 【Node.js / Vercel】おまえは今までにプログラミングしたbyte数を覚えているか
- 20. 【Express.JS×PostgreSQL】でテーブルのCRUD機能を実装する。
【Node.js入門】いままで避けてきたから特徴だけはおさえておきたい
Node.jsをこれまでほとんど勉強してきませんでした。
普段触れることもある言語ですが、ないがしろにしてきたので改めて学んでみました。:::note
【こんな方にオススメ】
・Node.jsについて勉強したことがない
・Node.jsを勉強しようと思っているけど1歩踏み出せない
:::本記事は下記書籍の要約です。
気になった方はぜひ読んでみてください！:::note note
解釈が間違っている場合は遠慮なくコメントをいただけると大変嬉しいです！
:::https://gihyo.jp/book/2023/978-4-297-12956-9
## 本書の構成
ざっくり下記のような構成でした。
– Node.jsについて
– JavaScriptの基本的な構文
– Node.jsの活用
– フロントエンドとバックエンド
– 運用とチューニング私は初学者なのでその中でもNode.jsの特徴について触れたいと思います。
## Node.jsってなに？
Node.jsはChromeに内蔵されているV8というJavaScriptの実行環境のこと。
2009年に登場して
node.jsのアプリケーションをAWS ElasticBeanstalkにデプロイしてみる。
node.jsの非常に簡素なアプリケーションをAWS ElasticBeanstalkを用いて公開するやり方をまとめていく。
これは下の動画に従ったものであるので下の動画を見てもいい。また、公式のドキュメントにもnode.jsとExpressを用いたアプリケーションの公開の仕方があった。この記事では最低限のことしか書かないので実際に実用性のあるアプリケーションを公開する際には公式ドキュメントを参照してほしい。https://docs.aws.amazon.com/ja_jp/elasticbeanstalk/latest/dg/create_deploy_nodejs_express.html
まず、作業に移る前に必要なことがいくつかある。
Gitへの登録とAWSアカウントの作成である。
こちらは行っていることを前提に進めていく、難しい作業ではないので各自調べて行ってほしい。そして、ElasticBeansをコマンド上で操作するためにEB CLIのダウンロードをする必要がある。
ht
Node.jsのインストールが失敗した原因と解決方法
Vue.jsの学習のための環境構築中、Node.jsをインストールしようとした時にエラーが発生したので、その対応についてのメモ。
#### 実施していた環境構築
Node.jsのアップデートは頻繁に行われるため、バージョン管理ツールとして**nvm-windows**を利用した。githubからnvm-setup.zipをダウンロードし、nvm-setup.exeを実行してインストールする。
[https://github.com/coreybutler/nvm-windows/releases](https://github.com/coreybutler/nvm-windows/releases)インストールウィザードに従い、インストール先とシンボリックリンクを指定します。
インストール完了後に、nvmコマンドを使ってNode.jsをインストールしようとすると、エラーが発生した。
## Node.jsのインストール
nvmコマンドからNode.jsをインストールするのに使用したコマンド↓
“`bash
nvm install latest
“`
バージョンを指定
node.jsでブラウザーテストをするselenium-webdriverのセットアップ
## はじめに
この記事はnode.jsでE2Eテストを構築する、Selenium-Webdriverのセットアップと更新の方法を記録、共有するためのものです。
:::note warn
Seleniumは幅広い環境をサポートしていますが、この記事ではnode.jsでのセットアップのみを取り扱います。
:::Seleniumは幅広い環境とシナリオを対象にブラウザーテストを提供していますが、情報量が多すぎて特定環境でのセットアップ手順が調べにくいです。この記事はnode.jsに限ってSeleniumの構築方法を解説します。
### 想定する環境
_▼システムバージョン_
“`bash
% sw_vers
ProductName: macOS
ProductVersion: 12.6.1
BuildVersion: 21G217% brew –version
Homebrew 3.6.19
Homebrew/homebrew-core (git revision e8a1e49d82b; last commit 2023-01-18)
Homebrew/homebrew
Discord.js これだけはするな！もしくは陥りやすい間違い集
## Discord.js 禁忌リスト
### なんでこれを書こうと思った？
初心者のときバカなことばっかりやってたからです### client.on(“messageCreate”)の濫用
“`javascript
//長いのでカット!client.on(‘messageCreate’, async msg => {
if(msg.content === “hello”) {
msg.reply(“HELLO!”);
}
});
client.on(‘messageCreate’, async msg => {
if(msg.content === “good morning”) {
msg.reply(“GM”);
}
});
client.on(‘messageCreate’, async msg => {
if(msg.content === “good afternoon”) {
msg.reply(“Good afternoon!”);
}
});
client.o
SDKを使わずにNode.jsからAzure IoT HubへMQTT接続する
MQTT.jsでIoT Hubに接続したときのメモです。
# 準備
とりあえずテストしたかったので無料プランを利用しました。デバイス作成までは以下が参考になりました。
– [Azure IoT Hub に Mosquitto™ から MQTT なげてみる](https://qiita.com/narutaro/items/1a16ff1321f5044afaf0)
認証はSAS(Shared Access Signature)を利用しました。
# 接続に必要な情報
AzureポータルからIoT Hubのリソースを表示し、必要な情報を取ってきます。（一部伏字にしています）
①ホスト名
②デバイスID
③主キー– 概要ページ
– ①ホスト名は[IoT Hubの名前].azure-device.netというフォーマットです。1. ターミナルを開き、以下のコマンドを実行してESLintをグローバルにインストールします。
“`
npm install -g eslint
“`1. プロジェクトのルートディレクトリに移動し、以下のコマンドを実行してプロジェクトにESLintをインストールします。
“`
npm install eslint –save-dev
“`1. 以下のコマンドを実行して、ESLintの設定ファイルを作成します。
“`
eslint –init
“`1. package.jsonに以下を追加
ElasticBeanstalkのUnknown or duplicate parameter: NodeCommandの対処法
昨日、下に貼ったこちらの動画と公式のドキュメントを基にnode.jsのアプリケーションをAWS Beanstalkでデプロイすることを試みた。
https://docs.aws.amazon.com/ja_jp/elasticbeanstalk/latest/dg/create_deploy_nodejs_express.html
ということで上の資料ではエラーが起きてしまうところの対処法を先に記述する。
その後、全体の流れを記述する。“`
C:\Users\yusuk\nodejs-project>eb deploy
Creating application version archive “app-c698-230118_133959827133”.
Uploading nodejs-project/app-c698-230118_133959827133.zip to S3. This may take a while.
Upload Complete.
2023-01-18 04
cpxが更新されないのでfsで置き換えてみる
npm script で一部の素材ファイルやディレクトリをまるごとコピーするのに便利な cpx だが、すでに6年も更新されておらず、最近になって npm audit に警告がでるようになった。
https://www.npmjs.com/package/cpx
流石に6年放置は修正が期待できないので代替案を考えた。
以下は私のプロジェクトで利用しているスクリプト例（webfont用のファイルをコピーしている）
これをベースに書き換えを行ってみる。“`json
“font”: “cpx -C \”./dev/assets/fonts/*\” \”./public/assets/fonts\””,
“watch:font”: “cpx -C \”./dev/assets/fonts/*\” \”./public/assets/fonts\” -w”,
“`### 1. cpコマンドを使う
“`json
{
“font”: “cp -r ./dev/assets/fonts ./public/assets/fonts”
}
“`私がWindows派なのでな
SvelteKitでPostgresSQLへデータの登録・取得をしてみる
# はじめに
SvelteKitは公式ドキュメントが（体感）読みやすいですね！
しかし、公式ドキュメントではDBを利用するにはどうすればいいのかが、
ふんわりとしか書かれていないため、実際に理解のためにSvelteKitからDB接続を試してみたいと思います。
個人的に理解した内容になるため、誤りやもっと良い方法などがあればコメント頂けると嬉しいです。# 前提
– 開発環境：Windwos10
– 主なバージョン
– SvelteKit：1.0.0
– Node.js：v16.16.0
– Postgresql：PostgreSQL 12.2, compiled by Visual C++ build 1914, 64-bit# Postgresqlの準備
今回はDBに特にこだわりがなかったため、PostgreSQLを使用しました。
ローカル開発環境用にインストールする場合、次の記事が参考になると思われます。https://qiita.com/tom-sato/items/037b8f8cb4b326710f71
# SvelteKitの準備
公式ド
Rails7 のフロントエンド関連の Gem を分類
## はじめに
最近の Rails にはフロントエンドに関係する `ooooo-rails` といった Gem がたくさんあります。
たくさんありすぎてよくわからなかったので、分類してみました。## 結論
| 関心 | Gem |
| ———————————————— | ————————————————– |
| アセットパイプライン | sprockets-rails, propshaft |
| JavaScript, CSS の管理（Node.js を使う場合） | jsbundling-rails, cssbundling-rails
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. 推奨版を押下する
3. フォルダを開く
4. `node-v16.14.0-x64`をダブルクリックする
 にアクセスすると、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として表示するものです。↓↓ こんな感じ（私のレポジトリ集計結果です）
[](https://github.com/yamaccu/Github-Repo-ByteCounter)# 何に使うの？
独学において、自分の勉強量の見える化はモチベーションにつながります。
勉強時間でもいいのですが、GitHub APIでレポジトリのbyte数が取得できるので、プログラミングしたbyte数も良いモチベーションになるかもと思い、作ってみました。GitHubのプロフィールに貼ると少しだけイケイケになります。
[
【開発環境】
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
