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

watchEffect で非同期処理をしている場合のテスト

React から Vue に戻ってきたので、メモ。

前にも非同期処理のテストで苦戦していたのを思い出します。
https://qiita.com/akagire/items/c4b2bdfe51bf4971dd8c

# 前提条件

– Vue 3.3.4
– Vitest 0.34.5

# 結論

非同期処理が終わるのを待つしかない。。

# 実例

[Vueのドキュメント中にリンクが張ってある](https://play.vuejs.org/#eNp9Vdtu20YQ/ZUpUUA0qpAOjL4YktCbC7Rom8BN8sSHrMihtfZql9iLZEHgv2dml6SpxMiDIWkuZ+acmR2fs1+7rjgEzG6zlaut7Dw49KHbVFruO2M9nMFiu4Ta7LvgsYEeWmv2sKCkxSwoOPwTfb2b/EU5mopHR5GVro12HrbC4UerYA2Lnfeduy3LR2d0p0SNO6MatIU/dbI2DRZUtPSmMa4kgJQuG8qkjvLF28XVaAwRb2wxz69gvZkK/UQ5xUGogBQ/ZpyhEV4s

chatGPTに聞いたJavaScriptのクロージャの応用

https://chat.openai.com/share/4d5c94ab-33e7-4982-afdc-c6e819807d0e

vue.jsと他のフレームワークの比較

Vue.jsはモダンなJavaScriptフレームワークの中でも他の主要なフレームワークであるAngularやReactと比較すると、いくつかの顕著な利点があります。

# Vue.js vs Angular
AngularはGoogleによって開発された強力なフレームワークですが、その複雑さがしばしば障壁となります。AngularはTypeScriptを使用し、MVC（モデル-ビュー-コントローラ）アーキテクチャに基づいているため、学習曲線が急です。一方でVue.jsは、そのシンプルさと直感的なAPI設計で知られています。Vue.jsはHTML、CSS、JavaScriptの基本的な知識があればすぐに始められ、複雑な設定やビルドプロセスが必要ないため、小規模から中規模のプロジェクトに特に適しています。

Vue.jsはまた、HTMLベースのテンプレート構文を採用しており、これにより開発者はすでに親しんでいるHTMLを活用してアプリケーションを構築できます。これはAngularのTypeScriptや特別な構文と比較して、より手軽で直感的です。

# Vue.js vs React
R

コードの記述量を少しでも減らす（学習記録アプリ）

## 初めに
今回簡単な学習記録アプリを開発して、その流れの中でコードの量を減らす記述方法を学んだので共有します！

## 修正前の記述
“`js
const [inputText, setInputText] = useState(“”);
const [inputTime, setInputTime] = useState(“”);
const [records, setRecords] = useState([]);
const [error, setError] = useState(“”);

//ボタンをクリックした時の動作
const onClickAdd = () => {
const newRecord = {
title: inputText, //フォームに記入した学習内容
time: inputTime, //フォームに記入した学習時間
};

// 学習内容と学習時間がどちらも記入されていれば処理を回す
if (inputText !== “” && inputTime !== “”) {

JSで複数のCanvasをPNGにしてZipでまとめてダウンロード

ダミーの画像を量産したいなと思って、JavaScriptのみで画像を沢山作成してZipでダウンロードさせてみました。
Canvasから画像を生成してZipでまとめる部分が肝になると思いますのでその個所を一部抜粋。
jQuery使ってます。

“`js
$(function(){
$(“#download_btn”).on(“click”, () => {
// JSZipを読み込む
const zip = new JSZip();

// #chanvas_areaに入っているcanvasを取り出す
const child_nodes = $(“#canvas_area”).children(“canvas”);

// blobの生成が非同期になるのでPromiseで終了を捕捉する
let add_to_zip = (zip_obj, canvas, filename) => {
return new Promise((resolve, reject) => {
canvas.toBlob(blob =

importの中括弧とは [javascript]

# 中括弧{}がいる時といらん時

| {}がいる時 | {}がいらんとき |
| — | — |
| exportの時 | export defaultの時 |

「importの中括弧が必要な時/不要な時の違い」を理解するには、“`export“`と“`expor default“`の違いについて知る必要がある。

## exportのdefaultがある時とない時の違い

| export文 | import時の{} | import時の名前 | 使用回数 |
| — | — | — | — |
| デフォルトexport | 不要 | 好きな名前 | 一ファイルにつき一回まで |
| 名前つきexport | 必要 | 定義した時のコンポーネント名（asを使って名前変更可能） | 何回でも |

##### 使用例

| export文 | import文 | 備考 |
| — | — | — |
| export default Button(); | import Submit from ‘components/Button.js

【JavaScript】配列でよく使用する関数

## 概要
JavaScriptの配列でよく使用する関数をまとめてみました。

## push()
push(): 配列の末尾に要素を追加し、新しい配列の要素数を返します。

引数：配列の末尾に追加する要素
返値：メソッドが呼び出されたオブジェクトの新しいlengthプロパティ
~~~JavaScript:
const arr = [1,2,3,4,5];
const firstElement = arr.push(6);
console.log(arr); //⇒[1,2,3,4,5,6]
console.log(firstElement); //⇒6
~~~

## pop()
pop(): 配列の末尾の要素を削除し、その要素を返します。

引数：なし
返値：配列の末尾の要素。配列が空の場合はundefinedを返す。
~~~JavaScript:
const arr = [1,2,3,4,5];
const firstElement = arr.pop();
console.log(arr); //⇒[1,2,3,4]
console.log(firstElement); //⇒

p5.js でイベント検知して行う処理に関して検知後に一定時間は処理をブロックする時間を設ける：setTimeout() or millis() を使う

この記事の内容は、p5.js　で「常時イベントの発生を見張り、イベントを検知した時に特定の処理を実行する」ということを行う場合の話です。
もう少し補足すると、「そのイベント検知は随時行うものの、イベントが検知された場合には、その検知後の一定時間はイベント検知に連動した処理をブロックする」ということを実現する方法です。

これを実装するのに試した 2つの方法を、メモ的に記事にします。

## 2種類の実現方法
今回の記事でメモする実現方法は 2つあります。
具体的には、setTimeout() を使う方法と、millis() を使う方法です。

それぞれの事例について、シンプルな内容で例を示します。

### setTimeout() を使う
まずは、setTimeout() を使うやり方です。

ここでやることは、イベント検知に連動して行われる処理の有効化／無効化を制御するフラグを用意し、そのフラグの切り替えに setTimeout() を使うというやり方です。setTimeout() を使う部分は、フラグを使ってイベント検知に連動した処理が行われない状態を作った後に、一定時間が経過し

Symbolノードリスト取得Script

Symbolのノードリストが欲しいときにどうぞ。
ノードリストは変動するので最新のリストは

https://symbolnodes.org/nodes/

にあります。

下記のコードをサイトにアクセスしてF12を押して
ブラウザーコンソールにコピペして叩くとノードのドメインリストが取得できます。
httpsかつapiノードを取得します。

“`
gets=document.getElementsByTagName(“table”)[1].getElementsByTagName(“tr”)

NodeList=[];
search=”.”;

for ( ass = 0; ass < gets.length; ass++) { const element = gets[ass] if(element.childNodes[8].innerHTML.indexOf("https")!=-1){ if(element.childNodes[5].innerHTML.indexOf("api")!=-1){ //ノードのドメインに検索したい文字列があれば"."を変更する。 //

【javascript】【jquery】for不要論 Array.from({ length: 5 },を使う

# コード
“`javascript
Array.from({length:5},(_,i) =>
console.log(i)
);

$.each([…Array(3).keys()], (i) =>
console.log(i)
);

$.each([…Array(3).keys()], (i) => {
console.log(i);
});

$.each([1,2,3,4,5],(_,i) =>
console.log(i)
);

[…Array(5).keys()].forEach(i =>
console.log(i)
);

const num = 15;

console.log([…Array(num).keys()]);

// １から始めたいなら
console.log([…Array(num).keys()].map(n => ++n));

$.each([…Array(fields.length).keys()], function(_,i) {
console.log(i);

GitHub Actions上でのprocess.stdout.clearLine is not a function

ローカル開発では問題なく使えていた`process.stdout.なんとか`がGitHub Actions上だと使えなかったです。

“`
process.stdout.clearLine();
^

TypeError: process.stdout.clearLine is not a function
“`

## GitHub Actionsではprocess.stdout系は使えない模様。

issueあげてる人もいるようにprocess.stdout系は使えない模様。

https://github.com/vercel/pkg/issues/356

またprocess.stdout.writeだけは使えるようです。

GPTもこんな回答を

> ![スクリーンショット 2024-02-06 19.44.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/a0d3803e-b1e0-2a37-6341-fe25a6f3

消えてくれないループ　removeするとindexが詰められる

Adobe Extendscriptを書いていて、選択したものを消したいのに消えない、でもいくつかだけ消える。ということがあり、実は当たり前のことに気づいていなかったので、自分メモ

“`js:元のコード
var doc = app.activeDocument;
var sel = doc.selection;

for(var i=0; i < sel.length; i++) { sel[i].remove(); } ``` これで全部消えるだろうと思っていましたが、消えませんでした。 ```js:正解のコード var doc = app.activeDocument; var sel = doc.selection; while (sel.length > 0) {
sel[0].remove();
}
“`
または
“`js:正解のコード(2)
for (var i = sel.length – 1; i >= 0; i–) {
sel[i].remove();
}
“`

`sel[n]`を`remove()`すると、`sel[n+1

サイトリサーチ 01

▼サイト名
雑貨屋HAPPENING

▼URL
https://happening.store/

▼このサイトについての分析
全体的にデコラティブでユニークな印象を受けた。
おそらくゴシック体のフォント、バウンスのかかったアニメーション、彩度等からそれらを感じ取ったのではないか。

背景が青色で、グラフィックデザインっぽくなりそうなところ、余白を大きめにとってWebサイトらしさが出ているようにしているように感じた。
社名の「HAPPENING」感をデザイン全体を通して感じることができた。ちゃんとサイトの概要とデザインが結びついているのがとても良いと思った。

JavaScript 第11回 ウィンドウをドラッグ＆ドロップの改善・注意事項

# はじめに
第9回、10回と作成したウィンドウをドラッグ＆ドロップのソースについて、もう少し改善の余地があり、また、注意することもあるなと思いましたので、まとめます。
なお、第10回のソースをベースとしますので、第9回、第10回を見ていることを前提として記載します。

# 今回実施する内容
– HTMLのbodyの範囲の確認
– `pointermove`が該当要素の外へ出た場合の対応

# ソースコード(Git Hub)
https://github.com/Build-Mount/JS_11_drag_pointer2

# 環境
OS: Windows 11 JP (64bit)
Microsoft Edge：バージョン 121.0.2277.98 (公式ビルド) (64 ビット)

# 参考
[position](https:

りあクト！【① 言語・環境編】を読もう

# はじめに
こんにちは！
昨今のフロントエンド関連、ありえん難しいです。
わたしは業務でReactやvue以降のモダンフロントエンド技術に触れたことがなく、
ずっと、バックエンドFWとHTML/CSS, JQueryという古の技術を使っていました。
エンジニアとして四年目を迎えているのにも関わらずこれは非常にマズいと思い、Reactやそのフレームワークを独学していますが、
– え…なんでこの書き方にする必要があるの…?
– なんとなくこう書いているけどこれは合っているの?
– なにをやっているか理解できずお作法として書いているコードがある

などなど、不安な気持ちでいっぱいです。

そんな中、モダンフロントエンド周りを理解するために購入した一冊の本がとてもためになったので、紹介します。

# りあクト！ TypeScriptで始めるつらくないReact開発 第4版【① 言語・環境編】
大岡由佳さんという方が出している本です。

購入はこちらから
[りあクト！ TypeScriptで始めるつらくないReact開発 第4版【① 言語・環境編】](https://booth.pm/

FilePond ファイルサイズに制限をかける（バリデーション）

## はじめに
今回はFilePondを使ってアップロードした画像に対してサイズの制限をかける処理を実装します。
公式からプラグインが提供されているので、そちらを使用します。
FilePond公式ドキュメントは非常にわかりやすかったので、英語が得意の方は当記事を閲覧するよりも公式ドキュメントを参考にした方が良いかもしれません…
[FilePond公式 サイズ制御](https://pqina.nl/filepond/docs/api/plugins/file-validate-size/)

## FilePondを読み込む

今回はCDNを使用してFilePondを読み込みます
“`html

基礎に戻って配列の処理をやり直したPart4　ChatGPT TSジェネリクスでスプレッド構文編。

# タイトル
基礎に戻って配列の処理をやり直したPart4　ChatGPT TSジェネリクスでスプレッド構文編。

## 開発環境
“react”: “^18.2.0”,
“typescript”: “^4.9.5”,

## 何故この記事を書こうと思ったのか。
前回の記事を参照ください。
https://qiita.com/nuhaha_2023/items/c1f7bb9796b08af60a5b

## 問題の形式
ChatGPTを使用して以下の文言を各毎回投げるとします。
問題自体を自動生成してくれるのでテンプレートだと楽ですね。

———–
以下のコードの基本的な処理から応用的な処理の問題を4個出して欲しい、
言語　javascript typescript
問題として使用したいメソッド　「」
こちらから使用するメソッドを指定するからこれで問題出してほしい、特にヒントはいらない、問題だけ4個出して欲しい。
オブジェクトと配列に関してはサンプル程度のを問題と一緒に用意して欲しい。
詰まるか答え合わせが必要になった時はまた送信するからレビュ