- 0.1. TypeError: Intl.Segmenter is not a constructorの対処法
- 0.2. Bolt+glitchで、投稿に自動でスタンプを押すSlack botくんを開発した
- 0.3. Node.jsを用いて1分でWebサーバをローカルに立てる方法
- 0.4. Node.js + Crypto + url-safe-base64で暗号と複合を試す
- 0.5. Node.jsとjestを使ってGithub Actionsで自動テストを実行する
- 0.6. データを更新するAPIを作る
- 0.7. データを削除するAPIを作る
- 0.8. Node.jsでString.ReplaceAllが使えないんだが!!
- 0.9. TypeScriptでclass名の文字列から動的にclassのインスタンスを生成する
- 0.10. Node-Postgres で大量データを bulk insert した時の備忘録
- 0.11. Vue 3.0 composition apiによるAWS サーバーレス開発 シリーズ② サーバー側環境設定
- 0.12. Node.jsでAbortControllerを使って、child_processを強制的に終了させる方法
- 0.13. Node.js・Expressでffmpegを実行し、アップロードした動画を変換する方法
- 0.14. nodejsとytdl-coreを使用しYouTubeの動画をダウンロードする(コード付き)
- 0.15. AizuHack LINEBot勉強会 Vol.4
- 0.16. 【TypeScript + Express】 “npm run dev”でError: Cannot find module が出たら
- 1. 何にハマったのか
- 2. 解決法
TypeError: Intl.Segmenter is not a constructorの対処法
# `TypeError: Intl.Segmenter is not a constructor`発生の経緯
文字数を数えるChrome拡張を作成中にユニットテストを導入しようと、jsのテストライブラリ`mocha`でテストを書き始めたところで上記エラーが発生しました。ちなみに作成したChrome拡張はこちら?
https://chrome.google.com/webstore/detail/character-counter/inbkndchoofidndibcgbijbfmmnkmoem?hl=ja&authuser=0
## `Intl.Segmenter`とは?
`Intl.Segmenter`はロケールに応じたテキストの分割を可能にし、文字列から意味のある項目 (文字列、単語、文) を取得できるAPIになっています。> The Intl.Segmenter object enables locale-sensitive text segmentation, enabling you to get meaningful items (graphemes, wor
Bolt+glitchで、投稿に自動でスタンプを押すSlack botくんを開発した
# Slack botくんはスタンプが押せるのか
前回の記事の続き的なものになります。そもそもBoltってどう使うの?glitchって?みたいな人は下の記事から見てください。
https://qiita.com/KojoBarbie/items/7897db9d5e8ba3dc935d## 作ろうと思った理由
Slackで下の画像みたいに軽ーく日程調整したいときってあると思うんですけど、こういう時にスタンプを使って意思表示をしてもらうのに自分がいちいちぽちぽちするのめんどくさいなって思ったので、botくんに押してもらえたら少し便利だなという感じで作ってみることにしました。![スクリーンショット (20).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671694/2ded61ff-ab82-966c-8a46-12002e41f63f.png)
## 完成のイメージ
下の画像のように、ある特定の絵文字を押したとき、自動で○・×・考え中の3つのスタンプが押されるようにします。![スクリーンシ
Node.jsを用いて1分でWebサーバをローカルに立てる方法
開発環境
OS:Windows系
node.jsがインストール済み前提やること
1.winowsキー+Rの検索窓でcmdを入力し、cmd起動
2.cdでウェブサイトのファイルを置きたい場所に移動:::note info
カレントディレクトリにファイルが作成されてしまうので、注意
:::3.以下を投入
“`ruby:cmd
>npx express-generator myExpressApp –view ejs
>cd myExpressApp && npm install
>npm start
“`
Node.js + Crypto + url-safe-base64で暗号と複合を試す
# ? 初めに
Node.jsのCryptoを触って暗号化について勉強したことをこの記事にまとめました。
理解に苦しんでいる方が、この記事を読んでなんとなくイメージができるようになれば嬉しいです。サンプルコードは[GitHub?](https://github.com/hinahinako/crypto-sample)で公開しています。
# ♻️ 環境
– Node.js: v12.20.0# ? 最終的なディレクトリ構成
これだけです。
“`
– node_modules
– package.json
– package-lock.json
– server.js
– README.md
“`# ✨ プロジェクト作成
“`
mkdir security
cd security
npm init -y
“`以下の設定でで新しいnodeプロジェクトが作られます。
“`json
{
“name”: “security”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.j
Node.jsとjestを使ってGithub Actionsで自動テストを実行する
システムの品質を保つためには、プログラムを作成したら期待通りに動くか動作確認が必要です。
そして品質を保ち続けるには、プログラムに変更を加えるたびに期待通りに動くか動作確認をする必要があります。
今回は以下の条件で自動テストが動いて品質を担保し続ける仕組みを作りたいと思います。# 前提条件
– GithubActionsでテストを動かす
– Node.jsのバージョンは14系とする
– テストフレームワークはjestを使用する
– 自動テスト実行のタイミングは、mainブランチへプルリクエストを出したタイミングとする
– こうすることで、開発者がプルリクエストを出したときに毎回自動テストが動いて品質を保ちやすくなる
– そして自分のコードでテストが落ちたことが明白になる
– レビューアはテストが通ったことを確認してからmainブランチにマージできる# ファイル構成
“`
nodejs-test-example
│ .gitignore
│ package-lock.json
│ package.json
│
├─.github
│ └─workflows
データを更新するAPIを作る
今回は更新用のAPIを作成します。APIの使用としては以下です
“`
メソッド PUT
エンドポイント /api/update/{id}
リクエストのボティ {“name”:更新後の文字列}
“`## やりたいこと
・一覧のname列をクリックすることで更新用のダイアログを表示する
・ダイアログ上で文字列を修正して「更新ボタン」を押下するとデータを更新すうr修正内容
https://github.com/kusakari-kai/rgforcommunication/commit/0a67cf27d2552e3d08eeb4105bfbd88099c5bb86
### 画面を整備する
https://mui.com/material-ui/react-dialog/
上記を参考にmuiのダイアログを利用します。以下のname列をクリックするとダイアログを表示するように修正しました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110457/bd313b2c-c29
データを削除するAPIを作る
今回は削除用のAPIを作成します。APIの使用としては以下のようにします。
“`:APIの仕様
メソッド DELETE
エンドポイント /api/delete/{id}
“`## やりたいこと
・一覧の行に「削除」ボタンを設置して押下するとDELETEのリクエストを送る
・サーバ側でリクエストを受け取りデータを削除する修正内容
https://github.com/kusakari-kai/rgforcommunication/commit/a26e8df513c47e55d8d6969c9d2e5cf3268ecc45
### 画面を整備する
途中で改行されてしまっていたので一列に表示して削除ボタンを表示する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110457/73f21d83-6661-d388-733b-782e35a36c58.png)### DELETEボタンを押下する際の関数のCall元のイベントハンドラを作る
押下するとchecktstという関
Node.jsでString.ReplaceAllが使えないんだが!!
## 使えなかった
– とある案件を引き継ぎ、Express.jsで書かれたサーバーサイドを書いていた。
– CSV的にカンマで区切られた数値列をスペース区切りに変更したかったので、“`javascript
const nums = ‘0.0,10.0,20.0,30.0,40.0,50.0,60.0’
// こんな感じの文字列を// 0.0 10.0 20.0 30.0 40.0 50.0 60.0
// ↑こんな感じのスペース区切りにしたい// ということで
const nums_space = nums.replaceAll(‘,’, ‘ ‘)
// こんな感じで処理したい
“`– こんな感じのことをした
– すると `nums.replaceAll(…) is not function` みたいな感じで怒られた
## Node.jsのバージョンが古かった
– 調べてみると単純な話、Node.jsのバージョンが古くて `String` 型に`replaceAll`が実装されていないということだった
– `replaceAll`は比較的新しいES
TypeScriptでclass名の文字列から動的にclassのインスタンスを生成する
クローラーの開発をしていて、Site1Crawler,Site2Crawlerといった形で数字の違うクローラーを作成、class名から動的に別々のクローラーのインスタンスを生成したかったのでその方法です。
ディレクトリは適当でいいのですが、今回4つのファイルを作成します。
– Crawler.ts
– 量産されたclassをまとめて書いておくファイル
– BaseCrawler.ts
– 継承される元となるclass。インターフェースとして書いてもいいが今回はclassで作成する
– Site1Crawler.ts(Site2Crawler.tsなどこのファイルを量産していく)
– BaseCrawlerを継承した動的に呼び出されるclass
– CrawlerFactory.ts
– 動的に呼び出す部分を記載するFactory classまず最初に継承元となるBaseCrawlerのclassを作成します。
“`Javascript:BaseCrawler.ts
export default class BaseCrawler
{
pu
Node-Postgres で大量データを bulk insert した時の備忘録
node-postgresを使用してbulk insertする時に苦労したので、備忘録を残す。
## 実行環境
– linux
– nodejs
– postgres## 性能比較
1行ずつのINSERTとの性能比較については、こちら([1000万件のINSERTを映画1本分ぐらい時間節約できた話](https://datumstudio.jp/blog/postgresqlでinsert速度比較/))を参照。## postgres の準備
下記サイトを参考に node-js から postgres に接続する準備をする。
[`Node-Postgres` を使ったときに、試行錯誤してできた Postgres クラス](https://qiita.com/masaks/items/3ee1b5a06a95315a7ae7)## 大量データを 1000 行単位に分ける
paramsにはINSERT時のパラメータを配列で格納しておく。
“`js:例
[
[‘001’, ‘hoge’],
[‘002’, ‘fuga’],
[‘003’, ‘piyo’],
]
Vue 3.0 composition apiによるAWS サーバーレス開発 シリーズ② サーバー側環境設定
# サーバー:Nodejs 16.0 + サーバーレスフレームワーク + serverless-layersプラグイン + sequelize
##アクセス構成
AWS Api -> Lambda(sequelize) -> DBアクセス
## DBの構築 Test用テーブル追加
“`
CREATE TABLE IF NOT EXISTS `member` (
`id` INTEGER NOT NULL AUTO_INCREMENT,
`first_name` VARCHAR(255) NOT NULL,
`last_name` VARCHAR(255) NOT NULL,
`age` INTEGER,
`createdAt` DATETIME ,
`updatedAt` DATETIME ,
PRIMARY KEY (`id`)
) ENGINE=InnoDB;
insert into member(first_name,last_name,age) value(“fn
Node.jsでAbortControllerを使って、child_processを強制的に終了させる方法
はいさい!ちゅらデータぬオースティンやいびーん!
# 概要
AbortControllerを使って、Node.jsで実行した`child_process`を強制的に終了させる方法を紹介します。## 背景
本記事は、前回投稿した、Node.jsでffmpegを使って動画を変換する記事を元に作成しています。変換の作業に時間がかかりすぎて、サーバーの負荷が過ぎないように、ある一定の時間が経っても子プロセスが終了しなかったら、強制的に終了させる必要があります。
ここで、Abort Controllerを使ってShellに終了のシグナルを送ることができますので、解説していきたいと思います。
## 事前知識
前回の記事を読んでいただければわかりやすいかと思います!https://qiita.com/tronicboy/items/f3f5d2dbcade2a8e01d9
# コード
前回のコードのPOSTのところを修正します。`spawn`の引数の設定オブジェクトに、`signal`を追加します。
“`typescript:src/index.ts
…app.po
Node.js・Expressでffmpegを実行し、アップロードした動画を変換する方法
はいさい!ちゅらデータぬオースティンやいびーん!
# 概要
本記事では、Node.jsの`child_process`の`spawn`を使って、アップロードされた動画をffmpegで変換する方法を紹介します。## 背景
Node.jsでPythonなどのスクリプトを実行して、その結果を持ってレスポンスを返すようなコードが書きたいことが動機で本記事の内容を勉強することになりました。Node.jsのイベントループシステムは非常に強力で、TypeScriptも共に使うと、JavaScriptの弱点も補ってほぼ無敵だと思います。
しかし、JavaScriptはイベントループがあっても、スレッドは一つ。そこで問題になるのは、大量のリクエストを捌くIOというより、時間がかかるプロセスが問題です。
また、Pythonの機械学習モデル、他言語のスクリプトなど、JavaScriptでは実行できないプロセスもあります。
そこで、助けになるのは、Node.jsの`child_process`機能です。
child_processは、サーバーのshellでコマンドを実行し、その結果を持ってN
nodejsとytdl-coreを使用しYouTubeの動画をダウンロードする(コード付き)
今回はytdl-coreを使用し動画や音声をダウンロードするコードを紹介していきます。
必要なもの
– nodejs
– ytdl-core(npmでインストール)“`
npm i ytdl-core
“`早速ですがコード
“`js:index.js
const ytdl = require(‘ytdl-core’)
const fs = require(‘fs’)const download = ‘audio’
const url = ‘https://youtu.be/…’if(download === ‘audio’) {
ytdl(url, {
filter: “audioonly”,
fmt: “mp3”,
}).pipe(fs.createWriteStream(“download.mp3”));
}if(download === ‘video’) {
ytdl(url, {
fmt: “mp4”,
}).pipe(fs.createWriteStream(“download.mp4”));
}
“`dow
AizuHack LINEBot勉強会 Vol.4
# AizuHack LINEBot勉強会 Vol.4
## 資料一覧
– [LINEBotとは](https://docs.google.com/presentation/d/1U1vl67gJNOdO5in7H__jPXWieT3Lv0cFmv350AmAKHA/edit?usp=sharing)
– [AizuHack LINEBot勉強会 Vol.1](https://qiita.com/shinbunbun_/items/7efef6db31514831143d)
– [AizuHack LINEBot勉強会 Vol.2](https://qiita.com/shinbunbun_/items/4034e9c2c7553ed3107e)
– [AizuHack LINEBot勉強会 Vol.3](https://qiita.com/shinbunbun_/items/0dfc42584518dc60e3e7)
– AizuHack LINEBot勉強会 Vol.4(本記事)## はじめに
こんにちは、会津大学学部二年のしんぶんぶんです。
今回はGCP(Google
【TypeScript + Express】 “npm run dev”でError: Cannot find module が出たら
こんにちは。
Qiita1発目の記事を何にしようかと悩んでいたのですが、ちょうど
「TypeScriptでバックエンドつくってみよー」
と、半分軽い気持ちで作っていたら見事ハマったので備忘録。nodemonからts-node-devに変更し、package.jsonでパスエイリアスをフルパスで表記したら、エラーが発生しなくなったので紹介する。
__※ts-nodeがインストールされていることが前提条件__
何にハマったのか
REST APIをnodemonで実行したら、モジュールエラーが発生した。
エラー文は以下。
“`
Error: Cannot find module ‘./index.ts’
“`解決法
1. 「npm uninstall nodemon」でアンインストール。
→解決方法とまではいかないが、理由としてはモダンなツールではないらしいので。
というよりも、ググって出てきた方法では解決できなかった。2. 「npm i ts-node-dev」でインストール
→これ
Node.jsとytdl-coreでYouTubeをDLする時につまずいた点(DLできない、無音になる)
# はじめに
YouTube動画をDLしようとWebで検索すると、怪しげな広告が表示される海外のサービスばかりだったりします。こういったサービスを利用するのはちょっと怖いなと思うので、YouTube動画をDLできるアプリが欲しいと思い調べてみました。調べてみたところ、[wintyoさん](https://qiita.com/wintyo)が [youtube-downloader](https://github.com/wintyo/youtube-downloader) というアプリを公開していたため、動かしてみることにしました。([wintyoさん](https://qiita.com/wintyo)ありがとうございます)
その際に、動画ダウンロードの処理でつまずいた点があったため記事にしてみようと思います。動かすにあたって以下の記事を参考にさせて頂きました。
– [YouTube動画をダウンロードするWebアプリを作る](https://qiita.com/wintyo/items/4dd93221ae4094abd80a)
– [Node.jsでYoutube動画を
Node.js・Expressでmulterを使って、ファイルをアップロードする方法
はいさい、ちゅらデータぬオースティンやいびーん!んな、がんじゅー?(みんな、元気?)
# 概要
本記事では、Node.jsのexpressフレームワークで、multerというミドルウェアを使って、FormDataからファイルを取って、アップロード機能をバックエンドに追加する方法を紹介します。## 事前準備
### Node.jsのローカルインストール
https://nodejs.org/en/download/## 目次
1. Expressのセットアップ
1. \
Webpacker::Manifest::MissingEntryError 解消法 – Rails version 6.0 環境
## 対象環境
node.js : v16.x.x
rails : v6.0.x## 具体的なエラー前動作
“`:terminal
rails new xxx
cd xxx
rails g scaffold user
rails db:create
rails db:migrate
rails s
“`
として、
http://localhost:3000/users
にアクセスすると下記のエラーが発生![Screen Shot 2022-07-11 at 11.58.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2646082/3bf33b38-d7f7-251e-5b27-00c41ad72a48.png)
## 対処法【下記いずれかの対応で対処可能です】
### 1.railsのバージョンを6.1.xに変更する(推奨)
>参考:
[コマンド](https://qiita.com/seijMAN/items/ac363f6688c72f4ea186)
[インストール可能なバージョ
Nuxt3にElementPlusを導入する。
# やる事
Nuxt3にElementPlusを導入して、サクッと画面を作れるようにする。# 動作環境
– Windows10Home64bit(21H2)
– node v16.16.5
– element-plus v2.2.6
– nuxt v3.0.0-rc.4
– sass v1.53.0
※ChromOSのLinux環境でも動作確認済み# 手順
## プロジェクト作成
公式ドキュメント通りにやる。Nuxt2系と違い細かい質問は聞かれないし必要最小限の要素だけが用意される。“`
npx nuxi init sample-elementplus
cd sample-elementplus
npm i
“`## 動作確認
親の名前並みに見たコマンドで動作確認。とても起動が速い。“`
npm run dev
“`## ElementPlusの導入
### 導入
ひとまずnpmからインストール“`
npm i element-plus @element-plus/theme-chalk sass
“`公式ドキュメント曰く、Vueのプロジェ