JavaScript関連のことを調べてみた2021年12月04日

null か undefined か、どちらを使うかが問題だ

API を設計する、ドキュメント DB のデータ構造を定義する、JavaScript/TypeScript の内部的な型を定義する、というような場合、JSON で型設計を行うことになります。その際、避けて通れないのが、値が存在しないかも知れないプロパティの扱いに関する設計方針の検討です。Haskell についても少しだけ言及します。

以下写真は 0、`null`、`undefined` のとてもわかり易い概念です。

[0 vs null vs undefined](https://twitter.com/ddprrt/status/1074955395528040448) より引用。

## TL;DR

– 実際は `null` でも `undefined` でもそれほど大差はない
– JavaScript/Typ

useReducerとuseContextでglobal stateを作る場合のおすすめなやり方

## はじめに

React Contextでglobal stateを実現する際、useStateやuseReducerを使ってcontextの伝搬で更新するやり方が知られていますが、contextを一つだけにすると、無駄なレンダリングが生じることがあります。そこで、contextの伝搬を使う場合は、contextを細かく分けることがおすすめです。

## コード

最初にuseReducerでstateを作るカスタムフックを作ります。

“`js
const useValue = () => useReducer((state, action) => {
if (action.type === ‘INC_COUNT1’) {
return { …state, count1: state.count1 + 1 };
}
if (action.type === ‘INC_COUNT2’) {
return { …state, count2: state.count2 + 1 };
}
if (action.type === ‘INC_BOT

ジェネラティブアートとp5.jsって何？

##前置き
Qiita初投稿なので優しい目線でお願いします。
あと、仕事とか全く関係ない趣味の分野のお話です。
#ジェネラティブアートとは
簡単に言うと「デジタルアート」です。だけど、ペンタブとか液タブで書いたかわいいイラストとかではなくて”アルゴリズム”や”数学”を駆使して自律的に生み出されたアートです。
ようは、プログラミングを書いてできる幾何学的なアートが「ジェネラティブアート」です。
注意:細かいことを言うと人間が書いたものも含まれます。
#p5.jsとは
JavaScriptライブラリであり、Webエディタです。
詳しくは、「[Processing](https://processing.org/)」というデジタルアートに用いられるプログラミング言語とその環境をJavaScriptの形に落とし込んだものです。なので、「[p5.js](https://p5js.jp/get-started/)」はJavaScriptの基礎を知っていればほとんどゼロ知識でいじれちゃいます。それに加え、そもそもプログラミング初学者向けのコーディング環境なので、小中学生でも遊べるレベルです。
個人的

Asanaの本文をコードハイライトするChrome拡張を作りました

## はじめに

この記事はHamee Advent Calendar 2021の4日目の記事です。
Hamee開発部は長年タスク管理にRedmineを使ってきましたが、つい最近Asanaへ切り替えを行いました。
Asana本文でコードハイライトができないようで、Redmineと同じような使い方をしようとすると不都合があったためコードハイライトできるように拡張を作りました。

## デモ

拡張アイコンをクリックするとasanaの本文がコードハイライトされます。
もう1度押すと元に戻ります。

## コード

拡張を公開するにはデベロッパー登録しないといけないため社内限定公開にしてあります。
ソースコードはgithubにアップしてありますので手元に持ってきて自身で拡張登録すればどなたでもお使いいただけます。
htt

【実用編】指定した個数と面数のダイスを振る

## 前書き
前々から、TRPGに少し興味があり、ダイス機能を作ってみたいと思ったので作ってみたいと思います。

## どのようなものか
コマンドで、何回振るか、そのダイスは何面あるか。を指定します。
上記は**6面**のダイスを**4回**振った時の例です。

## どういう感じなのか（概要）
どういう動作をするのかの概要を説明します。

1. ユーザーから2つの引数を受け取る（回数・ダイスの面数）
1. Discordの最大文字数は2000なので、上の引数が大きすぎたら無視する（任意で大丈夫です）
1. それぞれのダイスの目の合計数とそれぞれの目のリストの変数を初期化しておく
1. 「1」で受け取った回数の引数分繰り返し処理をする
1. 繰り返し処理の中に「1」で受け取ったダイスの面数の中を乱数で出す
1. その目をリストに追加しながら、足

Blazor with Zeu.js

Zeu.jsは様々なデータをビジュアル化し、アニメーションで表示するJavaScriptライブラリです。
今回はBlazor WebAssemblyアプリで、Zeu.jsを動かしてみたいと思います:zap::zap::zap:

**Zeu.js**

https://github.com/shzlw/zeu

今回はバリバリのJavaScriptライブラリを使って、Blazorアプリケーションを作っていきたいと思います:thumbsup:

[**Demo**](https://blazorwithzeujs-4a68f.web.app/)

https://blazorwithzeujs-4a68f.web.app/

[**サンプルコード**](https://github.com/kimux8/BlazorAppWith

javascript演習　〜22日目/３０日

覚えたこと

ホバーで白い背景を作る方法
まず背景の要素を作って、

“`javascript

const highlight = document.createElement(‘span’);
highlight.classList.add(‘highlight’);
document.body.append(highlight);

“`

ホバーするa要素を取得する

“`javascript
const triggers = document.querySelectorAll(‘a’);
triggers.forEach(a => a.addEventListener(‘mouseenter’,hightlightLink))

“`

ホバーのターゲットの位置を取得して、スタイルに当てる

“`javascript
function hightlightLink(){
const linkCoords = this.getBoundingClientRect();
const coords = {
width:linkCoords.width,

セブイレの新作が知りたい！！！

## LINEBotを作った背景
初めまして！

セブンイレブン大好きな若手エンジニアです！
私の家の近くにはセブンイレブンがあり、毎日散歩をするついでにセブイレに寄って、
店内をウロウロして、気になる新作などがあれば買ってしまいます。
(スイーツやアイスなどがメイン)

皆さんご存知の通り、セブンイレブンは毎週火曜日に、ホームページの新作の情報が更新され、結構な頻度で新作が出るので飽きたりしづらく、僕は大好きです。

ただ毎回火曜日にホームページをわざわ見に行くのも面倒だし、案外忘れてしまったりしてしまいます。。

そこで散歩しながらふと思いつきました。

**エンジニアらしく毎週火曜日に、セブイレの新作の情報をスクレイピングでとってきて、
LINEで知らせてくれるBotを作ればいいのでは？？？**

早速作ってみることにしました。

## やったこと
やったこととしては以下の3つです。
1. LINEbotを作成するために,LINEdevelopersに登録し、botを作成
2. botでメッセージを送信するために、GASでプログラムを作成!
3. 作成したプログラムを定期実行

Next2D NoCode Toolでテキストを挿入する

まず、初めに訂正を:bow:
Next2D PlayerはWebGLサポートしたライブラリと説明をしましたが、テキスト(デバイスフォント)はCanvas2Dで描画しTextureに書き出しています。
後続のBlendModeやFilterといった機能の描画はWebGLで描画を行っています。

# テキストツール
Tool Areaにある文字ボタンがテキストツールになります。
描画ツールと同じく、ツールを選択してScreen Areaで範囲指定を行うことでテキストエリアが追加されます。
![スクリーンショット 2021-12-02 23.56.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80502/0f64bd1

スプレッドシートのそれ、Slackに通知させようぜ！

## ある日のパイセン「あれ、トニーって今日休みかい？」

え、ゴシップ好きのトニーが今日休みかって？

いや確かに今日は雑談のチャンネルに出没してないし
休みなのかもしれないな

そう思ったけど、
そのときは総務のキャサリンが教えてくれて解決したんだ

「トニー？ああ、休みよ休み、ずっと休みだったらいいのにね」

おいおい、トニー、嫌われてるな。

さては最近、キャサリンについて何かゴシップをでっち上げたな？
まったく困ったやつだよ

## キャサリン「これ、どうにかSlackに通知とかできないわけ？」

ウチはまだ小さい会社だから、`有給申請はGoogleフォームでやっていて`
集計されるスプレッドシートは総務しか見られないんだ
（どうやら申請系が全部まとまったシートらしい）

だから休む人は別にカレンダーに登録しておかないといけないし
今回みたいに、「あれ？今日休みだっけ？」みたいなことが起きるんだ！

キャサリンが半ギレになるのも無理はないさ。

トニーにあることないこと、でっち上げられたあげく
トニーの有給申請の尻拭いをさせられてるんだからね！

**ああ、愛しのキャ

Slackに追加されたカスタム絵文字を通知するBOTを作った

今年もAdvent Calendarに参加します！
この記事は[ニフティグループ Advent Calendar 2021](https://qiita.com/advent-calendar/2021/nifty)の4日目です。
社会人3年目。このご時世のせいか、今年が一番早く時間過ぎた気がします。

昨日は @yasu_m_0123 さんの[ITエンジニアがMBAを取るとどうなるのかという話](https://qiita.com/yasu_m_0123/items/1af1903e9d5c9f3b226c)でした。
私は社会人大学院という存在をあまり意識していなかったので、どんなものなのか、どんな雰囲気なのか知ることができました。
# Slackの絵文字は好きですか？

私は好きでよく使っています。:innocent:
手軽にコミュニケーションが取れるのがいいですよね。

特にカスタム絵文字が好きです。汎用性の高いものから、面白いものまでいろいろありますよね。

ちなみに現時点(2021/12/03)での、弊社のカスタム絵文字の数は
**約2500個以上** ありました。
多いのか

[ネタ] divアートプログラミング

HTMLのdivだけで絵？を描くというネタプログラミングの記事です。
数行のHTMLとJSだけで出来るので、実際に試してみると面白いかも？

サンプル

大量のdivを用意して1個1個のdivの背景色を変えて表現しています。

一般的に、こういうのはWebGLであったり、シェーダーといわれる分野かとは思いますが
あえてdivを駆使ししてやってみるのもそれはそれで面白いかなと思った次第です。

## 概要


一見するとただの黒い四角ですが、1辺が10pxのdivを縦横に10個ずつ並べています。
divの

p5.jsの関数まとめ part.3 lerpColor() ~ 赤と青の間の色は本当に紫なのか ~

この記事は Qiita p5js アドベントカレンダー4日目の記事です。

## これはなに
書籍[『Generative Design with p5.js』P_1_2_1_01](https://editor.p5js.org/generative-design/sketches/P_1_2_1_01)に登場する関数について理解を深める記事です。
今回は`lerpColor()`です。

## lerpColor()
### リファレンスより
> Blends two colors to find a third color somewhere between them. The amt parameter is the amount to interpolate between the two values where 0.0 is equal to the first color, 0.1 is very near the first color, 0.5 is halfway in between, etc. An amount below 0 will be treated

Ajaxを用いて動的セレクトボックスを作成する（CakePHP）

## 記事作成の背景
Ajaxって聞くけど、、、なんだ？っていうのと、個人的に動的セレクトボックスの
ヒントを残しておきたくて作成しました。
なんかパッとする記事が見つけられなかったので、これが少しでも困ってる方の助けになれば幸いです。

## 環境
CakePHP4 （最新）
jQuery
MySQL 8.0

### 全体のコード
とりあえずコード見てみるか・・・って方向けに最初に記載しておきます。
勉強会向けに色々書いてありますが、こちらの記事では必要箇所のみ抜粋して記述いたします。
https://github.com/Kurogoma939/cake_ajax_sample.git
### テストデータ
今回、検証環境はMAMPを用いて開発しました。
そのため、エクスポートしたSQLは以下の通りです。
保存場所　： `app/SQL/create_tabel`、`app/SQL/insert_table`

“`sql
CREATE TABLE `marks` (
`id` int(4) NOT NULL COMMENT ‘ID’,
`name` varch

class構文って何？どう使うの？


「class構文」って普段jQueryとWordPressだけ使ってたら絶対に見ない。
知らずに遭遇したら「class構文アレルギー」になっちゃうので、免疫を付けたい。

なので、いろんな記事を漁りました。JSとPHPで、理解しやすい方から学ぶスタイル。

【JavaScript入門】class構文の使い方・書き方が分かるようになる方法！

https://www.willstyle.co.jp/blog/2435/

基本を理解！JavaScriptでclass（クラス）を使う方法【初心者向け】

http://www.tohoho-web.com/js/class.htm

https://qiita.com/JPNYKW/items/248f99c94c00c3d1aa27

https://html5experts.jp/takazudo/17355/

【Vue.js】フォームバリデーションで使うgetter/setter

# Tips1

[公式リファレンス](https://jp.vuejs.org/v2/guide/computed.html#%E7%AE%97%E5%87%BA-Setter-%E9%96%A2%E6%95%B0)

* 入力文字列が20文字以上だった場合にリアルタイムでerrorの表示をさせたい。
* 算出プロパティのget/setを使用して入力を監視する。

#### vue

“`js