- 1. 実装の手順
- 1.0.1. Node.js立ち上げ
- 1.0.2. 新人に負けない本棚管理ページ その１
- 1.0.3. AWS lambda(Node.js)でオレオレ証明書(self-signed)を一時的に信頼してSSL通信を行う方法
- 1.0.4. Dockerコマンド ～学習メモ書き
- 1.0.5. GASの処理速度が遅いのでNode.jsに移行したらwebアプリが高速に
- 1.0.6. Macでnodebrewを使用したnodeのインストールと設定
- 1.0.7. npm install でエラー。gyp: No Xcode or CLT version detected!
- 1.0.8. 破壊するかどうか
- 1.0.9. 「うちでヨガしよう」ヨガポーズがあっているか判定してくれるLINE bot～Node.jsに読み込む～
- 1.0.10. 在宅ワーク中に会議中サインをobnizとLINEBotで作ってみた deploy編
- 1.0.11. Node jsとESP32を使ってLEDをリアルタイムに制御する
- 1.0.12. Node.jsのモジュール解決プロセス(和訳)
- 1.0.13. Node.js + ibm_db + Db2 で、プレースホルダを用いたSQLを実行する
- 1.0.14. Node.js + ibm_db で Db2 に接続してSELECT文を実行する
- 1.0.15. 【Node.js】Webpack + Express環境下でのpug(ejsでの可？)導入
【Node.js】bundleサイズは大事って話
#サービスの動作が遅かった
最近，アーチャー伝説ってスマホアプリ専用の[【マルチ募集掲示板サービス】](https://archer-duo.herokuapp.com/)をリリースしました．技術としては，Node.js/React/TypeScript/Express/Webpackを使用しました．このサービス，募集スレッドのリアルタイム更新をアピールしてるんですが，その肝心のbundle.jsが動き出すのが遅いんですよね．
そこでSSR(Server Side Rendering)について調べてたら[こんなサイト](https://www.publickey1.jp/blog/17/server_side_renderingserver_side_rendering_ng-japan_2017.html)が出てきて，めっちゃわかりやすいやんけ！と．要するにNode.jsってすごいし早いけど，やっぱSSRしない方が動作は早いよねと．でもSEOの観点とUX考慮するとまあSSRした方がいいよねと．
そこで重要になるのがjsの読み込み速度．今回Webpackを使ってるのでここをなん
AiScriptを使ってみた
# はじめに
[AiScript](https://github.com/syuilo/aiscript)（読み：あいすくりぷと）はMisskeyの開発者でもあるsyuiloさんが作成したプログラミング言語の一種です。
> **AiScript** is a scripting language runing on JavaScript. Not altJS.
>
> – ホストから変数や関数を提供することが出来ます
> – 外の情報にはアクセス出来ないので安全にスクリプトを実行できます(サンドボックス環境)ベースはTypeScript(JavaScript)で、Node.jsで動作します。
※この記事は2020年4月17日現在のものです。執筆時点では開発段階であるため、仕様変更がある場合がありますので予めご了承ください。
## 動作環境の構築
動作環境を構築するにはNode.js(LTS版で動作すると思います)が必要になります。
インストールしていない場合はインストールしておいてください。1. リポジトリをクローンします。: `git clone https://git
nvm, Node.js, npmをUbuntuで最新にUpdate
Node.js環境を年に2回程度使うのですが、使い方を毎回忘れているので備忘録として残しておきます。
# 環境
|種類|システムなど|備考|
|:-:|:-:|:–|
|OS|Ubuntu18.04.01LTS|Windowsから仮想で動かしています|
|Node.jsバージョン管理|nvm|もっといいのもありそうですが、たまにしか使わないので変えるのが面倒で調べていない|
|Node.jsパッケージ管理|npm|なんとなくnpm使っています|# Update方法
## nvm
最初はnvmのバージョンチェックします“`bash
nvm –version
“`[GitHubの「Installing and Updating」](https://github.com/nvm-sh/nvm#install–update-script)にあるコマンドでnvmをアップデートします。[最新のバージョン](https://github.com/nvm-sh/nvm/releases)(*”v0.35.3″*の部分)に注意してください。
“`bash
curl -o-
WebSocketが切断された際に、自動的に再接続する方法
先日、WEBサイト制作者さん向けに、デザインデータや原稿などWEBサイト制作に必要なあらゆるデータを、チームで簡単に共有できるウェブサービスを公開したのですが、制作の際に得た知見をシリーズで共有していこうと思います。
▼ウェブサイト製作者のためのプラットフォームCrew’sHub
https://crewshub.net## WebSocket の自動再接続が行われない
[Crew’sHub](https://crewshub.net)には、リアルタイムのチャット機能があり、Web Socketを利用しています。
また、データ管理画面でも、プロジェクトメンバーが編集したら即座に更新されるようになっており、やはりここでもWebSocketを利用しています。開発中に遭遇した問題として、WebSocketが切断された際に、自動再接続がうまく行われないということがありました。
クライアント側では、Reconnecting WebSocketという、WebSocketがクローズされた際に自動的に再接続が行われるモジュールを採用しています。
**reconnecting-websoc
【JavaScript】配列の一部だけを合計して新しい配列を作る
変換前の配列：“`array1 = [ 年, 月, 日, 人数1, 人数2, … , 人数47 ];“`
変換後の配列：“`array2 = [ 年, 月, 日, 人数1～人数47の合計 ]; “`つまり、人数を合計したい。
“`javascript
let array2 = array1.slice(0, 3).concat(array1.slice(3).reduce((a, x) => { return a + x }));
“`
Node.js(五):Express 実装
今回からはNodeでExpressを勉強しましょう、Expressは人気なのJSバックエンドモジュールと言うことです。先ずはインストールしてみよう。
実装の手順
Node.js立ち上げ
新たなフォルダを作って、エントリポイントとしてのapp.js追加して、vscode中のターミナルでポロジェクトにnode.jsをインストする。
“`terminal
xxx.xxx:my-first-express$npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.See `npm help json` for definitive documentation on these fields
and exactly what they do.Use `npm install
新人に負けない本棚管理ページ その１
# 目次
– 新人に負けない本棚管理ページ その１（ここ）
– 新人に負けない本棚管理ページ その１（これから書くよ）# ４月に新入社員が入ってきました
とうとう私も先輩になってしまいました。
つい１年前までピチピチの新人だったのですが、時の流れというのは無情なもので、
何も悪いことをしてないのに若葉マークを剥がされるんですよね。
まぁ自動車も同じですが。今年の新人研修では「オフィスにある書籍の管理ページをWebで作る」というお題が出たそうです。
なので私も新免マークを貼りなおして（？）、サクサクっと作ってみたいと思います。# 開発環境
開発OS ：**Windows10**
稼働OS ：**Raspbian buster**
サーバー ：**Node.js**
フレームワーク ：**Next.js（React）**
データベース ：**MariaDB**
エディタ ：**Visual Studio Code**
SSHクライアント：**Tera Term**
おやつ ：**ダイソーで買ったオーザックのり塩**# 構
AWS lambda(Node.js)でオレオレ証明書(self-signed)を一時的に信頼してSSL通信を行う方法
# はじめに
AWS lambdaのNode.js(https標準モジュール)で実装した、WEBサイトへhttpsのリクエストを投げる処理で、以下の２つのエラーが発生した際の対応についての記事です。
※急いでいる方、ソースコードだけ見たい方は[ここから見ればOK](#3オレオレ証明書self-signedを一時的に信頼する)です# 前提
・導入メモになります。
・いろいろ試してみたが、やっぱりHyperVがいい# 準備するもの
## アプリケーション側
> アプリケーション側はnodejs を使用します。
> 今回はnode の公式リポジトリを使用するための、Dockerfile“`ruby:app-server/Dockerfile
FROM node:5
RUN npm -g install redis
ENV NODE_PATH C:\nodejs\node_modulesENTRYPOINT [“node”, “app.js”]
“`“`ruby:app-server/src/app.js
var redis = require(‘redis’);
var redis_client = redis.createClient(6379, “noderedis”);
var listen_port = 10080;require(‘http’).createServer(function (request, response) {
redis_client.incr(
GASの処理速度が遅いのでNode.jsに移行したらwebアプリが高速に
#はじめに
弓道で用いるwebアプリを開発しているんですが、データの読み書きがクソ遅いので、
GoogleAppsScript+スプレッドシートからNode.js+Firebaseに移行しました。
（GoogleAppsScript Web APIからCloud Functions APIに変えたいうこと）Google Apps ScriptもNode.jsも基本は一緒ですが…
これでかなりwebアプリの待機時間が短くなったので、記事にしようと思います。
私の使用用途は、**スプレッドシートにユーザーやデータを保管し、それを読み書きする、つまりwebアプリのバックエンドとしての利用でGASの処理速度が遅い**と感じたものであるので読む際は注意してください。
#結果から
どれだけ早くなったか先に紹介しておきます。的中を記録し、その月のデータをとってくる処理を例に紹介します。記録するデータは日付、中たった数、引いた本数、的中率の四つのデータです。月のデータは付けた日の月のデータ全てとってきます。
↓Google Apps Script + スプレッドシート
を参考に削除を実施。“`shell
$ lsbom -f -l -s -pf /var/db/receipts/org.nodejs.node.pkg.bom \
| while read i; do
sudo rm /usr/local/${i}
done
“`
lsbomコマンドとは
>BOMファイルの内容を表示するコマンド。BOMファイルとは、
「Mac OS X Bill of Materials File」のことで、Apple社固有のファイル。
インストーラ（Installer.app）を使用するMacOS X標準のパッケージファイルに含まれている。(参考:[lsbom- BOMファイルの内容を表示する](https://renoji.com/IT.php?Contents=Program_ShellScript_Bash/Cmd_lsbom.html))
“`she
npm install でエラー。gyp: No Xcode or CLT version detected!
#npmを使ってみる
今回初めて、Node.jsを使うためにセットアップ！
と思っていたのですが、いきなりエラー続きで意味も分からず苦戦していたので共有します。
皆様が同じ目に合いませんように。“`
$ cd work/01-webpack
“`
まずは、フォルダを作成“`
$ npm init -y
“`
そして、package.jsonファイルを作成を作成しました。
ここまでは、良かったのですが。。。
アプリケーションで使用するモジュールをインストールするために、webpackをインストールする時に“`
$ npm install webpack webpack-cli –save-dev
“`
を行ったあと、エラーが。“`
No receipt for ‘com.apple.pkg.CLTools_Executables’ found at ‘/’.No receipt for ‘com.apple.pkg.DeveloperToolsCLILeo’ found at ‘/’.
No receipt for ‘com.apple.pkg.D
破壊するかどうか
ほぼ備忘録。よく使うメソッドがArrayを破壊するかどうか
ググるときは日本語なら`配列 [メソッド名] 破壊的`、英語なら`array [メソッド名] mutating`あたりがよい# 破壊する
– `fill()`
– `pop()`
– `push()`
– `reverse()`
– `shift()`
– `sort()`
– `splice()`
– `unshift()`# 破壊しない
– `concat()`
– `entries()`
– `every()`
– `filter()`
– `find()`
– `forEach()`
– `includes()`
– `indexOf()`
– `join()`
– `keys()`
– `map()`
– `reduce()`
– `some()`# 参考情報
– 手元の環境はNode v12.16.1
– [Array – JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_
「うちでヨガしよう」ヨガポーズがあっているか判定してくれるLINE bot～Node.jsに読み込む～
#概要
コロナウイルの影響で外出自粛、在宅ワークをされている方が多いと思います。普段よりも運動量が減ってしまうので、何かできないかと考えてヨガを支援するLINE botを開発しています。#やりたいこと
機能としては、お題のポーズ写真がbotから送られてくるので、そのポーズをとった自分の写真をbotに送ると正しいポーズか判定してくれます。まずはLINE botアカウントだけ作りました。
#実装
学習モデルの作成は次の２つの記事で解説しています。
・ [Googleが提供しているサービス「Teachable Machine」でヨガポーズの学習モデルを作って遊んでみた](https://qiita.com/kmaepu/items/1350464b3940dfe6957e)
・[Teachable Machineで作成したモデルを使
在宅ワーク中に会議中サインをobnizとLINEBotで作ってみた deploy編
### はじめに
この記事は前回[在宅ワーク中に会議中だよサインをobnizとLINEBotで作ってみた \- Qiita](https://qiita.com/3yaka4/items/5765dc5abf547783dc59)のなかで外部Deployができなかったので前回のコードを元にHerokuにDeployしました。
deployとは別のところで一部未完成です。### 概要
「今オンラインミーティング中！！！！ノックしないでー、開けないでー」みたいなことで気まずい思いをしたことが増えてきたので、いわゆる トイレの空き情報「空」 みたいなサイネージが欲しくて作りました。LINEBotに「開けないで」といれると obnizのディスプレイに 『 × 』 を描画し
「終わったよ」 といれるとけしてくれます。
### できたもの
(ngrokからHerokuにかわりましたが、よく考えると見た目は前回同じだった。。。)
“`
##パッケージのインストール
して以下のコマンドを実行ください“`
$npm install express mosca mqtt socket.io -s
“`
## サーバーのコードを作成
index.jsを作成して以下のコードを書き込む“`js:index.js
//各パ
Node.jsのモジュール解決プロセス(和訳)
Node.jsの`require`がどのようにモジュールを探すか、そのプロセスを説明した下記公式ドキュメントの和訳です。
* [Modules | Node.js v13.13.0 Documentation](https://nodejs.org/api/modules.html#modules_all_together)
内容に誤りがあればお教えください。
## Node.jsのモジュール解決プロセス
require(X) をパス Y にあるモジュールで実行したとき、
1. もし、 X がコアモジュールなら、
– a. コアモジュールを返す
– b. __終了__
2. もし、 X が “/” で始まるなら、
– a. Y のパスをファイルシステムルートにセットしなおす
3. もし、 X が “./”、”/”、”../”のどれかで始まるなら、
– a. [LOAD_AS_FILE]\(Y + X)
– b. [LOAD_AS_DIRECTORY]\(Y + X)
– c. 例外”not found”を投げる
4. [LOAD_SELF_
Node.js + ibm_db + Db2 で、プレースホルダを用いたSQLを実行する
プレースホルダを用いたSQLを使って、Db2にアクセスします。
SQLの条件指定を固定値(リテラル)で記述すると、指定される条件が変わるごとに新しいSQLとしてコンパイルされることになり、where条件だけが異なる同じSQLでパッケージ・キャッシュがあふれてしまいます。コンパイルにかかる時間ももったいない。
そうならないよう、可変となる値の部分だけ(場合によっては列名なども)、疑問符「？」で表したSQLで記述することができます。JDBCなどではパラメーターマーカーと呼ばれますが、Node.jsではプレースホルダと表現されるようです。ここから先は、Db2を使う場合に、プレースホルダにどうやって値を渡すかのメモです。
## プレースホルダーを用いたSQL実行例
ibm_dbのqueryでは、値を配列として渡します。“`javascript:test2.js
var ibm_db = require( ‘ibm_db’ );
var settings = require( ‘./settings’ );var db_con_str =
“DRIVER={DB2}”
+
Node.js + ibm_db で Db2 に接続してSELECT文を実行する
Node.jsでDb2にアクセスしてみました。
Db2導入済みのLinux環境に、Node.js/ibm_dbをインストールするところからメモを残します。## Node.jsからDb2にアクセスするための前提
* Db2サーババージョンがV10.5.0.4以上であること
* クライアントバージョンは制限なし## 環境
| 項目 | バージョン |
|:——|:——|
| Linux | CentOS Linux 7 (Core) |
| npm | 6.14.4 |
| ibm_db | 2.6.4 |
| Db2 | 11.5.0 |## Node.js のセットアップ
### 1. Node.js インストール・イメージのダウンロード
Windowsにいったんダウンロードして、LinuxへWinSCPで転送。
https://nodejs.org/en/download/### 2. ファイル展開
(権限の都合上、rootユーザで実行)
どのディレクトリに展開するかは環境ごとのルールに従うと良さそうですが
個人で使える環境なので、
【Node.js】Webpack + Express環境下でのpug(ejsでの可？)導入
#pug導入前環境
Webpack + Express + React + Typescript#pug導入の理由
導入前はExpressでSSRをし，クライアントからのリクエストに対しres.send(html)で単純にhtmlスクリプトを送信するだけだった．これではデータベースから取得した値をクライアント側に渡すことができない．そのため，テンプレートエンジンであるpug(or ejs)を導入したかった．#やりたいこと
単純にルートにアクセスされた時にhtmlテンプレートに値を渡してレンダリングしたい．今回やりたいこととしては，レンダリングさえしてくれれば良いので，htmlとしてdistに出力されなくて良い(これをしようとするとWebpackでHtmlWebpackPluginが必要)“`typescript:server.ts
import express from ‘express’;
const postController = require(‘./controllers/postController’);
const app = express();app
