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

’data-*’表現をよく見るから調べると「データ属性」って言うらしい

# ‘data-*’の正体

HTML要素に追加情報を格納できるHTML属性

# 使用例

## ‘data-*’属性がない時
“`

…

“`
**電気自動車の記事が書かれてる**という情報が分かりそうです。

## ‘data-*’属性がある時
“`

…

“`
‘data-*’属性を加える事で、**3つのトピックが用意されている**・**この記事は12314個目**・**電気自動車以外の車の記事もあるかもしれない**。
これらの情報が追加で分かりました。
# ‘data-*’属性を使うと何が嬉しいの？
JavaScriptでおこなうデータ取得がシンプルになります。
実際に下記で確認してみます。

## ‘data-*’属性がない時
“`
const ar

「POST Dev | ビジネスを変革するモダンフロントエンドの祭典」を視聴したのでまとめてみた

# はじめに
就業先ではあまりフロントエンド開発の取り組みは社内で盛んになっておりませんが、
興味があったので視聴させていただきました。
ここでは学んだことを共有させていただきます。

# 概要等
日時:2022/10/01(土) 10:30~17:30
[イベント公式サイト](https://lp.nijibox.jp/cp/postdev/)
[イベントTwitter](https://twitter.com/PostDev_oa)
Twitterで`#postdev`を打つと関連するTweetが出てくる

### 主催者企業様
[株式会社ニジボックス様](https://www.nijibox.jp/)
[公式youtubeチャンネル](https://www.youtube.com/channel/UCd1p76tumQBMM9EAEPuqnaA)
[twitter](https://twitter.com/nijibox_jp?lang=ja)

### conpass掲載全体テーマ
>テーマは「ビジネスを変革！モダンフロントエンド × 組織論」
【フロントエンドエンジニア

Promise.all()を自力で実装するとこんな感じ？

## コード

“`ts
const all = (…promises: ReadonlyArray>): Promise> => {
if (promises.length === 0) {
return Promise.resolve>([]);
}

let rejected = false;
const map: Map = new Map();

return new Promise>((resolve, reject) => {
promises.forEach((p: PromiseLike, i: number) => {
p.then((t: T) => {
if (rejected) {
return;
}

map.set(i, t);

if (map.size === promises.length) {

Tesseract.js で OCR してみた

# はじめに

自分は HTML＋JavaScript で「蔵書台帳」アプリを作っています。書籍の ISBN をバーコード読取できるようにしています。
ところが ISBN がバーコード表示されていないことがあって、表記された ISBN を OCR できないかと思っていました。
改めて調べてみると、ブラウザ上の JavaScript コードで OCR できるんですね。

JavaScript で OCR できるライブラリは幾つもありましたが、これがよさそうでした。

[GitHub – naptha/tesseract.js: Pure Javascript OCR for more than 100 Languages]
(https://github.com/naptha/tesseract.js/ )

紹介している記事も多く、幾つか試してみました。

# Tesseract.js を使ってみた

* Tesseract 3.0.3

## インストールする

今回は CDN を使いました。

“`html: