JavaScript 第９回 ウィンドウをドラッグ＆ドロップで移動

# はじめに
今回は、第８回で作成したモードレスウィンドウをドラッグ＆ドロップで移動できるようにします。
モードレスウィンドウの作成については、[第８回の記事](https://qiita.com/Mount/items/dc3eda3a0b38939ed98a)を参照ください。
なお、**もう少し改善の余地があることがわかりましたので、そのあたりは今後また記事にしたい** と思います。

# 今回実施する内容
モードレスウィンドウをマウスによるドラッグ＆ドロップで移動できるようにします。

# ソースコード(Git Hub)
https://github.com/Build-Mount/JS_09_drag

# 環境
OS: Windows 11 JP (64bit)
Microsoft Edge：バージョン 120.0.2210.91 (公

【JavaScript】setTimeout(fn, 0)が遅さが分かるサイト

## 発端

https://qiita.com/mashuel/items/69b00b33961aa914f7fc

こちらの記事を読んだとき、未知との遭遇でよく分からなかったのだが、調べるとクソ重い処理をUIがフリーズしない程度にちょくちょく実行する方法として`setTimeout(fn, 0)`というものがある。ということを知った。

そして、`setTimeout(fn, 0)`は遅いらしいので他のアルゴリズムと比較したいと思った。

## 比較

1から100000までの和を求めてもらう。


おわかりいただけただろうか。

https://mogamoga1024.github.io/setTimeout0like/

## 比較に使わせていただいたアルゴリズム

https://dbaron.org/log/2010

UMD版Hexabase JavaScript SDKを使ってTodoアプリを作る（タスクのステータス変更）

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

元々TypeScriptで作られていることもあって、Next.jsやVue.jsなどでimportして利用することができます。しかし、もっと普通のWebアプリケーションなどで使う際には、CDN経由で利用したいと考える方もいるでしょう。そこで、UMD版Hexabase JavaScript SDKを作成しました。

今回は、そのUMD版Hexabase JavaScript SDKを使ったTodoアプリのデモを紹介します。今回はタスクの表示と、編集機能を解説します。一覧の表示、タスクの追加と削除および編集は以下を参照してください。

– [タスク一覧表示・追加・削除](https://qiita.com/goofmint/items/e

UMD版Hexabase JavaScript SDKを使ってTodoアプリを作る（タスクの表示・編集）

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

元々TypeScriptで作られていることもあって、Next.jsやVue.jsなどでimportして利用することができます。しかし、もっと普通のWebアプリケーションなどで使う際には、CDN経由で利用したいと考える方もいるでしょう。そこで、UMD版Hexabase JavaScript SDKを作成しました。

今回は、そのUMD版Hexabase JavaScript SDKを使ったTodoアプリのデモを紹介します。今回はタスクの表示と、編集機能を解説します。一覧の表示、タスクの追加と削除は以下を参照してください。

[UMD版Hexabase JavaScript SDKを使ってTodoアプリを作る（タスク一覧表示・追加・削除）

巷で噂のshadcn/uiをNext.jsで使ってみた

# shadcn/uiとは

shadcn/uiとは、これは [Radix UI](https://www.radix-ui.com/)と[Tailwind CSS](https://tailwindcss.com/)を使って書かれた UI コンポーネントをまとめたもので、TailwindCSS を通じてスタイルをカスタマイズできる。[2023 JavaScript Rising Stars](https://risingstars.js.org/2023/en#section-all)では、全Projectで見事ランキング1位に輝いた!!

shadcn/uiは、**柔軟性** と **カスタマイズ性** が高く、必要なコンポーネントだけを選択し、カスタマイズできる。また、通常のコンポーネントライブラリとは異なり、npmパッケージとして配布されていないので、**npmの依存関係に影響しない**。コンポーネントのコードはCLIでダウンロードする。

# インストール

この記事では、Next.jsの場合を紹介する。Viteなど他のフレームワークのインストール方法は[Installat

setTimeout(fn,0)より高速なsetImmediateもどき集

激重loopのCPUの負担を抑えたい場合に、よくsetTimeout(fn,0)を連呼するかどうかは定かではないかもしれませんが、それではいささか低速過ぎるという事態に直面しかねません。そういうprogramにおすそ分けする技法を紹介します。
“`
//script法
(function(F){
function a(e){
F[0]&&F.shift()();
h.removeChild(this);
e.target=null
}
var u=”data:,”,h=document.getElementsByTagName(“head”)[0];
this.wait0=function(f){
F[F.length]=f;
f=document.createElement(“script”);
f.onload=a;f.src=u;h.appendChild(f)
}
})([])
“`
“`
//FileReader法
(function(F){
function a(){F[0]&&F.shift()()}
var b=new Blo

【JavaScript】タッチイベントが何故か発火しない？何故？という方へ

## ひとつの可能性

スマホやタブレットと違って、ノートパソコンのタッチパッドでは[TouchEvent](https://developer.mozilla.org/ja/docs/Web/API/TouchEvent)は発火しないと思われます。

悲しいなぁ…。

非該当の方は引き続きデバッグ頑張ってください！

各言語における「symbol」はそれぞれ違う件（Ruby, JavaScript, TypeScript, Dart）

# はじめに

色んなプログラミング言語を勉強していくと、違う言語においてある単語が似たようで実は違うものとして使われることがしばしばありますね。今回はその中で今回「**シンボル**」（**symbol**）というものに関して話します。

`Symbol`というクラスは**Ruby**でも、**JavaScript**と**TypeScript**でも、**Dart**でも存在しますが、それぞれの言語でかなり違う概念です。

実際にRubyとDartでのシンボルは大体似ているから、Ruby経験者ならDartのシンボルのことも簡単に理解できるかもしれません。

しかしJavaScriptでは全く別物です。DartがJavaScriptに似ているとよく言われていますが、シンボルに関しては全然違うので、混同してはいけないことです。

確かにDartはあまりRubyに似ていないが、シンボルの概念のことだけはRubyの影響を受けている可能性がありますね。

Dartは比較的に新しい言語で、最近スマホアプリの開発に使われるFlutterの言語として広く知られるようになったばかりで、こうやってDar

jQueryでのthisの使い方

# thisとは
`this`は、jQuery内で使われる特殊なキーワードで、イベントが起こった要素を取得することができます。記述する際は`$(this)`と書きクォーテーション`(“`や`’)`は必要ありません。
# 使い方
下記のように、複数のli要素にclickイベントは設定されていた場合、実際にクリックされたli要素にだけ処理を行いたい場合があります。このような場合にthisを用いて、実際にクリックした要素のみイベントを処理することができます。
“`html

• リスト1
• リスト2
• リスト3

“`
“`js
//どのli要素をクリックしても、クリックイベントが発生
$(‘li’).click(function() {

//$(this)には実際にクリックされたli要素が入る
$(this).css(‘color’, ‘red’);
});
“`

また、応用としてclickイベントの中で、クリックされた要素のインデックス番号を取得することができます。下記の`

textメソッドについて

# textメソッドとは？
textメソッドは、jQueryで要素のテキストコンテンツを取得または設定するためのメソッドです。

# 使用方法
jQueryではCSSだけでなくtextメソッドを用いることでHTMLそのものを変更することができます。textメソッドは、`$(‘セレクタ’).text(‘書き換える文字列’);`のように記述します。
また、引数を指定せずに用いることで、要素内の文字列を取得することもできます。
“`html

こんにちは

Progate

“`
“`js
//文字列を書き換える場合
$(‘h1’).text(‘こんばんは’); //h1要素内を引数の文字列で変更

//文字列を取得する場合
var text = $(‘p’).text(); //p要素内の文字列「Progate」を取得
“`

クリップボードにテキストをコピーさせる機能を作った時、Document is not focusedになったら確認したいこと

:::note
以下の記事は、2024/1/19時点で最新バージョンの
Google Chrome(120.0.6099.234)にて検証しております
:::
わざわざドラッグして、`Ctrl + c`なんてしなくても
ボタンを押しただけでクリップボードにテキストをコピーしてくれる。

文明とはありがたいものですね。

webブラウザ上に、ユーザーに何か文章をコピーさせる機能を搭載させるなら
[クリップボードAPIのwriteText()メソッド](https://developer.mozilla.org/ja/docs/Web/API/Clipboard/writeText)を使用すると良いでしょう。[^1]
“`javascript:write_text.js
navigator.clipboard.writeText(‘コピーさせたいテキスト’);
“`

コピーするボタンを画面上に用意してあげれば、きっとユーザーに喜ばれること間違いなし！
そうそう、コピーが成功したことがわかりやすいように、alertで教えてあげるのもいいですね。
我ながらなんて親切なんでしょう！

“

JavaScriptから使いやすいWebAPIを考える 2

JavaScriptから使いやすいWebAPIを考える記事の第二弾
第一弾では[RPC風のAPI](https://qiita.com/economist/items/0e1fabdfcd75d1e3bafa)を紹介しましたが、今回はサーバ側に焦点を当てます

## 基本的な説明

WebAPIといえばデータやHTMLを返すのが普通ですが、今回のWebAPIは**描画命令**を返します

“`jsonc:サーバが返すのは描画命令
{“$”:”#sample”, “append”:”

〇〇

“}
“`

サーバは描画命令をJSONで返します。

“`js:ブラウザ側では次のように実行される
$(“#sample”).append(“

〇〇

“)
“`
描画命令はブラウザ側でJavaScriptに変換されて実行されます。

“`js:複数の描画命令
[{描画命令1}, {描画命令2}]
“`
複数の描画命令を送れます。配列に入れるだけです

以上が基本的な説明です。
まだプロトタイプ状態ですが、感触は良好なので記事にしてみました。

以下は命令のリフ

JavaScript+HTMLによる844bytesのFile圧縮伸長program(圧縮力gzip以上)

何の変哲もない、gzip以上の圧縮力しか持たない程度のprogramを紹介します。その正体はscript要素のみからなるのhtmlです。いささか無作法な記述法であるため、環境によっては動作しないかもしれません。例によって制御文字盛り沢山なのでBase64形式で書いておきます。復号すればきっちり844bytesとなります。
“`
PHNjcmlwdD5mb3IoRj0nPj4+fn4wWi5jWTspdltYaWYoVztXVj0xVGQ9UysrXVE9MCxQWzBdS2lsZUo9MjU2LElBcnJheUhubG9hZEdjaGVjax8pex5yZR1BW2FRHGI9Z3x8HBsgdHlwZT0aLnMZO0w8PD04KRg9NjU1MzUmFy5sZW5ndGgWPXYVVVtjFGYsU2MTPUE9PnsSTH4yNBE9ZC5sEG5ldyAPdCs9ZlQrY1kOfWVsc2V7DD1bXSwLT1tvUT0JZm9yKAgIYyBvZiBGKQd0PTA7B1chFBldBg9VaW50OEgoBWw9ZixyPXQEPGlucHV0IGlTA109e3

情報系大学院生がNext.js学習の区切りとしてポートフォリオサイト作ってみた件

TypeScriptとNext.jsについての学習が一段落したので、**学習の区切りとしてポートフォリオサイトを作りました。**
レスポンシブデザインやRSC (React Server Components) など学びながら実装を進めた部分も多く大変でしたが、とても楽しく開発できました！

この記事では、**学習期間の学習編**と、**サイト作成期間の開発編**の2部構成で、完成までの道のりを紹介します。

作成したポートフォリオサイトはこちら ↓

https://about-kakinoki.vercel.app

https://github.com/KakinokiKanta/about-kakinoki

## 本編前のちょっとした自己紹介

私は現在(2024/1/25)、大学院に通う修士1年生です。

普段は、研究活動やETロボコンの活動をしていたりするのですが、「**IT系のメガベンチャーに就職したい！**」、「**インターンシップやハッカソンに参加してみたい！**」という思いから、TypeScriptやReact、Next.jsの勉強を始めました。そのため、We

三角関数を使わず、単純な積和で円を描く

座標の回転

“`math:
\begin{eqnarray}
x’ & = & x \cos{ \theta } – y \sin{ \theta } \\
y’ & = & y \cos{ \theta } + x \sin{ \theta } \\
\end{eqnarray}
“`

で $\theta$ が十分小さいとき

“`math:
\begin{eqnarray}
\cos{ \theta } & \fallingdotseq & 1 \\
\sin{ \theta } & \fallingdotseq & \theta \\
x’ & = & x – y\ \theta \\
y’ & = & y + x\ \theta \\
\end{eqnarray}
“`

の計算で円描画が可能という記事を約40年くらい前に見た。16 ビット整数を使った演算だと精度が足りず、一周すると元のドットに戻ってこなかった。今なら倍精度浮動小数演算が使えるので試してみる。

“`javascript:JavaScript
function drawCircle(ctx, x,

令和6年にJavaScriptなチャートライブラリをReact念頭に置いて総ざらい

# はじめに

Next.js の SSG で簡単な線グラフを表示する必要に迫られ、その界隈で使われているライブラリの現状をちょっと調べてみました。以前に同じ界隈のグラフ表示のライブラリを使ったのは 2018 年頃なので、最近の状況を把握する目的もあります。

チャートライブラリは特定の目的のものから汎用的なもの、チャートを簡単に表示するものから部品のラッパー的なものまで多種多様ですが、既に開発が終了/停滞しているプロジェクトも多く、調査にはそれなりに時間がかかってしまいました。

# ライブラリ調査/選定について

英語版の Wikipedia に結構[まとまっている](https://en.wikipedia.org/wiki/Comparison_of_JavaScript_charting_libraries)ので、まずはそこから列挙したあとに絞り込んでいきました。今回の利用目的から、非プロプライエタリ、かつ、比較的更新がされており、PC 上の Web ブラウザ上での表示がメインで Reace(Next.js/SSG) で利用でき、オフライン表示も可能なライブラリを選んでい

Playwrightでログイン状態を維持してテストを実施したい

## やりたいこと
Playwrightを使ってのログインが必要なWeb画面の自動化テスト
ブラウザはステートレスのためログイン状態を維持することが出来ない為、各テストシナリオごとに対象のサイトにログインしていたのを、ログイン処理を共通化してログイン状態を維持した状態で各シナリオのテストを実施したい。

## 実装
ログイン処理のテストの実装

“`typescript:login_test.ts

import { expect, test } from “@playwright/test”;

test(“サイトに事前ログイン”, async ({
page,
}) => {
// 画面を操作してログインが完了している状態
// ログインセッション情報をエクスポート
await page
.context()
.storageState({ path: `./tmp/sessions/login-account.json` });
}
“`

ログイン後のテストの実装

“`typescript:login_test.ts

v-data-table の選択色 ( Vue3 + Vuetify3 )

## Vuetify3 の破壊的変更はかなり破壊的

2023年いっぱいでVue2のサポートが終了し、いやいやながらVue3移行をしました。Vue3対応のVuetify3には破壊的変更が多いですね。

`v-data-table` は長らく正式リリースできずにいたため、ぎりぎり(間に合ってはいない)で対応する羽目になりました。

##

で、この`v-data-table`ですが、Vuetify2では選択行(`tr`タグ)に特別なclassを指定していたので、色の変更(薄い灰色)がされていたが、Vuetify3ではそのような選択行のclassがないため、色がつかない。
困った。

### Vuetify3 `v-data-table` の仕様 (セクション：選択)
https://vuetifyjs.com/en/components/data-tables/basics/#selection

### Vuetify2 `v-data-table` の仕様 (セクション：選択)
https://v2.vuetifyjs.com/ja/components/data-tables/#

JavascriptとJinja2の組み合わせ For Flask

### 本記事の背景
Javascript入門は多くの情報と解説があるが、Jinja2と組合わせで使う場合やグラフ描画用ライブライであるchatjs+Jinja2で使う場合の紹介記事は少ない。筆者は、ある程度Javascriptの基礎文法を習得している人向けにJinja2との組み合わせで注意すべき点や引数の渡し方について焦点を合わせている。
※Jinja2については、以下の記事参照

https://qiita.com/akeyi2018/items/2557911351493aff87a8

jinja2とJavaScriptの組み合わせの事例（chat.jsのData部分にjinja2の構文が書ける）は、以下の記事でも紹介している

https://qiita.com/akeyi2018/items/ba806a89ca852157a591

### 本記事の対象者

– JavaScriptの基礎文法を理解している
– chatjsとはなにかを理解している
– Flaskの基礎を取得している
– HTML/CSSのタグを理解している
– Python基礎文法を理解している
– W

ReactHookFormのtrigger実行後にerrorsオブジェクトを取得したい

## やりたいこと

[ReactHookForm](https://react-hook-form.com/)で作成したフォームのバリデーションを手動で実行したい場合に[trigger](https://react-hook-form.com/docs/useform/trigger)を利用する。
そのtriggerを実行した際にバリデーション結果であるerrorsオブジェクトを取得したい。

“`js
import { useForm } from “react-hook-form”;

function App() {
const { register, trigger } = useForm();

return (

{
a