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

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

NaN === NaN はfalseで判定される

条件式で
“`javascript
if (Number(var) !== NaN) {
…
“`
のように書いて、`var`が数字文字列（例： `’1’`)だった時の処理をif文内で行おうしたら、なぜか`Number(var) !== NaN`が`true`判定されてしまい、想定通りの処理ができなかった。

調査したところ、どうやら`NaN === NaN`が`false`判定される仕様らしい。この場合、
“`
if (!isNaN(Number(var)) {
…
“`
で想定通り動くようになった。が、今度はeslintに
“`
Unexpected use of ‘isNaN’
“`
と怒られる。
“`
if (!Number.isNaN(Number(var))) {
…
“`
これでeslint先生のお叱りも回避できた。よかったよかった。

### 参考記事
https://yosuke-furukawa.hatenablog.com/entry/2018/01/30/174425

alertの「 OK」を押すと処理を実行

今回説明するのは、アラートダイアログの「OK」ボタンを押した時、
特定の処理をする方法です。

_JSコード_
“`
alert(“タゴちゃん”);
“`
まずは基本的な「alert」メソッドの説明です。
このようにalert()を使用すると、ダイアログと「OK」ボタンが表示されます。
この「OK」を押すとダイアログが消えるというものです。

今回はこの「OK」が押された時に何か処理を実行させていきます。
まず理屈として「alert」で「OK」を押すと、
戻り値としては「true」でも「false」でもなく、「undefined」が返されます。なので、

_JSコード_
“`
if(!alert(“タゴちゃん”)){
//「OK」が押されたら実行する処理
}
“`
このようにif文の条件

Node.js: stream.ReadableをAsyncGeneratorに変換する方法

Node.jsのstreamのReadableを非同期ジェネレーターに変換する方法を紹介します。

Node.jsでは、child_process.spawnのstdoutなど様々なI/OでReadableオブジェクトが返されます。Readableオブジェクトからデータを取得するには、コールバック関数を使ったイベントドリブンなAPIを使うのが一般的です。

“`js
let dataSize = 0;
readable
.on(“data”, (chunk) => { dataSize += chunk.length; })
.on(“end”, () => { console.log(dataSize); };
“`

イベントドリブンな書き方だと読みづらかったりもするので、非同期ジェネレーター(AsyncGenerator)に変換して手続き型の書き方にすると、コードが馴染みのある読みやすい形になることがあります。

“`js:AsyncGeneratorを使った場合
let dataSize = 0;
for await (const chunk of toIterato

ファイルサーバでWebサービス提供してみた

# はじめに
ローカルにあるHTML(javaScript)からローカルファイルを操作する方法を調べた記事です。
イントラネット内で簡単なシステムがあると助かるけど、色んな制約でWebサーバが建てられない。ファイルサーバならあるけど、ファイルサーバ上で少人数で利用するWeb構築なんてできるんだっけ？って時に参考になるかもしれない記事。
サンプルで実際に動く日報Webを作成したので、それを使って解説します。

### 使った技術
– File System Access API[(対応ブラウザはこちら)](URL “https://caniuse.com/?search=file%20system%20access%20api”)
※Chrome86から標準機能として搭載された、割と新しい技術

### 完成した画面
– HTML+Javascriptを配布して、ファイルサーバ上のテキストファイルをDB代わりに使おうって戦略です。
“開く”でファイルを選択して画面に反映 ⇒ 編集後に”上書き保存”で内容が保存できます。
![image.png](https://qiita-imag

JavascriptのDateオブジェクトをUnix時間として扱う

## Javascriptでデータベースに日付（時間）データを格納して取り出して表示したい
いろいろとDate()オブジェクトを活用すれば文字列や時間オブジェクトへ変換などできそうである。
React/TypeScript　を利用して Node.js の mongoose を介して MongoDB へ情報を登録する、となるとDateオブジェクトとして型を簡単に受け渡しできるのかどうかよくわからないので、一旦の解決策として Date オブジェクトの受け渡しを「Unix時間」としてみる。

## Javascript Date()オブジェクトでユニックス時間を取得する
これが最も自分の目的にあっているのでは？と思っている。

“`
// データベースで見て計算しやすいようにunix timeで格納する
const dtime = new Date().getTime() / 1000.0;
“`
これでMongoDBに格納しておいて（float型）取り出し側で以下のようにして時間へ変換する。
“`
// Unix timeから普通の読めるやつへの時間変換
let convTime =

prsim使って爆速でモックAPIサーバをセットアップする

# prismのドキュメントを通読する

https://stoplight.io/open-source/prism/

# prismをインストールする

“`
npm install -g @stoplight/prism-cli
# or
yarn global add @stoplight/prism-cli
“`

# yamlを用意する

サンプルのyamlをとってくる

https://github.com/OAI/OpenAPI-Specification/blob/main/examples/v3.0/api-with-examples.yaml

# 動かしてみる

“`
prism mock api-with-examples.yaml
“`


# 別ターミナルからモックサーバにアクセスする

“`
cur

for文の条件を条件付きで書けるとは知らんかった

# for文の条件を条件付きで書けるとは知らんかった

書けたら良いのに…とは思ってたけど、試してなかった。
JavaScriptなら書けるのね。
今まで見たことがなかったからメモっとく。

さすがにif文は書けないけど、これで正順でも逆順でも気にしなくて済む。３項演算子は好みじゃないけど、これができるなら使う。

“`javascript:reverse_loop.js
function reverse_loop(from,to)
{
for(i=from; (from=to); (from‘);
}
document.writeln(‘

---

‘);
}
reverse_loop(2,5);
reverse_loop(5,2);
“`

Next.jsで「前の記事」「次の記事」を実装

今後も使いそうなので、忘れないようにメモとして残しておきます。

# 前提
Next.js
TypeScript
GraphQL

# 前後記事へのリンクを作成
前後記事へのリンクは[slug].tsx(または[id].tsx)にgetStaticProps内に追記していきます。
“`javascript:[slug].tsx
export async function getStaticProps({ params }) {

// データ取得部分は割愛
// const { data } = await…

// 全ページを取得
const allPosts = data.posts

// 現在のページを取得
const currentPost = allPosts.find((data) => data.slug === params.slug)

// 現在のページ番号を取得
const postNum = allPosts.indexOf(currentPost)

// 現在のページの1つ前のページを取得
const p

【Chart.js】グラフの背景色を設定する方法

# はじめに
お仕事でグラフを表示するページを作ることがあったので、まぁSVGとかで頑張って描画してもよかったのですが、いくつか要求仕様があったので、せっかくなら便利でオシャレなグラフツールでもないかな～と思って探したところに出てきたのがChart.js。
これを使ってみたところ、見た目もアニメーションもなんだかかわいくてとてもよい！

ところが、**グラフの背景に色をつけたいな～**と思って背景色設定のプロパティを探したところ、どうやら`background-color: ‘white’;`みたいに**1行で背景色が設定できる便利機能はない**ことが分かりました。
グラフの領域を目立たせたりデザインをよくしたり、背景色を変えるモチベーションは多いと思ったのでデフォルトで設定機能がないのは意外だったのですが、実装にちょっと苦労したので共有。

# Chart.jsについて
私が使用したChart.jsのバージョンは、**3.7.0** です。
今回はChart.jsの基本的なグラフ作成方法の説明は省略します。
（※ Chart.jsは2系と3系で書き方が異なる部分もありますので、お使い

Google Drive API を使って Jamboard ファイルを PDF 出力する

2022/3/25 時点で Jamboard のデベロッパー向け API がなく、システム間連携する方法を見つけるのに苦労したので、備忘録として記事にしておきます。Google Drive API を使って PDF 出力ができました。

## 作ったもの

## 実現方法
Jamboard ファイルは [Google Drive API の Files: export](https://developers.google.com/drive/api/v3/reference/files/export) を利用して PDF 形式でダウンロードできます。今回は npm の [googleapis](https://www.npmjs.com/package/googleapis) パッケージを用い

Sheet.js＋kintone REST APIでExcelの内容をkintoneに流し込む

# 背景
　「Excel上にあるデータをkintoneに登録したいがフォームから手動で登録するのは面倒。ただkintoneの標準機能ではExcelファイルのデータ流し込み機能はない。どうしよう」という状況に陥りました。そこでSheet.jsとkintone APIを駆使してExcel上のデータをkintoneに自動で登録してくれる機能を実装しました。

# 前提
　・以下のような構造データを流し込みたい
　　
　　「名前」＋「出身」→ kintoneのテーブルパーツに対応
　　「メモ」→ kintoneの単体フォームパーツに対応
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/655942/13ca93a7-5889-b1cc-7355-83f7b32

Splideをスライダーの新たな定番としたく

# はじめに

Webページ制作において、スライダーの登場頻度は異常に高いですよね。
cssでanimationプロパティを書くより、スライダーを実装する方が多いまであります。

その上、地味に仕様決めをちゃんとしておかないと、後であーだこーだなって実装コストが高くなることも往々にしてあるかと思います。

そのため、大体の仕様を満たすことができるようにライブラリを使って実装している方がほとんどかと思います。

そして、そのスライダーライブラリのデファクトスタンダードとなっているのが、[**slick**](https://kenwheeler.github.io/slick/)と[**Swiper**](https://swiperjs.com/)でしょう。

https://kenwheeler.github.io/slick/

https://swiperjs.com/

—

そこに第三の選択肢として、[**Splide**](https://ja.splidejs.com/)**を推したい**のです。

https://ja.splidejs.com/

Qiitaで「S

Androidアプリで端末の位置情報を取得する

#はじめに
Androidアプリで、Cordovaプラグインを使用して端末の位置情報を取得する。

#コード
最終的なコード

“`typescript
document.addEventListener(“deviceready”, function(){

let permissions = window.cordova.plugins.permissions;
permissions.requestPermissions(
[
permissions.ACCESS_FINE_LOCATION
,permissions.ACCESS_COARSE_LOCATION
]
,function( status ){
if( status.hasPermission ){
navigator.geolocation.getCurrentPosition(
function(position) {
let latitude = position.coords.la

moment.jsで「〜時間前」を表示させる

#はじめに
moment.jsを使用して、指定時刻から計算して「〜日前」「〜時間前」を表示させる。

#moment().fromNow()
###import
“`
import Moment from ‘moment’;
“`
指定した時刻から現在の時刻までの差を計算する。

“`javascript
Moment(‘2020-01-01T10:10:30.900Z’).fromNow();
“`

#言語を設定する
このままでは「〜hour ago」など英語で表示されるので、言語を設定する。

“`javascript
Moment.locale( ‘ja’ );
“`

#時差をなくす
このままでは、UTC(世界標準時間)が適応され、日本からは＋9時間の時刻が表示される。
moment-timezoneを使用する。

###install
“`
npm install moment-timezone
“`

###import
“`javascript
import MomentTimezone from ‘moment-timezone’;
“`

###

Vue.js + moment.jsで、時刻をリアルタイム更新する方法

#はじめに
Vue.jsとmoment.jsを使用して、時刻をリアルタイムで更新する時計を作る。
本文ではTypeScriptを使用。

#moment.jsをインストール
“`
npm install moment
“`
#開発コード
インポートする。

“`javascript
import Moment from ‘moment’;
“`

###Moment().format()を使用
表示形式は自由に選択できる。

https://qiita.com/taizo/items/3a5505308ca2e303c099

“`javascript
time = Moment().format(“YYYY-MM-DD HH:mm:ssZ”);
“`

###setIntervalを使用
createdの中にsetIntervalを入れる。1秒毎に新しい時刻を取得。

“`javascript
created() {
setInterval(() => {
this.time = Moment().format(“YYYY-MM-DD HH:mm:ssZ”