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

javascriptで大量要素をDOMツリーに追加するときはDocumentFragmentを使おう

# 前置き

レガシーなシステムを保守、パフォーマンス改善をするときにとんでもない実装がされていることってありますよね(悲)

今回は私が遭遇したとんでも実装を改善し、1/20程度の実行時間に改善できた話を紹介します。

# 実装内容

(実際の処理内容とは多少異なりますが、)APIで取得したデータ(リスト)を繰り返し処理し、テーブルに表示する実装を行います。

## もとの実装

https://jsfiddle.net/ez4hpLcv/17/

もとの実装ではhtml側でテンプレートを作っておき、それをループ処理でクローンし、正規表現で文字列を置換しながらひたすらDOMツリーに追加する方法で実装していました。
(実際に実装されていたものではもっと要素も多く、複雑な処理をしていたため、1万件表示しきれるまでに30～40秒程度かかっていました。上記JSFiddleで私の環境では10～12秒程度かかっています。)

## 改善後の実装

https://jsfiddle.net/5q3zuhkm/23/

改善後の実装では、`document.createDocumentFragmen

Hexabase TypeScript SDKの使い方と認証を行う方法

[Hexabase](https://www.hexabase.com/)は企業においても安心して利用できるBaaS（Backend as a Service）を提供しています。多くのBaaSがそうであるように、主にフロントエンド開発者に利用してもらいたいと考えています。そこで現在、TypeScript SDKの開発が進められています。

[@hexabase/hexabase-js – npm](https://www.npmjs.com/package/@hexabase/hexabase-js)

この記事ではHexabase TypeScript SDKのインストールと、認証周りの使い方を紹介します。

## インストール

インストールはnpmやyarnを使って行います。

“`
# npmの場合
npm install @hexabase/hexabase-js

# yarnの場合
yarn add @hexabase/hexabase-js
“`

## インポート

インポートすると、 `createClient` という関数が取得できます。

“`ts
imp

Pleasanter Script with jQuery Deferred

This is a supplement for [my previous post](https://qiita.com/implune/items/2de1d3b65b6331634df7).

For now, we have to consider legacy browser.

[FAQ：プリザンターの動作環境や推奨スペックが知りたい](https://pleasanter.org/manual/faq-recommended-specifications)
> ■Webブラウザ
・Chrome
・IE
・Edge
・Safari

And Pleasanter already have library dependency with jQuery.
So we can use [jQuery Deferred](https://api.jquery.com/category/deferred-object/).

## code

“`javascript
onst jqDeferredApiGet = (id) => {
const d = new $.Def

【小説】JSインタプリタと聖なる天使。JSファイルの肥大化がもたらす悲劇について

田所「はぁ、JSでJSインタプリタ書くかぁ」
小林「田所さん、まじすかｗ　それ書く意味あるんすかｗ」
田所「なんだぁ？　俺のやろうとしてることケチつけるのかぁ？」

　田所はギロリと小林を睨んだ。小林は蛇に睨まれた蛙のように小さく背を丸めた。

小林「で、でも田所さん。どうせインタプリタ書くならC++とか使ったほうが……」
田所「うるせぇ！」

　バキ！　田所は小林の右頬をその石のような拳で殴った。小林は右頬を抑えながら狼狽する。

小林「な、なにすんですか……」
田所「お前がしつこいからだ。お前のせいだ」
小林「け、警察に言うっすよ！」
田所「ふん。言ってみろ。お前にそんな勇気が……」
小林「もしもし、警察ですか？！」
田所「あ、おい……」
小林「暴行です！　暴行の現行犯っす！　急いできてください！」
田所「……」

　会社に警察が来ると田所は連行された。田所は拘置所でスクワットをしている。

田所「くそぉ、小林のやつ、ほんとに警察呼ぶなんて」
田所「まいったなぁ、前科ついちまうぞ」

　スクワットをする田所の独房に突如まぶしいばかりの光が差す。光は部屋の天井の隅から田所に向かって放

JavaScriptのClassについて part3

# 初めに
今回は`class`の静的メソッドの書き方と使い分けをまとめていきたいと思います。

主な参考文章はこちらです。
[Static properties and methods – javascript.info](https://javascript.info/static-properties-methods)
[Public and private class fields – v8.dev](https://v8.dev/features/class-fields#simpler_subclassing)
[Public class fields – MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Public_class_fields)
[Private class features – MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private

jqueryで一番下にスクロールするもっとも簡単な方法

# jqueryで一番下にスクロールするもっとも簡単な方法

## まえがき
ブロックを下に追加していく形のUIを作成していた際に、
下に追加されたブロックが表示上限を超えるとどんどん見えなくなってしまうことを避けるために実装したかった。


それっぽい記事がstackoverflowにしかなかったので令和版、日本語版で保存・共有しておく
> https://stackoverflow.com/questions/10503606/scroll-to-bottom-of-div-on-page-load-jquery

## 環境
– jqeury 3.6.0
## たった1行
~~~javascript
// 一番下にスクロールする
$(‘hoge’).scrollTop($(‘hoge’)[0].scrollHeight);
~~~

Promisify example for Pleasanter Script

# Promisify pleasanter script

Pleasanter script has some [api accessing methods](https://pleasanter.org/manual/script#%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E6%93%8D%E4%BD%9C%E3%82%84%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BB%E7%B5%84%E7%B9%94%E3%83%BB%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%E6%93%8D%E4%BD%9C%E3%81%AA%E3%81%A9%E3%81%AE%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%88_apijs), however these native methods lead to fall **callback hells**.

Here is just a simple promisify demonstration.

## code e

Vue.js 2 基底コンポーネントを一括登録する

### コード

“`typescript
// main.jsにて
// 基底コンポーネントフォルダパス： src/components/base
const files = require.context(‘./components/base, true’, /\.vue$/)
const components = {}
files.keys().forEach(key => {
components[key.replace(/(\.\/|\.vue)/g, ”)] = files(key).default
})

Object.keys(components).forEach(key => {
Vue.component(key, components[key])
})

“`

### 使用

“`vue
// コンポーネント内でそのまま使えば大丈夫です！

“`

TypeScript・JavaScriptでFIFOキューを作る方法

はいさい！ちゅらデータぬオースティンやいびーん！

# 概要
TypeScriptでジェネリック型を用いて、FIFOキューを作る方法を紹介します。

最初は純粋なFIFOキューを作り、それから削除ができるキューも作ってみます。

## 目次
1. 簡素なFIFOキューを実装
1. 削除できるキューを作る
1. キューに入っている実態の数を露呈する
1. まとめ

## 背景
始める前に、キューについて説明します。
### キューとは何か
キューは、配列を保って保持されているメモリー上の実体の集まりです。通常のアレイと似て非なるものです。
アレイと大きく異なるのは、キューは、後ろにしか追加できないこと、そして、前からしか取り出せないことです。
画像の引用：discord.jsで計算認証

# 必要環境
Node.js v16.9.0以上
discord.js v14.1.2以上
# コード
“`index.js
const discord = require(‘discord.js’);
const Keyv = require(‘keyv’);
const verify = new Keyv(‘sqlite://db.sqlite’, { table: ‘verify’ });
const signale = require(‘signale’);
const prefix = “!”
const client = new discord.Client({
intents: Object.values(discord.IntentsBitField.Flags),
partials: Object.values(discord.Partials),
});
client.commands = new discord.Collection();

function Random_num(max) {
return Math.floor(Math.rando

Promiseとasync/awaitを改めて理解する

## はじめに
JSを久々に書くとPromiseを忘れてしまうため、見返せるように記事にしてみました。

## Promiseとは
Promise オブジェクトは、**非同期処理の完了 (もしくは失敗) の結果およびその結果の値**を表します。

### Promiseオブジェクト生成
“`js
const myPromise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(‘foo’);
}, 300);
});
“`

### Promiseを返す関数を生成
“`js
function test(time) {
// Promiseを返す
return new Promise(
(resolve ,reject) => {
setTimeout(() => {
resolve(‘foo’);
}, time);
}
);
}
// Promiseオブジェクトを作成
const myPromise = test(300);
“`

## Pro

jest.spyOnでclassのインスタンスメソッドをモック化するとnot a functionエラーになる場合

# 問題

クラスのインスタンスメソッド内で、APIで何かをfetchしてくるケースを考えます。たとえば以下のように`getGlobalIp()`でグローバルIPを取得。

“`ts:Hoge.ts
import axios from ‘axios’;

export class Hoge {
getGlobalIp = async (): Promise => {
const { data } = await axios.get<{ origin: string }>(‘https://httpbin.org/ip’);
return data.origin;
};
}
“`

この戻り値が常に固定値になるように、`jest.spyOn`でモック化してみます。

“`ts:Hoge.test.ts
import { Hoge } from ‘./Hoge’;

it(‘グローバルIPアドレスを取得’, async () => {
jest.spyOn(Hoge.prototype, ‘getGlobalIp’).mockReturnV

医療崩壊予防のために技術者ができること

# 技術者はなんとか新しいものを簡潔に作るしかない

というわけで、まずこんなのをスパゲティーコードでもいいので作ってみました

https://github.com/nanakochi123456/covid19-checker

坦々と情報を蓄積していたのですが、もう一度急いで情報を徹夜で収集し、とりあえずリリース

おまけに WordPressにも対応

https://neet.co.jp/covid19

あ、4K4KっていってたHP ここのことです。ごめんなさい。隠してて

医療資格がなくても、ニュース等の情報を集め、
みんながどこでも使えるツールにしておきたかったわけです。

というわけで、これ、よろしければ、パクって使ってください、のお願いをしにまいりました。

国外では、チャットボットっぽいもっと優れたツールもあるようですが（でもソースを見たら大したことしてなかった）

これも、大したことはしていません。

ですが、いつ、どこで、情報の少ない人に

コロナにかかっても、（[医療崩壊で受診しないで、という声明がでても](https://www.jiji.com/jc/a

ざっくりわかる Sprocketsとは

# 何を実現してくれるか

sprocketsはapp/assets 配下にある jsファイルとcssファイルをそれぞれ 1 つのファイルにまとめる。JavaScript と CSS をまとめる理由は、Rails アプリケーションにブラウザでアクセスした時にサーバへのアクセス回数を減らすため。

# 関連する用語

### アセットパイプライン

Sprocketsがcssファイルとjavascriptファイルをまとめるまでの工程はアセットパイプラインと呼ばれている。

### コンパイル

特定のプログラミング言語を用いて記述されたコンピュータープログラムを他の言語 を用いて記述された同じプログラムに形を変えることである。Sprocketsではアセットパイプラインの処理を実行することをコンパイルという。

### ディレクティブ

ディレクティブとはSprocketsで外部ファイルを読み込むための記述のことである。
ここでいう外部ファイルとはjsの場合`app/assets/javascripts`配下、cssの場合`app/assets/stylesheets`配下にあるファイルの

【Swift】WKWebViewでJavaScriptを実行する方法

# はじめに
WKWebViewでJaveScriptを実行する方法を二つ紹介します。

# とりあえずWKWebViewを表示
以下がベースのコードです。
こちらに追加していきます。
“`swift
import UIKit
import WebKit

class ViewController: UIViewController {

var webView: WKWebView!

override func viewDidLoad() {
super.viewDidLoad()

webView = WKWebView(frame: view.frame)

view.addSubview(webView)

webView.load(URLRequest(url: URL(string: “”)!))

}

}
“`

# 方法1(読み込み開始時 or 読み込み終了時)
こちらの方法は読み込み開始時もしくは、読み込み終了時に実行されます。
使用用途としては、WebViewの設定や静的

JavaScriptで配列最後の要素を取得する

Javascript では配列最後の要素を取得する方法がいくつかあったのでまとめておきます。

## array[array.length – 1]
今まではこれを使うのが多かったそうです。
“`javascript
const fruits = [‘apple’, ‘banana’, ‘orange’];
console.log(fruits[fruits.length – 1]); // orange
“`
## array.pop()
これで取得すると、元の配列から最後の要素が消えてしまいます。
“`javascript
const fruits = [‘apple’, ‘banana’, ‘orange’];
console.log(fruits.pop()); // orange
console.log(fruits); // [‘apple’, ‘banana’]
“`

## array.slice(-1)[0]
これでも取得できますが、何をしているコードか分かりづらいです。
“`javascript
const fruits = [‘apple’, ‘bana

Dartの型に関する誤解

## はじめに
### 動機
本記事執筆時点で型安全導入から4年、Null安全導入から1年5ヶ月経過しているにもかかわらず、こともあろうかこれからDartを学ぼうとする者向けに、Dart 1.xまでの知識(または、その誤解)をベースとして解説する新規記事が散見されます。その一つへのコメントが元記事ごと消えてしまったので、ここで改めて纏めます。

### Dartの型安全 (Null安全を除く)
Dartは[2.0(SDK 2.0.0は2018/8/7リリース)](https://github.com/dart-lang/sdk/blob/main/CHANGELOG.md#200—2018-08-07 “sdk/CHANGELOG.md at main · dart-lang/sdk”)で型安全になりました。
型安全はDart 1.x時代からオプションモード(Strong Mode)としてリリースされてきましたが、Dart 2.0で標準となると同時にSDK 2.0.0では型不安全(いわばWeak Mode)は削除されました。つまり、型安全モードが標準でかつ型不安全モードが併存するS

Express × TypeScriptでバックエンド開発①(下準備~簡単なGET, POST)

## ご挨拶
お久リぶりです。おおのんです。
SPA開発が盛んな昨今、フロントエンドからキャリアを始める人も増えていることでしょう。
そしてキャリアの次手に迷っているアナタ様に朗報です。
この記事では**TypeScriptを用いたバックエンドの開発方法**をご紹介します。
できる限りシンプルにハンズオンでまとめました。
皆様の新しいキャリア開拓の一助になればと思います。

### ▼ゴール
・TypeScriptでバックエンド環境を作る
・シンプルなAPIの実装（GET, POST）と動作確認

### ▼対象
・フロントエンドからキャリアを始めた人（ジュニア、ミドル）
・TypeScriptでバックエンド書いてみたい人

## 前提
node.jsが必要です。この記事ではバージョン14.18.0で進めています。
フレームワークを使用します。今回は言わずと知れたExpressを使用します。

**【参考サイト様】**
・【公式】Express – Node.js Web アプリケーション・フレームワーク

JavaScript DOMに動きをつける Animations API

JavaScript の Animations API を使って簡単に画面の要素(DOM)に動きをつけることができる
キーフレームで変化させるスタイルを指定してタイミングプロパティで変化の間隔や回数が指定できる
`dom.animate(キーフレーム, タイミングプロパティ)` の使い方を簡単に記載する

# DOM に動きをつける設定方法 `animate(キーフレーム, タイミングプロパティ)`
“`
let dom = document.getElementById(‘id’);

dom.animate(
// キーフレーム ⇒ スタイル名: [値1, 値2…] # 値1～2～…と徐々に変化
{
backgroundColor: [‘red’, ‘blue’, ‘red’]
, fontSize: [’10px’, ’25px’]
, transform: [‘rotate(0deg)’, ‘rotate(360deg)’]
, width: [‘10%’, ‘50%’, ‘100%’,

date-fnsについて

## はじめに
最近は date-fns を使うことが多いので、メモとして書いておきます。

## format
Dateオブジェクトを指定した文字列にして生成できる。
https://date-fns.org/v2.14.0/docs/format

“` javascript
const date = new Date() // Fri May 13 2022 17:09:15 GMT+0900 (日本標準時)
format(date, ‘yyyy-MM-dd’) // 2022-05-13
format(date, ‘yyyy/MM/dd HH:mm:ss’) // 2022/05/13 17:09:15
format(date, ‘yyyy年M月d日(E)’, {locale: ja}) // 2022年5月13日(金)
“`

## parse
文字列をDateオブジェクトに変換する。
https://date-fns.org/v2.14.0/docs/parse

“` javascript
parse(‘2022-05-13’, ‘yyyy-MM-dd’, ne