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

（すべて1冊で身につくJavaScript）ローディング画面を作る

お疲れ様です。

今回もタイトルにあります通り、「すべて1冊で身につくJavaScript入門講座」の内容を勉強し、実践してみたものです。
JavaScriptのanimateプロパティを使ったものですが、指定できるプロパティ1つ1つの意味を理解すれば、こんなこともできるんだなーと感じた次第です:smiley:

転職目指して勉強をしているのですが、最近はアニメーションばかりな気がします…
とはいえ、他の教材を使ってみる前に、この参考書を1冊やり通してから考えようと思います！
qiita内でもたまに探しているのですが、初心者用でおすすめの勉強法がありましたら、お教えいただけますと助かります:sob:
やはりコードを書きまくることが最短でしょうか…

【MySQL＋Node.js】要素ごとに異なるｎを使って、1回目～ｎ回目の値を集計表示する方法

# 作業記録テーブルのcontents要素について、ｎ回目までの作業データを集計・整理したい（※ただしｎ≠一定）

## 作業記録テーブル(`test_log`)の概要

**特徴**
– カラムは`id`、`user`(作業者)、`contents`(作業内容)、`time`(作業時刻)、`upload_time`(記録した時刻)
– 同じ作業内容が複数回行われるが、その際の作業者・作業時刻はランダムに決まっている
– 記録した時刻

【HTML/CSS】divで作られたボタンをdisableにしたのにクリックイベントが発火する原因と対策

## この記事は何

最近、フォームの送信ボタンをグレーアウトして、再度クリックされないようにする実装を行いました。一見ボタンがグレーアウトされて無効になっているように見えたのですが、実際にはグレーアウトした後にクリックされると、イベントが発火してしまい、思わぬバグが発生しました。
この記事では、その原因と対策について共有したいと思います。

## 発生した問題

以下のようなコードを使って、送信ボタンを無効化しようとしました。

“`html

上記の内容で送信する

“`

そして、ボタンがクリックされた後に無効化するためのJavaScriptを次のように実装しました。

“`javascript
function disableSendButton() {
let sendButton = document.getElementById(‘submitButton’);
sendButton.removeAttribute(‘oncli

JSにおけるオブジェクトと配列の参照渡しの解決策

### JavaScriptでは、オブジェクトと配列は参照渡しで行われます。まず、この概念について簡単に説明します。

## 参照渡し

引用型は、総称として Object 型と呼ばれます。細分すると、Object 型、Array 型、Date 型、RegExp 型、Function 型などがあります。

**引用型の値は参照によってアクセスされます**

参照オブジェクトの保存方法は、スタックに変数名を保存し（その変数の値はヒープにあるデータのポインタ、つまりオブジェクトがヒープに保存されているアドレスです）、ヒープにデータそのものを保存します。

オブジェクトは参照渡しを使用します。あるオブジェクトを新しい変数に代入すると、そのオブジェクトがヒープに保存されているアドレスが代入され、ヒープのデータそのものではありません。つまり、2つのオブジェクトは同じ記憶空間を指しており、どちらかのオブジェクトが変更されると、実際には記憶空間の内容が変更されるため、2つのオブジェクトは連動します。

![image.png](https://qiita-image-store.s3.ap-nort

kintoneアプリに適用しているJSやCSSファイルの一覧を抜き出す

kintoneのSEをやっていると、システムを構築した後にお客様の要望で仕様書を提出することがある。
例えばカスタマイズJSのファイル名の一覧とその内容などをエクセルで提出せよ的な。
JSファイルがたくさんある場合は、APIで抜き出すと簡単です。

# 準備

`jq`をインストールしておきます。
https://jqlang.github.io/jq/

# API

利用するAPIは下記です。

JavaScript / CSSカスタマイズ設定を取得する
https://cybozu.dev/ja/id/9b499a476dafed45a6f62dd3/

# 注意点

APIトークンは使えません。
当然ですが、アプリ管理権限がないと実行できません。

# API叩いて設定情報のJSONを取得する

アプリをブラウザで開いて、開発者コンソールにてコマンドを打ち込むのが一番簡単です。

>kintone REST APIリクエストを送信するAPIを使ったリクエスト
>
>const body = {
> app: kintone.app.getId()
>};
>
>await

「セキュリティ オプションを準備しています」が出てパソコンが遅くなった原因は

# はじめに
この、「セキュリティ オプションを準備しています」のメッセージは、前からネットでも話題になっています。
自分のパソコンでも表示されることがありました。最近も表示されました。ただ、これまではいろいろ対処しているうちに自然と出なくなっていましたので、特に深追いはしませんでした。
しかし、今回ばかりは、弱りました。何を行っても取れなくなり、これはまずいと思って真剣にいろいろ手を打っていました。
この記事では、自分のパソコンでの解決策について記述します。
あくまでも自分のパソコン上での対策ですので、単なるご参考としてご理解いただきたいと思います。

# 現象の発生
はっきり、いつから、何をしてからということはわかりません。しかし、つい一昨日あたりからです。それまでは、問題なくパソコンは動作していました。何をもってそう判断(異常な状態になったこと)したのかといいますと、次の点があったからです。
(1)パソコンのHDDからシャカシャカというか、ジィジィという音が連続的にしていて、何らかのリードライトを繰り返しているので、ウィルスに感染したかとか、Windowsの更新が走ったのかと。

ブラウザ内でリアルタイムに回転するカラフルなメタリックボール。Powered by GPU ＋ JavaScriptエンジン。




### スペースキーを押すとボールの位置、サイズ、色がランダムに再生成されます。

コードをメモ帳などのテキストエデ

小さなGPUのエンジニアリング。TensorFlow.js　JavaScriptエンジン　次世代の WebGPU 。

##### コードをメモ帳などのテキストエディタに貼り付け、ファイルを「index.html」などの拡張子が.htmlのファイルとして保存します。その後、保存したファイルをブラウザで開けば、コードが実行されます。

### ショートストーリー: 「小さなGPUでの冒険」　GPU量子エンタングルメント
東京の繁華街に住む若いプログラマー、ケンジは、自分の小さなノートパソコンを使って驚くべき実験を行っていた。ケンジはコンピュータ科学に情熱を注ぎ、特にGPUを使った計算に興味を持っていた。今日は、自分の小さなGPUで「量子エンタングル状態」をシミュレートしようと決心していた。

「ビット列のすべての可能性をシミュレートしてみせる！」とケンジは意気込んでいた。彼は最近、量子ビットの概念に心を奪われ、ビットのすべての組み合わせが同時に重なり合う状態について学んでいた。この知識を基に、彼は自分のノートパソコンを使ってこのエンタングル状態を模倣するプログラムを書いた。

ケンジのノートパソコンには内蔵GPUが搭載されており、その性能を活かしてみたかった。彼はまず、ビット列を生成し、そのすべて

ES6以降の基本的なJavaScriptの書き方

## はじめに
本記事は改めてJavaScriptの記述についてまとめてみようと考え、
その中でも便利な機能や構文が追加されたES6(ES2015)以降の書き方を主にまとめていこうと思います。
バージョンによってはこの書き方では動かない環境もあるのでお気をつけください。

### 変数宣言
“`js
// var: 再宣言可能、関数スコープ
var name = “Hoge”;
var name = “HogeHoge”; // 再宣言可能
console.log(name); // HogeHoge

// let: 再宣言不可、ブロックスコープ
let name = “Hoge”;
// let name = “HogeHoge”; // エラー: Identifier ‘name’ has already been declared
name = “HogeHoge”; // 再代入は可能
console.log(name); // HogeHoge

// const: 再宣言不可、再代入不可、ブロックスコープ
const name = “Hoge”;
// const na

ライフゲームを実装してみた！

# セル・オートマトンとは
格子状のセルと単純な規則による、離散的計算モデルである。離散的な時間で個々のセルの状態が変化する。その変化は、ある時刻 t においてのセルの状態、および近傍のセルの内部状態によって、次の時刻t+1 、すなわち新たな「ジェネレーション」（世代）での各セルの状態が決定される。

# ライフゲームとは
セル・オートマトンに従った数理モデルのこと。生物集団において過密でも過疎でも個体の生存に適さないという個体群生態学的な背景に持つ。セル・オートマトンの代表例としてライフゲームが挙げられます。

# ライフゲームのルール
__誕生__
死んでいるセルに隣接する生きたセルがちょうど3つあれば、次の世代がちょうど3つあれば、次の世代が誕生する。
__灰色が生のセル__
__白色が死のセル__
__赤色は生成されたセル__

これが
![Screenshot from 2024-08-29 00-38-45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2153036/f5776b9b-

今度はTeachable Machineで「あったらいいな♪」をかなえてみる

こんにちは！こんばんは
地方で商業施設を管理するtsumeです。

前回`Glide`を使って味を占めたので、またまたスマホを仕事用便利ツールに改造しようと目論みました。
今回は備品管理のお助けツールとして機械学習（以下ML）ツールである`Teachable Machine`に目を付けました。

前回`Glide`を使って業務改善にトライしてみたお話

https://qiita.com/M8nEl0s0v8/items/2ded7f1299f00c2e7f1e

# 新たに思いついたこと

商業施設では、常にさまざまな備品を管理、使用しています。
例えばソファやテーブルなどの家具です。
広い館内でこれらを管理するのはなかなか骨が折れるもので。。

+ 広い館内でどこに・なにが・どれだけ存在するかの把握が大変
+ イベントや館内状況により、備品の配置が知らないうちによく変わる
+ 使用した後に正しい場所へ戻されない（保管場所を忘れがち）
+ 整理整頓がモットーなtsumeにとって鬼ストレス👹

といった具合です。

**備品をカメラに映したら、個数・保管場所を教えてくれる機能をスマホに

【TypeScript】プロパティ ‘hoge’ は型 ‘Fuga’ に存在しませんの解消方法

# はじめに
現在Udemyのこちらの講座を受けています。現在TypeScriptを学習しているのですが、表題のエラーが発生しました。こちらの解決策について説明します。

https://www.udemy.com/course/react_stepup/

# 問題点
こちらが、私が書いていたコードです。
user.emailとuser.addressのところにエラーが出ていました。

“`react

import { FC } from “react”;
import { UserProfile } from “../types/userProfile”;

type Props = {
user: UserProfile;
};

export const UserCard: FC = (props) => {
const { user } = props;
return (

名前

{user.name}

メール<

十億連勝 (paizaランク S 相当) を解く(JavaScript)

## 問題

https://qiita.com/official-events/9ab96aa95d62fe3cbdd7

これの

https://paiza.jp/works/mondai/real_event/continuous_winning

これです。

解いてから解説を見たのですが、難しそうでした・・・

数学的な手法もよく知らず、頑張ってどうにかした例を紹介します。
変わったコードを見るのが好きな方はぜひ。

## 説明

問題はざっくり、

– ステージがN個ある
– ステージの中には試合がA回ある
– 試合に負けると、そのステージの残りの試合は飛ばして次のステージへ進む
– 「最大の連勝数がちょうどX回」(多いのも少ないのも不可)になるパターン数を求める

という感じです。

### 基本方針

まず、「ちょうどX連勝が存在する」パターンだけを数えることにします。
「ちょうどX連勝」であれば何回あってもよい点が少しややこしいですね。

“`
# ステージ

↓ステージごとに「丁度X連勝」のパターンは1つのみ

データの受け渡し練習のためECサイト作ってみた

## 記事の概要
エンジニア未経験からの挑戦ということで企業様へアピールするためのポートフォリオを作成してみました。
作成手順と機能、工夫したところ、課題点を書き出してみようと思います。

### プロフィール
20代後半　男性
ITは全くの未経験(前職は営業)
就労移行支援にて０からプログラミングを学ぶ。
**作成期間は1ヶ月くらい**

## 目的
* JavascriptとPHPを使いつつDBとの連携も行えるよう経験を積む
* 今の自分のレベル感を企業に見ていただく
* 素のJs、PHPでどこまで書けるかチャレンジ

# スペック
**言語**
Javascript (Vanilla Js)
PHP 8.0.19

**DBMS**
MySQL Ver 8.0.29

**開発環境**
Windows 11 Pro
IIS　(Version 10.0.22621.2860)

## 完成画面
(圧縮上手くできませんでした。。。)
![ECサイト.gif](https://qiita-image-store.s3.ap-north

関数が呼び出された箇所のディレクトリを取得する方法

– next.jsといったwebページのパスとディレクトリが対応しているフレームワークで、ディレクトリ名を変えると他の箇所も記述を変える必要があるといったことに対応したい

# コード
以下を貼り付けて実行すると、この関数が実行されたファイルのディレクトリパスが表示される
“`typescript
// denoならこれ↓を記述
// import * as path from “node:path”;
// import * as fs from “node:fs”;
import * as path from “path”;
import * as fs from “fs”;
/*
* find Directory when you call this function
*/
export const findCurrentDirectory = (): string | undefined => {
const err = new Error();
const stack = err.stack?.split(“\n”) || [];

// 呼び出し元のスタッ

Node.jsとはなにか？なぜみんな使っているのか？

[Node.jsとはなにか？なぜみんな使っているのか？](https://qiita.com/non_cal/items/a8fee0b7ad96e67713eb)
という記事をAIで動画にしてみました。

JavaScript: プロトタイプチェーンにおけるプロパティ探索の順序

## アジェンダ
プロトタイプチェーンにおけるプロパティ探索の順序について簡単にまとめます。

## プロパティ探索の順序

1. **オブジェクト自身のプロパティ**:
まず、オブジェクト自身が持っているプロパティが参照されます。もしそのプロパティが存在する場合は、その値が返されます。

2. **オブジェクトのプロトタイプ (`__proto__`)**:
2オブジェクト自身に該当するプロパティがない場合、そのオブジェクトのプロトタイプオブジェクトが参照されます。このプロトタイプオブジェクトもまたオブジェクトであり、同じ手順でプロパティが探されます。

3. **プロトタイプチェーンの遡り**:
プロトタイプオブジェクトにも該当するプロパティがない場合、そのプロトタイプオブジェクトのプロトタイプ（つまり、プロトタイプのプロトタイプ）が参照されます。これが繰り返され、チェーンを辿っていきます。

4. **最上位の `Object.prototype`**:
最終的に、すべてのオブジェクトは `Object.prototype` に辿り着きます。`Object.prototype`

paizaキャンペーン問題 Bランク 長テーブルのうなぎ屋【JavaScript】

[paiza×Qiita記事投稿キャンペーン](https://qiita.com/official-events/9ab96aa95d62fe3cbdd7) の [長テーブルのうなぎ屋](https://paiza.jp/works/mondai/b_rank_skillcheck_sample/long-table) をJavaScriptで。

大まかな処理は以下の通り。

* ①全座席の空席状況 及び ②座りたい客の並び を2進数で扱う
* ①に対して②をビットANDで確認、入り込む余地があれば①に②をビットORして更新
* 立っているビット数を返して終了

ビット演算を使うことで、グループ内のメンバー全員の着席可否チェックをループを使わず1回で判定することができます。

例として座席数6とした場合、**席の状態**を`0b000000`とします。
(ビット配置が分かりやすいよう6桁で示しましたが、実際には単に0で初期化するだけです)

まず4人のグループが入店、2番目の席から座ろうとした場合、`1`を`4`ビット左シフトして`0b10000`、そこから`-1`して`0b111

衝突の美学。異なる質量を持つボールが3D空間内で衝突し、反発する様子をシミュレートするゲーム。



### 異なる質量を持つボールが3D空間内で衝突し、反発する様子をシミュレートするゲーム。

衝突の際に、異なる質量のボールが様々な方向から衝突する場合の精密な反発シミュレーションを行うために、運動量保存の法則とエネルギー保存の法則に基づく計算を行っています。

コードをメモ帳などのテキストエディタに貼り付け、ファイルを「index.html」などの拡張子が.htmlのファイルとして保存します。その後、保存したファイルをブラウザで開けば、コードが

TensorFlow.jsを使って、内蔵GPUにアクセスしてサクセス。

#### タイトル: “少年プログラマーとN100CPUの挑戦”

ある日、小学3年生の男の子、光太郎はコンピュータの前で真剣な表情をしていました。

光太郎の使っているコンピュータは、インテルの最新N100CPUを搭載したものでした。このN100CPUには、内臓GPUという機能がついています。お父さんが「これで十分だよ」と言って買ってくれたものでしたが、光太郎は最近、もっと速く計算できるコンピュータが欲しいと思うようになりました。

学校の友達たちは、最新のゲーミングPCを持っている子もいて、彼らの話を聞くたびに、光太郎は少し羨ましく思いました。でも、光太郎のお小遣いは毎月少しだけで、そんな高いコンピュータを買うお金はありませんでした。

「どうにかして、このコンピュータで高速に計算を行う方法はないかな？」

光太郎は、コンピュータの内蔵GPUを使って計算速度を上げる方法を模索していました。せっかくGPUが付いているのに、その機能を有効に活用する手段がわからず、困っていたのです。光太郎は、様々なプログラムを試みるものの、GPUの性能を引き出すことができずにいました。

そんなある日