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

Array.fromAsync()とPromise.all()の違い【JavaScript】

ようわからんかったのでメモ
# TL;DR

– Array.fromAsync()は順次実行
– Promise.all()は同時実行

“`javascript
const sleep = delay => new Promise(resolve => setTimeout(resolve, delay))

console.time()
await Array.fromAsync([200, 100, 300], sleep)
console.timeEnd()
// elapsed: 600ms

console.time()
await Promise.all([200, 100, 300].map(sleep))
console.timeEnd()
// elapsed: 300ms
“`

https://qiita.com/mellbrother/items/715ff5dce5845381eeee#comment-202a45c5d467a5dd67dc

cc @juner

## 戻り値

どちらも解決した値が入ってくる。HTTPリクエストを投げたいときに

View側の繰り返し処理に対応してJavaScriptで動的にidを取得する方法

## はじめに
インスタ風のアプリを作成している中で、Ralis側で繰り返し処理をしている箇所にJavaScriptでcssクラスをつけたり外したりする処理　などの実装に苦戦したので、実装方法を整理してアウトプットします。

## やりたいこと

記事の一覧画面でAjaxを使って、いいねができるようにしたい

### 問題
show.htmlのようなpost_idが一意に決まっているようなページをJavaScriptで操作するのではなく、
index.htmlのようなpostがたくさん表示されているページから各ポストのidを個別に指定して操作していく実装がわからなかったです。

#### viewはこんな感じ
“`
– @posts.each do |post|
.card
= image_tag post.user.profile.avatar
= show_posttime(post)
= post.user.username

– post.images.each do |image|
= image_tag image

html で文字列をローカルに保存する【名前を付けて保存】

今回は html で
文字列をテキストファイルで
ローカルに保存する場合の
ソースを公開してみようと思います。

名前を付けて保存機能があるブラウザでは
名前を付けて保存で保存します。
Chrome や Edge が該当します。

名前を付けて保存機能が無いブラウザでは
直接ダウンロードします。

***

今回のソースコード

“`javascript:ローカルに保存するコード
let fileName = document.getElementById(‘fileNameTextBox’).value;
const pattern = /[\\\/:\*\?\”<>\|]/;

if(pattern.test(fileName)){
window.alert(‘ファイル名に使用できない文字が含まれています。’);
}
else {
string save = “”; //この save 変数に保存する文字列を入れて下さい。
if(fileName == ”){
var dt = new Date();
var y = ” + dt.getFullYear();

JavaScriptで色んな入力フォームを作ってみた【初級編④】

# はじめに
今回は、JavaScriptを活用して色んな入力フォームを制作してみました。実務で使えるよう実装していきます。

# 年齢入力フォーム

See the Pen
年齢入力フォーム by Uka Suzuki (JavaScriptの条件分岐を学ぶ【初級編③】

# はじめに
今回は、JavaScriptの条件分岐について学んでいきます。条件分岐は、Webデザインのインタラクティブな要素を作る際に重要な役割を担います。例えば、特定の画面サイズで異なるレイアウトを表示したり、ユーザーのアクションに応じた処理を実行したりします。

WebデザイナーがJavaScriptの条件分岐を使うことで、以下のようなインタラクティブな機能やデザインの工夫が可能になります。

# 条件分岐の基本
## if文
“`js
if (条件) {
// 条件がtrueのときに実行される処理
}

// 具体例
let age = 20;
if (age >= 18) {
console.log(“成人です”);
}
“`
– [JavaScriptの基本文法【入門編②】](https://qiita.com/uukasuzuki_/items/a8a1b46a285a0da07b00)でも書いた通り、条件がtrueのときにのみ実行されるブロックを定義します。

## if～else文
“`js
if (条件) {
// 条件がtrueのときに実行

ビジュアルプログラミングで高位合成

# 概要
ビジュアルプログラミングで組み合わせ回路を組み立てて、シュミレーションして、verilogを生成します。
高位合成です。
構想編

# 目標
ビジュアルプログラミングで、組み合わせ回路を記述します。


Toggle Buttonをクリックして、シュミレーションできます。

verilogを生成します。

“`

module x(input in0, input in1, output out0);
assign out0 = (in0 ^ in1);
endmodule

“`

# 仕組み
– javascriptを使います。
– ビジュアルプログラミングは、simcirjsで行います。
– 設置には、Plunkerを使います。
– 必ず、Inデバイス、Outデバイスが必要です。
– DC、Toggle Button、LED

opencv.js入門。画像データの入力、出力、変換から

# はじめに

opencvは画像処理に使うライブラリーであり、本来主にC++とPythonで使われるためですが、実は「opencv.js」というJavaScriptで使えるopencvも、あまり知られていないようですが、存在しています。

opencvはPythonで書いた方が一番使いやすくて使い勝手がいいのですが、ウェブアプリを作る場合ブラウザで走らせる場合も多くて、その時JavaScriptで書く必要があります。opencv.jsを使うことでサーバーに画像データを送る必要せずに、ブラウザ上だけで画像処理することができて便利です。

ただしPythonのopencvと比べて書き方は色々違って複雑なところがあって使いやすいというわけではないようです。今までずっとPythonでopencvを使っていても、opencv.jsを使おうとしたら、色々勉強し直さなければならないことが意外と沢山あります。

問題は、今でもopencv.js関連の情報はまだ少なくて、検索してもやはPythonのopencvの方ばかり出てきます。

その中で一冊書籍があります。丁寧に説明してあるので、これを読んでと

ボタンを押せない事が一目で分かる仕様〜counterプログラムを作って感じた事〜

## はじめに
こんにちは、未経験からエンジニア転職を目指しているものです。
オンラインスクールで本格的に学習して4ヶ月目に入りました。勉強し始めの頃の自分が疑問に思っていたことを整理してみようと思い記事を書いております。前回投稿した記事と関連した内容になります。JavaScriptを使用して簡単なcounterプログラムを作った時に、ボタンを押せない事をどのように表現したら良いか疑問に思った為、トライしてみました。

## JavaScriptでcounterプログラムを作ってみた
最初に作ったのが下記のような見た目のcounterプログラムになります。

コードの概要は以前の記事に記載しております。

https://qiita.com/pila-suzuki/items/1fa7ac299d1

ExcelのCSV問題の対策補助ツール「jsCsvViewer」を作ってみた

# はじめに
ここ最近、はてなブックマーク-人気エントリーにてCSVファイルに関する記事がエントリーされていました。

* [ExcelでCSVファイルを「0落ち」や「文字化け」なしで開く方法](https://qiita.com/loannp2609/items/3d24e797abbc922f38e6)
* [人生3回目のCSVエディタを作っている話](https://zenn.dev/kohii/articles/079c73ab14856f)

ExcelのCSVファイルの「0落ち」等の自動変換は昔から問題があり、皆が関心を持っていることが分かります。

“`text:検証.csv
前0,12桁以上,日付1,番地,括弧数値,日付2,日付3,正常
00001,123456789012,2024-9-17,1-2-3,(1),”2024-9-17″,2024/9,1
00002,1234567890123,2024-8-31,2-3-4,(2000),”2024-8-31″,2024/8,2
“`

Excel 2019 for Mac では下図のように変換されて表示される。

WebGLとThree.jsを用いたフラグメントシェーダーによる、高速な並列計算リアルタイムカラフルアニメーション。



### WebGLとThree.jsを用いたフラグメントシェーダーによるリアルタイムカラフルアニメーションの生成

要約
本研究では、WebGLとThree.jsを用いてフラグメントシェーダーを実装し、画面全体にわたるリアルタイムのカラフルなアニメーションを生成する手法を提案する。時間変化と座標に基づく色の生成アルゴリズムを組み合わせ、動的かつ視覚的にど派手なエフェクトを実現した。

1. はじめに
リアルタ

TensorFlow.js 「Universal Sentence Encoder」エンベディングを用いたテキスト生成のニューラルネットワークモデル。

### ショートストーリー「小さなGPUで広がる世界」
都内の小さなワンルームで、主人公の高橋は朝からキーボードを叩いていた。彼はフリーランスのプログラマーで、日々の仕事は多岐にわたる。そんな彼が最近、頭を悩ませていたのが「小さなGPUで、どれだけ高性能なテキスト生成モデルを作れるか」という挑戦だった。

高橋の机の上には、内蔵GPUを持つ小型のコンピュータが置かれていた。外から見ればただの小さなデバイス。しかし、高橋にとってこの小さなコンピュータは、広大なテキスト生成の世界を探求するための旅の道具だった。

「よし、まずはエンベディングから始めよう。」

彼は、すでに事前学習済みの「Universal Sentence Encoder」を使い、テキストをベクトルに変換するコードを書き始めた。エンベディングはテキスト生成モデルにおいて重要なステップだ。テキストの持つ意味や文脈をベクトルとして表現することで、モデルが人間のように言葉を理解し、次に続く単語を予測できるようになる。だが、問題はここからだった。この小さなGPUで、果たして高精度なモデルを作ることができるのか。

高橋は考え

async/await で forEach を使うときは気をつけて

## はじめに
ある業務中に少しだけ悩みました。
配列に入っている値を最初から順番に処理するような関数を書いていたら、思っていたような結果が出ませんでした。
悩んでいると、先輩から金言をいただきメモとして残しておこうと思い、記載しています。

## 問題のあったコード
“`
const users = ref([]);
const doCount = ref(0);

const forEachDemo = async () => {
await users.value.forEach(async (user: string) => {
await delete(user);
if (do.error) {
console.log(error);
} else {
doCount.value++;
}
});
};
“`
このコードだと、deleteの処理はできているが、上記でdeleteしたはずのuserがまだ残っており、最新のデータ

idを使う場合にforループは必要ない理由~counterプログラムを作って感じた事〜

## はじめに
こんにちは、未経験からエンジニア転職を目指しているものです。
オンラインスクールで本格的に学習して4ヶ月目に入りました。勉強し始めの頃の自分が疑問に思っていたことを整理してみようと思い記事を書いております。前回投稿した記事と関連した内容になります。JavaScriptを使用して簡単なcounterプログラムを作った時に感じたidとforループの関係性についてまとめてみました。

## JavaScriptで作ったcounterプログラムの概要
counterプログラムの内容は前回の記事と重複するため、リンクを貼らせて頂きます。

https://qiita.com/pila-suzuki/items/1fa7ac299d1476dbeaa3

## idとforループの関係性について
idとclassの使い方に迷っていた為、idとclassの使い方の違いと、それぞれに適した処理方法について詳しく考えていました。

**1. `id`は一意である**
HTMLの`id`属性は、1つのページ内で一意（ユニーク）でなければなりません。つまり、同じidを持つ要素が複数存在するこ

classとidの名前の設定の仕方~counterプログラムを作って感じた事〜

## はじめに
こんにちは、未経験からエンジニア転職を目指しているものです。
オンラインスクールで本格的に学習して4ヶ月目に入りました。勉強し始めの頃の自分が疑問に思っていたことを整理してみようと思い記事を書いております。今回はJavaScriptを使用して簡単なcounterプログラムを作った時に感じた事をまとめてみました。

## JavaScriptでcounterプログラムを作ってみた
実際に作ったのが下記のような見た目のcounterプログラムになります。


コードは以下になります。

HTMLコード

“`html

【備忘録】slicksliderと

タグの相互作用

# やりたい事

sliderの中に、アコーディオン（detailsタグ使用）を入れ、開いたままスライドした時に閉じてほしい

# 書いたソース

“`html:HTML

• 
  
  

Typescriptのコンパイルエラー回避方法(備忘録)

# はじめに
この記事は、Typescriptのコンパイル時にエラーが出てしまった人に向けて、その解決策の一つとして紹介します。触りたてであやふやな人でもわかるように書いていきます。

# Typescriptとは
TypeScriptは、JavaScriptの代替となるべくマイクロソフトによって開発されたオープンソースのプログラミング言語です。TypeScriptの最大の特徴は、静的型付けが導入されていることです。JavaScriptは動的型付けの言語で、変数にどのようなデータ型が入るかを明示的に指定しませんが、TypeScriptでは型を指定することができます。これによって、コードを書いている時点でエラーを防ぐことができ、安全性、可読性の向上の面で使われています。

:::note info
Typescriptの環境構築については、こちらの@ochiochi様の
[TypeScriptチュートリアル -環境構築編-](https://qiita.com/ochiochi/items/efdaa0ae7d8c972c8103)に詳しく書かれています。
:::

# コンパイルエラー

5秒ちょうどでストップ！HTMLとJavaScriptで作る簡単なゲーム

# 5秒ちょうどでストップ！HTMLとJavaScriptで作る簡単なゲーム

今回は、HTMLとJavaScriptを使って、 **「5秒ちょうどでストップするゲーム」** を作成する方法を紹介します。ゲームのルールはとても簡単です。スタートボタンを押して、5秒ちょうどにストップボタンを押すというシンプルなものです。さらに、プレイ中に経過時間をリアルタイムで表示するモードや、非表示にして目測で5秒を測るモードも用意しました！

## ゲームの概要

1. **スタートボタン**を押すとタイマーが開始。
2. **ストップボタン**を押したタイミングで経過時間を測定。
3. 結果として、5秒との差分が表示されます。
4. 経過時間の表示をリアルタイムでオン/オフできる切り替え機能も実装。


それで

【初心者向け】プログラミング言語を日本語として理解する

## 概要
プログラミングを始めたばかりで中々覚えることができない。
色んな言語を触りたいけど一から勉強するのは疲れる。
とりあえず実装できたけど正直どう動いているのか理解していない。
過去この様なことを経験して悩んでいましたが、「日本語として理解」したら思いのほか簡単に解決できたのでこの記事ではTypeScriptの記述でどういったことなのかを説明します。※TypeScript限定ではないです。
今後のプログラミングの勉強や新しい言語取得への手助けになればと思います。

## この記事で取り上げるもの
– 変数
– 条件分岐
– ループ

## プログラミング言語の日本語化
### 変数
TypeScriptやjavascriptで言えば **”let name”**、**”const name”**、**”var name”**。
phpは **”$name”**、Pythonは **”name”** といった感じで変数を定義します。
変数名からどいったものかはある程度理解できますが、経験からすると変数の意味をちゃんと理解していないとバグを生み出すことが多々あります。
今回のパター

イベント処理について簡潔にまとめます【初級編②】

# はじめに
今回は、JavaScriptのイベント処理について詳細をまとめていきます。JavaScriptのイベント処理は、ユーザーの操作やブラウザの動作に対して、特定のアクション（処理）を実行する仕組みを指します。

# イベント処理の基本
## イベントとは
特定の状況や操作が発生したことを示します。主なイベントには以下のようなものがあります。

“`js
click: // ユーザーが要素をクリックしたとき
mouseover: // ユーザーが要素にマウスカーソルを乗せたとき
keydown: // キーボードのキーが押されたとき
submit: // フォームが送信されたとき
load: // ページや画像が完全に読み込まれたとき
“`

## イベントリスナーとは
イベントが発生したときに実行される関数を「イベントリスナー」と呼びます。このリスナーは、特定の要素に「待ち構える」形で設定します。

# イベント処理の構文
“`js
element.addEventListener(‘イベント名’, 実行する関数); // イベントリスナーの設定
“`

## 例１）

CLIのプログレスバーを作ってみた

## はじめに

皆さん、こんにちは。株式会社BTMの風間と申します。

今回はCLIで動くプログレスバーを作成してみました。
実際に作ったのはこちら。


コンソール（ターミナル）で、yum、apt、brewなどを利用したパッケージのインストールをされたことがある方は、こういった進行状況の表示をよく見ていると思います。

この進行状況の表示方法に以前から興味があったので、実際に作ってみて、使った方法をまとめてみました。

:::note info
本記事で紹介する実装・実行は以下の環境にて行いました。
・Windows11
・WSL2（Ubuntu 22.04.3 LTS）
・Node.js 20.11.1
・Git Bash（推奨ウインドウサイズ Columns:80 x Rows:20）
:::

## 実