JavaScript関連のことを調べてみた2023年07月27日

スマートフォンで物体検出

# 0. 概要


– スマートフォンでリアルタイムに物体検出を行います。ROG Phone 3 (ゲーミングスマートフォン ASUS社 2020年)で**約6fps**で動作します。
– 物体検出には**yolox**という機械学習モデルを使用します。yoloxのpytorchのモデルファイルをonnx形式に変換して**javascript**上で動作させることによりスマートフォンで実行可能とします。
– **Google Colaboratory**に開発・実行環境を構築するので、パソコン、スマートフォンに何もインストール

JavaScriptデザインパターン入門

## 1. はじめに

JavaScriptデザインパターンは、JavaScriptを使ってプログラムを書くときによく出くわす問題を解決するためのガイドです。これらのパターンの背後にある考え方を理解することで、自分の問題に適用することができます。また、これらのパターンが自分のコードに役立つ場合を見つけることもできます。

## 2. モジュールパターン

モジュールパターンは、JavaScriptのモジュールシステムの一部で、データを保護する方法を提供します。これは、モジュール内のプライベートなデータと動作を保護し、一方で公開APIを提供する方法です。これにより、プライベートとパブリックのアクセスレベルを持つ自己完結型のモジュールオブジェクトを作成することができます。

これは、JavaやC++のような言語でクラスにアクセス修飾子を使用するのに似ています。

JavaScriptでは、クロージャを使用してモジュールパターンを実装することができます。

クロージャを使用してプライベートメンバー（関数、変数、データ）を包むことで、これらのメンバーがアクセス可能な範囲を作り出し、外部の世界か

限界ド文系大学生がプログラミングをやってみて思ったこと

こんにちは、初めまして。堕罪ｵｻﾑです。
某文豪みたいな顔をしていますが、大学生で**国語学・日本語学**を専攻しています。
今日はざっとですが、初学者のｵｻﾑがつまずいているところをほんの少し掘り下げて記事を書いてみました。共感していただけたり、こんなところがわからないのか！と発見になればいいなと思います。よろしくお願いします！

ド文系の私がなぜプログラミングを始めたのか?

プログラミングとの出会いは唐突でした——。

というのも、当方限界大学生であるため就活云々で問題を抱えていまして、お付き合いをしている方にウワ～！と相談したところ、

「俺エンジニアだからプログラミング教えられるよ～」

という返事だったので私も、

「ほな、やってみるかあ」(プログラミングってJavaScriptとか、ぱいそん？とかそういうのだよね？)

という、ざっとこんな感じでした。

実際やってみて難しかったこと

1．HTML&CSSについて

まずはHTMLとCSSから始めました。引っかかった部分としては

**「閉じタグを忘れる」**
**「a

7/26 プログラミング3日目

目標：Javascriptでシューティングゲーム制作する
⬜️事前知識
・Javascript基礎知識
———————
前回は算術演算子を学びました
復習：算術演算子使って文字列と値を組み合わせて
コードを書く
“`
let values = “合計:” + 20 * 1000 ;
console.log(values);
//合計:20000
“`
今回はlet使ってやってみました
letだと上書きが出来てしまいますので
複数書く場合はconstで前回と同じようにした方が良いなと思いました
letで変数別々に書いてると
変数同じやつが使った時上書きしないか心配になりました。

⬜️本日3日目の課題
→条件分岐
if文とelse文を使う
演算子も使用する

時間がなかったのでここまでしか出来ませんでした
改めて時間作り条件分岐を再度学ぼうと思います。

可動式todoリスト作成記 / 拖動可更換次序的todolist

(JP)
8月。といえば旅行！

今年は青森，台湾に行く計画を立てた！

しかし、9月にさらに一大イベントがある。引越しだ。

私は同じところにずっといるのが嫌な性で、賃貸更新のタイミングで毎回引越ししている。

今年も田町から芝浦あたりに引っ越そうと思う！（近場に限る）

そうなると8月月初に飛行機予約，宿予約，賃貸物件選定と、やることが盛りだくさん。

何からやればいいのかわからん、、

そこでtodoリストを作りたいと思ったのだ！

作ってみたけど、結構手こずった。

コードはかなり煩雑になってしまったが、綺麗にする気力がない、、

今週か来週にはコード載せたいと思うので、誰かに手直しして欲しい、、

ちなみに、調べまくってドラッグで項目を入れ替えることも可能にした。

——
(CN)
最近很繁忙，要幹的事情好多，，，

8月份計劃去旅遊，9月要搬家等等

想整理一下該做的事情

於是做了一個只屬於自己的完全original的todolist

憑藉網友們的智慧，前天終於完成了！！（如下圖）

但編程碼非常凌亂，打算下禮拜發編程碼，希望有網友們來修改

這todolist

jQuery　基本文法

# jQueryの書き初め
HTMLの読み込みが終わった後にjQueryが実行されるように，以下のように記述する．実際のjQueryの処理はこの中に記述していく．
“`javascript
$(document).ready(function(){
//ここにjQueryの処理を書く
});
“`
↓省略形
“`javascript
$(function(){
//ここにjQueryの処理を書く
});
“`

# jQueryの基本形
“`javascript
//イベントの設定
$(‘セレクター’).イベント(function(){

})

//メソッドの設定
$(‘セレクター’).メソッド();
“`
jQueryの処理は以下の３つの基本要素によって記述する．
**・セレクター**
操作するHTMLの要素を指定する．→　”何を”操作するのか
**・イベント**
jQueryによる操作するタイミングを指定する．→　”いつ”操作するのか
**・メソッド**
セレクタによって指定した要素に行う操作の内容

jQuery 基本知識

# jQueryとは
jQueryはWebブラウザ用のJavaScriptのコードをより短く容易に記述できるように設計されたJavaScriptのライブラリ．
jQueryのキャッチコピーは「write less, do more（少ない記述で，もっと多くのことをする）」

# jQueryの特徴
jQueryには次のような機能や特徴を持つ．
**○DOM操作・変更**
簡単な構文とセレクターを提供して，DOMの要素を選択と操作，変更することができる．要素の選択，追加，削除，属性の変更などの操作が容易に行うことができる．

**○CSSの操作**
jQueryはCSSのプロパティを直接操作するためのメソッドを提供している．例えば，要素のスタイルを変更したり，要素の表示/非表示の切り替えが簡単にできる．これにより動的なUIの作成やスタイルの変

Next.js Material-UIの導入

## 開発環境

– Windows
– node v18.16.0
– Next.js v13.4.12

## 参考情報
[Installation – Material UI](https://mui.com/material-ui/getting-started/installation/)
[Next.js App Router – Material UI](https://mui.com/material-ui/guides/next-js-app-router/)

## 行った内容
◆公式を参考にライブラリのインストール
“`bash
npm install @mui/material @emotion/react @emotion/styled
# Robotoフォントがデフォルトのためインストール
npm install @fontsource/roboto
# アイコン
npm install @mui/icons-material
“`
◆公式を参考にPeerDependencesとlayout.tsxへ記載。
package.json
“`tsx
“pe

【React】アコーディオンリストの作成

# はじめに
Reactで簡単なアコーディオンリストを作成するための実装例を紹介します。

# 作るもの
以下の画像のような、ボタンをクリックすると表示、非表示を切り替えることができるようなUIです。


# 実装
・以下のコマンドで、Reactの雛形を作成する。
“`terminal:terminal
npx create-react-app プロジェクト名
“`

・作成されたApp.js、App.cssファイルを以下のように置き換える。
“`js:App.jsimport { useState } from ‘react’;
import ‘./App.css’;

function App() {
const [selected, setSelected] = useState(

React + SpringBootアプリ　簡易まとめ

# 初めに

今回の記事ではReact、SpringBootを用いた旅行予約管理アプリケーションの作成を行った際に使用したコードを復習も兼ねて簡単にまとめていこうと思います。
今まではEclipseでコード編集を行っていましたが今回のアプリケーション開発ではフロントのコード編集にVC CodeとバックにはIntellijを使用しました。
環境構築などは[YouTube](https://www.youtube.com/watch?v=4LZKnegAm4g&list=LL&index=8&t=3405s)を参考にしました。

## フロント(React)からバック(Java)のAPI呼び出し
SpringBootを使用してアプリケーションを作成する際に使用するControllerに`@CrossOrigin`を使用します。
今回のReactアプリケーションではデフォルトのURL`http://localhost:3000`を使用しているのでControllerには`@CrossOrigin(“http://localhost:3000”)`とすればフロント側から指定のAPIのURLをた

Laravelで削除確認メッセージを出す方法

# 概要
この確認は正直どこでも使うので
汎用性が高いと考え記事にしました。

# バージョン
* laravel 9.x
* composer 2.5.8
* php 8.1

# 対象コード
“`html

【JavaScript】【Jquery】カンマ区切りの文字列を配列にする splitを使う

“`javascript
process.stdin.resume();
process.stdin.setEncoding(‘utf8’);

let str = ‘1,2,3’;

let result = String(str).split(‘,’);

console.log( result );

// ⇓数値型だとエラー
let str = 3333;
let result = str.split(‘,’);

“`

結果
“`javascript
[ ‘1’, ‘2’, ‘3’ ]
“`

vue.jsで、「事前に指定した特定のhtml」の要素を、「methodsで定義した関数内」で取得する

# 結論
事前に取得したい要素に対して`ref`属性を設定しておきます。「methodsで定義した関数内」で使用するときは`this.$refs.{refに設定した属性名}`で要素を取得できます。

# 前提
– この記事ではCDN の Vue を使用しています。
– vue@3.3.4を使用しています

# サンプルコード

See the Pen 【JavaScript】【Jquery】配列操作 map文 eachよりも優れてる？

“`javascript

//varを使用すると再宣言、初期化によるバグを起こしやすくなるため、今は非推奨だから使わないほうが良い

let results = [
{‘name’ : ‘田中’, ‘japanese’ : 83, ‘math’ : 57, ‘science’ : 43, ‘social’ : 72, ‘english’ : 78},
{‘name’ : ‘渡部’, ‘japanese’ : 62, ‘math’ : 88, ‘science’ : 70, ‘social’ : 66, ‘english’ : 38},
{‘name’ : ‘品川’, ‘japanese’ : 23, ‘math’ : 33, ‘science’ : 53, ‘social’ : 17, ‘english’ : 07},
{‘name’ : ‘滝谷’, ‘japanese’ : 93, ‘math’ : 89, ‘science’ : 79, ‘social’ : 96, ‘english’ : 91},
{‘name’ : ‘

初心者から中級者への一歩！JavaScriptでforループから高次関数へ

JavaScriptでは、コードを書く方法の一つとして、forループを用いて配列を操作するというのが一般的です。しかし、JavaScriptは関数型プログラミングの概念を豊富に取り入れており、filter、map、reduce、some、everyといった高次関数を利用することで、より簡潔で宣言的なコードを書くことが可能です。

ここでは、これらの関数を一つずつ見ていき、それぞれが何をするものであるか、またそれらを使うことで得られるメリットを紹介します。

|関数名|説明|
|—|—|
|filter|条件に一致する要素だけを抽出した新しい配列を生成します。|
|map|配列の全ての要素を変換した結果の新しい配列を生成します。|
|reduce|配列の全ての要素を単一の値（集約値）に結合します。|
|some|配列のいずれかの要素が条件を満たすかどうかをチェックします。条件を満たす要素が一つでもあればtrueを返します。|
|every|配列の全ての要素が条件を満たすかどうかをチェックします。全ての要素が条件を満たせばtrueを返します。|

前提として、次のような社員データが

WEBページのリンク一覧を取得するスクリプト【備忘録】

# コンソールにリンク一覧を表示する
Javascriptを使ってWebページのリンクをコンソールに表示するためスクリプト
“`js
// 現在のページ上のすべてのリンクを表示するコンソールスクリプト
(function () {
// ページ上のすべてのリンク要素を取得
const links = document.querySelectorAll(“a”);

// 取得したリンク要素をループしてリンクを表示
links.forEach((link) => {
const linkText = link.textContent;
const linkURL = link.href;
console.log(`${linkText} – ${linkURL}`);
});
})();
“`
ブラウザのデベロッパーコンソール（通常はF12キーで開きます）にこのスクリプトを貼り付けて実行すると、ページ上のすべてのリンクがコンソールに表示されます。

リクエストURLをすべてコンソールに表示するスクリプト【備忘録】

# 開発者ツールでリクエストURLの一覧を表示させるスクリプト

備忘録として
開発者ツールで表示されるネットワークの項目のリクエストURLをすべてコンソールに表示するためのJavaScriptスクリプト

“`
// 開発者ツールの Network タブに表示されるリクエストURLを取得する
var requests = performance.getEntriesByType(‘resource’).map(entry => entry.name);

// コンソールにリクエストURLを表示する
console.log(‘リクエストURL一覧:’);
requests.forEach((url, index) => console.log(`${index + 1}. ${url}`));
“`

このスクリプトは、performance.getEntriesByType(‘resource’) を使用して、開発者ツールの Network タブに表示されるリソース（リクエストURL）を取得します。それらのURLを console.log を使って順番に表示します。
## キー

【React + Vite + TypeScript】ビルド時に’vite/client’が見つからない問題の解決策

### 1.問題の発生

私たちのプロジェクトではReactとViteを一緒に使用しており、TypeScriptを採用しています。ところが、最近ビルドプロセスに問題が生じました。具体的には、以下のコマンドを実行したところ、エラーが発生しました。

“`bash
npm run build
“`

エラーメッセージは次のようなものでした。

“`
Cannot find type definition file for ‘vite/client’. The file is in the program because: Entry point of type library ‘vite/client’ specified in compilerOptions
“`

このエラーメッセージによると、`vite/client`の型定義ファイルが見つからないという問題が発生しているようです。

### 2.設定の見直し

原因を探るために、まずはTypeScriptの設定ファイル(`tsconfig.json`)を見直してみました。設定ファイルは以下のようになっていました。

“

JavaScript 基本文法

# はじめに
この記事はJavaScriptの抑えとくべき基本的な知識や文法をまとめる．

# コメント
“`javascript
// これは1行コメントです

/*
これは
複数行
コメントです
*/
“`

# データ型
JavaScriptにはプリミティブ型とオブジェクト型の2種類のデータ型がある．
**○プリミティブ型**
* 真偽値(Boolean)：`true`または`false`
* 数値(Number)：`42`や`3.14`などの数値
* 巨大な整数(BigInt)：`9007199254740992n`などの任意精度の整数
* 文字列(String)：`”JavaScript”`などの文字列
* undefined：値が未定義であることを示すデータ
* null：値が存在しないことを意味するデータ
* シンボル(Symbol)：一意で不変な値のデータ

**○オブジェクト型**
→オブジェクト，配列，関数，クラスなど．プリミティブ型でないものはオブジェクト型であると覚えても問題ない

# 変数・定数の宣言
他の静的型付け言語は，代入する値の種類(文

7/26 プログラミング二日目

目標：Javascriptでシューティングゲーム制作する
⬜️事前知識
・Javascript基礎知識
—————————————————–
Javascript二日目
⬜️復習：定数と変数
→変数名を定義し値を出力
“`
const values = 300;
console.log(values);
“`
この際同じ変数名を使って出力することはできない
constは上書き禁止

→同じ変数を使用する場合
let使用する
“`
let value = 200; //最初は200という値だったが
let value = 500; //上書きすると
console.log(value);　 //500と出力される
“`
同じ変数を使用したいと思ったらこのように書いてたらいい！！！
(最初はさっぱりだったけど何回か繰り返し書いてたらなんとなくわかった)

⬜️二日目課題
→算術演算子と値と文字列組み合わせたらどうなるんだろ？
出力した結果
“`
const a = 30 + 10 + ‘円’;
console.