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

（JSPsych不要）生PHPと生JavaScriptで書く心理実験刺激入門

# JSPsych?そんなもの知りません（でした）

生PHPと生JavaScriptを習得した方にとっては、ライブラリに頼らない方が早く心理実験刺激を作成できるのではないでしょうか？
また、JSPsychを使ってみたものの、痒いところに手が届かないと感じてた方もいらっしゃるかと思います。

そんな人のために、生PHPと生JavaScriptで作成した心理実験刺激の例を作成しました。
自由にご活用ください。

取り上げているのは、映像刺激に対する評価実験です。

https://github.com/Hoboki/russell-evaluation

PHP7系が入っていれば動作しますが、今回は簡単にMacOSでのDockerを用いた環境構築について説明します。

1. Docker Desktopのインストール
https://docs.docker.com/get-docker/

1. コードの引用、コンテナ立ち上げ
Terminalで以下を実行
“`bash
cd ~/Documents
git clone https://githu

各言語ごとの文字列

| |C#|JavaScript|Perl|Python|
|—|—|—|—|—|
|リテラル|[“”文字列”“](#c)|[“”文字列”“ or “’文字列’“ or “ `x=${x + 1}` “](#javascript)|[“”文字列”“ or “’文字列’“](#perl)|[“”文字列”“ or “’文字列’ “](#python)|
|結合|[「+」演算子](#c-javascript-python)|[「+」演算子](#c-javascript-python)|[「.」演算子](#perl-1)|[「+」演算子](#c-javascript-python)|
|大規模な結合|[StringBuilder を使用](#c-1)|[+= で結合](#javascript-1)|[文字列に .= で結合](#perl-2)|[“””.join(iterator)“ を使用](#python-1)|
|比較|[==, !=, >, >=, <, <=](#c-2)|[==, !=, >, >=, <, <=](#java

javascriptフレームワークの環境構築

##### この記事では主にHomebrewを使用した環境構築方法になります。

#### node.jsの環境構築
“`
# node.jsのバージョン管理のためのnodebrewをインストール
$ brew install nodebrew

# nodebrewのバージョン確認
$ nodebrew -v

# node.jsのインストール
$ nodebrew install-binary stable

## 下記のようなエラーが出た時は、、、、
Fetching: https://nodejs.org/dist/v20.3.0/node-v20.3.0-darwin-arm64.tar.gz
Warning: Failed to create the file
Warning: /Users/username/.nodebrew/src/v20.3.0/node-v20.3.0-darwin-arm64.tar.gz
Warning: : No such file or directory

# エラーの場合は下記のコードを実行後に最インストール
$ mkdir -p

ChromeでのSubmit二度押し防止対策　苦肉の策

# Chrome固有の問題
こちらの記事に詳しく書かれているのですが，ChromeだとWindows版もAndroid版もButtonタグにdisabledをつけてしまうと，submit後であってもPOST送信されなくなってしまいます。

https://qiita.com/limithand/items/bcec6d519c2a2a45e9c2

上の記事に「解決済み」とあった方法も，うまく動かなかったため，試行錯誤の上，このようにして動かしてみました。

“`javascript:hoge.js
var btnLock = 0;

function on_submitonce(){
let targetButtons = Array.from(document.querySelectorAll(‘.btn_once’));
if(btnLock !== 0){
window.alert(“2度押しは無効です”);

let i = 0;

targetButtons.forEach(function () {

SupabaseでCountを取る

“`javascript
supabase().
select(‘count(*)’)
.from(‘hoge’)
.then((res) => {
console.log(res)
})
“`
こんな感じでいけるだろうと書いてみるとSELECT句がおかしいよーというエラーを吐かれた。少し調べてみると、selectの引数にオプションを渡せることがわかった。

https://supabase.com/docs/reference/javascript/select

`count`を指定するとどの様に算出するかを決められる。
– exact: 計算は遅いけど正確な値を算出
– planned: おおよその値だがpostgresの統計情報を使って速く算出
– estimated: 少数であればe

「巻き上げ」の誤解 ~TypeScript編~【JS TS】

# はじめに

先日、JavaScriptにおける「巻き上げ」について調べました。

https://qiita.com/kohki_takatama/items/0aeb419bda555f8c240e

https://qiita.com/kohki_takatama/items/eef7c8202628f2d90745

この「巻き上げ」について、TypeScriptでは挙動が違うようです。

# 「変数」の巻き上げ

まず、変数の巻き上げです。
## 【JavaScriptの場合】
– `var`で宣言し、宣言前に呼び出すと`undefined`を返す
– `const`で宣言し、宣言前に呼び出すと`ReferenceError`を発生させる
“`js
console.log(str_var) //undefined
console.log(str_const) //ReferenceError

var str_var = ‘var’
const str_const = ‘const’
“`
## 【TypeScriptの場合】
– `var`で宣言し、宣言前に呼び出すと

deck.glを使ってGoogle Mapに大量のポリゴンを描画してみる

Google Mapはとても優れたプロダクトです。地図と言ったらGoogle Map、と思われる方も多いはずです。
地図を使ったアプリケーション開発においても、ユーザーに広く認知されたGoogle Mapを使いたいという要望を聞く機会が良くあります。

Google Mapを使ったアプリケーション開発を行う際に、Maps JavaScript APIを使って開発を行うことが多いと思います。Maps JavaScript APIはGoogle Mapを使ったWebアプリケーション開発を行う際に使用するJavaScriptライブラリです。
Maps JavaScript APIを使ったアプリケーション開発を進める中で、loadGeoJson()やaddGeoJson()を使って大量のデータを描画した際にパフォーマンスの問題が出てくることがあります。

この記事では、deck.glを使ってGoogle Mapに大量のデータを描画してパフォーマンスがどうなるか見てみます。

## deck.gl
[deck.gl](https://deck.gl/)はGPUを使って大規模なデータセットも高速に

Javascriptには兄弟がいた

# その名はActionScript
JavaScriptにはかつて、兄弟と呼べる存在がいた。
その名をActionScriptという。

彼らはどちらもECMAScriptの「方言」で、共通する部分があった。
とは言っても、片や動的型付けでプロトタイプベース、片や静的型付けでクラスベースであり、似通っているとは言い難かった。

# それでも近くに居た
JavaScriptをHTMLのscriptタグに書けば動く、というのは知っている人も多いだろう。
ActionScriptが動作していたのは、Flash (Adobe Flash) の中だ。
かつての時代を知っている者ならば、Flashゲームを目にしただろう。
そう、JavaScriptと共に、Webを盛り上げようと頑張っていたのだ。

# Flashのサービス終了
だが、Flashには終焉が訪れる。
HTML5が台頭することにより、Flashに頼らなくともインタラクティブなWebページを作れるようになった。
ブラウザの拡張機能であるAdobe Flash Playerは、セキュリティ面の問題があると取り沙汰された。
そして、Flas

instanceof

# instanceof とは
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/instanceof

>instanceof 演算子は、あるコンストラクターの prototype プロパティが、あるオブジェクトのプロトタイプチェーンの中のどこかに現れるかどうかを検査します。返値は論理値です。

インスタンスとリテラルで違いを見てみると、、、
“`javascript
const obj = {
name: ‘John’,
age: 30,
city: ‘New York’
}
console.log(obj instanceof Object) // true

const arr = [1, 2, 3, 4, 5]
console.log(arr instanceof Array) // true

const str = ‘Hello’
console.log(str instanceof String) // false

const num = 10
c

JavaScript ではほとんどのものはオブジェクト

# 大きく分けて2つのデータ型がある
・一度作成したら値を変更できないプリミティブ型のデータ
・作成した後も変更できるオブジェクト型のデータ
## プリミティブ型
https://developer.mozilla.org/ja/docs/Glossary/Primitive

・オブジェクトではなく、メソッドを持たない
・既存の値を変更できないイミュータブルな値

https://developer.mozilla.org/ja/docs/Glossary/Immutable

・7種類のデータ型
1　文字列（string）
2　数値（number）
3　長整数（bigint）
4　理論値（boolean）
5　undefined（undefined）
6　symbol（symbol）
7　null（object）

## オブジェクト型
https://developer.mozilla.org/ja/docs/Web/JavaScript/Data_structures#%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88

JavaScript でキューを実装して性能を比較してみた

JavaScript でキューを実装して性能を比較してみた。

今回は、以下の条件で実装を行った。

* クラスとして実装する
* 1個のデータのエンキューとデキューを行うメソッドをそれぞれ実装する
* それ以外のメソッド (要素数、先頭を削除せずに取得など) は実装しない
* エラー処理 (空のときにデキューを試みるなど) は行わない

なお、実装で出てくる `#` つきのメンバ変数は[プライベートプロパティ](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Classes/Private_properties)である。

# 方針・実装

## 配列のpush・shift

配列の末尾に要素を追加するメソッド [push](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/push) をエンキューとして用い、配列の先頭から要素を取り除いて返すメソッド [shift](https://dev

`を記述する位置による違いが分からなかった

・``でHTML内にJSファイルを適用するという理解はあったものの、記述位置による違いがあるのか全く分からなかった。また、それを理解するような事例に出会わなかった。
（自分はパターンAが絶対的に正しいと思っていた。）

```html:パターンA：head内に含める












```

# 2.CSSの準備
cssで背景色を設定する。
```css:canvas_tes

元記事を表示