JavaScript関連のことを調べてみた2022年03月27日

【Javascript】空オブジェクトの判定方法

# null じゃなくて空オブジェクトで返ってくる時がある

該当の値が存在しない場合 大体 null で返ってくるのですが、たまーに空Object で返ってくる時があります。

“`javascript
{} // null ちゃうんかーい
“`

# 空オブジェクトの判定ってどうやってやるんや

空配列の判定はよくやるのですが、そういえば空オブジェクトの判定ってしたことないと思い調べたところ諸説あったのですが、以下のやり方が一番多かったです。

“`javascript
Object.keys(emptyObj).length === 0 // オブジェクトのキーが 0 かで判定
“`

以下みたいに直接比較してあげてもいいのですが、、、

“`javascript
const obj = {}

if (Object.keys(obj).length === 0) {
console.log(‘空っぽだよーん’)
}
“`

先輩から「ぱっと見で何を比較しているのはわかり辛い」とご指摘いただいたので、、

“`javascript
const obj = {}

Phaser.jsでCPU対戦４人用大富豪 ver2を作りました。

今回はジョーカー入りです。
CPUは相変わらずバカチョンです。

https://www.new-doumeishi.me/vsDaihugou_v2/public/index.html

【超入門】GASで簡単自動化システムを作ってみる

どうも[mr](https://twitter.com/MasujimaRyohei)です。

この記事の目標はGoogle Apps Script(GAS)を使って、
GoogleスプレッドシートとGmailを連携させることです。

とてもシンプルな内容となっていますので、GAS？なにそれ？それで何ができるの？くらいの人をターゲットにしています。

## 作りたいもの
進捗管理表で期限が過ぎてしまっているものをGmailで通知したい

## 必要なもの
・Googleアカウント
スプレッドシートの作成に必要なため

## やること
1. スプレッドシートに進捗管理表を作る
2. GASを書く
3. Gmailで結果を確認する
4. 定期実行する

この三つを行っていきます。

## 1. スプレッドシートに進捗管理表を作る
進捗管理表には「No」「進捗状態」「タイトル」「詳細」「期限」を入れます。
![2022-03-26 13.41.21 docs.google.com a4aa758f9996.png](https://qiita-image-store.s3.ap-northe

【React Native】位置情報アクセス許可要求とAppStateの相性が悪い件

## はじめに
React Nativeを仕事で扱い始めてから、早半年以上が過ぎました。
いろいろ躓くところはありましたが、一番躓いたといっても過言ではない件を備忘録として残しておこうと思います。

### まず、結論から言わせて
今回根本的な解決はできておりません！！！
実装に合わせた修正をいれて対応したけど、あくまで __「こういった事象が発生したよ。」__ というものになります。

## 位置情報アクセス許可要求とAppStateの相性が悪い件
厳密には相性が悪いという訳ではなく、想定外の動きをしてしまったというのが正しいです。
ちょっと盛りましたね。
※ちなみにAndroidのみで発生。

### AppStateとは？

[React Native公式ドキュメント – AppState](https://reactnative.dev/docs/appstate)

公式ドキュメントを読んでもらったほうが早いですが、アプリがフォアグラウンドにあるかバックグラウンドにあるかを通知してくれるものです。

### AppStateを使用した背景
位置情報を監視したかったのですが、一

【GAS】Googleカレンダーに特定の予定があったときにメールを送る

# これはなに
うちの会社では有給を取るときに以下の作業をしなければいけません。

– カレンダーに予定登録
– メール送信

ちょっと手間だし忘れたりすることもあるので、手作業はせめて1回にしたいところです。
予定をブロックするために、カレンダーは必ず登録するので、メール送信をGASで自動化。

# 作り方

## スクリプト

“`JavaScript:AbsenceMail.js
function AbsenceMail() {
let myCalendar = CalendarApp.getCalendarById(‘☓☓☓@gmail.com’); // 自分のメールアドレス
let today = new Date();

// イベントを取得
let myEvent = myCalendar.getEventsForDay(today);

// イベントの中に”休み”という件名のものがあれば、メールを送信する
for(let i = 0 ; i < myEvent.length ; i++ ){ if(myEvent[i].ge

Trixで画像アップロードを利用する

# はじめに

WYSIWYG エディタの Trix を使ってみました。画像アップロード機能も利用できるようにしたので、その手順を載せます。
Spring Boot で試しましたが、他の環境でも同様にできると思います。

[Trix: A rich text editor for everyday writing](https://trix-editor.org/)
[GitHub](https://github.com/basecamp/trix)

# 環境

* Java
* Spring Boot
* Thymeleaf
* H2 Database
* lombok

# 対象者

* 基本的な Java のコーディングができる方
* Spring で Web アプリ開発をしたことがある方

# 前提

コード量が多くなるので、記事では Trix により近い部分にフォーカスして扱います。割愛したソースは下記 GitHub で確認していただければと思います。
アプリのひな形は [Spring initializr](https://start.spring.io/) で作りました

【個人開発】筋トレ × 音ゲー × EDMの新感覚トレーニングアプリ「Muscle Beat」をリリースしました?

[](https://www.muscle-beat.com)

EDMの音ゲーに合わせて筋トレを行えるサービスをリリースいたしました！

**▼ サービスURL（スマホ専用）**
https://www.muscle-beat.com

**▼GitHub**
https://github.com/jibiking/muscle_beat

## はじめに

はじめまして！
[駆け出し筋肉エンジニアのJibiki](https://twitter.com/ji_bi__)と申します?

– **時間がなくとも、筋トレを知らなくとも、楽しくトレーニングを行えるサービスを開発したい！**
– **普通の筋トレでは満足できない体の人でも楽しめるサービスを開発したい！**

そのような想いから、Muscle Beatの開発に至りました?

## トレーニング手順

**1. All Beats画面からプレイしたい曲を選択**
★ モ

[JavaScript] プロパティを限定してオブジェクトのシャローコピーを行う

次のようにオブジェクトの指定プロパティのみをコピーしたいときがあります。

“`js
const input = {
a: “A”,
b: “B”,
c: “C”,
d: “D”
};

let output;
output = {
a: “A”,
b: “B”
};
console.log(output); // {a: “A”, b: “B”}
“`

## シャローコピーしてプロパティを削除する方法

“`js
output = {…input};
delete output.c;
delete output.d;
console.log(output); // {a: “A”, b: “B”}
“`

悪くはなさそうですが、オブジェクト作ってから削除するのもどうかなと思います。

## 普通のオブジェクト生成

“`js
output = {
a: input.a,
b: input.b
};
console.log(output); // {a: “A”, b: “B”}
“`

これがごくごく普通で一般的な方法と思います。
が

Discord.jsで多機能Botを作る ～開発環境の構築～【#1】

今回からDiscord.jsで多機能Botを作っていきます
# 開発環境
– Windows10
– npm 8.3.0 (今からインストールします)
– node 17.1.0 (今からインストールします)

# Node.jsのインストール
[Node.jsの公式サイト](https://nodejs.org/en/download/)に行って、Nodeをインストールします。

Currentをクリックして、

Windows Installerをダウンロードしましょう。
ダウンロードが終わ

[javascript] env使いたい時にでたエラー

javascriptで環境変数を使いたい。
node_moduleの[dotenv](https://github.com/motdotla/dotenv#how-do-i-use-dotenv-with-import)を入れたのだけどうまく動かなかった時の忘備録

環境
es6
typescript
webpack

手順
1. npm install dotenv –save
2. .envをproject直下に作成
“`.env
SECRET_KEY=”HOGE”
“`
3. 呼び出し

“`index.ts
import ‘dotenv/config’
const PRIVATE_KEY = process.env.PRIVATE_KEY;
“`

# エラー1
確かにあるのになぜかモジュール読み込めていない。
“`
ERROR in ./node_modules/dotenv/config.js
Module not found: Error: Can’t resolve ‘./lib/cli-options’ in ‘[…]/node_modules/dot

【個人開発】dアニメストアでもウォッチパーティーができるChrome拡張機能『d-party』を公開しました

# d-partyをリリースしました

2022年3月15日に、[dアニメストア](https://anime.dmkt-sp.jp/animestore/tp_pc)でもウォッチパーティー（同時に視聴）が出来るようになる、拡張機能 **『d-party』をリリース**しました。

宣伝と開発備忘録をかねて記事を公開しておきます。

https://chrome.google.com/webstore/detail/d-party/ibmlcfpijglpfbfgaleaeooebgdgcbpc

https://github.com/d-party

【拡散希望】
dアニメストアでもオンラインの友人と同時に視聴（ウォッチパーティー）を実現するChrome 拡張機能『d-party』を公開しました。

サイドバーからルームを作れて、シェア機能によってdiscordなどで気軽に参加者を招待することができます。（要全員インストール）https://t.co/rzTn9SVXUb pic.twitter.com/UOG8cz2DI0

— U-Not (@U_Not_401) March 15, 2022

## ウォッチパーティーとは？

Amazon Prime Videoや[Hulu](https://www.hulu.jp/)などの映像ストリーミングサービスでは **[ウォッチパーティ](https://www.amazon.co.jp/adlp/watchp

【GAS】Googleドライブにあるファイルをスプレッドシートにリスト化する【GoogleAppsScript】

## はじめに
この記事にあるコードは、[パソコンスキルの教科書](https://fastclassinfo.com/)というサイトにある[「Googleドライブ上のファイル名をスプレッドシートに書き出す方法｜GASプログラム活用事例」](https://fastclassinfo.com/entry/gas_getfilenames/)の記事を参考に作られています。
仕組みや各メソッドについて非常にわかりやすく解説されているので正直私が説明するまでもないのですが、復習も兼ねて自分用の備忘録として残しておきます。
※上記サイトだとGASの導入方法が古い情報になっているので申し訳程度にその解説もします…。

## やりたいこと
Googleドライブ内の特定のフォルダにあるファイル名を取得し、スプレッドシートに一覧化する作業をGoogleAppsScriptで自動化する。

## 前提条件
私自身の趣味で、アニメの主題歌をGoogleドライブで管理しており、今回はそのフォルダ内のファイルをリスト化していくという前提のもとで説明していく。
ディレクトリ構造としては、年月ごとのフォルダがあっ

【Vue.js】vue-routerでのURLパラメータ使用法

## 概要
Vue.jsプラグインのvue-routerにおけるURLパラメータの使用法について記述。
## 定義
### vue-router
SPA開発に使用するVue.js公式のプラグイン。
### URLパラメータ
URlの末尾に付ける値。
## なぜ必要か
ユーザーによって固有のコンテンツを出し分ける為。
## 実装例
vue-routerの場合は、パラメータとして受け取るURLの末尾に「:パラメータ名」を付ける。

例：todoページへの遷移
“`
path: “/todo/:id”
“`
上記の場合、パラメータ名は「idとなる」。

そしてこの値がrouteの中にparameオブジェクトとして格納される。
$routeはvue専用の変数でルートの情報が入っている。
parameの値は配列になっており、パラメータと値がプロペティとして保存される。
データアクセスは以下の形。
“`
$route.parame.パラメータ名
“`

methodsでログインページからtodoページに遷移する場合の記述。
“`
methods: {
handleLogin(s

JavaScriptでゲームを作る? その２

# はじめに

– 前回の記事は[コチラ](https://qiita.com/sfjwr/items/57ef93be349af401779c)

# 今回の目次 ?

1. 前回まずかったところを直す ?
1. キャラクタの描画をまともにする ?
1. キャラクタの操作を変更する ?
1. ゲームオブジェクトを消去できるようにする ?‍?️
1. 弾を発射できるようにする　✊

# 前回まずかったところを直す ?

コメントでも指摘を頂いたのですが、`keydown`イベントから取得できる`KeyboardEvent`の`keyCode`は利用が非推奨になっているようなので、代わりに`code`を利用する形に修正します。

“` JS
const keyCodes = {
KeyA: ‘left’,
KeyW: ‘top’,
KeyD: ‘right’,
KeyS: ‘bottom’,
Space: ‘a’,
ShiftRight: ‘b’,
ShiftLeft: ‘b’,
};

…

window.addEventListener(
‘ke

UDPでESP32と連携してNode-REDのダッシュボードに表示

ESP32とNode-REDはUDPで簡単に連携できるので、M5StickCに、ENV 2 Hatとフェーダーユニットをつないで、Node-REDのダッシュボードに表示してみます。ついでに、M5StickCについているLEDの点灯も操作できるようにします。

ENV 2 Hat
※今回は温湿度計を使います。

https://www.switch-science.com/catalog/6559/

フェーダーユニット

https://www.switch-science.com/catalog/7479/

# ESP32におけるUDP送受信

宣言

“`c:module_udp.cpp
#include
static WiFiUDP udp;
“`

受信準備

“`c:module_udp.cpp
udp.stop();
udp.begin(port);
“`

portには、受信を待ち受けたいUDPのポート番号を指定します。

受信があったか確認

“`c:module_udp.cpp
int packetSize = udp.

Phaser.jsで、CPU対戦4人大富豪を作りました。

先週のポーカーに続き、大富豪も作りました。
CPUがバカチョンです（笑）が、
自分＋CPU3人の4人対戦です。

https://www.new-doumeishi.me/vsDaihugou_v1/public/

[Nuxt.js/JavaScript]APIから取ってきたオブジェクトをイジって配列に

もう何回もやっている（はず）なのに全然覚えられないので備忘録。
nuxt.jsで、APIから取ってきた値をVuetifyの[v-select](https://vuetifyjs.com/ja/components/selects/#section-4f7f304465b9)に合うような形にして表示させる…ということをしました。
絶対にもっと賢いやり方があると思う（それだけは、わかる）ので、心優しい方がいたら教えてください…

## 環境
– MacOS　Monterey 12.1
– @nuxt/cli v2.15.8
– vuetify “2.6.3”

## APIで返ってくる値

“`json
{
“result”: “ok”,
“dataType”: “search_field”,
“fields”: {
“online”: {
“1”: “オンライン”
},
“tag”: {
“1696”: “参加無料”,
“121”: “働き方改革”,
“342”: “大阪”,
“29”:

セクシー女優の美女ランキングを作ったらいい感じになったからアルゴリズムを紹介する

はじめに
=======

個人開発で、[Facemish ――みんなで作る、セクシー女優美女ランキング――](https://www.facemish.com) という超イケてるサービスを作ってしまった。
このサービスの元となったのは、Facebook のルーツとなった、マーク・ザッカーバーグが学生時代に作った Facemish という伝説的サービスだ。その件に関しては、以前に投稿した[**この記事**](https://qiita.com/kenta_eros/items/84f2db2257b991b67105)で詳細を書いたため、そちらを読んでいただければと思う。

このサービスは、表示される二人のセクシー女優のうち、どちらの顔がタイプか順に選んでいくゲームである。既に 1000 人以上の多くの人に遊んで頂けているゲーム自体もそれだけで結構楽しいのだが、**このサービスのコア機能は、ゲームを通して集まったユーザの選択実績（いわば投票）によって、セクシー女優の美女度がランキングされるというところなのである**（実質的には、顔の人気ランキングなので、まぁいってしまえば顔ランキング的

google 検索結果ページに桜吹雪を無限に舞わせる

# 春ですね！

昨日（2022/03/24）何気なく [「桜」で google 検索](https://www.google.com/search?q=%E6%A1%9C) したら花びら舞ってました。
doodle のロゴが変わるのはよくありますが、左カラムの検索結果表示領域まで見た目変わるの珍しいですね。

1回表示させると30枚程度舞って落ちてなくなってしまうのが寂しいなぁと思ったので、
無限に舞わせるようにしたのでメモがてら手順まとめます（マジで需要ない自信ある）。


# 手順

DevTools

Node – How to npm run dev at the background?

1. Used command line
“`
(npm run dev&)
“`

2. Used pm2
“`
npm install pm2 -g
pm2 start “npm run dev” –name myAppName
“`

https://medium.com/idomongodb/how-to-npm-run-start-at-the-background-%EF%B8%8F-64ddda7c1f1

https://stackoverflow.com/questions/42912067/how-should-i-use-pm2-command-for-npm-run-dev