JavaScript関連のことを調べてみた

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

座標の回転

“`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

Vueのバブリング止めてくれたりするイベント修飾子まとめ(@click.stopとか)

JavaScriptは便利な機能をたくさん用意してくれてます。

それをVueはイベント修飾子という形で色々使いやすく用意してくれています。

今回はそんなイベント修飾子の解説です。

公式は[こちら](https://jp.vuejs.org/v2/guide/events.html#%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E4%BF%AE%E9%A3%BE%E5%AD%90)。

# **イベント修飾子は何がある？**

Vueは全部で6つイベント修飾子を用意してくれています。

– `.stop`
– `.prevent`
– `.capture`
– `.self`
– `.once`
– `.passive`

一つずつ解説していきます。

### **.stop**

これをつけるとバブリングを止めてくれます。

バブリングとは、子要素で発火したイベントが親要素でも効いちゃうってやつです。

具体的にバブリングを止めないとどうなるかというと、
子要素と親要素が両方clickイベントでの起こるメソッドを構えていた場合、
子要素でclickイベ

jQueryの読み込みについて

# はじめに
jqueryを記述できても読み込めていなければ使えないので、jqueryライブラリの読み込み方法についてまとめます。
# jQueryの読み込み
jQueryを使用するには、jQueryライブラリを読み込む必要があります。ライブラリはインターネット経由で読み込むのが一般的です。``タグの中で以下のようにURLを読み込むことで、jQueryが使用できるようになります。
“`html



“`
# jQueryファイルの読み込み
jQueryは、.jsファイルにコードを書きます。HTMLファイルで、``と書くことで、jQueryのコードを記述するファイルが読み込まれます。
`

## 作ったもの
### プログラム
今回作ったプログラムの内容は、以下のとおりです。

```javascript
const balls = [];
const count = 100;

function setup() {
crea

JavaScriptでLZMA decoderを828bytesで書く

都合上Base64形式で書いておく。復号すればきっちり828bytesとなる(制御文字多数混在)。関数名は`f`である。ちなみに大域変数 `_` が存在する
```
Zm9yKGY9JzoxVjw8VVVlVC0tUyxuUik6UTUsUD4+Pk9oT04sY00yNTY7THArfmJLPmE/SmE9N0pJaz1IZm9yKEc7RztGKytdRTEpRDFELEN8fChCZihsLGRBdCx0PXZAMTYrH10sHh5hKh9kKSkdKHUsHDpyHDMsYSofGz1kGik7GT1jGChmWxdlPRY7ZDxMKRU9HGFNKT0+FD1iLGI9E2w9b1twRT0SPTERUzspEHVbYV0PHmEpPygOaWYoDGVsc2V7C3JldHVybiAJHmQpKzIsSQhSPW5VOHxzW2lFB2QrGisGZhcFKUcVBkEpBD5lO2IrGFQrKykGGD0FNh5kAyxOMjRCaFU9OAcZAhR7dmFyIGQ9AWYBdVswHhZkLzksZgEPQg8RMDI0GWMaKihOQ2MYPm5PMD8oa

【2024年1月】人気沸騰中の技術書TOP5

# [世界一流エンジニアの思考法](https://amzn.to/48PrD6k)

[](https://amzn.to/48PrD6k)

**noteでも大人気！　米マイクロソフトのエンジニアが放つ最前線の仕事術**

頭が先、手は後。一流の仕事のカギは順序にある。
――楠木建（経営学者）

知的生産へのリスペクトがイノベーションの源泉だ。
――落合陽一（メディアアーティスト）

「怠惰であれ！」「早く失敗せよ」――
米マイクロソフトの現役ソフトウェアエンジニアの著者が、超巨大クラウドの開発の最前線で学んだ思考法とは？
“三流プログラマ”でもできた〈生産性爆上がり〉の技術！

・試行錯誤は「悪」。“基礎の理解”に時間をかける
・より少ない時間で価値を最大化する考え方とは？
・「準備」と「持ち帰り」をやめて、その場で解決する
・マルチタスクは生産性が最低なのでやらない
・“脳の負荷を減らす”コミュニケーションの極意
・コントリビュート文化で

コピペ差異計算

備忘録。javascriptのコードはchat gptに書かせた。
以下のように与えられたデータの差異計算をする。売り上げが０のタイトルは一方のデータでは表示されていない。



htmlで書かれた表が表示されたページで開発者ツールを開き、

コンソールに以下のコード(chat

チャットbotをchromeの拡張機能として作成してみた

## はじめに
#### この記事の目的や背景
今回自社botをLangchainを使用して作成している際にインターフェースをコミュニケーションツールに置くのか、webアプリを作成するのか使い勝手を検証するためのChromeの拡張機能を使用してチャット画面を常に表示させるとどうなるのかなと思い試してみました。
#### 対象読者
・チャットアプリを作成してみてたい方
・Chromeの拡張機能の作り方を知りたい方
## 目次
1. Chromeの拡張機能とは
2. Chromeの拡張機能でできること
3. Javascriptコードの実装
4. Manifest.jsonの作成
5. ChromeのデベロッパーモードでChromeにアップロード
6. 実際に触ってみる

## 1. Chromeの拡張機能とは
見出しの通りになりますがChromeの機能を拡張することができます。
こちらのwebストアからhttps://chromewebstore.google.com/?utm_source=ext_sidebar&hl=ja色々な拡張機能をインストールすることができます。
また自分

JavaScript（php smarty内 .tpl 記述） ラジオボタン、テキストエリア 制御

## ■完成イメージ
・ラジオボックス（香炉）デフォルト、連絡事項に記述無し
・テキストエリア（連絡事項）

・ラジオボックス（香炉）香炉有りの場合は、連絡事項に追記
・テキストエリア（連絡事項）

※香炉以外の他にラジオボタンが３つ

## ■ソースコード
```javascript main.js

// === コンテンツをロードしたら実行
document.addEventListener("DOMContentLoaded", function() {

Zendeskで目次機能を実装した

# はじめに

これまで大きなZendeskカスタマイズの受託を2件ほど経験してきました。あまりZendeskのカスタマイズについて、個別具体的に解説している記事がないので、我流のカスタマイズで恐縮ですがここに残したいと思います。

### 「Zendeskとは？」　という方へ

私自身ZendeskのGuide機能しか取り扱っていないのですが、ざっくり説明すると「企業のヘルプセンターがノーコード（カスタマイズ等を実施する場合はローコード）　で構築できるよ！」というSaaSです。もっと詳しく知りたい方は[こちら](https://zeq.co.jp/case)を読んでみてください。

# Zendeskで目次機能を実装する

## 最終的に目指している状態

記事内の任意の場所に``と記述することで、記事内のヘッダー要素を取得して下記のような目次を作成する。（前提としてjQueryを使用しています。）変数名の前に「$」を付けることで、その変数がjQueryオブジェクトを格納していることを明示しています。

### 記事の状態

#### 記事内の任意の場所に``

JavaScript の && 演算子は true/false を返すとは限らない

# はじめに
React Hook Form のサンプルを見ていたら、こんなコードがありました。

:::note info
というか、React 本家のチュートリアルにもありますね。
https://ja.react.dev/learn/conditional-rendering#logical-and-operator-
:::

```react:エラーがあれば&&の右を出力
{errors.exampleRequired && This field is required}
```

普段 JavaScript を書かない立場としては、すぐには理解できませんでした。
入力チェックの結果、エラーがある場合ならこういう挙動のはず。
1. `errors.exampleRequired` に何らかのオブジェクトが入っている
1. `true` と評価される
1. 右オペランドが評価される
1. 右オペランドが `true` と評価されれば、`true` が返される
1. 右オペランドが `false` と評価されれば、`false` が返され

addEventListenerを使ってみた

こんにちはAtsu1209です。
今日は最近jQueryに頼りすぎたので、jQueryを使わずにコードを書きます。

# 初めに
今日はフォームに入力した値をalertで表示します。
そしてjQueryの代わりにaddEventListenerを使います。

# HTML
まずフォームを作ります
```html

Submit

```
ごく普通のフォームを作りました。
次に本題のJSを書きます。

# JS
```html