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

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

JavaScript での Levene検定 の実装

# Reactive stat 内部の Levene検定の実装 です

Levene検定は、3つ以上のグループの分散が等しいかどうかを検定する方法の一つです。
分散分析のようないくつかの統計的検定では、群やサンプル間で分散が等しいことを前提とします。
Levene検定は、その仮定を検証するために使用されます。

この記事では、Levene検定の概要と、JavaScriptでの実装方法を説明します。

## はじめに

最近、弊社より **[ブラウザだけで使える無料統計ソフト Reactive stat](https://www.emuyn.net/stats)** をリリースしました。
信頼性の高い R で統計解析し、その結果を AI が解説します!
その背景には、統計に苦労している医療者の助けになりたい、という気持ちがあります。
最終的な統計解析は R で行うのですが、レスポンスとサーバー負荷の改善のため、一部の統計計算はブラウザ内で行っています。
そのうち、汎用性の高い部分を共有させていただきたいと思います。
できるだけ R の出力と整合性を持つように javascript をイン

元記事を表示

JavaScript での Bartlett検定 の実装

# Reactive stat 内部の Bartlett検定の実装 です

Bartlett検定は、3つ以上のグループの分散が等しいかどうかを検定する方法の一つです。
分散分析のようないくつかの統計的検定では、群やサンプル間で分散が等しいことを前提とします。Bartlett検定は、その仮定を検証するために使用されます。

この記事では、Bartlett検定の概要と、JavaScriptでの実装方法を説明します。

## はじめに

最近、弊社より **[ブラウザだけで使える無料統計ソフト Reactive stat](https://www.emuyn.net/stats)** をリリースしました。
信頼性の高い R で統計解析し、その結果を AI が解説します!
その背景には、統計に苦労している医療者の助けになりたい、という気持ちがあります。
最終的な統計解析は R で行うのですが、レスポンスとサーバー負荷の改善のため、一部の統計計算はブラウザ内で行っています。
そのうち、汎用性の高い部分を共有させていただきたいと思います。
できるだけ R の出力と整合性を持つように javascr

元記事を表示

JavaScript での F検定 の実装

# Reactive stat 内部の F検定の実装 です

F検定は、2つのグループの分散が等しいかどうかを検証するために行います。この記事では、F検定の概要と、JavaScriptでの実装方法を説明します。

## はじめに

最近、弊社より **[ブラウザだけで使える無料統計ソフト Reactive stat](https://www.emuyn.net/stats)** をリリースしました。
信頼性の高い R で統計解析し、その結果を AI が解説します!
その背景には、統計に苦労している医療者の助けになりたい、という気持ちがあります。
最終的な統計解析は R で行うのですが、レスポンスとサーバー負荷の改善のため、一部の統計計算はブラウザ内で行っています。
そのうち、汎用性の高い部分を共有させていただきたいと思います。
できるだけ R の出力と整合性を持つように javascript をインプリメントしてあるので、参考になれば幸いです。

## 使用したライブラリ

このコードでは、jStatライブラリを使用しています。jStatは、JavaScriptで統計計算を行うための便

元記事を表示

kintoneのフィールド要素をマウスアウト時だけマスクする方法

# はじめに

サイボウズ株式会社が提供しているkintoneのレコード閲覧時のフィールドマスクです。

リモートワークや外出先でデータ閲覧時に、ショルダーハッキングを防ぐために作成しました。

## 表示イメージ

### マウスオーバー時
![139612134-e4aae33b-2862-4763-a13b-2522cfea6102.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394381/a3ad0936-f24a-fdd6-0fc4-0424d1b1e908.png)

### マウスアウト時
![139612128-754766f9-8d56-4073-87db-757a4b2d8176.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394381/6384eb19-70ac-0ec6-bd04-705219f0a8b1.png)

利便性のためにマウスオーバーするとマスクが解除されるようにしています。

元記事を表示

React 19 の 新機能 useActionState を触ってみた

# はじめに
この記事では、React 19 で新たに追加された `useActionState` という hook で簡単な実装を行い、その動作を確認してみます。

https://react.dev/reference/react/useActionState

# 開発環境
開発環境は以下の通りです。

– Windows 11
– VSCode
– JavaScript
– React 19.0.0-rc-cc1ec60d0d-20240607
– Vite 5.2.0
– Node.js 20.14.0
– npm 10.8.1

また、React 19 RC のインストール方法については、以下の記事に記載しています。

https://qiita.com/Yasushi-Mo/items/027503cbe4b299d99bed

# `useActionState` の実装
“`
useActionState(action, initialState, permalink?)
“`

`useActionState` では、アクションの実行、実行ステートの管理、アクシ

元記事を表示

JavaScript での t検定と Welch の t検定の実装

# Reactive stat 内部の t検定と Welch の t検定の実装 です

t検定は、2つのグループの平均値の違いを検証する際の基本的な手法です。
この記事では、t検定と Welch の t検定の概要と、JavaScriptでの実装方法を説明します。

## はじめに

最近、弊社より **[ブラウザだけで使える無料統計ソフト Reactive stat](https://www.emuyn.net/stats)** をリリースしました。
信頼性の高い R で統計解析し、その結果を AI が解説します!
その背景には、統計に苦労している医療者の助けになりたい、という気持ちがあります。
最終的な統計解析は R で行うのですが、レスポンスとサーバー負荷の改善のため、一部の統計計算はブラウザ内で行っています。
そのうち、汎用性の高い部分を共有させていただきたいと思います。
できるだけ R の出力と整合性を持つように javascript をインプリメントしてあるので、参考になれば幸いです。

## 使用したライブラリ

このコードでは、jStatライブラリを使用しています。jSt

元記事を表示

【Figma Plugins】テキストノードを生成する

## はじめに
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/85396574-18ce-04ac-a9b1-58158f27aa35.png)

FigmaのPluginを開発する際、テキストノードを生成したいなと思ったことはありますか?
そんな時に使うのが、「**createText()**」です。

この記事では、「**createText()**」について、解説しようと思います。

## テキストノードを生成する
テキストノードを生成するのに最低限必要なコードは、以下のコードです!

“`createText.ts
const createText = async() => {
/* テキストノードを生成する */
const text = figma.createText();
/* フォントをロードする(非同期処理) */
await figma.loadFontAsync(text.fontName as FontName);
/* テ

元記事を表示

JavaScript での Kruskal-Wallis検定 の実装

# Reactive stat 内部の Kruskal-Wallis検定の実装 です

Kruskal-Wallis検定は、3つ以上の独立なグループ間の差異を検定するノンパラメトリック手法です。この記事では、Kruskal-Wallis検定の概要と、JavaScriptでの実装方法を説明します。

## はじめに

最近、弊社より **[ブラウザだけで使える無料統計ソフト Reactive stat](https://www.emuyn.net/stats)** をリリースしました。
信頼性の高い R で統計解析し、その結果を AI が解説します!
その背景には、統計に苦労している医療者の助けになりたい、という気持ちがあります。
最終的な統計解析は R で行うのですが、レスポンスとサーバー負荷の改善のため、一部の統計計算はブラウザ内で行っています。
そのうち、汎用性の高い部分を共有させていただきたいと思います。
できるだけ R の出力と整合性を持つように javascript をインプリメントしてあるので、参考になれば幸いです。

## 使用したライブラリ

このコードでは、jStat

元記事を表示

ChatGPT使えば結構いい感じのサイト作れるんじゃね?というお話。Part3

こんにちはAtsu1209です
今回はChatGPT使えば結構いい感じのサイト作れるんじゃね?というお話。Part3です

### Part1

https://qiita.com/Atsu1209jp/items/2c93be5930360d007c60

### Part2

https://qiita.com/Atsu1209jp/items/7a526478418eee9ec319

# 今回やること
今回はこれまで作ってた物とはまた別のものを作ります。

今回作るものはブログサイトです。
NodeやRubyといった物は置いて、HTML部分を作ってもらいます。

# 早速入力
ChatGPTに `ブログサイトを作りたいのでHTMLだけ書いてください`と入力

### 結果
“`html





<

元記事を表示

map関数で{}と()どちらを使用するかよくわからなかった件 〜アロー関数について〜

## はじめに
Reactでmap関数を使用するときに{}と()のどちらを使用するのか理解できていなかったので今回はそれについてまとめます。

先に言ってしまえばこれはmap関数の問題ではなくJavaScriptのアロー関数への理解度が低いことが問題でした。

## 問題点
Reactで以下のコードを書いていました。
ボタンを押下したら“`onClickFetchUser“`関数が走り、その中で“`axios“`を使用してデータを取得し、取得した内容を画面上に表示させるというコードです。
“`jsx


{userProfiles.map((user) => {

})}

“`
しかしボタンを押下しても画面には何も表示されません。

## 原因
mapの中で“`return“`

元記事を表示

prismaのような感覚でスプレッドシートを操作できるGASライブラリ “GASsma”

## はじめに

みなさんNode.jsのORMは何が好きですか?TypeORMとかSequelizeとかあると思います。私はprismaが一番好きです。理由は大学時代に習ったMongoDBのクエリとどことなく似ていてとっつきやすかったからです。

ところでGoogle Apps Script(GAS)でスプレッドシートを操作するスクリプトを書いた際、非常に面倒だと思ったことはありませんか?(唐突)例えば以下のデータがあるとします。

![スクリーンショット 2024-06-11 3.15.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1073363/93279352-e331-6de8-ecad-a8eb582cd350.png)

このデータから「年齢の列が25歳以上の行を抜き出し、名前の昇順に並び替え、行を連想配列(キーは列名)に変換し、その配列で出力する」スクリプトを書きたいとします。
その場合以下のコードになるはずです。

“`gasExample1.js
function myFun

元記事を表示

JavaScript: 縮めろ

主にhtmlやjsを圧縮する企画です。超高速に展開できる優れ物。圧縮率も悪くありません。
圧縮手法はLZを採用。binary tree match finderで速度、optimal parsingで圧縮力を稼ぎます。
`[\0-\x7f]`以外の文字列は特殊変換するため、性能が悪くなります。
設計図が薄汚いのは仕様です。気にしてはいけません。
“`js
/*
A2LZe(T,ws,ES6,IE,fix,type)
@T :[\0-\x7f]からなる文字列. それ以外は特殊変換される
@ws :最長一致.範囲は0~127. 大きくすると辞書が小さくなる
@ES6 :ECMAScriptのversionが5か6+かの真偽
@IE :InternetExplorer対応かどうかの真偽
@fix :[\x80-\uffff]の変換法.
0はUnicode番号に応じて桁数調整するが復号器が複雑.
1だと4桁固定で復号器が単純
@type: 復号法. 圧縮率が変わる
0:for loop
1:再帰(巨大文字列苦手)
2:for loop & substr未使用
3:for loop

元記事を表示

誰得… Google検索をGoogleブラウザ以外から使う奴

こんにちはAtsu1209です。
今回はGoogleブラウザ以外からGoogleを使います。
何いってんのって方のために簡単に説明すると
自作検索画面を作ってそこから検索できるようにするってことです。

# どうやんの?
Google検索は至って簡単な仕組みです。
例えば `自習 万歳` と調べるとすると
https://www.google.com/search?q=自習+万歳
と言うURLになります
このように`search?q=`の後にキーワードを入れるだけです。

# 早速作る
HTMLを書きます

“`html:index.html





Yeeyel Search

yeeyel

元記事を表示

【GoogleAppScript】GCPなしでAPI構築&デプロイ

# GASを使おうとしている人へ
クライアント用にwebアプリのデモシステムを、GoogleAppScript + Googleスプレッドシートを使って実装していました。先に言っておくと、ちゃんとしたwebアプリを作るならFastAPIやNodejsのexpress、honoなど得意な言語でvscodeをしばいて作った方がいいです。

理由は主にこうです。
* REST APIの構築がめんどい
* エラーハンドリング未対応
* ログが出力されない
* `post`時のjson通信がまじでやばい

# Google App Scriptの立ち上げ
今回はSpread SheetをデータベースとしてAPIを組んでみます。
テキトーに無題のスプレッドシートをつくり、拡張機能からリンクできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3092163/4d9ed15d-df86-bebc-1e44-20a52ed04324.png)

「概要」をみたときに、コンテナにリンクしたスプシが表

元記事を表示

法律は「プログラム」に置き換えられるか?①《法令.app》

誰でも楽しく法律が読める[《法令.app》](https://jplaws.app)というWebアプリを作っています。

https://jplaws.app

Qiitaの更新をせずに、デバッグや「自動データ更新」のスクリプトを書いていました。

テキストから「法令名」を抜き出す処理で、たとえば「介護保険法」なのに「保険法」にマッチしてしまうバグがありました。「最長一致」に修正したのですが、全体の処理時間が倍増してしまいました。これまでは「途中でやめてた」のを最後まで調べるようになったからです。

例えば、[参照法令が250以上あった『租税特別措置法』](https://jplaws.app/d/332AC0000000026-m.html)では、いつまで経っても処理が終わらず、全体的な処理方法を見直しました。結果、時間が1/6に短縮されました(が、アルゴリズムが悪いのか、ここに書けないくらいまだ長い)。技術ブログらしく、処理についてもいずれ書きます。

「自動データ更新」についても、大体できたのですが、思いのほか「一回の更新量」が大きく、まだ本番に組み込めてません。例えば、6/10

元記事を表示

React+Reduxの仕組みを説明

# はじめに

実務でReduxを使用するプロジェクトに入るので、Reduxの学習をしました。
理解を深めるためにReact+ReduxでのバックエンドとのAPI通信を用いてReduxの仕組みを説明します。

# 解説の流れ
1. Reduxの利点の説明
2. ログイン機能を用いてreduxの処理の流れの説明
3. ReduxToolkitを使用した際のコードの変化の説明
4. ログイン状態を維持させる(おまけ)

# 1.Reduxの利点の説明
Reduxは状態管理のライブラリです。
アプリケーションの状態を一元管理することで、予測可能な方法で状態の更新を行うことができます。
私が考える主な利点は二つあります。

### 状態が一元管理されるのでpropsの受け渡しをせずに済みます

![スクリーンショット 2024-06-01 18.53.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/571061/fbd5ef20-6a48-8195-619d-2a876fb508fc.png)

コンポー

元記事を表示

モジュロ演算の魔法: Reactを使った画像切り替えの実装での応用方法

# モジュロ演算とは

簡単にいうと、**割り算の余り(モジュロ)を求める計算**です。例えば、

7 % 3 = 1 // 2余り**1**

2 % 4 = 1 // 0余り**2**

この余りの部分を求める計算になります。

## インデックスを計算する

ウェブアプリケーションで画像切り替えなどのコンポーネントを実装する場合、前後のアイテムへのナビゲーションはインデックスの計算にモジュロ演算が使われます。以下はReactを使用したサンプルコードです。

### 今回作ったもの

![Slide-App.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696287/d9f83071-a14d-f2fc-1de9-9dce6cc2cd40.gif)

### 使用技術

– React 18.2.0
– TypeScript
– Tailwind CSS
– Heroicons
– Vite

“`TypeScript:App.tsx
import { useState } from ‘react

元記事を表示

Node.js で閲覧パスワードをつける方法

どうもこんにちはAtsu1209です。
今日は`Node.js で閲覧パスワードをつける方法`を書いていきます

## これを書く理由
理由? なんとなくです

# 使うもの
今回は
・express
・nodemon
・body-parser
・ejs
を使います。

# 作る
ではまず閲覧制限をかけたいページのコードを書きます

“`html:index.ejs



サプライズ

欲しい物を選んでね






“`
:::note alert
用途もコードも適当です。
:::
# index.js
次にindex.js

元記事を表示

【Rails】data-disable-withって何者

## 結論
HTMLのフォーム送信ボタンに使用される、
**二重サブミットを防止**する便利なオプションです。

本記事では、
– data-disable-withの挙動
– data-disable-withが使えないケース
– data-disable-withが使えない時の代替案

をざっくりと説明していきたいと思います。

## data-disable-withの挙動
はじめに、data-disable-withとは
– Railsの`rails-ujs`[^1]というJavaScriptライブラリによって提供される
– フォーム送信ボタンにオプションとして指定することが出来る
– 指定されたボタンは、一度クリックされるとボタンが無効となる

といった特徴から、
railsでフォーム送信を行う際の二重サブミット[^2]対策として使われています。

以下はform_withにdata-disable-with属性を使用する際のサンプルコードです。

[^1]: **UJS**とは「Unobtrusive(控えめな)JavaScript」の略で、
rails-ujsとはrai

元記事を表示

React 19 RC を触ってみた

# はじめに
この記事では、2024年4月から利用できるようになった React 19 RC をインストールし、新機能のひとつである `useTransition` を利用した非同期処理を実装して、その動作を確認してみます。

https://react.dev/blog/2024/04/25/react-19

# 開発環境
開発環境は以下の通りです。

– Windows 11
– VSCode
– JavaScript
– React 19.0.0-rc-cc1ec60d0d-20240607
– Vite 5.2.0
– Node.js 20.14.0
– npm 10.8.1

# ライブラリのアップデート
React 及びそれに関連するライブラリをアップデートします。
以下のコマンドで 19 RC の React と ReactDOM をインストールします。

“`powershell
npm install react@rc react-dom@rc
“`

インストールが成功すると、“`package.json“` の値が以下のように更新されます。

“`

元記事を表示

OTHERカテゴリの最新記事