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

Scratch Forum 上の YouTube リンクを生成するブックマークレート

Scratch では `https://scratch.mit.edu/discuss/youtube/動画ID/` というURLを使うことで YouTube 動画を閲覧することができます。目的は~~ブロックされないため~~コメントなどのコンテンツを非表示にするためです。
いちいち変換が面倒なのでブックマークレットを作りました。JavaScript を触ったことがないまま作ったのでコードが汚いのはご承知ください。

# コード

“`javascript:コード
if (location.host + location.pathname == “www.youtube.com/watch”) {
url = “https://scratch.mit.edu/discuss/youtube/” + location.search.slice(3);
alert(url);
} else {
alert(“This URL is not a YouTube video.”);
}
“`
“`:URL
javascript:(function()%7Bif%20

【JavaScriptでゲームを作る】ライブラリxnewの紹介と簡単なゲームの実装

# はじめに
JavaScriptで何かゲームを作ろうと考えた場合、画像や3Dモデルのレンダリング（描画）が得意なライブラリを使いたくなると思います。例えば、2Dのレンダリングだと[**pixi.js**](https://pixijs.com/)、3Dだと[**three.js**](https://threejs.org/)が有名です。

それと、人気のReactやVueのようなコンポーネント指向のライブラリも併せて使いたいところです。特にゲームプログラムは実装が複雑になりがちなので、それをシンプルなコンポーネントの組み合わせとして実装できると、開発効率やプログラムの品質を上げられそうです。あのUnityでもコンポーネント指向が取り入れられていて、ゲームに登場するオブジェクト毎に分けてプログラムを設定する仕組みになっています。

ただ、JavaScriptのコンポーネント指向のライブラリの多くは、レンダリングのための繰り返し処理やレンダリングする用のオブジェクトを扱う想定がないため、ゲームプログラムにうまく利用するのはやや厳しいです。（できなくはないですが）

そこで今回、レンダリ

【Julia】Electron.jlを使ってカウンターアプリを作る

# はじめに
この記事ではElectron.jlで以下のようなGUIのカウンターアプリを作ります。これを通してElectron.jlの基本的な使い方を習得できるかなと思います。


筆者自身大学の研究プロジェクトでJuliaを用いたことがあり、可視化用のアプリケーションを作成する必要がありました。そこで調べたところElectron.jlが使えそうとなりましたが、

* [Electron.jlの公式Github](https://github.com/davidanthoff/Electron.jl)の解説があまりにも簡素
* 解説記事が少ない上に、独特の記法がいくつかある

このような事情で慣れるまでに時間がかかった記憶があります。そのため、Electron.jlの使い方を理解できるチュートリアルとしてのサンプル兼解説記事を書こうと思いました。

教えてGTP: HTML canvas要素を動画にする技術は何か？

HTML キャンバス要素をビデオに変換するには、「キャンバス レコーダー」と呼ばれる手法を使用できます。この手法では、canvas 要素の状態を定期的にキャプチャし、キャプチャしたフレームを MP4、WebM、GIF などのビデオ形式にエンコードします。

この手法を実装するには、JavaScript と canvas API を使用して canvas 要素をキャプチャしてエンコードします。その後、Whammy.js や CCapture.js などのライブラリを使用して、キャンバス要素をビデオとして記録および保存する機能を提供できます。

たとえば、JavaScript で requestAnimationFrame メソッドを使用してキャンバス要素を特定のフレーム レートでレンダリングし、toDataURL メソッドを使用してキャンバスの現在の状態を取得できます。次に、キャプチャしたフレームをビデオ エンコーダーにフィードして、それらを 1 つのビデオ ファイルにコンパイルします。

ビデオが作成されたら、HTML5 ビデオ要素を使用して再生したり、ビデオ ホスティング プラットフ

アロー関数で波括弧のなかに判定式がある場合はreturnが必要

“`example.js
arr = []
arr.push(1,2,3,4,5)

// ネストしない場合はreturnは不要
const exist = arr.some(number => number == 1)
console,log(exist)//true

// false ネストしている場合はreturnが必要
const exist = arr.some(number => {
number == 1
})
console.log(exit)//false

// ネストしている場合はreturnが必要
const exist = arr.some(number => {
return number == 1
})
console.log(exist)//true

Reactとmaterial-uiを用いたアプリでCarouselを実装する方法

# はじめに
[react-material-ui-carousel](https://www.npmjs.com/package/react-material-ui-carousel)を用いてCarouselを実装する方法を備忘録として書きます．

# 使い方
Carouselの説明やインストール方法，基本的な使い方は，[「React-Redux-TypescriptアプリでCarousel機能を実装」](https://qiita.com/tomoya07oga/items/6f7e0379d9857cdb9bdc)に書かれています．
一番下の「参考にしたサイト」にも記載しているので，ご確認ください．
material-uiをインストールしていない方は以下のコマンドでインストールできます．
“`
npm install @mui/material
npm install @mui/icons-material
npm install @mui/styles
“`

細かい機能を実際のコードとして以下のように記述しました．
※一つ一つの説明はコメントで記述しています．

“`j

僕のProofReading API　～VBAマクロ撲滅計画Phase#2 ～

# 導入
[前回](https://qiita.com/SSKNOK/items/4e859a6e8d1aae8e24b0)に引き続き、VBAマクロを撲滅するために何か使えるものはないかな～とか探っております。
基本的にはJSとPythonあたりで何かうまいことできないかなと。

今回はProofReading APIを使って、ドキュメント内容を校正するツールを作りたいと思います。

あと、地味に今回のツール作成を通して画面周りで学びが多かったので共有できればと。

# そもそもProofReading APIとは
[ProofReading API](https://a3rt.recruit.co.jp/product/proofreadingAPI/)を見ていただければ、手っ取り早いですが、「リクルートテクノロジーズが無償で公開しているAPIでAIを使って日本語文章の校正（校正が必要そうな箇所を指摘）するAPIです。

# 作成したソース
結論、作成したツールのソースは以下の通りです。
メインのHTMLファイル以外は割愛します。割愛したjsの中でやってることもあんまり大したことない

Memo: A Function to Order Amateur Radio Callsigns According to JARL Bureau’s Rule

## Goal

To issue QSL cards (contact confirmation cards) to amateur radio stations, we need to sort them according to a certain rule defined by JARL (Japan Amateur Radio League):

https://www.jarl.org/Japanese/5_Nyukai/qsl-sq.htm

I wrote a function to obtain sorting keys from callsigns for this purpose.

## Code

“`JavaScript:JavaScript

const JACallSignRegex = /^(?J[A-S]|7[J-N]|8[J-N])(?

\d)(?[0-9A-Za-z]+)(?:\/(?.+))?$/i;

function JARLBureauOrderKey(callSign){

JavaScriptでデザインパターン①〜シングルトン

# デザインパターンとは
　デザインパターンは、大規模なソフトウェア開発の課題に対する一般的な解決策を提供するものです。これらのパターンは、特定のタイプの問題に対してよく使われる方法をまとめたものです。
　例えば、本を作ることと同じように、ソフトウェア開発も複雑な作業です。そのため、作り方を整理することが重要です。「本を作るためのレシピ」のようなものがデザインパターンです。これらのレシピに従っていけば、正しい作り方を覚えることができます。
　デザインパターンは、ソフトウェア開発においても同じような問題を解決するためのレシピのようなものです。これらのパターンを知っていることで、効率的かつ正確なソフトウェア開発を行うことができます。

# シングルトン
　シングルトンパターンは、ある特定のクラスのインスタンスがアプリケーション内で最大1つしか生成されないことを保証する設計パターンです。これにより、クラスのインスタンスを共有して、全体のコード内で同じ状態を共有することができます。

　Javascriptにはクラスがなく、オブジェクトしかないため、新しく作成されたオブジェクトはシングルトン

Youtubeデスクトップ版もどきをElectronで(Windows用)

# ない・・・ない!

ないんですよ!デスクトップ版ようつべが!!!!

てんわけでElectronでYotubeのサイトを表示するだけのソフトを作りました。

## electronインスコ
### 1.package.json生成&electronインスコ
“`
npm init -y

npm i electron
“`

### 2. 設定ファイル記述

“`js
const { app, BrowserWindow } = require(‘electron’)
const path = require(‘path’)

function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600

win.loadURL(‘https://youtube.com/’)
}

app.whenReady().then(() => {
createWindow()

app.on(‘activate’, () => {
if (BrowserWi

令和X年X月X日とDate型の変換【備忘録】

# 概要
今回、日付を令和X年X月X日XX:XXと変換する必要があり、またそこから逆に戻す必要もあり、、、
という点が少し大変で覚えられる気がしないので、メモとして残します！！

::: note warn
令和X年X月X日XX:XXは長いので、本記事では令和フォーマットと呼ぶことにしています。
:::

# 実装
実装としては、JS標準のDate型の`toLocalDateString(locales, option)`を利用しています。
日本語にしたいので、`locales`は`ja-JP-u-ca-japanese`を指定しています。
また、さまざまなオプションを利用した指定になるので、詳細はMDNで確認してもらえると幸いです。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString

## Date→令和フォーマット
“`js:DateToFormat
new Date().toLocaleDateString(‘ja-JP-u-ca

未経験駆け出しエンジニアはスキルをつけたい

# Spring Boot・React・MysqlでTodoアプリを作ってみた

エンジニアになって半年くらい経つのですが、
案件先でプログラミングを全くやっておらず、先行きが見えないので少しでもアピールポイントを増やせるようにコーディングスキルを磨きたいと思い、アウトプットを兼ねてSpring BootとReactを使ってTodoアプリを作ってみました。

※デザインは付けておらずSpring BootとReactとの連携を試してみただけなのでレベル感が底辺なので予めご了承ください。

## 現在のスキル感
– エンジニア歴半年
– shellコマンドを叩くだけのお仕事
– 研修でJava・SpringMVCを学んだ
– 独学でJavaScript・Reactの勉強中

## 使用したもの
– Spring Boot 2.7.8(Java 11)
– maven
– Mybatis
– React 18.2.0
– react-router-dom
– axios
– Mysql

## 主な機能
– Todo
– 一覧表示

JavaScriptでグローバル変数を使わない方が良いみたい

グローバル変数を使用すると、以下の問題が発生することがあるそうです

1.他のライブラリやフレームワークと同じ名前のグローバル変数を宣言すると、意図しない動作を引き起こす可能性がある

2.グローバル変数はアプリケーション全体でアクセス可能なため、コードのどこからでも変更される可能性がある。これは、コードを読んで理解することが困難になる原因となります。

3.グローバル変数はガベージコレクションの対象外であり、アプリケーションの終了時に解放されない可能性があある。これは、メモリリークの原因となります。

このように、グローバル変数を使用すると、アプリケーションの保守性や安定性に悪影響を及ぼすことがあるため、Javascriptではグローバル変数を宣言しない方が良いと考えられています。代わりに、ローカル変数を使用したり、モジュールシステムを使用して変数をスコープ内に限定することが推奨されています。

私は、今はJavaScriptを業務上であまり書いていませんが、
勉強していって知識を増やしていきます！

文字列、数値を連結する時の注意

JavaScriptは文字を連結する際に文字列を必要とする場面ではどのような値でも文字列に使用とし、数値が必要となる場面では数値に変換しようとします。（変換できない場合はNaNに変換します）。今回はその例をメモします。

まず文字列同士は連結し、数値同士は計算します
~~~ javascript
‘こんばんは’ + ‘ おはよう’ // => こんばんは おはよう
‘こんばんは’ * ‘ おはよう’ // => NaN 数値変換できないのでNaNが返る
4 + 8 // => 12
4 * 8 // => 32
~~~
次に数値と文字列の場合、文字列と**数値の文字列**は文字列に変換します
また、文字列と数値で計算しようとするとNaNを返します
~~~ javascript
4 + ‘ おはよう’ // => ３２ おはよう
‘こんばんは’ + ‘8’ // => こんばんは51
‘こんばんは’ * 32 // => NaN
‘こんばんは’ – ’32’ // => NaN
~~~
**文字列の数値**同士

【React】にマウススクロールでの数値入力を無効にする

# サンプル
“`typescript

“`
といった数値入力の入力フォームがあるとします。
画面上でこの入力フォームにフォーカスし、マウスをスクロールすると数値が入力されてしまう場合があります。
# 解決策
これを無効にするには、`e.preventDefault();`だけでは無効にできません。
`.addEventListener`の第３引数で`passive: false`が必要になります。
*Chrome上では、デフォルトでtrueになっているそう。
なので、``に、フォーカス時にこの`passive`をfalseにさせます。
“`diff_typescript

e.target.addEventListener(
‘wheel’,
(e) => {
e.preventDefault();
},

Javaにオプショナルチェーン(?.)がないなら例外処理を使えばいいじゃない

## はじめに

言語の進歩は日々目覚ましいものです。
昔の常識は今の非常識かもしれないというところで例外処理論争が起きたので起稿しました。

## オプショナルチェーン(?.)とは

「オプショナルチェーン(?.)」[^1]は、JavaScript ES2020 で追加された、名前を知らないとググれない[^2]超便利演算子です。

入れ子になったオブジェクトのプロパティにアクセスする時に、null や undefined が含まれているかもしれないオブジェクトが含まれている時に重宝する演算子です。

コードを見た方が早いと思うので、オプショナルチェーンを使った場合と使わない場合のコードを以下に書きます。

– オプショナルチェーンあり
“`modern.js
const someValue = someConfig?.subConfig?.subsubConfig?.someValue;
“`

– オプショナルチェーンなし
“`legacy.js
let someValue = null;
const subConfig = someCofig.subConfig;
if(

【React/TypeScript】useState()で入力項目を管理する。

## はじめに
昨今、react-hook-formなど入力値を取得〜バリデーションまでしてくれるライブラリが充実していますが、今回、useState()で入力フォームのStateを管理する方法を書きたいと思います。(自分へのメモも兼ねて)
また、この記事は、useState()の知識があることを前提に記事が書かれています。
useStateに関する詳細は、[公式](https://ja.reactjs.org/docs/hooks-state.html)を一読ください。
## サンプルコード
以下のようなログインフォームがあるとします。
uiはMaterialUIを使用しています。(*公式ドキュメントは[こちら](https://mui.com/))
“`Typescript
type Props = {
name: string;
password: string;
};

const nullLoginParam: Props = {
name: ”,
password: ”,
};

const Login = () => {
const [p

Twitterで自動投稿する雛形-#脱TwitterAPI。

## エンジニアに悲報としか言えない今回の発表・イーロン・マスク氏って?

２月９日でTwitterAPIが無料で使えなくなるのでその対応をしないといけない。
そんなエンジニアさんもいらっしゃると思います、お疲れ様です?。

APIサービスに月、１万円払えないという会社は中小企業には多いと思います、
それで取引を解消される企業とかもあったりするかも。

そんな方は一個VPSサーバーを構えてNodeJSをインストールして
下記の雛形コードを元にゴニョゴニョしたら何とかなるかも知れません?。

因みにこれはchatGPTとの合作だったりします。

> – [x] 動作保証はしません。HTMLコードが変われば動くなります。尚、これは雛形ですので、これに細工をして常時接続でTweetやRTするようにコードを変更しないといけません、もしくは時間を置いてTweetするなど。

“`
node sample.js ‘username’ ‘password’ ‘テスト投稿’
“`

“`javascript:sample.js
const pup

JavaScriptで複素関数をプロットしてみた

See the Pen
Plot of Complex Number Function by kob58im (@kob58im)
on CodePen.

【TypeScript】Mockdate使って現在日時を固定化

## 背景
ladle(storybookのようなコンポーネントカタログ)にて、日時表示のバリエーションを持たせたかった。そのためには、現在日時をmock(固定化)する必要があった。

## 導入

“`terminal
$ npm install mockdate –save-dev
“`
https://www.npmjs.com/package/mockdate

## 使い方
importして、

“`typescript
import MockDate from ‘mockdate’
“`
このようにセットするだけ
“`typescript
MockDate.set(2011, 2, 11, 14, 46, 0, 0, 0)
console.log(new Date());
“`
無事に現在時刻をmockできました！
![スクリーンショット 2023-02-04 8.52.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/693502/77094edf-4857-76c3-49