- 0.1. node.js超入門ノート7(バリデーション編)
- 0.2. 【初心者向け】webpackの基本構成を紹介(devserverの導入も)
- 0.3. [シリーズ] 図によるメモ … npm, n, Node.js, nvm, yarn の立ち位置
- 0.4. メモ … Yarn の立ち位置 (対 npm, n, Node.js, nvm)
- 0.5. プロジェクトルートで「yarn」を使用し、下位フォルダのpackage.jsonをまとめて実行する
- 0.6. パッケージマネージャ「yarn」を使用してshellを実行する
- 0.7. メモ … Node.js バージョン管理 (n, npm)
- 0.8. M5CameraのRequest Header Fields Too Largeの対策
- 0.9. Node.jsでDiscordBotを作るのに苦戦した話
- 0.10. TextEncoder / TextDecoder の速度比較
- 0.11. 【npm】run `npm audit fix` to fix them, or `npm audit` for detailsの対処法
- 1. 症状
- 2. 解決方法
- 2.1. LINE Botを作りたい！ ～アカウントの作成とボットの設定から、おうむ返しボットを動かすまで～
- 2.2. Node.js: コマンドラインオプション–preserve-symlinksの挙動
- 2.3. 未経験からWebエンジニアになる為の4つの課題
- 2.4. 【C++】Flaskみたいにサーバーを立てられるclaskなるものを試してみた
- 2.5. node-webrtcのサンプルを動かしてみる
- 2.6. 0からNestJSを組もう(AWS Lambda)
- 2.7. JavaScriptを使った便利ツール
- 2.8. LINEオウム返しbotに、Node.jsでWebスクレイピングしたデータを追加する
- 2.9. Browserify を試す(node.jsのrequireメソッドをブラウザで使う)
node.js超入門ノート7(バリデーション編)
# 準備
以下のコマンドでパッケージをインストールします。“`
npm install express-validator
“`
# バリデーションを使う
以下を修正します。“`html:views/hello/add.ejs
<%= title %>
【初心者向け】webpackの基本構成を紹介(devserverの導入も)
webpackの環境構築をよくやるので、共有と備忘録を兼ねて、初心者の方向けにwebpackの導入を書いてみました。(私も初心者ですが、、)
単にwebpackをインストールするだけでなく、基本的な設定やwebpack-dev-server(定番の開発用サーバー)の導入も合わせてやっていきます。
## ▼前提条件
– **PCにnode.jsがインストールされていること（重要）**
– **cdコマンドなど、基本的なターミナル操作ができること（重要）**
– webpackがどんなものかはなんとなく知っているwebpackがまったく分からんという人は、このあたりを読んでみるのいいかも。
https://ics.media/entry/12140/
https://webpack.js.org/
## ▼私の環境
– OS : Win10 home
– Editor : VScode
– Terminal : bash
– Node.js version : v14.16.1macOSの人でも手順自体は一緒だと思います（エアプ）あと、npm使ってます。
## ▼
[シリーズ] 図によるメモ … npm, n, Node.js, nvm, yarn の立ち位置
# 概要
2021/09 時点では、ごく稀 (年間にして 1week ほど) にしか JavaScript や Node.js を使わないので、
これらを使用するときには毎回 yarn や npm、nvm、n のメモを毎回読み返しているので、書き出しておく.|コンテンツ|掲載時期|
|:–|:–|
|[メモ … Node.js バージョン管理 (n, npm)](https://qiita.com/robozushi10/items/f8e1e2cae94f87b98acc)|2021/09|
|[メモ … Yarn の立ち位置 (対 npm, n, Node.js, nvm)](https://qiita.com/robozushi10/items/fabbd40e560557c7394e)|2021/09|
メモ … Yarn の立ち位置 (対 npm, n, Node.js, nvm)
|本シリーズのトップページ|
|:–|
|https://qiita.com/robozushi10/items/1b499030d5462fe7e791|# 概要
2021/09 時点では、ごく稀 (年間にして 1week ほど) にしか JavaScript や Node.js を使わないので、
これらを使用するときには毎回 yarn のメモを毎回読み返しているので、書き出しておく.| npm 使用時 | **nvm** 使用時 |
|:–|:–|
||
|本シリーズのトップページ|
|:–|
|https://qiita.com/robozushi10/items/1b499030d5462fe7e791|# 概要
2021/09 時点では、ごく稀 (年間にして 1week ほど) にしか JavaScript や Node.js を使わないので、
これらを使用するときには毎回 n、npm のメモを毎回読み返しているので、書き出しておく.| n 使用時 | nvm 使用時 |
|:–|:–|
|||
# n を使う場合
`n`
M5CameraのRequest Header Fields Too Largeの対策
M5Cameraで使わているアプリケーションは、multipart/x-mixed-replace というContent-Typeで、MotionJpeg形式の画像形式で撮影画像を配信してくれます。
あとは、HTMLのimgタグにM5CameraのURLを指定してくれれば表示されるという非常にありがたい機能が実装されています。
これだけでも十分なのですが、最近はHTTPSのページの中に、HTTPのURLがあるとエラーとなるため、追加の対応が必要です。
手っ取り早く、HTTPからHTTPSに変換するリバースプロキシを立ち上げようとしたところ、Request Header Fields Too Largeなるエラーが発生してできませんでした。
そこで、以下の方法があることがわかりました。１．ESP32のhttpdを使わずに、WiFiClientを使う
httpdがエラーをはいているので、それを使わずにWiFiClientを使います。
https://www.iotsharing.com/2020/03/using-http-for-camera-live-stream.htmlた
Node.jsでDiscordBotを作るのに苦戦した話
# はじめに
こちらの記事は私の[サイト](https://mwindows99.com/2021/09/04/discordbot.html)でも閲覧できます。内容は同じですがよければご覧ください。# 導入
私はしばらくの間、Discord Botを開発していました。
私はPythonの経験があるのではじめはDiscord.pyを使ってBotを開発していましたが、どうやらDiscord.pyのサポートが終了するということで今回Discord.jsに乗り換えることにしたわけです。Node.jsとDiscord.jsの記事は比較的少なく、２つのポイントで***大変苦戦***しましたので備忘録として残しておきます。
# 1. 環境構築で苦戦
まず私がDiscord.jsを動かす環境をつくるにあたって、Qiitaのこちらの記事[「Discord.js でボットを作る ～発言させるまで～」](https://qiita.com/yuto0214w/items/1ecee25efca6b5b7445b)を参考にしました。
これをコピペしてLinux上で実行すれば移行なんて簡単。と思っ
TextEncoder / TextDecoder の速度比較
IE を除く現代の多くのブラウザでは [TextEncoder](https://developer.mozilla.org/en-US/docs/Web/API/TextEncoder/TextEncoder) と [TextDecoder](https://developer.mozilla.org/en-US/docs/Web/API/TextDecoder/TextDecoder) の API が使えて、UTF-8 や Shift_JIS の格納された Uint8Array と、string の相互変換が可能です。
（エンコード）文字列を Uint8Array の任意オフセット位置に UTF-8 で書き込む
（デコード）Uint8Array の任意オフセット位置に書かれた UTF-8 文字列を読み込む（バイト数は既知）
という条件で文字列の入出力処理について、下記の３実装の速度を比較してみます。
（１）Node.js の Buffer の当該機能を使った場合
（２）Pure JS で適宜実装した場合
（３）TextEncoder/TextDecoder API を利用し
【npm】run `npm audit fix` to fix them, or `npm audit` for detailsの対処法
症状
npmstartを実行としたところ、
https://qiita.com/GalaxyNeko/items/1d3b022fbf17aca2b0ac
上記のように起こられたので、npminstallを実行したところ、下記メッセージが表示されました。
翻訳すると「397の脆弱性が見つかりました（391中程度、6高）`npm audit fix`を実行して修正するか、` npmaudit`を実行して詳細を確認してください」でした。脆弱性多すぎ。。。
“`terminal:error
found 397 vulnerabilities (391 moderate, 6 high)
run `npm audit fix` to fix them, or `npm audit` for details
“`(問題のあるパッケージを洗い出すnpm auditを実行したところ、量が多すぎてterminalの表示しきれなくなってしまいました。。。)
解決方法
npm audit fixを実行することでエラーが解消し、npmstartが実行
LINE Botを作りたい！ ～アカウントの作成とボットの設定から、おうむ返しボットを動かすまで～
LINEボット、面白そうだなあと思って、取りあえずお試し。
または、ちょこっとお試しするならGoogle Colabが便利って話し。
あるいは、なでしこさんでLINEボット作れるようにしたいなっていう抱負。# 準備
とりあえず、アカウントがないと始まらないですね。日本語だから大丈夫～・・なハズが、まあまあな大騒ぎでした；
ボットの設定は、項目があちこち飛んでいて分かりずらかったり、後から変更出来るできないがあったので、メモ。## LINEアカウント
・・・は、さすがのワタシも持っているので割愛。
まあ、二週間ほども既読すら付かなくて、「お元気ですか？」と母から葉書が来ちゃったワタシですがΣヽ(ﾟДﾟ; )ﾉ## ボット用アカウント
普通のLINEアカウントとは別に必要です。
だいたいここのとうりに作っていきますです。https://developers.line.biz/ja/docs/messaging-api/getting-started/
### [LINE Developers](https://developers.line.biz/j
Node.js: コマンドラインオプション–preserve-symlinksの挙動
https://nodejs.org/api/cli.html#cli_preserve_symlinks
– `–preserve-symlinks`なし（デフォルト）の場合
– シムリンクファイルから`require(相対パス)`すると、実体ファイルからの相対パスになる
– `–preserve-symlinks`ありの場合
– シムリンクファイルから`require(相対パス)`すると、シムリンクからの相対パスになる公式ドキュメントに書いてある通り、たいていの場合は「なし」（デフォルト）のままでうまくいくと思う。
## 例1
“`
.
├── a.js // require(“./b”)
├── b.js -> sub/b.js
└── sub
├── b.js // require(“./c”)
└── c.js
“``–preserve-symlinks`なし（デフォルト）の場合
“`console
$ node a.js
=> OK
“``–preserve-symlinks`ありの場合
./c.
未経験からWebエンジニアになる為の4つの課題
未経験から4つの課題を完成するのは少し大変かもしれませんが、エンジニアになれば好条件で働けるのでおすすめです。
私は未経験からエンジニアになって、「こんなにお金稼げんのかい」と思いました。
##課題1：Todolist
https://qiita.com/hamaguri/items/476e75e6a29276ad1ba7**※こちらの記事はHTMLの基本知識があるのが前提です。
わからないところは無料サイトで調べながらアプリ作成して基本を学びましょう。**個人的おすすめ
[クリエイタークエスト](https://creatorquest.jp/lessons/html/html-intro/)
[ドットインストール](https://dotinstall.com/)##課題2 ：クイズアプリ
https://qiita.com/hamaguri/items/7e382077da95e824ad3ahttps://qiita.com/hamaguri/items/36d7c3b39850b2c961f6
:::note info
記事はコピペで実装できる
【C++】Flaskみたいにサーバーを立てられるclaskなるものを試してみた
#きっかけ
これまではC++をやっていて最近はFlaskとNode.jsを触っていて
ちょうどこんな記事を見かけたので…https://mattn.kaoriya.net/software/lang/c/20200617121706.htm
C++でサーバーがpythonみたいに書けるだと？？
これはやってみなければ#サンプルを試してみる
まずは[GitHub](https://github.com/mattn/clask)からダウンロード“`shell
$ git clone https://github.com/mattn/clask.git
$ cd clask
$ ls
CMakeLists.txt LICENSE README.md clask cmake compile_flags.txt example main.cxx picotest test.cxx
“`CMakeを使うようなのでインストール&ビルド
“`shell
$ sudo apt install cmake
$ cmake .
“`picotest/pi
node-webrtcのサンプルを動かしてみる
# 環境
– Windows 10
– node-v16.8.0-x64.msi
– コマンドプロンプト
– Google Chrome Version 93.0.4577.63 (Official Build) (64-bit)## 注意
– node.jsがLTS版の node-v14.17.5-x64.msi だと `npm install` Windowsのアクセス違反のエラーが出て動作しなかった
– LTS版の方が安定していると信じこんでいて、少しはまってしまった“`
npm ERR! code 3221225477
“`# 背景
– 様々な環境で動作するWebRTCのライブラリを探している
– ブラウザなしで、気楽に通信テストを行いたい
– 候補の１つとして、`node-webrtc` を触ってみる# node-webrtc とは
> Node.js Native Addon that provides bindings to WebRTC M87.
– 「Node.js のネイティブのアドオンで、WebRTC M87準拠」と捉えれ
0からNestJSを組もう(AWS Lambda)
NestJSが少し前にV8になったというのもあり、確認も含め１から構築してみました。
基本的に公式通り組んでます。# 環境
| PC | OS |
|-|-|
| mac | m1 Big Sur 11.4|| tool | version | |
| – |-|-|
| nodejs|v16.8.0| ※ここは14に合わせる方が良いかと。|
|aws-cli| 2.2.21|||aws|version|
|-|-|
|Lambda|node v14.x||deploy|
|-|
|Serverless Framework|# Nestプロジェクトの作成
## 事前準備
パッケージ管理はお好きなもので。
nodeは今の最新で。
プロジェクト内はyarn使います。
## node※後述してますが、LambdaのNodeのruntimeが最新v14だったので、それに合わせた方が無難です。
“`bash
asdf global nodejs 16.8.0node -v
> v16.8.0npm i -g npm
npm i -g yarn
npm i
JavaScriptを使った便利ツール
# はじめに
自身のオリジナルアプリの作成により、JavaScriptを取り入れることで、「高機能なWebページ」を実装できることができました。
今回は、JavaScriptの「ライブラリ」と呼ばれる便利ツールのようなものを紹介したいと思います。
あくまで紹介のみですので、詳細や環境構築の説明は行いません。
実際の開発現場でよく使用するライブラリが中心であるため、今後開発を進める上での自身の備忘録としてここに記します。私は初学者のため、間違いがございましたらお手数ですがご指摘いただけますと幸いです。
#jQuery （ジェークエリー）
https://jquery.com/
現在は下火傾向になるようですが、手軽に扱えることから今でも十分根強い人気があります。
## 特徴
### ① HTMLの取得 & 追加削除がしやすい
DOM操
LINEオウム返しbotに、Node.jsでWebスクレイピングしたデータを追加する
Node.jsの勉強をする中で、[LINE Messaging APIの公式チュートリアル](https://developers.line.biz/ja/docs/messaging-api/nodejs-sample/)に触れる機会がありました。
このチュートリアルはBotへの投稿に対して特定の返事をするだけですが、せっかくなので以下の機能を追加してみました。+ テキストが投稿されたらオウム返しする。テキスト以外が投稿されたら「テキストを入力してください」と返す。
+ オウム返しするときに、ついでにWebスクレイピングしたデータも返す。#オウム返しBotの作成
[LINE Messaging APIの公式チュートリアル](https://developers.line.biz/ja/docs/messaging-api/nodejs-sample/)の通りに進めたうえで、Webhookイベントオブジェクトのプロパティを確認し、テキストが送信されたときには`req.body.events[0].message.text`（送信されたテキストそのもの）を、それ以外が送信され
Browserify を試す(node.jsのrequireメソッドをブラウザで使う)
# 経緯
– node-webrtc のサンプルコード解析して、サーバーサイドのnode.jsのJavaScriptなのか、ブラウザ用のJavaScriptなのか、混乱した
– node-webrtcについては別途めとめる予定
– node-webrtcのサンプルでは、Browsersを用いて「node.js用のJavaScript」を「ブラウザ用のJavaScript」に変換していることがわかった
– node-webrtcコードを解析できるように、Browsers の最低限の知識を身に着けるためにまとめるhttps://github.com/node-webrtc/node-webrtc
# 環境
– Windows 10
– node v16.8.0
– npm 7.21.1## npm
– node-webrtcで使っているnode-fetchのバージョンに合わせている
– 詳細は下部にあるソースコードを参照ください“`
+– browserify-middleware@8.1.1
+– browserify@17.0.0
+– exp
