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

[備忘録] Reactのルーティングについて

## Reactアプリ内のルーティングをメモ
React V6は、V5からルーティングの仕方が結構変わったので、いつもどっちのコンポーネントを使うんだったか迷うので、ここに備忘録。

#### 本体モジュールとは別セットなので、react-router-domをインストール
“`terminal:Terminal
npm install react-router-dom
“`
#### App.jsxにルーティング用コードを書く
“`jsx:JSX
import React from ‘react’;
import { BrowserRouter, Routes, Route, Link } from ‘react-router-dom’;

// Import page components
import Home from ‘./Home’;
import About from ‘./About’;
import Contact from ‘./Contact’;

// Import components that should appear on every page
i

npx コマンドでCLIを実行したら”could not determine executable to run”って言われた

# 動作環境について
デスクトップのWindows環境と、ラップトップのChromeOS(CrostiniでDebianが動作)環境の2種類で開発していた。Nodejsのバージョンはどちらもv20.22.0

# 経緯
理由は分からないが、あるプロジェクトではnpxコマンドでfirebaseエミュレーターを起動させる構成になっていた。そしてなぜかWSLではエミュレーターが動いたのにCrostini側でエラーが発生して起動しないという問題が発生。

“`bash
npx firebase emulators:start –export-on-exit=’./.emulator’ –import=’./.emulator’
npm ERR! could not determine executable to run
“`

雑に訳すと「お前が入力したコマンドは実行できるように見えない」みたいな感じだと思われる。

# 原因:パッケージ名とコマンドが揃っていない。
エラーメッセージで検索するとすぐに情報が見つかった。

https://kazuhira-r.hatenablog.co

SPAから動的に挿入されるDOMを取得する

chromeの拡張機能開発で、SPAからDOMを取得する際にハマったので、メモとして残しておきます。

## 問題点
例えば、以下のように、同期的に挿入される`sample`クラスがあったとします。
“`html

sample

“`

最初は、画面の描画が完了したら、DOMを取得しようと思いました。
しかし、結果は`null`でした。
“`javascript
window.onload = function() {
let sample = document.querySelector(“.sample”)
console.log(sample.textContent)
}
“`

## なぜか
HTML、CSS、JSが読み取られた時に`onload`は発火するが、SPAはそこから画面を組み立てるので、取得できなかったというわけです。

## 解決策

DOMの変更を検知できる、MutationObserver[^1]を使います。
[^1]: https://developer.mozilla.o

Array.prototype.every()を学ぶ

今回はeveryです！
早速[MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/every)を見ていきます。

> every() は Array インスタンスのメソッドは、列内のすべての要素が指定された関数で実装されたテストに合格するかどうかをテストします。これは論理値を返します。

配列内の全ての値が条件を満たしていればtrueを返す、なるほど。

“`js
// 公式から引用
const isBelowThreshold = (currentValue) => currentValue < 40; const array1 = [1, 30, 39, 29, 10, 13]; console.log(array1.every(isBelowThreshold)); // true const isBelowThreshold = (currentValue) => currentValue < 40; const array1 = [1, 30,

Reactで学習記録アプリを開発

## はじめに

現在Shopifyのサイト制作を行なっているのですが、スキルアップを狙ってReactを学習中です。
習得の過程で「学習記録アプリ」を作成したので、その経験談を記載します！

## 今回作成したもの

学習記録アプリの内容

– inpuptタグを2つ配置（学習内容、学習時間を入力）
– inputタグ2つのうち1つでも未記入だった場合、登録ボタンが押せない仕様
– inputタグに学習内容と学習時間を入力して登録ボタンを押すと、学習記録のリストが追加される
– 記録された学習時間の合計時間をreduce関数で算出

元々サイト制作でちょっとしたJavascriptの記述は行なっていたことと、Udemyの講座でもTodoアプリを作成した経験があったので、こちらのwebアプリの開発は半日程度で完成できました！

開発期間としては自分ではかなり早くできたと思いますが、それでも新しく触るReact言語は難しい…
だけどそれ以上にJavascriptに比べてコードの記述量がめっちゃ少ない！！
そのおかげかミスを発見できるスピードも早い！（気がする）
**Reactめっちゃ楽しい

プリザンターと別システムの連携

会社のグループウェアの内容をプリザンターへも登録したくなったので、ブラウザの拡張機能をつくってみました！
プリザンターをメインに使用しているのですが、一部別システムを使っていてその内容をプリザンターにまとめたいので。

# JavaScriptでつくった拡張機能

これを拡張機能として追加すれば、対象の箇所にプリザンターへの連携ボタンが追加されて、APIで内容を登録できる。

“`ボタンを追加.js
// プリザンターへの連携のためのボタンを追加
let inputbtn = document.createElement(“input”);
inputbtn.setAttribute(“id”, “btnp”);
inputbtn.setAttribute(“type”, “button”);
// 既存のボタンと同じclassにして見た目がそろうように
inputbtn.classList.add(“xx”);
inputbtn.classList.add(“xxxxx”);
inputbtn.value = “プリザンターへ連携”;
inputbtn.onclick = Regi

HTML + jsでバリデーションチェックをしてみた

## 概要

出落ち感すごいんですがタイトル通りです。「HTMLに適当にstyleタグでCSSを、scriptタグでjsを記載してsubmitボタン起点で入力内容をチェックする。内容がイケてなかったらエラーを出す。」というものを作ってみました。

## 詳細

コードはGithubに上げました。README.mdをお読みいただき実際に簡単に体験いただく事ができます。

https://github.com/miriwo0104/html_css_javascript_validation

【JavaScript】フォームを送信する方法

## `submit()`

以下のように記述すると`submit()`を使用してフォームを送信できます。

“`html

名前

Change name
“`

“`js
const btn = document.querySelector(‘button’)
const form = document.querySelector(‘form’)

btn.addEventListener(‘click’, () => {
form.submit()
})
“`

ただし、`submit()`でフォームを送信した場合には、

– submit イベントは発生しません
– 制約検証は行われません

https://developer.mozilla.org/ja/docs/Web/API/HTMLFormElement/submit

## `requ

デジタルお小遣い帳を作ってみたい！by初心者　第1回目

## はじめに
この記事は、初心者がWebアプリ制作を通して力をつけていこう！という趣旨の記事です。
途中で躓くかもしれません。その際はごめんなさい。
アドバイス等はとてもうれしいのですが、誹謗中傷はおやめください(泣きます)。

## なぜお小遣い帳なのか
・自分で使えるものが欲しかったから
・家族が家計簿を欲しがっていたから(それっぽいものをつくって褒められたい！！)

## 自分の技術力
JavaScriptを少し触ったことがある程度
なので実はハードル高め！

## 使いたい思っている技術
・React
・Node.js
・Express
・MongoDB
・vite

## 作りたいアプリに必要な機能(ページ)
・収入入力ページ
・支出入力ページ
↓ここからはいずれ挑戦
・ほしいものページ
・グラフビューページ
・サブスクページ
・目標ページ

## 今回作るもの
アプリのひな型！

### 1.開発用のフォルダを作る
・名前はそのまんま”money-book-mern”としました。
・フォルダをVScodeで開きます。
・viteを使ってプロジェクトを作成します
`

DOMについて復習

# DOM（Document Object Model）について

DOMは、**HTMLの情報をプログラムが扱いやすい形式でメモリ上に保存するための仕組みである。**

HTMLが解析されると、DOMへと変換される。JavaScriptでHTMLを操作する際は、このDOMを介して行われる。

DOMへの変換やレンダリングの仕組みは以下の記事がわかりやすい。

https://zenn.dev/ak/articles/c28fa3a9ba7edb

## DOMの構造

DOMの構造は、文書をツリー形式で表現する。このツリーは、文書の階層構造を模倣し、各ノードが文書内の特定の部分（例えば、要素、属性、テキストなど）に対応する。このツリー状の構造により、プログラマは文書の特定の部分を簡単に識別し、操作できるようになる。

### ノードの種類
ノードには以下の5つの種類が存在する。

– テキストノード: 文書内のテキストを表す。
– コメントノード: HTMLのコメントを表す。
– ドキュメントタイプノード: 文書のDOCTYPEを表す。
– 要素ノード: HTMLの要素（タグ）

sveltekit-view-transitionを使ってSvelteKitでView Transition APIを簡単に使う

## View Transition APIとは
[MDN Web doc](https://developer.mozilla.org/ja/docs/Web/API/View_Transitions_API)によると
> ビュートランジション API は、異なる DOM 状態間のアニメーション遷移を簡単に作成する仕組みを提供し、同時に DOM コンテンツも単一の手順で更新します。

とのことです。つまりスマートフォンアプリなどで一般的なスムーズな遷移表現のWeb版ですね。

## SvelteKitとView Transition API
SvelteKitとView Transition APIについてはSvelte.devの[Blog記事](https://svelte.dev/blog/view-transitions)に記載の通り、SvelteKit 1.24で実装されたonNavigateライフサイクルで利用可能になりました。

以下のコードはページ遷移時にクロスフェード効果を適用します。
“`js
onNavigate((navigation) => {
if (!

【JavaScript】FizzBuzz問題をワンライナーで書いてみた

# 前書き
最近JavaScriptを触っていないので、気分転換でFizzBuzz問題でもやろうと思いました。
普通に解いても面白くないので、今回は配列を使うこととワンライナーで書くことを考えて問題を解きました。
ワンライナーのため可読性が悪いのでその点は注意してください。

# コード
“`javascript
Array.from(Array(100)).map((_, i) => [i+1, ‘fizz’, ‘buzz’, ‘fizzbuzz’][[1,0,0][(i+1)%3]+[2,0,0,0,0][(i+1)%5]]).forEach(item => console.log(item));
“`

# 解説
簡単に解説を行なっていきます。
メソッドなどがわからない場合は下記の「メソッドなどの参考リンク」をのリンク先などをみていただければと思います。

## 定義形

“`javascript
Array(100)
“`
長さが100の新しい空の配列を作成しております。
要素は全てundefinedで初期化されとるらしいです。<

元記事を表示

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

元記事を表示

useStateで配列を更新する際に少しでも記述量を減らす（学習記録アプリ）

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

## 修正前の記述
“`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() を使う部分は、フラグを使ってイベント検知に連動した処理が行われない状態を作った後に、一定時間が経過し

元記事を表示