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

Page Visibility APIを知る

こんにちは。

**「un-T factory! XA Advent Calendar 2022」** の2番バッターです。

しっかり送りバントを決めたいと思います。
よろしくおねがいします！

さて今回は、
**Page Visibility API**について知っていきたいと思います。

皆さん、Page Visibility APIについてどのくらいご存じでしょうか？

– 動画プレーヤーの制御
– カルーセルの実装時の自動再生設定
– GPUを使用して描画を行う際の処理制御

などで、考えたことがある方は少なからずいらっしゃるかもしれません、
あるいは、Page Visibility APIを認識していなくても
プロパティ`Document.visibilityState` やイベント`Document:visibilitychange`は
知っているぞ。という方もいらっしゃるかと思います。

本記事は上記についてまだしっかり意識したことがない、
主に初学者向けな内容になるかと思いますが、
進めていきます。

## **Page Visibility APIとは？**

まー

QwikでTODOアプリを作ってみる（1）

# 概要
MDNのReact ToDo リストをはじめるを参考にQwikで実装してみます。

https://developer.mozilla.org/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning

# 実装
## プロジェクトの初めのApp()とCSSを配置します。

routes/index.tsx の内容をプロジェクトの出発地点のコードに置き換え
global.cssに用意されたスタイルに置き換えます。

そのままは使用できず、以下に置き換える必要があります。

“`
htmlFor → for
“`

ReactではforがJavaScriptの予約語であるために、代わりにhtmlForを使用するようになっていますがQwikではHTMLプロパティとして記述出来るようです。

“`
defaultChecked={true} → checked
“`

ReactではdefaultCheckedを使用することで、最初にマウントされ

Receiving DNS directly through JavaScript

[[日本語版](https://qiita.com/martinheidegger/items/cfeccfa71c1ea30b9ebe)]

Following my [2021 blog post about IDs](https://qiita.com/martinheidegger/items/09c48c50136b629f1107), this year is a bit more low-level.

Every single one of us uses the [global DNS](https://en.wikipedia.org/wiki/Domain_Name_System) every single day. It is so fundamentally tied to the internet and our daily life that we barely think about how it works and just hope it works well.

> Quick Refresher: DNS (domain name system

DNS を直接 JavaScript で受け取る

[[English Version](https://qiita.com/martinheidegger/items/0a6ecd63b9bfb7f639f7)]

[2021年の「ID について」のポスト](https://qiita.com/martinheidegger/items/425112e84f7c12148d90)の後、今年がもう少し低レベルのになっています。

誰でも一人一人は毎日[グローバルの DNS](https://ja.wikipedia.org/wiki/Domain_Name_System) を使っています。インターネットや日常生活とあまりにも根本的に結びついているため、ほとんど考えず、ただうまく機能することを願うだけになってしまっています。

> リマインダー: DNS (domain=ドメイン,name=名前,system0システム) を使って、我々のパソコンはグローバルの名前（例「qiita.com」または 「google.com」）と連携しているリソース(例：メールサーバ、ウエッブサーバ)を調べることができます。

通常、ドメインの検索はOSの低レ

TODOリストをJavaScriptで作ったよ！

# 今回はJavaScriptの練習も込めてTODOlistを作りました。
まずは、コードを紹介します。↓
## HTMLコード
***
“`html

[Day2] JavaScriptの基礎 part1

本記事は一人アドベントカレンダー企画の一つです。
[30代未経験エンジニアが25日後にJavaScriptをマスターするカレンダー](https://qiita.com/advent-calendar/2022)

[JAVASCRIPT.INFO](https://ja.javascript.info/)を元にJavaScriptを勉強していき、そこで学んだ知識をアウトプットしていきます。
２５日でJAVASCRIPT.INFOをやりきり、未経験エンジニアがJavaScriptをマスターする過程を投稿していきます。

## 2.1 Hello, world!
### 知らない単語
– モジュールとは
– 変数や関数をまとめたもの

### 学んだこと
– JavaScriptのプログラムは、scriptタグでHTML内の任意の部分に挿入できる

– scriptタグには「type」、「language」など、最近ではほとんど使用されない属性がいくつかある

– scriptタグはsrc属性と中身のコード、両方を持つことはできないので、srcか中身のコードどちらかにする

Auth0 SPAの認証を理解しながら、ミニマムのモック認証APIコンテナを作ってみる

この記事は 弁護士ドットコム [Advent Calendar 2022](https://qiita.com/advent-calendar/2022/bengo4com) の 2 日目の記事です。

Auth0を本番サービスで採用したのでが、開発環境やCIで動かすe2eテストで毎回Auth0のテナントにアクセスされると困ります。モックコンテナにしたいですが、公式ではローカル開発用のコンテナを提供していなさそうです。

実現のためAuth0のリクエストを分析し、OpenID Connectの仕様を確認して、Auth0認証もどきを作成することでかなり理解が進みました。

Auth0のモック認証APIの全体コードは下記にあります。はりぼての雑な作りなので、本番で動かすのは危険です。

https://github.com/komtaki/auth0-spa-mock

情報が少なかったのでまとめたので、Auth0で開発する際の参考になれば幸いです。JWT認証については勉強中なので、間違っているところがあれば教えてください。

# 三文まとめ

– 認証をモックするのに必要なエンドポイント

GASでアドベントカレンダーの日付を自動割当できるスクリプトを作成した

この記事はHRBrain Advent Calendar 2022の2日目の記事です。

https://qiita.com/advent-calendar/2022/hrbrain

## はじめに

バックエンドエンジニアをやっている入中です。

この記事ではGoogle Apps Scriptとスプレッドシートを使用して、アドベントカレンダーの何日目の担当かをサクッと決められるスクリプトを作成したので紹介します。

## 誰に向けた記事

– GASを使ってみたい方
– 開発環境構築せずに、プログラムを動かしてみたい方
– アドベントカレンダーの日程割に困っている方

## 経緯

私の発案で2022年のHRBrainアドベントカレンダーの担当日を決める際に、くじ引きで日にちを決めようと決意し、みんなにくじを引いてもらいました。（アナログな手作りくじ）くじを引いてもらったのはいいのですが。。。その後、自分が引いてたくじ番号をNotionに書いてもらったり、リモートで就業している方がくじをけなかったり、自分自身もアドベントカレンダーの日程管理に時間を取られたりと、なかなか反省の多い

マーカーの画像を動的に切り替える方法

この記事は Mapbox Advent Calendar 2022 の記事です。
中の人も何名か参戦されるようなので、良い方法があればあわよくばアドバイスしてもらえないかというセコい思いで書かせていただきました(笑)

mapbox上に多数のマーカーをセットする場合など、[マーカー群をレイヤーとして追加する方法](https://docs.mapbox.com/mapbox-gl-js/example/add-image/)もありますが、
今回は少数のマーカーをリアルタイムに移動させたり画像を差し替えたりしたかったので、今回は[カスタムマーカーを追加する方法](https://docs.mapbox.com/jp/help/tutorials/custom-markers-gl-js/)を選択しました。

一度セットしたマーカーの位置を変更するには“`.setLngLat()“`で場所を変えてあげればよいのですが、
セットしたマーカーの画像を変更する方法が見当たらず、試行錯誤の上、次のようになりました。

# マーカー作成の際、divエレメントを保存しておく
“`
const e

[Google Apps Script] スクリプトの並列実行によって実行時間制限をクリアする方法

## はじめに
この記事は[株式会社LabBase テックカレンダー Advent Calendar 2022](https://qiita.com/advent-calendar/2022/labbase)の二日目です。我らがCTOのミズノさんの記事は[こちら]()

こんにちは、[株式会社LabBase](https://labbase.co.jp/)（旧株式会社POL）でソフトウェアエンジニアをしている上久保です。昨年10月にLabBaseに入社して以降、主にフロントエンド開発をしていてReact/TypeScriptを書くことが多いですが、最近ではRustでバックエンド開発なんかもしたりしています。

今回はGASについて少し書いてみようと思います。最近業務でGoogle Drive上のスプレッドシートの内容をJSON形式に加工して出力するプログラムを利用していたのですが、この既存のプログラムは対象のスプレッドシートの数が多く処理にとても時間がかかってしまっていました。

また[GASには利用プランに関わらず6分の実行時間制限があるため](https://developers.

Discord.jsと@napi-rs/canvasでおみくじ画像を生成して投稿する

# まえがき
皆さんこんにちは、Fuseです。12月も始まり、年末年始が近づいてきましたね。
ところで、皆さんは年末年始といえば何を思い浮かべますか？私が思い浮かべるのは…
>
>引用元：[いらすとや様](https://www.irasutoya.com/2012/04/blog-post_7236.html)

**おみくじです。**
なかなか初詣に行けないこのご時世、おみくじの結果で友達とはしゃぎたくてもはしゃげない。
せめてオンラインでこの夢をかなえるべく、Discordのbotを作りました。
# 完成品

https://github.com/Fuses-Garage/OmikujiMion
![image.png](https://qiita-image-store.s3.ap-northeast-1.

初めてのJavaScript

## はじめに
こんにちは。株式会社システムアイの添田です。
アドベントカレンダー企画2日目の担当をさせていただきます。

まずはじめに簡単に自己紹介をさせていただきますと、システムアイに入社以来BPOの業務をしているため、実際にプログラミングに触れる機会が皆無な私です。
しかし、システムに携わる業務をさせてもらっている以上、少しでも「こんな風に書いたらこんな風に動く」、みたいなのを知っておくべきですし、今後の業務にも役に立つはず！ということで、今回は私が現在業務で扱っているシステムがTypeScriptで書かれているので、TypeScriptを勉強…
と思ったのですが、色々と調べるとTypeScriptはJavaScriptの上位互換であるということが分かり、まずは基本となるJavaScriptから勉強したほうがいいんじゃないかということで、タイトルにもある通りJavaScriptを学んでいく様子を記事にいたしました。

上記の通り、初心者が1から学んでいくというスタイルの記事のため、新たな知識や実務でのナレッジ等の取得を目的に来訪いただいた方には大変申し訳ないのですが、温かい目で見

HTMLとCSSとJavaScriptそれぞれの役割について考えをまとめてみた。

「言語の役割を超えない」を言い換えると**それぞれの役割内で実装すること**です。
私の考えるそれぞれの言語の役割は後に定義します。

:::note info
それぞれの言語役割を明確に決めて運用することでのシンプルで実装しやすい開発環境ができるのだと考えています!
:::

全員で統一されていないと**読みづらいコードが生まれ、負債としてさまざまな形で事業の改善を妨げる**ことです…。

なぜ発生してしまうのか？どうしたら防ぐことができるのか？
を個人の経験をもとに考えをまとめております。
サービス運営の参考になれば幸いです。

:::note warn
あくまでも個人の考えなので忌憚のないご意見があればぜひコメントください！
:::

### なぜ言語の役割を超えた実装が行われてしまうのか？

大きく3つの理由があると考えています。
1. 言語の進化
1. バリデートの甘さ
1. なんでもできてしまう

詳しく説明していきます。

### 言語の進化
言語は常に進化しています。
真新しいものではないですが…
– JavaScriptでなくてもCSSでアニメーションが作れるようにな

Symbolブロックチェーンでの送信済トランザクションの状態監視・再送について

Symbolブロックチェーンは、PoSでの確率的ファイナリティに基づく新規ブロック生成と、定期的な投票ベースの確定的ファイナリティに基づくファイナライズの二段階のコンセンサスで、ネットワーク全体のデータの同一性を実現する仕組みです。

(あまり多くはないと思いますが、)トランザクションを送信後、確定的ファイナリティが確保されるまでの、最大6時間程度の期間は、一度ブロックに組み込まれたトランザクションが、ブロックの巻き戻り等によって、無かったことになってしまう可能性もあります。要件としてそのような状況を許容できない場合、送信済トランザクションのハッシュ及びペイロードを残しておくことで、ブロックの巻き戻り等によってトランザクションが無かったことになってしまった場合でも、(トランザクションの期限以内、残高不足等の非整合が無い場合に限られますが、)まったく同じトランザクションを(ユーザーの署名を再度求めることなく)再送することができます。

この記事では、Version2系SDKを使用する場合、REST APIを直接呼び出す場合のそれぞれのケースで、具体的にどのような実装で(ユーザーの署名を再

After Effectsの拡張機能を作ってみよう！【Adobe ExtendScript】

# #1 誰？
お世話になっております！
株式会社MIXIの開発本部 CTO室 映像開発グループの「まんてら」と申します！

前回のアドベントカレンダーに参加してから体感２～３か月くらいしか経ってないんですが、もう年末なんですね…\_(:3」∠)\_
時間の過行く速さに驚愕しながら今年も元気にアドベントカレンダーに参加していきます！

去年の記事はこちらから！
– [私がUnityプロジェクトを作成したら必ず入れるアセット４選！](https://qiita.com/manntera_studio/items/3ce686865823865f40fc)

本記事は「[MIXI DEVELOPERS Advent Calendar 2022](https://qiita.com/advent-calendar/2022/mixi)」の２日目の記事です！

# #2 何やるの？
今回はAdobe After Effects(以下、AE)の拡張ツールを作るため必要な最低限の知識を共有したいと思います！
これらを読めば、後はググれば簡単なツール制作はなんとかなるくらいにはなるかと思います！

@babel/preset-envは必要なプラグインをどう判定しているのか調査した

[Qiita株式会社のカレンダー](https://qiita.com/advent-calendar/2022/qiita-inc)の2日目は @kyntk が担当します。

—

今年はIEのサポート終了がありましたね。
今まではIEのサポートをするためにJavaScriptやCSSで使えない記法があったり、ポリフィルを入れていたりしていましたが、モダンブラウザだけを対応するようになるとこれらの設定が不要になりました。

ES2015以前の環境をサポートするために@babel/preset-envがよく使われます。
今回は、preset-envの設定を変更するにあたって、うっかりサポート対象環境で動かないバグを生んだり、逆にあまり無駄なコードを削れなかったりしないように、内部でどのような処理が行われているのか調べてみました。実際にbabelのソースコードを読みながらまとめています。

:::note
調査時点のbabelのバージョンは「7.20.6」です
:::

## 分かったこと

はじめに結論ですが、Babelを使ってJavaScriptがどのように変換されるかを知るため

QRコードをスキャンして備品の補充申請！

[コラボフロー Advent Calendar 2022](https://qiita.com/advent-calendar/2022/collaboflow) 2日目の記事です！
コラボフローってなんぞや？って方は [こちらのページ](https://www.collabo-style.co.jp/about/) をご参照ください！

—

1日目の「[コラボフローカスタマイズのすゝめ](https://qiita.com/miko3/items/484cc21136987efb4d11)」で QR コードネタがあったので、まさかの速攻で被りか！？と内心焦りましたが、セーフです。ふぅ～

本日は QR コードを**読み取ります！**

さて。

オフィスの備品といえば鉛筆から始まり、油性マジックやコピー用紙、紙コップ等々、よく補充が必要なものが沢山、、依頼をするにも申請書に記入が面倒くさい！総務部など手配を受ける側も申請書からの依頼のほかに、口頭やチャットの不定形な依頼の交通整理も一苦労・・。

**めんどいですよね！？**

そんな時にワークフロー化しつつ、スマホやタブレット

p5.toioで忖度福笑い

お正月の接待プレイにいかがでしょうか。

忖度福笑い pic.twitter.com/PjrVtHT1AC

— ? (@_coboco) December 1, 2022

# 開発デバイス
– toioコアキューブ2個
本当は顔のパーツ6個分あると良かったんですが富豪じゃないのでとりあえず2個で。。。

プレイマット（下に敷いてる紙）が面白そうだったので買ってみました。
紙面上に特殊パターンが印刷されていて、座標

現場で役立つWebアニメーションのノウハウ

## とある日のWeb制作現場にて

若かりし頃のワイ「今日はWebアニメーションの実装をして行くで〜」

若ワイ「実装するアニメーション内容は…っと」
若ワイ「ふむふむ…要素を上に動かすだけの簡単な実装やね」
若ワイ「CSSとJavaScriptのどちらでもアニメーション実装できるけど、どっちがええんやろ…」
若ワイ「違いはようわからんが、まぁCSSでええやろ」
若ワイ「次は、CSSのtopとtransform、どちらかのプロパティで要素を上に動かす必要があるわけやが…」
若ワイ「どちらでも要素が上に動くわけやし変わらんやろ！topプロパティで動かしたろ！」

？？？「ちょい待ちぃ〜や！！」
若ワイ「！！そ、その声は…若かりし頃にお世話になったアニキッ！？」

世話ニキ「若ワイくん…今、どちらでも変わらない言うたな？」
世話ニキ「**topプロパティとtransformプロパティ、実は違いがある**で！」
若ワイ「な…なんやってー！！」

世話ニキ「それと**実装したいアニメーションによってCSSとJavascriptで向き不向きがある**んや」
世話ニキ「ほな、そのあたりを一緒に学

‮

タイトルの無い記事です。

↓本編はこちら
**『[目に見えない文字を悪用してサイトを好き放題荒らされた話](https://qiita.com/laineus/items/2d168a57fdbf7cd7c9c3)』**