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

!valueで意図しないreturn – falsyな値と0

# 関数に入らない
関数に入らずハマった昔話

フォームから入力された値を加工してAPIに渡すための関数を作り、
valueの値がなければ関数から抜けるようにしていました。

“`react
const onFinish = (value) => {
if(!value) return
…
“`
ところがフォームの値に数字の0が入っていると、意図せず関数から抜けてしまいます。

# 原因
JavaScriptでは`falsyな値`という括りがあるそうです。
0は`falsyな値`とみなされ、`!value`の条件に合致してしまっていました。

公式で`falsyな値`は以下のように定義されています。
* false
* 0
* -0
* 0n
* “”
* null
* undefined
* NaN

参考：
https://developer.mozilla.org/ja/docs/Glossary/Truthy

# 解決
なので、「値がなければ関数を抜ける」コードは、正しくは
“`react
const onFinish = (value) => {
if(value

雪が降るAR年賀状をつくってみた（8th wall 編）

2023年のAR年賀状として、雪が降る年賀状をつくりたいと考えました。

「年賀状の部分にだけ雪が降っていたら面白いのでは？」という発想です。（ちなみに、ジョジョの奇妙な冒険のウェザー・リポートが好きで、一エリアにだけ特殊な天気を発生させる、というのをやってみたかったというのもあります。マニアックな話ですいません。）

[前回](https://qiita.com/Namy/items/5354fd38cf42c5ad3037)は、model viewerを使ったAR年賀状のつくりかたを解説しましたが、今回は、model viewerだと実装が難しく、8th wallというARをつくるツールを使いました。

完成形はこちら。


![snowcardmovie.gif](https://qiita-image-store.s3.ap-north

p5.js で p5.Color の toString()・levels・分割代入を使ったり RGB・HSB を扱ったりする

今回の記事は、以下のようなことをやろうとして、あれこれ調べたり試したりした内容です。

– p5.js の色情報を複数含むものを取り出す
– rgba() の形式
– RGBA の RGB のみを一括で配列で取り出す
– 最初に指定した色の形式と異なる形式の色情報を取り出す（特定の 1つのみ）
– RGB指定した色から、HSB の値を取り出す
– HSB指定した色から RGB の値を取り出す

## rgba() の形式で取り出す
最初は、p5.js で何らか色情報を指定したものから、rgba() の形式で情報を取り出してみます。こちらは、[p5.js の公式リファレンスの「p5.Color」](https://p5js.org/reference/#/p5.Color)に記載されている `toString()` を使います。

p5.js Web Editor上で、試した内容を以下に記載します（こちらを、p5.js Web Editor上で動作させました）。

“`javascript
let c, c2

function setup() {
crea

Video.js完全マニュアル part5 〜標準のvideo要素のオプション〜

# はじめに
Video.js完全マニュアルとしてVideo.jsの解説をしていくシリーズのpart2です。
Video.jsの公式のガイドである[Video.js Guides](https://videojs.com/guides)を翻訳ツールを使いながら解説していきます。

この記事ではVideo.jsで利用可能なオプションについての解説です。Video.jsのオプションの渡し方は前回の記事を参考にしてください。

前回
[Video.js完全マニュアル part4 〜Video.jsの初期化〜
](https://qiita.com/manzoku_bukuro/items/f5bef03dc2fdb53139e6)

part1から読む人は[こちら](https://qiita.com/manzoku_bukuro/items/10137f64810f0dc40543)

# この記事の対象者
– Video.jsを利用する人
– 動画プレイヤーのUI操作をしたい人
– 動画再生関連のサービスを作りたい人
– Video.jsの初期化時のオプションを知りたい人

# この記事

Elixirから覚えるJavaScript　〜sort(変数の挙動)〜

僕は普段はElixirを使ってます
必要になったのでJavaScriptの勉強をはじめました
題名はElixirから覚えるJavaScriptですが、逆もできるかも？

今回はsortについて挙動を確認したいと思います
別にsortでなくてもよい、変数がどのように管理されているか知りたかった

# Elixir

“`elixir
arr = [5, 4, 3, 2, 1]
x = arr |> Enum.sort()
IO.inspect(arr)
IO.inspect(x)
“`

“`elixir:実行結果
[5, 4, 3, 2, 1]
[1, 2, 3, 4, 5]
“`

# JavaScript

“`javascript
arr = [5, 4, 3, 2, 1];
x = arr.sort();
console.log(arr);
console.log(x);
“`

“`javascript:実行結果
[ 1, 2, 3, 4, 5 ]
[ 1, 2, 3, 4, 5 ]
“`

arrが書き換わってしまう…

と言うことで対策
スプレッド構文`.

String()とtoString()の違い

# はじめに
値をString型に変換する関数である、String()とtoString()の違いを把握していなかったので調べた。
結論としては、String()にnullやundefinedを指定すると、”null”、”undefined”が文字列として返ってくる。これを期待値としない場合は、toString()を使うほうがいい。

# String()とtoString()の違い
toString()で2ヶ所エラーが出たケースがあった。
TODOとしている箇所は、利用するケースがあるのか含め後日調べて埋める予定。
|変換する型＼関数|String()|toString()|
|—|—|—|
|Boolean |console.log(String(true));
// “true”|console.log(true.toString());
// “true”|
|null |console.log(String(null));
//”null” |console.log((null).toString());
// ❌Can

Ankiでフラッシュカードの両面間でデータを永続化させる

# はじめに
暗記のための自由/オープンソースソフトウェア「[Anki](https://apps.ankiweb.net/)」があります。要は単語帳のデジタル版なのですが、エビングハウスの忘却曲線に基づいて適切なタイミングで復習出来るように出題をコントロールしてくれます。
英語学習者や医学生に人気があります。

https://eigonote.jp/2020/09/%E3%80%90%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%9F%E3%80%91%E6%9A%97%E8%A8%98%E3%82%A2%E3%83%97%E3%83%AAanki%E3%81%A7%E5%8D%98%E8%AA%9E%E5%AD%A6%E7%BF%92%E3%82%92%E8%B6%85%E7%B5%B6%E5%8A%B9/

## JavaScriptによる機能拡張
AnkiはPythonを利用したアドオンを作成することが出来るのですが、PC向け(Windows、Mac、Linux)のみで、モバイル向けは対象外です。
JavaScriptによる機能拡張は、P

2022年の振り返り(KPT)と今年の目標

明けましておめでとうございます。Esper0328です。
昨年は1月から無職で6月半ばにIOTベンチャーに就職して働くという一年でした。
昨年の振り返り(KPT)と今年の目標を書きます。

# 振り返り

## Keep

一言で言うと振返りを継続的にしつつ勉強を１年続けられたのが良かったです。

* KPTを毎週実施したおかげで生活のリズムがとても良くなった
* 前職までは月80H近く残業しており新しいことをやろうという気力が湧かず
* 時間に余裕ができ、少し先のことをやっておこうと思えた
* 意思決定も早くなり、何かトラブルがあっても悪化する前に手を打てていた
* 昨年は計画的に大量に勉強した
* **読んだ専門書の数 7冊**
* [プログラミング言語Go](https://www.maruzen-publishing.co.jp/item/?book_no=295039)
* 練習問題135 問をテスト書いてプログラミングした
* 仕事でテストを書くのが苦にならなかった
* [Distributed Services Wi

Video.js完全マニュアル part4 〜Video.jsの初期化〜

# はじめに
Video.js完全マニュアルとしてVideo.jsの解説をしていくシリーズのpart4です。
Video.jsの公式のガイドである[Video.js Guides](https://videojs.com/guides)を翻訳ツールを使いながら解説していきます。

前回はガイドの解説から外れて、Video.jsを初期化した時に何が起きているかを解説しました。今回はガイドの解説に戻り、Video.jsの初期化方法について解説していきます。

前回
[Video.js完全マニュアル part3 〜初期化で何が起きているのか？〜
](https://qiita.com/manzoku_bukuro/items/c4143663117c34cfc284)

part1から読む人は[こちら](https://qiita.com/manzoku_bukuro/items/10137f64810f0dc40543)

# この記事の対象者
– Video.jsを利用する人
– 動画プレイヤーのUI操作をしたい人
– 動画再生関連のサービスを作りたい人

# この記事の解説する章
[V

JavaScriptでのCookieの使い方

## １．概要
Cookieとはブラウザに保存できるテキストデータのことで、この機能を使うことでサイト上で行った設定などを引き継ぐことができたりします。今回は最近私が作った瞑想タイマーというアプリを元に、JavaScriptにおけるCookieの使い方をご紹介いたします。
## ２．実際の使用イメージ

瞑想タイマーの設定として、毎回５分の瞑想をBGMなしで行いたいとします。ブラウザを開くたびにいちいち設定するのは面倒なので、数日間は再度サイトを開いた際にも設定が維持されていると楽ですよね。そこでCookieの出番となります。
“`jsx
//BGMの有無を３日間保存
document.cookie = ‘bgmcheck=1;max-age=259200;’;
//上からそれぞれ時間、分、秒を３日間保存
document

htmlで指定するinputタグのイベントハンドラのJavaScriptとAngularの比較

# はじめに
inputタグで使えるイベントハンドラがJavaScriptとAngularどちらかによって異なる。TypeScriptはJavaScriptとほぼ同じように実装でき、本件についてはまったく同じである。

# 実装方法
JavaScriptとAngularの比較と、実際に動くコードを書いた。
## htmlで指定するinputタグのイベントハンドラの比較
| |クリック |入力 |
|—|—|—|
|JS/TS |onclick |oninput |
|Angular |(click) |(input) |

## JavaScript

kintoneをjavascriptでカスタマイズしてみよう！

# はじめに
先日「[Kintoneで筋斗雲を呼ぶアプリを作ってみよう！](https://qiita.com/ryuji_i3/items/d767569655940943990d)」という記事を書かせていただきました。
今回は、javascriptを使ってKintoneを初めてカスタマイズしようと思っている方に向けての記事になります。

私もKintoneを触っていたのは4年以上前なので、復習しながら書いていきたいと思います！

# 事前準備
カスタマイズするには、javascriptを書いてKintoneにファイルをアップロードする必要があります。javascriptを書くときは、コードを書く専用のエディタを使うのがおすすめです。コードを書いた事がない方は、専用のエディタを使うとなにが違うの？　と疑問に思うかもしれません。
例えば、以下のようなJavascriptのコードを用意したとします。

“`
(() => {
‘use strict’;
// これはコメントです。スラッシュを先頭に二つ付けると
// プログラムとしては無視されます。
// メモを残してお

[ERROR] Could not resolve “@rails/request” を解決する！

# エラー内容

以下のようなエラーが出たときの解決方法を記録しておきます。

“`bash
$ docker-compose run –rm app yarn build
Creating rails7-bramee_app_run … done
yarn run v1.22.17
$ esbuild app/javascript/*.* –bundle –sourcemap –outdir=app/assets/builds –public-path=assets
✘ [ERROR] Could not resolve “@rails/request”

app/javascript/controllers/***_controller.js:
2 │ import { FetchRequest } from “@rails/request”
╵ ~~~~~~~~~~~~~~~~

You can mark the path “@rails/request” as ex

麻雀基本ライブラリを使ってみる

[電脳麻将](https://kobalab.net/majiang/) という麻雀アプリを開発しているのですが、基本となるライブラリを [@kobalab/majiang-core](https://www.npmjs.com/package/@kobalab/majiang-core) として [Node.js](https://nodejs.org/ja/) の [npm](https://www.npmjs.com/) パッケージとしました。

– シャンテン数計算
– 和了打点計算
– AI同士の自動対戦

といったことが行えます。

APIのドキュメントは
– https://github.com/kobalab/majiang-core/wiki

にあります。

ここでは使い方を簡単に説明します。

## インストール

作業用ディレクトリにインストールします。
“`shell
$ mkdir work
$ cd work
$ npm init -y
$ npm i @kobalab/majiang-core
“`

## シャンテン数計算

手はじめにシャ

【JavaScript】ES2023の新機能

[ES2023](https://qiita.com/rana_kualu/items/84f66fe970f7feccf367) / [ES2022](https://qiita.com/rana_kualu/items/8bafecd760ae69cfac41) / [ES2021](https://qiita.com/rana_kualu/items/ae3297dd2974fcf047c4)

2023年一発目ということで、[ES2023](https://github.com/tc39/proposals)に[Finished Proposals](https://github.com/tc39/proposals/blob/main/finished-proposals.md)として取り入れられた機能を見てみましょう。

ちなみにFinished Proposalは「複数の実装が既に存在する」が前提なので、2023という名前にもかかわらず既に一部のブラウザで使用可能です。
というかES2023の新機能は全てのモダンブラウザで既に使用可能です。

# ES2023

# [

JavaScriptで年月日をループ処理する

# はじめに
日付をループ処理する機会があったため自身の備忘録として簡単にまとめておきたいと思います。
今回はfor文で配列を作成しようと思います。

# 日間をループさせる
今日は2023年1月1日ですので2022年12月1日から今日までの約1ヶ月間の日付配列を作ってみます。

実装したコードは以下の通りです。

“`js
const now = new Date();
const OLDEST_DATE = new Date(2022, 11, 1)

const resultDates = [];

for (let date = OLDEST_DATE; date <= now; date.setDate(date.getDate() + 1)) { resultDates.push(new Date(date)); } ```

まず初めに”now”として今日の日付を、”OLDEST_DATE”でループを開始する始めの日付を設定しておきます。
“`js
const now = new Date(); // 今日の日付
const OLDEST_DATE

【TypeScript】Utility Typesの型定義元を見て理解を深める

### はじめに
TypeScriptには組み込み型関数である`Utility Types`があります。

その型定義元の中身がどうなっているかを見ていこうと思います。

### Partial

“`TS
/**
* Tの全てのプロパティをオプションにする
*/
type Partial = {
[P in keyof T]?: T[P];
};
“`
引数で渡された型`T`を`Mapped Types`を使って、分解し再定義しています。

具体的には、`T`のプロパティを`in`と`keyof`を使って、順番に`P`に代入し、`?`(オプショナル)をつけてオプションにしています。
そして、その値の型を`T[P]`で取り出し再定義しています。

### Required

“`TS
/**
* Tの全プロパティを必須にする
*/
type Required = {
[P in keyof T]-?: T[P];
};
“`

こちらも先ほどの`Partial`と同様に`Mapped Types`を使って、分解し再定義しています。

違う点と

アロー関数の省略と向き合う

普段から使うことの多いアロー関数の省略について、ざっと省略の仕方をまとめました。

# 1.省略しない場合と省略した場合の比較

例として、渡された数値を2倍にして返す関数を考えます。
**before**
“`js
const doubleNumber = (number) => {
return number * 2;
}
“`
**after**
3行あったコードが1行で記述されています。
“`js
const doubleNumber = nubmer => number * 2;
“`
上記のようなコードは、Javascript開発に携わっていると、親の顔より見た光景になると言っても過言ではありません。
見慣れてしまえば、なんのことはないのですが、なれていないと「??」と戸惑うこともあるかもしれません。

では、どのような省略の過程を経て3行が1行になったのか見てみます。

# 引数のカッコの省略
まずは引数周りです。

**before**
“`js
(number)
“`
↓
**after**
“`js
number
“`
引数に注目してみると

配列の並び替え(降順) (JavaScript)

JavaScriptで配列を降順に並べる方法です。

“`HTML