for … of 時に直接代入以外のアプローチによる 配列操作について

JavaScript には 参照変数 / 参照渡し はありませんが クロージャがありますので 変数への代入を反映することができます。

例えば 配列を for…of 中に 代入による対象の上書きをしたいとします。

その場合はどうしたらいいのでしょうか？

# 問1 for … of 上で 各要素に 1 を足した値を設定してください

“`js
const array = [1,2,3,4,5];
console.log(‘before: %o’, […array]);
for(const a of array) {
// TODO
}
console.log(‘after: %o’, […array]);
“`

## 答1-1

array.values()が使われていたのを entries()にして key と value を取り出して 操作 するなら次の様になります。

“`js
const array = [1,2,3,4,5];
console.log(‘before: %o’, […array]);
foreach(const [key,

未経験PGを目指す人へのJavaScript型まとめ

# データ型の種類
## JavaScriptで使用可能なデータ型
| データ型 | 説明 | 値 |
|:—|:—|:—|
| String | 文字列 | シングルクォート(‘)、ダブルクォート（”)、バッククォート(`)で囲んだ文字列 |
| Number | 数値 | -(2⁵³ – 1) ～ 2⁵³ – 1 の数値（整数または浮動小数点数）
※ 2⁵³ – 1 = 9007199254740991 |
| BigInt | 巨大な整数 | 任意の大きさの整数値 |
| Boolean | 真偽値 | true / false |
| null | ヌル | null
※ 値が空（存在しない）ことを表す |
| undefined | 未定義 | undefined
※値が未定義であることを表します。
| Symbok | シンボル | 一意で不変な値 |
| Object | オブジェクト |キーと値を対で格納する入れ物

※バッククォートは、「Shiftキーと＠の同時押し

JavaScriptの復習⑥

# はじめに
今回は、配列とfor文について復習していきます。繰り返し処理を用いることで、HTMLとJavaScriptがどう関連しているのかを知ることができます。

# 配列とは
JavaScriptの配列（Array）は、複数の値を1つの変数にまとめて格納できるデータ構造です。各値は要素と呼ばれ、インデックス（0から始まる番号）でアクセスできます。

下記では、fruitsという配列に3つの文字列が格納されています。それぞれの要素にはインデックスを使ってアクセスできます。また、配列は以下のように動的に要素を追加・削除することができます。多様なデータ型（数値、文字列、オブジェクトなど）を混在させることも可能です。
“`js
let fruits = [“apple”, “banana”, “cherry”];

console.log(fruits[0]); // “apple”
console.log(fruits[1]); // “banana”
console.log(fruits[2]); // “cherry”

fruits.push(“orange”); //

DjangoでNone判定をして、HTMLの表示を切り替える方法（JavaScript活用）

## 問題の発生
Djangoのテンプレートで値がNoneだった場合、その情報をもとにHTMLの表示を切り替えたいことがある。例えば、データがあった場合は、試合結果を表示するようにし、データがない場合は、「データがありませんでした」と表示するようにしたい。
今回は以下のようにしたい
・match_countの値がnoneだった場合、match_count_sentenceのdisplayをnoneとする。
・match_countの値がnoneだった場合、match_result_sentence_noneのdisplayをblockとする。
“`HTML

{{ match_count }}戦でした。

試合がありませんでした

“`

## 解決策
pタグ自体にmatch_countの値を埋め込み、その値で判断する。

## 手順

1.pタグに値を埋め込む
“`HTML

製造業のコーポレートサイトからヘッダーデザインを考える

# はじめに
今回は、製造業のコーポレートサイトでよく見かけるデザインパターンを作っていきます。

# 参考サイト
– 株式会社TKS

ホーム

– 株式会社バイタル
https://vaital.co.jp/vaital/?_gl=1%2A3fitv4%2A_ga%2AMzI0Njk0ODU1LjE3MjgyNzk3OTM.%2A_ga_1YRT15EYTX%2AMTcyODI3OTc5My4xLjEuMTcyODI4MTAwNS42MC4wLjA.

– 株式会社ISSダイニチ
https://www.kk-dainichi.co.jp/?_gl=1%2A3fitv4%2A_ga%2AMzI0Njk0ODU1LjE3MjgyNzk3OTM.%2A_ga_1YRT15EYTX%2AMTcyODI3OT

全てのチェックボックスをチェック、または解除するjs

“`html

チェックボックス一括切り替えサンプル

Go言語のプログラムの中でJavaSciptを実行する方法

# はじめに

TWSNMPシリーズを開発している時、Go言語で開発したプログラムの中でユーザーが入力した何等かのスクリプトを実行して結果をGo言語側に戻した場面がありました。
その時使ったottoというパッケージ

https://github.com/robertkrimen/otto

の紹介です。

# インストール

“`terminal
$ go get github.com/robertkrimen/otto/otto
“`

# サンプルプログラム

ottoのGitHUBのトップページにあるサンプルを、まとめて実行可能にしたものです。

“`go:main.go
package main

import (
“log”

“github.com/robertkrimen/otto”
)

func main() {
// JavaScript仮想マシンの作成
vm := otto.New()
// スクリプトの実行
vm.Run(`
abc = 2 + 2;
console.log(“The value of abc is ” + ab

JavaScriptで蟻本 グラフ 二部グラフ判定

# 概要
アルゴリズムの学習記録を投稿します。
今回は蟻本・グラフの２部グラフ判定p93についてです。

# 問題
“`
p93
頂点数nの無向グラフが与えられます。隣接している頂点同士が違う色になるように、頂点に色を塗っていきます。
２色以内ですべての頂点を塗ることができるか判定してください。
多重辺やループはないものとします。

例１
入力
n=3
graph = [[1,2],[0,2],[0,1]]

出力
“No”

例２
入力
n=4
graph = [[1,3],[0,2],[1,3],[0,2]];

出力
“Yes”

“`

# コード部分
“`javascript
// ２部グラフ判定 p93
/**
* @param number{Number}頂点の数
* @param graphArray{Array} 辺の情報
* @return ans {String} Yes :二色以内で塗り分け可能 No: 二色以内で塗り分け不可能
*/
const checkBipartite = (n

【保存版】React Hooks を超かみ砕くので今日こそ理解しよう【​ほら、怖くない】

こんにちは、とまだです。

React を使っている方のほとんどが、`React Hooks`の存在を知っていると思います。

`useState`、`useEffect`、`useContext`…などなど、Hooksはたくさんありますよね。

ただ、それぞれのHooksの使いどころや、使い方を理解しているでしょうか？

（少なくとも私は、最初は`useState`ぐらいしか理解し切れていませんでした…）

:::note warn
React Hooksは強力なものの、種類が多くて使い分けが難しかったり、うっかりパフォーマンスが低下することもあるので注意が必要です。
:::

今回は過去の自分（もしくは皆さん）のために、今回は主なHooksのポイントを、日常生活での例え話を交えて解説していきます！

– 参考ドキュメント：[Built-in React Hooks](https://react.dev/reference/react/hooks)

※以下の記事とあわせて読むことで、より理解が深まるかもしれません。

https://qiita.com/tomada/ite

スムーススクロールのシンプルな記述方法

スムーススクロールとは？

スムーススクロール（Smooth Scroll）とは、ページ内リンクやナビゲーションをクリックした際に、画面が急に移動するのではなく、なめらかにスクロールして移動する効果のことです。
通常のスクロールでは、リンクをクリックすると即座に目的の位置にジャンプしますが、スムーススクロールでは自然な流れで目的の位置までスクロールして見せるため、ユーザーにとってより視覚的にわかりやすく、快適かつ少しリッチな体験を提供できます。

jQueryを使った実装方法

これまでスムーススクロールの実装を何度か重ねてみて、以下の記述方法に辿り着いたので備忘録として残します。
もっとシンプルで可読性の高い記述方法があれば教えていただけると嬉しいです！
スムーススクロールの挙動に対して、CSSの記述は不要です。

“`HTML

麻雀は何試合で実力が収束するのか？

## 検証方法

N試合の平均着順を求める。
これを10000個のパラレルワールドで行い、
各パラレルワールドごとの平均着順の誤差が0.01になるまでの試合数を求める。

統計学の知識は0なのでプログラムでゴリ押しで求めていく。

あといろいろ検証するのが面倒くさいので平均着順は2.5で固定する。

## ソースコード

“`js:main.js
const パラレルワールドの数 = 10000
const 試合数 = Number(process.argv[2])

const 期待順位分布 = [1, 1, 1, 1]
const 期待平均順位 = 平均順位(期待順位分布)

let 誤差合計 = 0
for (let i = 0; i < パラレルワールドの数; i++) { const 実際順位分布 = [0, 0, 0, 0] for (let j = 0; j < 試合数; j++) { const 順位 = ランダム順位(期待順位分布) 実際順位分布[順位 - 1] += 1 } 誤差合計 += Math

リアルタイムで映像を単語化し、画面に表示するマルチモーダルエンベディングゲーム。

#### ショートストーリー: 「東京のプログラマと映像の言葉」
東京の繁華街、ネオンがきらめく夜の街で、主人公の翔太はひとり静かなカフェに座っていた。最近、彼は「マルチモーダルエンベディング」という概念に夢中になっていた。

「映像を単語化するなんて、すごく面白そうだ」と、翔太は心の中で呟いた。彼の頭の中では、映像を分析し、そこから得られる情報を言葉に変換するアイデアが駆け巡っていた。彼は、この技術を使って、日常の何気ない瞬間を言葉にして、誰もが共感できるストーリーを作り出すことができると信じていた。

彼の目の前には、ウェブカメラが設置されており、彼の動きや周囲の映像をリアルタイムでキャッチしていた。彼は映像データを取得し、そのデータを「エンベディング」と呼ばれるプロセスを通じて数値に変換していく。映像の中の色彩や動きが、彼のプログラムによって言葉に変わっていく。

![スクリーンショット 2024-10-08 022252.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3846020/3653d

【JavaScript】残余引数 / 可変長引数

引数の個数が決まっていない引数のこと「可変長引数」と言います。
JavaScriptでは可変長引数は残余引数(`rest parameter`)と呼びます。
残余引数を書くには、引数の前に`…`(スプレッド構文)を書きます。

`…`についての記事
[JavaScript | 分割代入の使い方(配列, オブジェクト) – わくわくBank](https://www.wakuwakubank.com/posts/461-javascript-destructuring-assignment/)

– 渡された引数をスプレッド構文で展開する
“`javascript
function func(…params) {
// …
}
// paramsは配列でくるのでそのままforEachを使える
“`

– いくつ来ても大丈夫
“`javascript
function func(…params) {
console.log(params); // [1, 2, 3]
}
func(1, 2, 3);
“`

– 必ず渡される引数も含められる
“`javasc

【JavaScript】User-AgentでPCとiPadの判別方法

私のUser-Agent (MacBook Air)
“`javascript
console.log(navigator.userAgent)
‘Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36’
“`

iPadでSafariブラウザを開いた場合のUser-AgentはなぜかMacintoshの名前がある

“`console
iPad Chrome
Mozilla/5.0 (iPad; CPU OS 16_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/120.0.6099.119 Mobile/15E148 Safari/604.1

iPad Safari
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML,

機械学習用ライブラリ「ml5.js」の新しいサイトの動線を少し確認してみる【2024年10月上旬時点】

ブラウザ上で JavaScript を用いた機械学習を行う際、ライブラリの選択肢の 1つである「ml5.js」に関する記事です。

●ml5.js | Friendly Machine Learning for the Web
　https://ml5js.org/


ml5.js のサイトがリニューアルされていたのですが、その新サイトの動線に関する情報を書いてみた、という内容です。

## ml5.js の新バージョンなど
今年 ml5.js のサイトが新しくなったり、また、大きな変更を伴うライブラリのバージョンアップの情報が出ています。

以下は、[公式の X のアカウントでのサイトリニューアルのポスト](https://x.com/ml5js/status/1805409261876376042)で、新バージョンの話も書いてあります。

!

JavaScriptでTODOリストを作ってみた part.1

こんばんは！gamubaruです！

これから技術のアウトプットとして、記事を公開していこうと思います。
記事の書き方はどんどん修正していけたらと思うので、まずは書くことを目標にしていきます。
どうぞよろしくお願いします。

jsの参考サイトはよく見るが、全くアウトプットすることなく読んだだけ（覚えてない）になっているので、
手始めにタスク管理を作ってみたいと思う。

機能としては下記３つを実装していきたい！
1\. タスク追加
2\. タスク削除
3\. タスク編集(更新)

partなんぼまでなるか分からないけど、最後まで頑張ります。

ファイル構成はindex.htmlとjsフォルダにmain.js

では、スタート！！

１．HTMLに記入欄と送信ボタンを設置
—
“`

TODOリスト

Dateオブジェクトのついて勉強

お疲れ様です。

ちょっとUnityを扱ったりしてみて横道に逸れておりましたが、戻って来まして、簡単にカレンダーを作りながら勉強を進めるべく、タイトルの「Dateオブジェクト」の勉強をしてきました。
この記事を５分程度で書けるくらいの内容にし、自分のアウトプットの場とできるように意識して投稿しようと思います。

# const d = new Date()

See the Pen

モダンJavaScriptについて学んだことをまとめる

以下のUdemyの講座を受講したので、モダンJavaScriptについて学んだ事をまとめる。

https://www.udemy.com/course/modern_javascipt_react_beginner/?couponCode=KEEPLEARNING

## モダンJavaScriptの特徴

### 仮想DOM
DOMを直接操作せずに、仮想DOM上で変更点の差分を算出し、差分のみDOMに反映する。

### パッケージマネージャ
npmなどのパッケージマネージャを使用。
依存関係の自動解決、import先が明確になる、パッケージの共有が簡単になるなどのメリットがある。

### ECMAScript
JavaScriptの標準規格。
ES2015(ES6)で機能追加が多くあり、アロー関数や分割代入、スプレット構文などが利用可能になった。

### モジュールバンドラ
開発時は複数のファイルでソースを管理し、本番用にビルドする際に依存関係の解決も含め、1つのファイルにまとめるためのもの。
Webpack、Viteなどがある。
コードの管理を容易にしつつ、パフォーマンスを

オリジナルプロダクト「わんダムウォーク」の開発

# はじめに
　この度、内定直結型エンジニア実習[アプレンティス](https://apprentice.jp/lp)の課題として、オリジナルプロダクトの開発を行いました。その説明・雑感などをまとめます。
# 自己紹介
　弁護士を目指して法学部に進学、大学を休学して独学で司法試験の合格を目指すも挫折。人生に悩んでいたところ、以前からプログラミングに興味があったことを思い出し、2024年1月29日から学習開始。4月からアプレンティス5期生。出身は北海道。
# 仕様技術
– JavaScript
– PHP(8.1.29)/Laravel(10.48.15)
– MySQL(8.0.37)
– AWS(VPC/EC2/RDS/Route53/ACM/ELB)
– Google Maps API(Maps JavaScript API/Directions API)
– その他：AOS.js/Prettier/ESLint/Larastan
# わんダムウォーク
### キャッチコピー
「老犬と最期まで健康的に。」
### URL
https://wandom-walk.com
### わん

「目」と 「口」を持った人工生命体関数が、ユーチューブを見て歌を歌う。Webカメラ映像を音にするゲーム。


#### ショートストーリー: 「光と音のシンフォニー」
東京の高層ビルの一室、夜の街を見下ろすオフィスに、プログラマの翔太は座っていた。

「やっとこれで形になったか…」

彼はふと手を止め、目の前に表示されているコードを見つめた。Webカメラを通じて光のデータを音に変換するプログラム。

Webカメラで映し出された映像の各ピクセルをスキャンし、その明るさを音に変換する仕組みを作ろうと決めた。ピクセルの明るさ、つまり光の強さを数字に変え、それを音の周波数に結びつける。彼の頭の中で、数学的なロジックと音の波形が交差した。

「さて、これが動くかどうか…」

翔太はビデオストリームを起動し、自分の手をカメラの前にかざした。モニターには手の映像が映し出され、それが瞬く間にキャンバスに描かれた。彼はコ