- 1. Sequelizeのupsertではフックが思った挙動にならない件
- 2. 自己署名証明書(オレオレ証明書)によるHTTPSローカル環境の構築
- 3. SkyWayを利用したWebアプリ作成
- 4. Javascriptでasync使うと、promiseが返ってきた…
- 5. Node.jsのchild_process実行時の出力結果で日本語を表示させたい
- 6. OpenAI APIとWordPressを連携させた自動投稿プロジェクト: 実践ガイドとコード解説
- 7. Electronでのアプリビルド方法(備忘録)
- 8. WSLでUbuntu環境を作り、Node.js開発環境を作るメモ
- 9. 【無料】爆速でAWS EC2でNode.jsの自動デプロイ環境を作る
- 10. web上で操作できるmarkdownエディタっぽいものを作ってみた
- 11. Electronアプリのセキュリティを向上させるcontextIsolationについて
- 12. Node.js v20 LTS、v16 EOLに向けて
- 13. Qiita CLIを利用してGitHubでQiitaの記事を管理することにしました
- 14. VSCode の新機能「built-in port forwarding」を使いローカルサーバーにインターネット側からアクセス
- 15. Bun 1.0がリリースされたので、Viteを動かしてDeno、Nodeと比較してみる
- 16. 【エラー対応】code ERESOLVE 〜バージョンの依存関係に関するエラー〜
- 17. node.jsの切り替え
- 18. node-jsonwebtokenで学ぶJWTのalg=none攻撃
- 19. AWS Lambda ( Node.js 18.x ) で AWS System Manager (SSM) パラメータストアのSecureStringの値を利用する
- 20. NPMとは何なのか?
Sequelizeのupsertではフックが思った挙動にならない件
sequelize-typescriptを使っていて、自動で更新者IDを設定する仕組みをSequelizeのフックを使って実現しようとしたんですが、upsertだけ上手くいかなかったのでメモを残しておきます。
# やろうとしたこと
createやupdate、upsert等の更新系のメソッド呼び出しでリクエスト中のユーザー情報を渡して、フック内でカラムを自動設定したい
“`sample.ts
const user: User = { id: 1 };
this.model.upsert(data, { user });
“`なお、以下のように型宣言してあげるとupsertの第2引数に好きな型を渡せるようになります。
この第2引数の値はフック側で受け取れるようになるので、必要に応じて拡張します。“`sequelize.d.ts
declare module ‘sequelize’ {
export interface UpsertOptions {
user?: User;
}
}
“`# 現象
createやupdate、bulkCreate
自己署名証明書(オレオレ証明書)によるHTTPSローカル環境の構築
こんにちは。
開発環境において、より本番に近い環境で開発をしたいなどHTTPSでの通信を必要とする場面に出くわすことがあると思う。
(WebRTCをローカル環境で試す際に、HTTPSの環境が必要とのことだったが、localhost~であればHTTPSでなくても問題なかった…)そのような場合にローカル環境(localhost)でHTTPS環境を構築する方法を備忘録として、記述する。
# 目次
* やりたいこと
* HTTPSとは?
* 自己署名証明書とは?
* 対象環境
* 手順
* おわり# やりたいこと
ローカル環境で、自己署名証明書(オレオレ証明書)を発行して、それを元にHTTPS通信を行う。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3468943/bd021eab-0816-02a1-ab08-592053806bc1.png)
# HTTPSとは?
WebブラウザとWebサイト間でデータを送受信するために使用されるプロトコルであるHTTPをSSL/TL
SkyWayを利用したWebアプリ作成
こんにちは。
今回は、WebRTCの技術を利用して、異なるネットワーク間での通信を検証した。
また、RaspberryPiを用いての通信も検証する。参考になれば、幸いです。
# 目次
* WebRTCとは?
* 今回のやること
* システム構成図
* コード
* 結果
* 感想
* 今後目指していきたいこと# WebRTCとは?
WebRTCとは、Web Real Time Communicationの略。
WebRTCを一言で言うと、”データ”をネットワークを通じて、端末間で送受信するためのプロトコルの集まりのことである。
2011年にGoogleで提唱され、APIレベルでの標準化が進んでいる![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3468943/32cc2f03-17a1-e227-14df-2842e5b5308f.png)
メディアチャネル:DTLS-SRTP
データチャネル:DTLS
で暗号化されている。また、WebRTCはUDPプロトコルでの通
Javascriptでasync使うと、promiseが返ってきた…
# 背景
JavaScriptで関数の戻り値が、普通の(?)戻り値ではなく、promiseが返ってきました。。
promiseとかきちんと理解しないまま使ってて、とりあえず同期とるならasync/await使えばいいや、くらいのノリで使っていたのが原因ですね。。。・・・というわけで、初心者向けのメモ。。
# 環境
* Windows 10 64bit
* Node.js(v18.0.0)# Node.js のパッケージ
* cmd > npm install express(今回express使わないですが。。)# sample1
~~~javascript:sample1.js
const temp = test();
console.log(temp);function test(){
const a = “aaa”
return a;
}
~~~~~~:コマンドプロンプト
> aaa
~~~
aaaが出力されます。
まぁ、想定通りですよね。# sample2
~~~javascript:sample2.js
const temp = te
Node.jsのchild_process実行時の出力結果で日本語を表示させたい
# 背景
Node.jsから、コマンドライン実行をためそうと思いましたが、標準出力やエラー内容に日本語が含まれていると、文字化けする。。。
いろんなサイトをみてても、なんだかうまくいかなかったので、解決法をめも。# 環境
* Windows 10 64bit
* Node.js(v18.0.0)# Node.jsのパッケージ
* cmd > npm install express
* cmd > npm install iconv-lite# test_exec.js
~~~javascript:test_exec.js
const proc = require(“child_process”);
const iconv = require(“iconv-lite”);proc.exec(“dir”, {encoding:”Shift_JIS”}, (error, stdout, stderr)=>{
console.log(`stdout:${iconv.decode(stdout,”Shift_JIS”)}`)
console.log(`stderr
OpenAI APIとWordPressを連携させた自動投稿プロジェクト: 実践ガイドとコード解説
OpenAIのAPIを使ってAI生成のHTMLをWordPressに自動投稿する趣味プロジェクトを始めました。
様々な方法があるかと思いますので大きな枠組みやキーとなったプロンプトなど重要な部分を絞っての紹介となりますが、何か参考になれば幸いです。成果物 : ai.next-text.info
## プロジェクトの特徴
– パーソナリティが異なる複数のWP投稿者を用意
– 投稿者毎に担当するカテゴリーを予め用意
– node-cronを使って自動生成した記事を自動投稿### node-cronでの自動化
“`typescript
import authors from “./authors/authors”
import * as cron from ‘node-cron’let authorIndex = 0
cron.schedule(‘* */5 * * *’, async () => {
const author = autho
Electronでのアプリビルド方法(備忘録)
# 初めに
Electronを使用したデスクトップアプリのインストーラーをGithubにアップロードするためにアプリをビルドする際の一連の作業と詰まったポイントを備忘録として記録。# 開発環境
Windows11
Node.js: 18.14.1
electron: 14.2.9
electron-builder: 23.4.0# 手順
1. electron-builderのインストール
今回はelectron-builderを使用してアプリをビルドするのでまずはelectron-builderをインストール。
npmよりyarnが推奨されているのでyarnが無ければ先にやyarnをインストール。
“`
> npm install -g yarn
> yarn add electron-builder –dev
“`
2. アプリのビルド(Windows)
以下のコマンドを実行して.exeファイルを作成。コマンド実行後、/distフォルダ内に作成されます。
“`
> npx electron-bu
WSLでUbuntu環境を作り、Node.js開発環境を作るメモ
## 記事を書くことになった理由
現在(2023/9/12)、株式会社エイチームの5daysインターンに来ていますが、最初に選択を間違えていた。それはなにかと言うと、インターン中のPCの選択を**Windows or Mac**で**Windows**にしてしまったことだ。
今までは友人をWindows環境だったり、2人で基本的にはハッカソンに参加していていつでもコミュニケーションが取れる状態だったので、共同開発をしたりしてGit Cloneをしておとしてきて、いざローカルサーバを開いたらエラーの嵐になるとは思ってもいなかった。
まぁ少し考えれば**CRLF**と**LF**の問題がでるのは当たり前だった。
**実際のエラーの一部**
“`
Delete `␍` eslint(prettier/prettier)
“`個人開発であれば、package.jsonをいじったりできるが、企業さんのものなので、基本的にはいじることができないので**WSL**を使うことになった。
本当に、Macほとんど触ったことないからって逃げるんじゃなかった(笑)
## 実際に実行したこと
【無料】爆速でAWS EC2でNode.jsの自動デプロイ環境を作る
Discord Botを無料で24/7(休まず常時稼働)させたいが、Vercelなどの無料サービスはその要件を満たさなかったので、AWSのEC2でやることにした。私と同じお金を使わずに何かをしたい人に向けてますので、感想等くださるとありがたいです。
特に誤った内容があると思われた方は、ぜひコメントをお願いいたします。# この記事でやること
– 【大目的】「無料」で、Node.jsのサーバを「爆速」で作る。
– GitHubリポジトリのNode.jsのアプリを自動でAWS EC2インスタンスにデプロイする環境を作る。
– 本番環境のコードのブランチ(production)を作り、ソースコードがプッシュ(マージなど)されると、自動で最新のコードでNode.jsプロセスがスタートするようにする。
– また、手動でデプロイ等の操作を実行することもでき、ここでアプリケーションの起動・停止を操作することもできる!!**※全部無料でやります!!!** ←重要
## 想定読者
– Git, GitHubは使える!
– Node.jsは使える!
– AWSは全くわからな
web上で操作できるmarkdownエディタっぽいものを作ってみた
![sample1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1138401/1e79ca61-1a51-7ff3-53c3-1eed1b3b755d.png)
完成品: [markdown-editor](https://bellsanct.github.io/markdown-editor/)
リポジトリ: [https://github.com/bellsanct/markdown-editor](https://github.com/bellsanct/markdown-editor)# 背景
– 初級者向けにmarkdownを布教するにあたり、対象の環境に影響を与えずティーチングしたい
– web上でもエディタ・プレビュー同時に開けるツールはいくらでもあるけど自作してみたい
– こだわりすぎるとキリがないので超短期間で作る
– 最近はコードを書く機会がめっきり減ったのでリハビリがてら制作# 使用技術
– React
– React Bootstrap(簡易的な装飾)
–
Electronアプリのセキュリティを向上させるcontextIsolationについて
# この記事に書くこと
筆者はSlackメッセージをデスクトップ上に表示するアプリ[Cheer](https://cheer.konkonta.com/) をElectronで開発しています。今回は、Electronのセキュリティ向上のためのコンセプトの一つ`contextIsolation`について解説します。
## contextIsolationとは
公式の説明は以下です。
[コンテキストの分離|Electron](https://www.electronjs.org/ja/docs/latest/tutorial/context-isolation)
[セキュリティ|Electron](https://www.electronjs.org/ja/docs/latest/tutorial/security#3-enable-context-isolation)簡単に書くと、セキュリティのためにレンダラープロセスを隔離しようという話です。
### `contextIsolation`を無効にした場合
レンダラープロセスからNode.jsにアクセスする手段がい
Node.js v20 LTS、v16 EOLに向けて
# 背景
– Node.js v20が10/24にLTSになる為
– 以前業務で16から18にあげたことがある(Frameworkなし)のと、今回また16からバージョンアップする必要が出た為(Nuxt2)# 目次
1. そもそもNode.jsとは
2. Node.jsがなぜフロントエンドの開発で使われるのか
3. なぜライブラリのバージョンアップが必要なのか
4. バージョンアップのタイミング
5. Node.js Major version & Release schedule
6. Node.js v20の主なChangeLog
7. Nuxt2とNode.js v18のバージョン対応について調査
その他参考
感想# 1. そもそもNode.jsとは
https://nodejs.org/en
>Node.js® is an open-source, cross-platform JavaScript runtime environment.[クロスプラットフォーム](https://it-trend.jp/development_tools/article/32-00
Qiita CLIを利用してGitHubでQiitaの記事を管理することにしました
# Qiita CLI
Qiita CLIがリリースされたようです。
https://qiita.com/Qiita/items/563a6ea111709a03fbea
Qiita CLIを使うことによって、以下のことができます。
– Qiita Preview で記事をブラウザで確認できる
– 記事のファイルの生成し、ローカルで記事を編集できる
– できるコマンドラインで投稿や更新が可能また、
“`bash:
$ npx qiita init
“`をすることによって、GitHubで管理するプロジェクトが生成されます。
特に、投稿や更新のためGitHub Actionsが生成されるので、`main`ブランチにマージするだけで投稿が可能です。これは便利です。詳しくは、qiita-cliのリポジトリを参照してください。
https://github.com/increments/qiita-cli
# GitHubで管理するためにやったこと
Qiitaの記事を管理するために、以下を行いました。
– 自分用の記事管理のリポジトリを作成
– textli
VSCode の新機能「built-in port forwarding」を使いローカルサーバーにインターネット側からアクセス
## はじめに
この記事は、以下の公式ポストや、VSCode のアップデート後のリリースノートにも出ていた「built-in port forwarding」を試してみた話です。@Code now has built-in port forwarding. This feature allows you to share locally running services over the internet to other people and devices. pic.twitter.com/nWpKDFQQBJ
— Visual Studio Code (@code) September 7, 2023
![リリースノート](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/9d50abd7-7769-1cc4-62ec-766368f49d3d.png)
この機能を使うと、ローカルにあるサーバにインターネットからアクセスできるようになります。
同様のことを実現するものには、有名どころの 1つに「[ngrok(エングロック)](https://ngrok.com/)」があったり、[その他にもたくさんの類似サービスがあります](https://github.com/anderspitman/awesome-tunneling)。## 実際に VSCode の built-in port forwarding を試してみ
Bun 1.0がリリースされたので、Viteを動かしてDeno、Nodeと比較してみる
# 祝! Bun 1.0リリース!
めっちゃ祝っているように書いてますが、実は1.0リリースまで何もキャッチアップしてませんでした。ミーハーですね。
ということで普段から使ってるViteの初期セットアップをBun、Deno、Nodeで比較してみたいと思います。## BunでViteを動かしてみる。
### Bunのインストールと公式情報Bunのインストール方法などは公式HPを参考にしてもらった方が確実です。
公式HP:https://bun.sh/
2023/09/09 現在だと下記コマンドでインストールとパスまで通ります。
“`zsh
curl -fsSL https://bun.sh/install | bash
“`
以前Bunをインストールしたことある人は
“`zsh
bun upgrade
“`
でバージョンを最新にできます。ちなみに[公式のガイド](https://bun.sh/guides)で挙げられている、Bunを利用できるフレームワークは以下の通りです。
![スクリーンショット 2023-09-09 9.30.48.png](https:
【エラー対応】code ERESOLVE 〜バージョンの依存関係に関するエラー〜
Next.jsのプロジェクトで以下のコマンドを実行したらエラーが出た
* 初期設定で`eslint`はインストール済み
* `@typescript-eslint/parser`、`@typescript-eslint/eslint-plugin`を新たにインストールしようとした時にコンフリクト発生“`bash
npm install –save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin
“`**エラー内容**
![スクリーンショット 2023-09-08 17.32.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384836/25431628-feb0-eb3a-6dc2-39b988ac9f9b.png)“`
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolvin
node.jsの切り替え
うっかりnode.jsを最新版にすると、古いプロジェクト(Vue CLI)で、モジュールの互換性でエラーになることが多々あるので、nvmを使って簡単にバージョン管理しちゃいましょう。
**コマンドプロンプトは管理者権限で実行します。**“`dos:インストールされているバージョン一覧
nvm list
18.17.0
* 12.13.0 (Currently using 64-bit executable)
“`
“`dos:バージョン切り替え
nvm use 18.17.0
Now using node v18.17.0 (64-bit)
“`
“`dos:バージョンを指定してインストール
nvm install 12.13.0
“`
node-jsonwebtokenで学ぶJWTのalg=none攻撃
JWTの検証プログラムに対する有名な攻撃手法にalg=none攻撃があります。JWTのalgクレーム(署名アルゴリズム)としてnone(署名なし)を指定することにより、署名を回避して、JWTのクレームを改ざんする手法ですが、手法の解説は多いもの、脆弱なスクリプトのサンプルが少ないような気がしています。そこで、node.js用の著名なJWTライブラリであるjsonwebtokenを使った簡単なサンプルにより、alg=none攻撃の解説を試みます。
なお、jsonwebtokenの最新版では今回紹介した攻撃方法は対策されているため、以下のサンプルでは古いjsonwebtokenを使っています。# alg=none攻撃とは
よく知られているように、JWTは以下のように3つのパートからなり、それぞれのパートはBase64URLエンコードされています。ヘッダとペイロードはエンコード前はJSON形式です。“`
eyJHHHHHHHHHHHHH.eyJPPPPPPPPPPPPPPPP.SSSSSSSSSSSS
ヘッダ ペイロード 署名
“`
AWS Lambda ( Node.js 18.x ) で AWS System Manager (SSM) パラメータストアのSecureStringの値を利用する
# 公式
https://docs.aws.amazon.com/ja_jp/systems-manager/latest/userguide/ps-integration-lambda-extensions.html
# SSM ( AWS Systems Manager ) のパラメータを作成しておく
ここでは
“`
testparam
“`
というキー名で登録する# Lambda関数を作成する
AWS上のlocalhostの固定のポートにGETリクエストするという仕組みのようだ
– URLパラメータとしてSSMのパラメータ名を渡す `name=testparam`
– 秘密値のDecryptのために `withDecryption=true` をURLパラメータとして渡すリクエストヘッダに `AWS_SESSION_TOKEN` を付与する必要があるが
これはLambda実行ではデフォルトで設定される環境変数のようだ
なので自分で何かを設定する必要はない## コード例
`index.mjs`
“`js
export const handler
NPMとは何なのか?
JavaScript系列のフレームワークを使う際、お世話になる`npm ~~~`コマンド。
このnpmとは何者なのか。
公式ドキュメントはこちらー> https://docs.npmjs.com/about-npmNPMとは
————
「Node Package Manager」の略。Node.jsがJavaScript系列のパッケージ(React,Vue,TypeScript,jQueryなどのフレームワークやライブラリの総称)を管理してくれる。(なので、Node.jsを最初にインストールしておくことが必要)
「Aのパッケージを使いたい!」となったとき、「じゃあ、Aのパッケージを使うにはBとCのパッケージも必要だから一緒にインストールしておくね!」と、依存関係にあるものを一緒にインストールしてくれる。まさにマネージャ。Node.jsとは
————
じゃあ、そのNode.jsってなんなんだい。
そもそもJavaScriptはブラウザ上で動くことのできる言語で、Rubyなどのバックエンド言語と違って、OSへのアクセス権を持っていない。一部アクセス権