- 1. 【覚書】create-react-app でホットリロードが効かないときの対処法
- 2. Nuxtで画像ダウンロードツール作ってみた
- 3. React コマンドメモ
- 4. nexeでNode.jsのアプリをパッケージングしようとしたらNode.jsのバージョンで怒られた
- 5. 数字に日本語の桁（万・億・兆）を付ける JavaScript
- 6. [node] requestを使わずに標準ライブラリでPOST
- 7. TypeScriptでNodeモジュールを作成してnpm公開するまで
- 8. strapiのプラグインを左メニューに表示させる方法
- 9. 【覚書】ts-node で Node.js のバッチを書く
- 10. Content security policyはレスポンスヘッダの記述が優先される
- 11. Brightcove LIVE APIからデータ取得する方法(Lambda@Edge)
- 12. 【BTP】Node.jsとPostgreSQLでシンプルなアプリケーションを作成（2）CRUD処理編
- 13. [m1]asdfでバージョン管理を行なったnodejsを使うまで[mac]
- 14. 【BTP】Node.jsとPostgreSQLでシンプルなアプリケーションを作成（1）準備編
- 15. FATAL ERROR: wasm code commit Allocation failed – process out of memory
- 16. npmのアップデート(npm install -g npm)をしてもバージョンが変わらない場合の解決例
- 17. Jest・Supertestを使用したnode.js(Express)のAPIテスト app.listen()はエラーになる
- 18. 面倒くさがりな人のための ESLint
- 19. Expressを使用しない単純なNode.jsサーバーの作成
- 20. node.jsアップデート
【覚書】create-react-app でホットリロードが効かないときの対処法
まず cross-env を入れる
“`
npm i -D cross-env
“`次に package.json の scripts.start を書き換える
“`json
{
“scripts”: {
“start”: “cross-env FAST_REFRESH=false react-scripts start”
}
}
“`以上。
Nuxtで画像ダウンロードツール作ってみた
以前、↓の記事でCLIの画像ダウンロードツールを作ったのですが、不要な画像までダウンロードされてしまうのでGUI化し、選択してダウンロードできる様にしてみました。
https://qiita.com/teracy55/items/f8a7c90b021368b12ab6
# 今回作ったツール
https://teracy-img-downloader.herokuapp.com/
# 機能紹介
使い方は簡単です
1. ダウンロードしたい画像のあるサイトのURLを入力し、検索します
2. ダウンロードしたい画像を選択します（選択した画像は赤くなります）
3. ダウンロードボタンを押してダウンロードします
※「いらすとや」さんのページを使わせていただいてますが、このツール使用時は対象のサイトがスクレイピングを禁止していないことを確認
React コマンドメモ
# 新規作成
“`shell
$ npx create-react-app [プロジェクト名]# TSX(JSXのTypeScript版)で作りたい時
# –template typescriptをつける
$ npx create-react-app –template typescript [プロジェクト名]
“`
# 開発サーバー起動
“`shell
$ npm start
“`# ビルドしてHTML/CSS/JSファイルを生成
“`shell
$ npm run build
“`# jestによるテストの実行
“`shell
$ npm test
“`
nexeでNode.jsのアプリをパッケージングしようとしたらNode.jsのバージョンで怒られた
# nexeでNode.jsのアプリをパッケージングしようとしたらNode.jsのバージョンで怒られた
久しぶりにNode.jsのアプリのパッケージングで、exeファイル作ろうとしてみたらエラーで怒られたので回避策を掲載しておきます。
## 私の環境(ERROR再現時)
– Windows 10
– nvm-windows で node.js のバージョン管理
– node.js : v14.17.0
– npm : v6.14.13## 結論
nexeのv3.3.3でリリースしている、リストの一覧からnode.jsのバージョンを合わせないといけいない。
windows環境なら、`windows-x64-14.15.3`なので、node.jsのバージョンは、`v14.15.3`にする。[nexe の github releases](https://github.com/nexe/nexe/releases/tag/v3.3.3)
 => {
if (typeof num === “number”) {
num = num.toString();
}let prefix = “”;
if (num[0] === “-“) {
num = num.slice(1);
prefix = “-“;
}return (
prefix +
num
.slice(0, -12)
.replace(/^0+/, “”)
.replace(/([0-9]+)/g, “$1兆”) +
num
.slice(-12, -8)
.replace(/^0+/, “”)
.rep
[node] requestを使わずに標準ライブラリでPOST
こんにちは take-2405です。
AWS LambdaでSlack botを作成しました。参考にさせていただいた記事
https://qiita.com/rei-ta/items/931caaaef2684c97e4cf
## お急ぎの方用
“`javascript
const https = require(‘https’);
const querystring = require(‘querystring’);
.
.
.
var post_data = querystring.stringify({channel:”,text:}, null);
let options = {
host: ‘slack.com’,
path: ‘/api/chat.postMessage’,
port: 443,
headers: {
‘Content-Type’: ‘application/x-www-form-urlencoded’,
//他にtokenなど
},
TypeScriptでNodeモジュールを作成してnpm公開するまで
## 0. はじめに
Nodeモジュールをnpm公開までしたことなかったなーと思い、ひまだったので備忘録として手順をまとめました。## 1. Nodeモジュールを作成する
今回はmicroCMS(じゃなくてもいいけど)からデータを取得するだけの超ミニマムなNodeモジュールを作成していきます。
### 1-1. package.jsonを作成する
以下のコマンドを実行してpackage.jsonを作成します。
(:writing_hand:package.jsonは、Node.jsのプロジェクトが依存するパッケージ情報をまとめたファイルになります。)“`
> npm init
“`色々聞かれますが、質問内容は以下を指します。
– package name・・・プロジェクト名
– version・・・プロジェクトのバージョン (:writing_hand:開発段階では0.1.0とか0.0.1の方がいいかも。お好みで)
– description・・・プロジェクトの説明
– entry point・・・エントリポイントに指定するファイル
– test command
strapiのプラグインを左メニューに表示させる方法
# はじめに
strapiはポストwordpressとして非常に期待しているのですが、日本語の資料が少ないので苦労しており、少しでも参考になればと思います。
今回は、自作したプラグインを管理ページに表示させようとしたところ、`yarn develop`と`yarn start`で起動した場合にプラグインが表示されない問題が発生したので解決方法を記載しています。
# 動作環境
– Mac: MacBookPro macOS Big Sur 11.3.1
– node: v12.18.3
– yarn: 1.22.10
– Strapi v3.6.2現象を再現するために新規にプロジェクトを作成します。
“` terminal
$ yarn create strapi-app my-project –quickstart
“`適当にadminユーザーを作成してログインします。
で動くExpress.js+Vue.jsなWebアプリを趣味で製作していたときのこと、HTML上でCSPを記述しているのにGoogle アナリティクスが読み込めないという不具合が発生。ローカルで動かしていた分には発生しなかったが、GAE上にデプロイすると読み込めなくなる# とりあえずmetaタグに書く
そもそもCSPとは
[コンテンツセキュリティポリシー (CSP) – HTTP | MDN](https://developer.mozilla.org/ja/docs/Web/HTTP/CSP)HTML上からアクセスできるリソース、通信先を明示してセキュリティを保つ仕組みらしい。
記述方法は2種類あり(ここ大事)– httpレスポンスヘ
Brightcove LIVE APIからデータ取得する方法(Lambda@Edge)
# サーバーサイドの実装(Lambda@Edge – node.js)
※注意: GETとPUT(パラメータなし)のみ動作確認しています。
POSTやDELETEはパラメータの書き方が違うはずなので、別途実装する必要があります“`javascript:index.js
/**
* フロントから直接ブライトコーブAPIに問い合わせると、
* CORSポリシー違反でデータ取得ができないため実装した
*
* 2021.05時点ではGETとPUTのみ動作確認済
*
* フロントからAJAX経由で送られてくるHTTPメソッドとURLを用いて
* それに応じたブライトコーブAPIのレスポンス(JSON)を返す
* 例えば、AJAXで次のURLにGETリクエストが届いたら、Lambda@Edge(このindex.js)が発火
*
* https://www.example.com/bc-proxy/redundantgroups/xxxxxxxxxxxxxxxx
*
* bc-proxy以下のURLを切り取ってLambda@Edgeに渡し、ブライトコーブAPIに
【BTP】Node.jsとPostgreSQLでシンプルなアプリケーションを作成（2）CRUD処理編
##はじめに
この記事は、[Node.jsとPostgreSQLでシンプルなアプリケーションを作成](https://qiita.com/tami/items/267cf5a32ce0547eaa46)シリーズの2回目です。
前回の記事では、Node.jsで作ったシンプルなアプリケーションがBTP上のPostgreSQLに接続できるところまでを確認しました。##この記事のゴール
– Node.jsアプリケーションからPostgreSQLのテーブルに対してCRUD処理を行えるようにする
##ステップ
1. Read処理（全てのレコード）
1. Read処理（指定したidのレコード）
1. Create(Insert)処理
1. Update処理
1. Delete処理###1. Read処理（全てのレコード）
srvフォルダの配下にdb-op.jsというファイルを作成し、ここにCRUD処理を記述します。
プロジェクトの構成は以下のようになります。“`
node-postgres-sample
└ srv
|- package.json
|- d
[m1]asdfでバージョン管理を行なったnodejsを使うまで[mac]
# asdfとは
いろんな言語のバージョン管理がまとめてできるやつ（雑）
類似ツール: anyenv# 環境
– MacBook Air (M1, 2020)
# asdf
https://github.com/asdf-vm/asdf
https://asdf-vm.com/#/core-manage-asdf?id=install
“`
% brew install asdf
“`zshを使ってるので以下を実行
“`
% echo -e “\n. $(brew –prefix asdf)/asdf.sh” >> ${ZDOTDIR:-~}/.zshrc
“`# node
## 準備
https://github.com/asdf-vm/asdf-nodejs
“`
% brew install gpg gawk
“`“`
% asdf plugin-add nodejs
“`## インストール可能なバージョンの確認
“`
% asdf list all nodejs
“`## 最新安定板の確認/インストール
h
【BTP】Node.jsとPostgreSQLでシンプルなアプリケーションを作成（1）準備編
##はじめに
先日、以下の記事を書きました。
[【CAP】CAPをBTPのPostgreSQLにデプロイ](https://qiita.com/tami/items/a7a6b019cf8e82efcf8e)上記の記事で紹介した[cds-pg](https://github.com/sapmentors/cds-pg)、[cds-dbm](https://github.com/mikezaschka/cds-dbm)を使うと、CAPで作成したCDSモデルをPostgreSQLにデプロイして使うことができます。
CAPはテーブル、ビューの登録やCRUD処理を自動的に行ってくれるので、開発者がこれらの作業を意識する必要がありません。一方で、「もしCAPを使わなかったら何をする必要があるのか？」についても知っておきたいと思いました。以下のサンプルプロジェクト（チュートリアル）があったので、これを参考にシンプルなNode.jsアプリを作成して手順を確認してみます。
[SAP-samples/cloud-cf-helloworld-nodejs](https://github.com/S
FATAL ERROR: wasm code commit Allocation failed – process out of memory
node.jsのバージョン15にあげれば解決するらしいけど、どうしてもNode.jsのバージョン12で作業する必要があったので、その時のメモ。
“`
vi ~/.zshrc
“`で下記を記入して、
“`
export NODE_OPTIONS=–max_old_space_size=4096
“`あとは更新。
“`
source ~/.zshrc
“`これで一応、エラーは回避できた。
これが良き方法かはわからないけど、とりあえずまぁ、このまま作業しようっと。笑
npmのアップデート(npm install -g npm)をしてもバージョンが変わらない場合の解決例
以下のような状況に遭遇したものの、ネット上に似たような事例はあっても解決に至るものがなかったので一例として残しておきます。
1. npmを使用中にバージョンアップするようにメッセージが出たので、言われた通り`npm install -g npm`を実行。
2. 画面上は問題なくアップデートが終了したように見えたのだが、その後再びメッセージが表示される。
2. `npm -v`でバージョンを確認すると確かにバージョンが低いままだったので再度`npm install -g npm`を実行。
2. 問題なくアップデートが済んだので`npm -v`をするとバージョンが変わっていなかった。結論としては、HomebrewとNodebrewの双方でNode.jsをインストールしており、`/usr/local/bin/`にnpmファイルが残っていたことが原因だったようです。
NodeはNodebrewを、npmはHomebrewにあったものにパスが通っていたため、Nodebrew管理のnpmは問題なくアップデートされているのに、コマンドに使用されるのはHomebrewのnpm、という事態に落ち入
Jest・Supertestを使用したnode.js(Express)のAPIテスト app.listen()はエラーになる
## はじめに
この記事ではnode.js(Express)のAPIテストの第1弾として、テストを実行できるようになる部分までを記載している。
実際にテストを作る中でトラブって困った事も[トラブった事](#トラブった事)として残している。※第2弾としてmockを使ったより実践的なテストについても記事を書いてみたのでそちらも参照頂けると幸いです。
※第2弾は現在執筆中です。## どうやってExpressのAPI(End Point)テストをjestでやるのか？
– [Step1. jest, supertestをinstallする](#step1-jest-supertestをinstallする)
– [Step2. nodeのテストを実行できるようにpackage.jsonを設定する](#step2-nodeのテストを実行できるようにpackagejsonを設定する)
– [Step3. nodeのコード(Express)をテスト可能なようにリファクタリングする](#step3-nodeのコードexpressをテスト可能なようにリファクタリングする)
– [Step.4 実際に
面倒くさがりな人のための ESLint
# .eslint.js の設定、何をどうすればいいのかわからん
わかります。設定回り、難しいっすよね。そんなときには、このコマンドを打ち込んでみてください。
“`
# まずは eslint だけ install
npm install –save-dev eslint
or
yarn add -D eslint
“`“`
# つぎに、これを実行。
npx eslint –init
or
yarn run eslint –init
“`すると、、、？
“`bash
PS C:\Users\me\eslint-sample> yarn run eslint –init
yarn run v1.22.10
$ C:\Users\me\eslint-sample\node_modules\.bin\eslint –init
? How would you like to use ESLint? …
To check syntax only
> To check syntax and find problems
To check syntax,
Expressを使用しない単純なNode.jsサーバーの作成
### Node.jsとは？
Node.jsとは、サーバーサイドのJavaScript実行環境です。
ブラウザGoogle Chrome用に開発されたJavaScriptエンジンV8がサーバ上でプログラムを実行できるように、ファイルやネットワークI/Oなど多くの機能を追加しています。軽量で効率よく多くのリクエストを処理するネットワークアプリケーションの構築ができるプラットフォームです。Node.jsでは“軽量で効率良い”処理を実現するために次の2つのモデルを採用しています。
– ノンブロッキングI/O
– イベントループ
JavaScriptの1つの特徴として、シングルスレッドで動作することがあげられます。Node.jsにおいても同様で、デッドロックなどを意識する必要がなくなるというメリットがあります。しかしその反面、同時に1つの処理しかできず、複数の処理をさばけません。そのためNode.jsではノンブロッキングI/Oを採用しています。
例えば、データベースにアクセスして検索結果を取得するという処理を行う場合、データベースに問い合わせてから結果が返ってくるまで、待ち時間があ
node.jsアップデート
アップデートは普通に、公式ページの最新版を再度インストールすればOKだった
C:\Users\XXXXXXX>node -v
v14.16.1C:\Users\XXXXXXXX>node -v
v14.17.0コマンドプロンプトで確認したらこうなってたからOKなはず。
ちなみに、LTS（Long Term Support）版と呼ばれる長期サポート版となります。 LTS版は、30カ月のあいだ重要なバグが修正されることが保証されています。
