- 1. Next.jsでMaterialUIが使えない時の対策
- 2. Discord.jsで認証機能を作ろう!
- 3. Node-RED+UIFlowでノンプログラミングをして、フリーズしたPCを再起動するプログラムを作る
- 4. ServerlessFrameworkでHot Reload対応する
- 5. Discord.jsでレベル機能を作ろう!
- 6. CodeceptJSで受信メールの検証、MailSlurp vs gmail お薦めはMailSlurp
- 7. TypeORMでQueryBuilderを使わずにJOIN先のテーブルのカラムをWhere句で使用する
- 8. Postmanではform-dataのリクエストが通るのにaxiosで失敗する場合
- 9. TypeORMでSQLiteを指定してQueryFailedError: SQLITE_CONSTRAINT: NOT NULL constraint failed エラーが出たときの対処法
- 10. Node.js glitchやreplitなどでのエラー回避術
- 11. TypeORMのMigrationでCannot use import statement outside a moduleエラーの対処法
- 12. 共通のtypescriptの型をフロントエンドとバックエンドで使う
- 13. TypeScript 4.5で入る予定の”types” import conditionについて
- 14. aws-sdk を使わずにS3からデータを取得する
- 15. nodenvコマンドまとめ
- 16. Qiita版『自民党総裁選』開催してみた 結果は‥
- 17. 「Eコマース市場」の拡大と技術開発の関係性について分析してみた
- 18. きのこの山 VS たけのこの里 あなたはどっち派？を調べてみた
- 19. ブレークアウトボードfor ATMEGA32u4 SMD IC
- 20. Node.js: MQTT クライアントのサンプル
Next.jsでMaterialUIが使えない時の対策
Next.jsでMaterialUIが使えない時の対策です。
##現象
MaterialUI公式の、ボタンを表示するソースコードをコピペしてもエラーが出る。##環境
・Next.js
・Mac OS Big Sur ver11.6
・Docker Desktop4.1.0
・npm install @mui/material コマンドでインストール済み##エラー内容：
エラー内容：Module not found: Can’t resolve ‘@emotion/react’
@emotion/reactをインストールをしても、
今度は@emotion/styledのエラーが出ます。エラー内容：Module not found: Can’t resolve ‘@emot
Discord.jsで認証機能を作ろう!
#初めに
今回はDiscordの認証botを作っていきます!#必要なもの
1.discord.jsv12
入れる方法
“`npm i discord.js@12“`
とターミナル打つ“`js
if (message.content.startsWith(‘!認証’) && message.guild) { //メッセージの初めの文字が!認証だったら実行
let myRole = message.guild.roles.cache.find(role => role.name === “メンバー”); //メンバーという名前のロールを探す
if (!myRole) { //メンバーというロールがなかったら実行
message.guild.roles.create({
data: {
name: “メンバー”,
color: “#ff0000”,
permissions: 0,
position: 0
Node-RED+UIFlowでノンプログラミングをして、フリーズしたPCを再起動するプログラムを作る
# 初めに
## 環境
– クライアント側
– Windows 10
– Atom Lite
– Unit Relay
– サーバー側
– Node-REDを実行しているWindows Server
– UIFlowというサービス# 手段
## 環境構築
### M5burner
– [M5burner](https://shop.m5stack.com/pages/download)をダウンロードしUIFlowのファームウェアを書き込む
– 左側のデバイス一覧からATOMを選ぶ
– 上のCOMポートからatom liteに該当するものを選ぶ
– 判別にはデバイスマネージャーの`ポート（COMとLPT）`を開いた状態でatom liteを抜き差しし、消えたり現れたりするCOMポートを選ぶ
– （LEDマトリクスのついていない）Atom Liteの場合はUIFlow(Lite)を書き込む(Burn)
– WiFiのSSIDとPWを入力
– 書き込み後、Burnの横のConfiguratio
ServerlessFrameworkでHot Reload対応する
ServerlessFrameWorkのバグで、ホットリロードがデフォルト設定されていない。
対応方法を記載する。“`typescript:serverless.ts
import type { AWS } from ‘@serverless/typescript’;import hello from ‘@functions/hello’;
const serverlessConfiguration: AWS = {
service: ‘mock’,
frameworkVersion: ‘2’,
custom:
{
webpack: {
webpackConfig: ‘./webpack.config.js’,
includeModules: true,
},
useChildProcesses: true // ホットリロードの設定をする。←追加する。
},
plugins: [‘serverless-webpack’, ‘serverless-offline’],
provider: {
Discord.jsでレベル機能を作ろう!
#初めに
今回はDiscordのレベルbotを作っていきます!#必要なもの※よく読まないとエラーが出ます
1.discord.jsv12 (まあはいってるでしょう)
2.node.js (まあ入ってるでしょう)
3.canvas-senpai
4.keyv
5.discord-canvas
入れ方
“`npm i discord.js@12 discord-canvas keyv canvas-senpai“`#コード
“`js
const {
CanvasSenpai
} = require(“canvas-senpai”);
const canva = new CanvasSenpai();
const {
Client,
Collection
} = require(“discord.js”);
const Keyv = require(‘keyv’);
const Canvas = require(“discord-canvas”);
const levels = new Keyv(‘sqlite://db.sqlite’, {
table: ‘
CodeceptJSで受信メールの検証、MailSlurp vs gmail お薦めはMailSlurp
# 概要
ユーザー登録機能やパスワード再設定機能を持ったシステム、あるいはお客様へのシステム更新情報などの通知ではメール送信する場合があり、送信されたメール文言の確認や貼られたURLを辿ってWeb画面の操作を行う場合があります。自動テストを行う場合、一旦WebUIを離れての操作になるため、メール機能をサポートするAPIを利用したテストになります。
よく開発・実装段階では、ローカル環境にメールサーバ（注1）を立ち上げて利用することもあり、検証環境についても同環境を利用するケースもありますが、本件で紹介するのは、外部のメールサーバを利用した事例となります。CodeceptJSでは、[MailSlurp](https://www.mailslurp.com/)を利用したhelperが公開されており（結局使わなかったけど）これを使った場合と、Node.jsのライブラリを利用してgmailを利用した場合とを比較してみました。
環境：
Windows10 64bit 20H2 64GByte 第10世代Core i7
Node v15.8.0簡単に両者を比較すると以下のようですが、お薦めは
TypeORMでQueryBuilderを使わずにJOIN先のテーブルのカラムをWhere句で使用する
### 注意
この記事の公開から時間が経っていたり、`typeorm`のバージョンが異なる場合は、仕様が異なる場合があります。“`
動作確認: 2021/10/7
typeorm: v0.2.34
“`## TL;DR
### JOIN先の主キー(ID）で絞り込む場合
“`typescript
const teenProgrammers = await getRepository(User).find({
relations: [‘role’], // なくてもOK
where: {
age: LessThanOrEqual(19),
role: {
id: programmer.id
}
}
})
“`### JOIN先の主キー(ID）以外で絞り込む場合
“`typescript
const teenProgrammers = await getRepository(User).find({
join: {
alias: “user”,
innerJoin: { role: “user.r
Postmanではform-dataのリクエストが通るのにaxiosで失敗する場合
# はじめに
Postmanだとリクエスト通るのに、axiosだとうまくいかなかった（404が返ってくる）ので調べました。# 結論
[ここ](https://github.com/axios/axios/issues/789#issuecomment-508114703)に書いてあるとおりですが、headerを下記のようにするとうまく通りました。“`
const formData = new FormData();
const headers = {
…formData.getHeaders(),
“Content-Length”: formData.getLengthSync()
};
“`
getHeadersだけではContent-Lengthが入ってないようですね。
なくても良いような気がするんですが、送信先で必須とかになってるのかもしれません。
TypeORMでSQLiteを指定してQueryFailedError: SQLITE_CONSTRAINT: NOT NULL constraint failed エラーが出たときの対処法
## 解決方法
解決策は４つあります。４つ目が本命です。### 1. synchronizeをやめる
これでエラーはなくなるけど、エンティティが同期されなくなるので不便。。。
“`json:ormconfig.json
{
“synchronize”: true
}
“`### 2. カラムをnullableにする
これも根本的な解決じゃない。。。
“`typescript:entity/user.ts
@Column({ nullable: true })
name: string;
“`### 3. SQLiteを使わない
身も蓋もないですが、ありだと思います。
### 4. トランスパイルする
私の環境では、`ts-node`を使わないようにすると、エラーが解決されました。
以下の手順を行ってください。#### STEP 1
`tsconfig.json`のCompilerOptionsに`”skipLibCheck”: true`を指定する。
これは、STEP3の`tsc`コマンド実行時にエラーを表示させないためです。
基本的に推奨
Node.js glitchやreplitなどでのエラー回避術
#glitchやreplitなどでのエラー回避術
今回はサーバーでエラーが出た時node.jsが止まる問題を回避する方法を書きます
ズバリこうです
TerminalやconsoleやCmdに打つ“`yarn global add nodemon
yarn add nodemon –dev
npx nodemon
“`これはなんなんだということを説明すると
まずグローバル環境にnodemon を入れます
その次にnpxで起動します
node startでは有りません
npx はローカルインストールしたコマンドを実行するために使う
TypeORMのMigrationでCannot use import statement outside a moduleエラーの対処法
## TL;DR
あまり綺麗ではないですが、これで解決しました。
`typeorm`コマンドを使用せず、直接`ts-node`で`typeorm`を呼び出します。“`bash
$ ts-node ./node_modules/typeorm/cli.js migration:generate -n ‘User’
“`NestJSを使用しているときにこのエラーに遭遇した場合は、ページ下部の[ormconfig.jsonの書き換え](#手順3)を試してみてください。
## よくみたらドキュメントに書いてあった…
* [TypeORM > If entities files are in typescript](https://typeorm.io/#/using-cli/if-entities-files-are-in-typescript)
ドキュメントの推奨している方法だと、、、
### STEP 1
ts-nodeをグローバルにインストール“`bash
$ npm install -g ts-node
“`### STEP 2
`package.j
共通のtypescriptの型をフロントエンドとバックエンドで使う
# はじめに
フロントエンドとバックエンドでtypescriptを使っていると、リクエストやレスポンスの型を共有したくなります。
別々で型を管理すると、面倒なコピペをするハメになったり、ミスって不整合が起きたりするので大変ですよね。
そこで、一箇所に型を置いて、一回の変更でどちらにも変更が適用されるようにします。# 1. プロジェクトをモノレポにする
型情報が即時に反映されるように、プロジェクトを一つにまとめます。
“`:ディレクトリ構成の例
/api
/common/requests
/web
“`# 2. 型だけを定義したパッケージを作る
型パッケージは最低限`package.json`と`index.d.ts`があれば大丈夫です。
“`json:/common/requests/package.json
{
“name”: “@types/your-requests”,
“version”: “1.0.0”,
“description”: “”,
“main”: “”,
“types”: “index.d.ts”,
“author”:
TypeScript 4.5で入る予定の”types” import conditionについて
最初に断っておきますが、ちょっとマニアックな記事です。
TypeScript 4.5 Betaがアナウンスされました。
こちら:point_right: [Announcing TypeScript 4.5 Beta](https://devblogs.microsoft.com/typescript/announcing-typescript-4-5-beta/)[前回](https://qiita.com/daishi/items/b4b6e683fdb8bb8c9f46)と同じように全体を紹介する記事を書こうかとも思ったのですが、一つだけピックアップすることにしました。それが[package.jsonのexportsのサポート](https://devblogs.microsoft.com/typescript/announcing-typescript-4-5-beta/#packagejson-exports-imports-and-self-referencing)です。
package.jsonのexportsというのは、[Node.jsのドキュメント](http
aws-sdk を使わずにS3からデータを取得する
# はじめに
タイトルの通り、 aws-sdk を使わずに s3 からのデータ取得するやり方をまとめます。具体的には、AWS Signature Version 4 による署名を含む authorization ヘッダーの作成手順を示したものになります。
本記事で紹介しているコードは node.jsで実装しています。できるだけ、ビルドインモジュールのみを使って実装しましたが、http リクエストだけめんどくさかったので axios を使っています。
コードだけ知りたい方は[こちら](#完成コード)をどうぞ。
# 準備
## iam ユーザの作成
`AmazonS3ReadOnlyAccess` ポリシーのアタッチされたユーザーを作成してください。この時に発行される、`access_key_id`と `secret_access_key` をメモしておいてください。後で使います。
## バケットを作成
東京リージョン(ap-northeast-1)にバケットを作成してください。この時のバケット名をメモしておいて下さい。後で使います。
## バケットにファイルを保存
先
nodenvコマンドまとめ
# インストール可能なバージョンの一覧
“`
$ nodenv install -l
“`# バージョンのインストール
“`
$ nodenv install 16.3.0
“`# バージョン切り替え
“`
# ローカル（カレントディレクトリ配下）で利用するNode.jsのバージョンを設定する
$ nodenv local 15.14.0# グローバル（システム全体）で利用するNode.jsのバージョンを設定する
$ nodenv global 16.3.0
“`# バージョン確認
“`
node -v
“`
Qiita版『自民党総裁選』開催してみた 結果は‥
## Node.jsでQiitaAPIを使ってみたい!
QiitaAPIを少し勉強したので、Node.jsで何か作ってみたいな。と考えていたところ
とて面白いQiita記事を発見。早速参考にして自分なりに応用してみました。
[「テレワーク」と「新型コロナ」には相関性があるのか確かめてみた。](https://qiita.com/twtjudy1128/items/836efaf748b8b76a6b82)## 『ネット民に人気』は本当か？
河野さんの紹介文でよく目にした「ネット民に人気」。
それどうやって調べているのかな、とかねてから疑問でした。
このAPIを使えば、**期間中全Qiita記事内の名前出現回数を計測できる**ので、
ほかの候補者と比較すべく、「Qiita版総裁選」を開催してみました。## サンプルコード
“`jsconst axios = require(“axios”);
async function main() {
let response = await axios.get(
「Eコマース市場」の拡大と技術開発の関係性について分析してみた
#背景
私は現在小売業に従事しており、初めての寄稿はまず小売関連の記事を書かせていただきたく考えました。拙い記事ではありますが、よろしくお願いします。
ご存知の通り、昨年度はコロナ禍により社会環境が一変しました。購買環境も大きく変化し、非対面・非接触という利点に着目され、Eコマースの利用が大きく増加することとなりました。経済産業省の[電子商取引に関する市場調査](https://www.meti.go.jp/policy/it_policy/statistics/outlook/ie_outlook.html)を見てもB to CでのEコマース市場規模は実際に伸長しており、多くの方が利用されたことと思います。
一方Eコマースは、ネットスーパーをはじめとして、まだまだ技術的に未成熟な部分が多く存在している産業でもあり、多くのお客さまにご迷惑をおかけしていることも事実です。そこで、技術者の方が多く記事を投稿されているQiitaであれば、Eコマースまわりの開発を行なっている方もいるのではないかと思い、Eコマースについて、技術開発の面から考察を進めることとしました。#目的
「Qiit
きのこの山 VS たけのこの里 あなたはどっち派？を調べてみた
#目次
– はじめに
– 背景・目的
– 環境
– コード
– 結果
– さいごに#はじめに
「きのこの山」「たけのこの里」は明治から発売されている大人気チョコレートスナック菓子です☆
きのこの山は、軸がクラッカー、2層のチョコレートが傘になっていて、
カリカリっとした食感が楽しいお菓子。
一方、たけのこの里は、クッキーに2層のチョコレートがコーティングされている、
サクサク感を楽しめるお菓子です。
どちらも美味しいですよね☆#背景・目的
誰もが一度は経験したであろう、「きのこたけのこ論争」。
甲乙つけ難い姉妹商品同士だからこそ起きる、この論争。。。
「小さい頃よくあったわー！」という方も多いでしょうが、
30半ばにして、先日ふとした時に論争勃発しました。「きのこのカリっと感がいいじゃん！」
「いやいや、たけのこの甘さが美味しいんだよ！」
「いやいやいや、、、」
・・・（割愛します）調べてみると、
・2018年 たけのこ党が勝利（国民総選挙2018）
・2019年 きのこ党が勝利（国民総選挙2019）
・2020年 福島県以外の全都道府県でたけのこ愛がきのこ愛を上回った
ブレークアウトボードfor ATMEGA32u4 SMD IC
この記事はJLCPCBと共同で公開されています。JLCPCBはPCBのプロトタイプと製造の分野で10年以上の経験を持つ最も経験豊富なPCBメーカーのひとつであり、品質、納期、費
Node.js: MQTT クライアントのサンプル
こちらで定めた仕様を満たすクライアントです。
[IOT: MQTT クライアントのサンプル](https://qiita.com/ekzemplaro/items/949fea7247b90bf531aa)Raspberry Pi で確認しました。
>GPIO16 に接続した LED を ON/OFF します。プログラム
“`js:subscribe.js
#! /usr/local/bin/node
// —————————————————————
// subscribe.js
//
// Oct/05/2021
//
// —————————————————————
‘use strict’console.error (“*** 開始 ***”)
var mqtt = require(‘mqtt’)
const client = mqtt.connect(‘mqtt://example.c
