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

JavaScriptでCPU対戦できる乱数ゲーム作った

ヤッツィーというアメリカ発のダイスゲームを参考に、より簡単に楽しめるものをJavaScriptで作りました。（お手軽ヤッツィーとか呼んでます。）

htmlのbodyにそのまま突っ込んでデベロッパーツールで遊んでます。

ボーナス計算の処理や、CPUがダイスを振り直すか振り直さないかの判断、またどれを振り直すかの処理など凝って作りました。

ご意見等お待ちしております！

以下、ルールです。


“`JavaScript
let a, b, c, i, r, score, bonus, cpuscore, cpubonus, ss, ts=0, cputs=0;
let min, max;

for(i=1;i<=3;i++){

ブラウザのJavaScriptから直接メールを送れるPaaS、EmailJS

ほとんど静的でバックエンドのいらないサイトでも、唯一バックエンドが必要な部分がお問合せフォームだったりします。このお問合せフォーム等からのメール送信の機能をクラウドサービスとして行ってくれるのがここで紹介する[EmailJS](https://www.emailjs.com/)です。このサービスを使うことでGUIでポチポチ設定するだけでメール送信機能ができ、自分でプログラムを書いてバックエンドを組む必要がなくなります。

# 特徴
– ブラウザからREST APIでサービスのURLに直接アクセスしメールを送信できる、REST APIをラップしたJavaScriptのSDKもある
– 予めサービスの管理画面からメールのテンプレートの設定をし、APIからメール送信するときは穴埋めに使うテンプレート変数のみを送る
– 問い合わせ窓口に対するメールと、問い合わせ投稿者に対する確認メールの2通を同時に送れる
– reCAPTCHAを設定できる
– 月200通まで無料
– シンプルだが必要な機能は揃っており、使い方がわかりやすい
– ただしメールサーバー自体は別に用意する必要がある

# 他のメー

りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅰ. 言語・環境編】の学びまとめ

## この記事 is 何
– 読んで初めて知ったこと、とくに学びになったことをピックアップして紹介する

## 本の紹介
[りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅰ. 言語・環境編】](https://oukayuka.booth.pm/items/2368045)

## 第1章
### node.js
– `node`コマンド単体で実行するとREPLが起動して対話環境でJavaScriptを試すことができる

“`js
$ node
> 2 + 1
> 3
> const hoge = ‘ほげ’;
> hoge
‘ほげ’
“`

– yarnはFacebook製

### Visual Studio Code
– React開発元のFacebookでもvscodeがデフォルトの開発環境として採用されている

### Create React App
– 非推奨になったAPIの使用や意図しない副作用をWarningで教えてくれるStrictモードがある
– Create React Appバージョン3.4.1からはデフォルトで追加してく

webpackでbuildした際、そのbuild versionをブラウザから簡単に確認できるようにする

## はじめに
検証・本番環境で今見ているものが一体どのバージョンのものなのか？が分からなくなる事があると思う。そんな時、手軽にバージョン確認できればいいなという事で、[webpack-version-file](https://github.com/fed/webpack-version-file)を利用して静的ファイルの配信を行うフォルダに`version.json`を生成する方法を試してみたのでそれについて備忘録を残す。

[^1]: アイディアの1つとしては、APIで`/healthcheck`のようなエンドポイントを設け、APIサーバーが動くために必要になる他のMySQLやRedis等が生きている事を確認しつつ、そこでbuildバージョンをJSONで返す、というのがあるだろう（ただし、こういうhealthcheckのエンドポイントはセキュリティのためにALBなどでのIP制限は必須になると思われる。

※フロントエンドとバックエンドのプロジェクトが分かれている場合、今回見ていく方法では、フロントエンドのプロジェクトのbuildバージョンの確認はできるようにはなるが、バックエンド

nvmのデフォルトをltsに変える

いつも忘れてしまうのでメモ。
# For LTS(長期サポート版)
“`shell:デフォルトをltsにする
nvm alias default lts/*
“`
ついでによく使うコマンドを載せておきます。
“`shell:ltsの最新版をインストールする
nvm install lts/*
“`
“`shell:最新のltsを使う
nvm use lts/*
“`

# For Stable(安定版)
“`shell:デフォルトをstableにする
nvm alias default stable
“`
ついでに
“`shell:stabeをインストールする
nvm install stable
“`
“`shell:stableをインストールする
nvm use stable
“`

Excelデータベースをブラウザで絞り込み検索

# 概要
* サンプルデータの準備
* バックエンド実装
* HTMLテンプレート
* フロントエンド実装

## モチベーション
Excelで管理されているデータベース（）のデータをFZFライクに絞り込み検索できるようにします。
全員のPC内にfzfやらターミナルやらxlsx2csvのようなツールが入っていないので、ブラウザの表示を通してサーバー経由でExcelのFuzzy検索をできるようにします。

FZF本家の実行画面。ファイルを絞り込み検索しています。

## 完成形
E

Jasmine基本のキ

## この記事の目的
Jasmineのテストコードを書くことになりましたが、コードの構造が理解できないため勉強中です。英語のドキュメントを翻訳しながら読んだので、自分なりにまとめておくことにしました。

## Jasmineとは？
* 同期および非同期のJavaScriptコードをテストできる、人気のJavaScriptユニットテストフレームワークの1つ
* ビジネス価値に焦点を当てたBDD（行動駆動開発）プログラミングで使用されている

## Suite
* JavaScriptの動作をテストするために使用できるテストケースのグループ
* 2つのパラメータを持つJasmineのグローバル関数describeへの呼び出しから始まる
* 最初のパラメータはテストタイトルを表し、2番目のパラメータはテストスイートを実装する関数を表す

“`js
//This is test suite
describe(“Test Suite”, function() {
//…..
});
“`

## Spec
* Suite内のテストケースを表す
* 2つのパラメータを持つJasmi

【JavaScript】Temporalは理想主義すぎて実用に堪えないのではないか

“`js
const dtString = “2000-1-23 12:34:56”; // なんかAPIとかからやってきた値

// やりたいこと Luxon
console.log(DateTime.fromFormat(dtString, “y-L-d H:m:s”).toFormat(“y年LL月dd日 HH時mm分ss秒”));

// 現実
tmp = dtString.split(/[\-\s:]/);
temporal = new Temporal.PlainDateTime(
Number(tmp[0]),
Number(tmp[1]),
Number(tmp[2]),
Number(tmp[3]),
Number(tmp[4]),
Number(tmp[5])
);
console.log(
String(temporal.year).padStart(4, ‘0’) + “年” +
String(temporal.month).padStart(2, ‘0’) + “月” +
Str

【React】公式のチュートリアルをやってみる～③propsとstate

[【React】公式のチュートリアルをやってみる～②プロジェクト用ファイル作成](https://qiita.com/asahina820/items/c6b48dbd2232a653c900) の続きです。
三目並べゲームに必要な部品をそろえていきます。

## propsを使って値を受け渡す
### propsとは？
– 親コンポーネントから子コンポーネントにデータを渡すことができるオブジェクトのこと
– propsは読み取り専用で、変更はできない
– propsは、「プロパティ」の意味

### Boardコンポーネントから、Squareコンポーネントに値を渡す
“`js
class Board extends React.Component {
renderSquare(i) {
return ;
}

render() {
const status = ‘Next player: X’;

return (

{s

Chrome Extension iframeの中でも処理を行う設定

# どんな時？
Extensionを使いたいページで例えば、リンクマウスオーバーでプレビューが出るようなページがあるとする。
そのプレビューがiframeを使って実現されている場合、iframe内でも同様のChrome Extensionを呼んでほしい。
そんな時があるとする。

# 結論
“`”all_frames”: true“`を記述すればOK。

“`js:manifest.json

{
“manifest_version”: 3,
“name”: “開発中”,
“version”: “3.0.0”,
“description”: “説明文”,
“content_scripts”:[
{
“all_frames”: true
}
]
}

“`

“`js:content.js
$(function(){
alert(‘呼んだ？’);
});

“`

Firebase(Firestore) Timestamp型の取得と表示方法

Firestoreに保存されているTimestamp型のデータの取得と表示方法についてまとめます。

## データ構造
– コレクション名：posts
– ドキュメントID：自動(ランダム)
– フィールド
– title (string)
– createdAt (timestamp)

## Day.jsインストール
「Day.js」は「Moment.js」とほぼ互換性のあるAPIを提供しており、Moment.jsの代わりとして推奨されている日付操作用ライブラリの1つ。

“`
npm install day.js –save

// 確認
npm list –depth=0 | grep dayjs
“`

## 日付形式での取得と表示
timestamp型をそのまま取得すると以下のようなオブジェクトになる
“`
createdAt: t {seconds: 1618557497, nanoseconds: 367000000}
“`

日付形式に変換するには、dayjsの`toData()` メソッドを使う
また`format()`メソッドで形式

JavaScriptの数値二項演算の表

InfinityやNaNを含めた場合での数値演算結果を確認するための表。

# `a + b`

| `+` | **`+0`** | **`-0`** | **`+1`** | **`-1`** | **`+0.5`** | **`-0.5`** | **`+2`** | **`-2`** | **`+Infinity`** | **`-Infinity`** | **`NaN`** |
| :—: | :—: | :—: | :—: | :—: | :—: | :—: | :—: | :—: | :—: | :—: | :—: |
| **`+0`** | `+0` | `+0` | `+1` | `-1` | `+0.5` | `-0.5` | `+2` | `-2` | `+Infinity` | `-Infinity` | `NaN` |
| **`-0`** | `+0` | `-0` | `+1` | `-1` | `+0.5` | `-0.5` | `+2` | `-2` | `

Firebase(バージョン9以降) x React 連携方法

FirebaseとReactを連携させたアプリを作る際のセットアップについてまとめました。
Firestore からデータ取得できるまでを記載します。
Firebase バージョン9 以降の記述方法になります。

## React セットアップ
### プロジェクト作成
プロジェクトを作成したいフォルダに移動して以下コマンドを実行
“`
npx create-react-app appname
“`
カレントディレクトリに作成する場合は`appname` を`.`にする
“`
npx create-react-app .
“`

### 起動確認
Reactプロジェクトフォルダに移動し、以下コマンド実行。
`localhost:3000`が起動し初期画面が表示されればOK
“`
npm start
“`

## Firebase セットアップ
予めFirebaseプロジェクトを作成しておく。
今回は`posts`というコレクションを作成し、`title`と`text`という2つのフィールドをもったドキュメントを作成。

### FirebaseSDK 追加
“

GridagramからMagic-Gridにしてみた

おうちモニター(oumon)で使っていた[Gridagram](https://qiita.com/yamori813/items/37d036daae7e451eeb7a)はレスポンシブルでなかったので、追加したい項目も増えてきたので、[Magic-Grid](https://github.com/e-oj/Magic-Grid)に替えてみました。

とりあえずHTML,JS,CSSを埋め込んでみたところ、メニューがコンテンツの下になり、選択できなくなりました。


JSとかCSSとかあまりよく分かってないので、いろいろ検索したところ下記で直りました。

“`html

“`

とりあえずGridagramで使っていたjsonをj

webpackでbuildする際に、依存モジュール(ライブラリ)のライセンスをチェックする

## はじめに
webpackでbuild（全てのモジュールをbundleする）場合において、依存ライブラリのライセンスチェックを行う方法についてみていきたいと思う。

※フロントエンドでは全モジュールをbundleするので、今回見ていく方法はフロントエンドのプロジェクトにおけるライセンスチェックを行う方法になる。バックエンドのNode.jsでは仮に[Node.jsでimport・export（ES6の構文）を使えるようにwebpack × Babelの設定をやってみた](https://note.com/shift_tech/n/n77562e0926e3)のように、webpackでbuildをしていても全モジュールのbundleはしないので、以下で見ていく方法は利用できない。代わりに[]()の方法が利用できる）。

※以下では、既にwebpackの設定は済んでいる事を前提にしている。

## 結論　どうやるのか？
[License Webpack Plugin](https://github.com/xz64/license-webpack-plugin)を利用する。

“`co

JavaScriptのnew Date()で引数に時間を指定しないと時間はタイムゾーンを参照する

本番環境でやらかしたので備忘録として書きます。

# はじめに　　
JavaScriptではnew Date()と書くと現在時刻からDateインスタンスを生成できます。
“`
const now = new Date();
console.log(now);
// Wed Dec 08 2021 17:49:02 GMT+0900 (日本標準時)
“`
一般的なブラウザ実行環境においては、タイムゾーンなどが日本のものに設定されていると思われます。　　

# 日付文字列を引数として渡す
引数に日付文字列（“`yyyy-mm-dd hh:mm:ss“`）を指定すると*2022/06/06 00:00:00*のDateオブジェクトが生成されます。
“`
const now = new Date(‘2022-06-06 00:00:00’);
console.log(now);
// Mon Jun 06 2022 00:00:00 GMT+0900 (日本標準時)
“`
# 日付文字列を渡すが、時刻を省略する
引数に日付文字列（“`yyyy-mm-dd“`）を指定すると…

続・マウントを取ってくる人への耐性をつけるWebアプリ

## ご好評につきレベルアップしました
先日アップしたこちらの記事ですが、

https://qiita.com/KendoLab/items/ddb2830af80c718d8172

おかげさまで多くの人にご覧いただけた（当社比）ようで、公開から2日間で翻訳に使っていたDeepL APIが無料利用枠の上限に到達してしまいました。自分としては非常に嬉しい限りです。
そこで、今回はご好評（？）にお答えして、マウントを取ってくる人への耐性をつけるWebアプリ、 **「ドヤ顔バズワードくん」** にいくつかの機能追加を行いレベルアップしてみました！
※元々どんなアプリだったかは上記のリンク先記事をご確認ください。

## 「ドヤ顔バズワードくん Ver.2.0」
新たに公開した新バージョンのアプリは以下になりますので、是非触ってみてください！

https://courageous-clafoutis-a4024c.netlify.app/

![画像1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260

Unicodeの異体字セレクターを使ったステガノグラフィ：秘密の文字列をテキストにこっそり隠し込む方法

Unicodeの異体字セレクター(variation selectors)を使い、ユニコード文字列内に隠し情報を埋め込む方法です。

## 異体字セレクターとは

– 異体字セレクターは、文字の字体を詳細に指定するモディファイアのようなもの

https://ja.wikipedia.org/wiki/%E7%95%B0%E4%BD%93%E5%AD%97%E3%82%BB%E3%83%AC%E3%82%AF%E3%82%BF

– 異体字セレクターは16種類のコードポイントがある(FE00~FE0F)


## 仕組みの概要

– 隠したい文字列(hidden)を文字単位にバラす (例: `js` → `j`, `s`)
– 文字ごとに16進数に変換する (例: `j` → `6A`)
– その16進数をひと桁ずつ異体字セレクター

4KBのJavaScriptだけで動く可愛いアクションゲームを作ったのでソースと解説

年イチでちょっとしたブラウザゲームを作ってます（[→ 去年](https://qiita.com/yuneco/items/2f23f56acbc8f4e23dff)）。今年は**そこそこ遊べる可愛いアクションゲームを4KB以内で**作ってみました。

?宣伝させてください！
?今年も無事、猫の日ゲームができました！https://t.co/XnDD8AXx4k

今年は可愛さはそのまま、限界までコードを削って4KBにおさめました。PCの方はソース表示して見てみてね pic.twitter.com/j0QqH6iSSn

— ゆき (@yuneco) バッティングスコア管理アプリをお喋り出来るようにする⚾

## バッティングスコアに機能を追加
この前記事で作成したアプリの機能を充実させるということで、より一層かっこいい感じにしようと思う。

https://qiita.com/long66tail/items/ab96b204c4ca7bea56b0

今回は、かっこよく英語で語らうようにしてみた。

## 完成作品
と、いうことで、打撃成績を”追加”したら、
「good job.Always put your best foot forward.（訳：お疲れ様。いつもベストを尽くしていこう）」
と言ってくれるようにした。

https://batting-statistic-c35a90.netlify.app/

## ソースコード