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

JavaScriptでランダムな13桁のJANコードを生成する方法

検索しても、あまり良さそうなサイトが見つけられなかったため、[こちらのサイト](https://www.gs1jp.org/code/jan/check_digit.html)の「GTIN（JANコード）標準タイプ（13桁）のチェックデジットの計算方法」を参考に作成しました。

## コード

“`javascript
const createFakeJanCode = () => {
// 12桁のランダムな数字の文字列を生成
const randomString = Math.random().toString(10).slice(-12);

// ランダムな数字の配列
const numberArray = […randomString].map(Number);

// 奇数番目の要素の合計①
const oddSum = numberArray
.filter((_, index) => index % 2 === 1)
.reduce((sum, nextValue) => sum + nextValue);

// 偶数

Next.jsのApp Router対応のnext-export-i18を使った場合にCypressでuseTransrationをモックする

Next.js において、exportを使ってサイトを公開する場合の多言語化で [next-export-i18n](https://www.npmjs.com/package/next-export-i18n) を利用する場合、
next-export-i18n は Next.js のルータの仕組みを使っているため、
CypressのコンポーネントテストではRouterをモックする必要が出てきます。

next-export-i18n の 2.x.x では、基本的にPage Routerのみに対応していたため、
以下のように next/router をモックすることで、テストが可能でしたので共有いたします。

“`ts

import * as Router from “next/router”;

const router = {
query: {
id: undefined,
lang: “ja”
},
pathname: “/”,
push: cy.stub()
};
cy.stub(Router, “useRouter”).returns(r

input[type=”date”] で今日を選択する

HTMLの `` は、ユーザーにカレンダーから日付を選択させる便利な方法を提供します。

しかし、この要素のvalue属性は `”yyyy-mm-dd”` の形式で日付を受け取る必要があります。これは、JavaScriptの `new Date()` が返す日付オブジェクトと直接互換性がないため、少し手間がかかります。

この記事では、現在の日付をフォーマットし、要素の値として設定する方法を詳しく説明します。

## HTMLの準備

まず、日付入力フィールドと「今日」ボタンを含む簡単なフォームを作成します。ボタンをクリックすると、フィールドに現在の日付が設定されるようにします。

“`html

今日
送信

“`

## JavaScriptでの日

react-hook-form と zod による、基本的なバリデーション付きフォーム

## はじめに

本記事では、React 用のフォームライブラリ「react-hook-form」と「zod」の使い方を解説します。react-hook-form と zod を使えば、最小限のコードでバリデーション付きフォームを実装できます。

本記事を読むことで、以下のことが学べます。

– react-hook-form の基本的な使い方
– zod を使った基本的なスキーマ定義とバリデーション
– refine を使った高度なバリデーション
– TypeScriptでの記述時の型のポイント

※ コードのみの説明にするため、[Water.css](https://watercss.kognise.dev/) による最低限のデザインになっています。

## react-hook-form のみでシンプルなフォームを作る

まずは、名前とメールアドレスだけの簡単なフォームを作ってみましょう。react-hook-form では、`useForm`フックを使ってフォームの状態を管理します。

![Screenshot 2024-03-25 at 9.08.00.png](http

【JavaScript】Hoistingとは

# Hotistingとは
JavaScriptにおける”hoisting”（ホイスティング）は、変数の宣言や関数の定義が、そのスコープ内の先頭に移動される挙動を指します。つまり、コードが実行される前に変数や関数がメモリに割り当てられ、それらが使用可能になるということです。

具体的には、JavaScriptエンジンがコードを実行する前に、変数の宣言部分がそのスコープの先頭に移動され、初期化はそのままの位置に残ります。関数の場合も同様で、関数の宣言部分がスコープの先頭に移動されます。

たとえば、次のコードを考えてみましょう。

“`javascript
console.log(x); // undefined
var x = 5;
console.log(x); // 5

foo(); // “hello”
function foo() {
console.log(“hello”);
}
“`

このコードでは、変数`x`と関数`foo`が使用される前に宣言されていますが、実際には宣言された位置と異なる箇所で使用されています。JavaScriptのhoistingにより、実

【JavaScript】プリミティブ型とは

# プリミティブ型とは
JavaScriptのプリミティブ型は、データの基本的なタイプを表します。以下は、プリミティブ型の主な種類です：

1. **文字列 (String)**:
– テキストデータを表現します。ダブルクォーテーション (`”`) またはシングルクォーテーション (`’`) で囲まれます。

2. **数値 (Number)**:
– 数値データを表現します。整数や浮動小数点数などの数値を扱います。

3. **真偽値 (Boolean)**:
– 真(true)または偽(false)の値を表現します。条件式や制御構造などで使用されます。

4. **undefined**:
– 変数が宣言されているが、値が代入されていないことを表現します。

5. **null**:
– 値が存在しないことを表現します。変数が存在するが、何も参照していないことを示します。

6. **Symbol**:
– ES6で導入された、一意の識別子を表現します。主にオブジェクトのプロパティキーとして使用されます。

これらのプリミティブ型は、JavaSc

【JavaScript】スコープの種類

# スコープの種類
JavaScriptにおけるスコープは、大きく分けて次の3つのタイプがあります。

1. ブロックスコープ（Block Scope）:
ブロックスコープは、一般的に `{}` で囲まれた範囲を指します。JavaScriptでは、`let` や `const` キーワードで宣言された変数はブロックスコープを持ちますが、`var` キーワードで宣言された変数はブロックスコープを持ちません。

“`javascript
{
// ブロックスコープ
let blockVar = “I am a block scoped variable”;
const blockConst = “I am a block scoped constant”;
var globalVar = “I am a global variable”;
}

console.log(blockVar); // エラー: ブロックスコープ外からはアクセス不可
console.log(blockConst); // エ

【JavaScript】スコープとは

# スコープとは
JavaScriptにおけるスコープ（scope）とは、変数や関数が参照可能な範囲を指します。スコープは、変数や関数が定義された場所によって決まります。JavaScriptでは、主に次の2つのスコープがあります。

1. グローバルスコープ（Global Scope）: グローバルスコープは、どこからでもアクセスできる最も外側のスコープです。スクリプト内のどこからでもアクセス可能な変数や関数がグローバルスコープに定義されます。ただし、モジュール内や関数内で `var` や `function` を使わずに変数や関数を定義すると、それらはグローバルスコープではなくモジュールスコープやローカルスコープになります。

“`javascript
// グローバルスコープ
var globalVar = “I am a global variable”;

function globalFunction() {
console.log(“I am a global function”);
}
“`

2\. ローカルスコープ（Local Scope）: ローカルスコープ

プロトタイプとは

# プロトタイプとは
プロトタイプ（Prototype）は、JavaScriptにおいてオブジェクト指向プログラミングの特徴の1つです。通常のクラスベースのオブジェクト指向プログラミング言語とは異なり、JavaScriptではプロトタイプベースのオブジェクト指向が採用されています。

プロトタイプは、オブジェクトが持つメソッドやプロパティの元となるオブジェクトのことを指します。すべてのオブジェクトは、プロトタイプを持っており、プロトタイプからメソッドやプロパティを継承します。

例えば、次のようにオブジェクトを定義することができます。

“`javascript
// Personオブジェクトの定義
var Person = {
// プロパティ
name: “John”,
age: 30,
// メソッド
greet: function() {
return “Hello, my name is ” + this.name + ” and I’m ” + this.age + ” years old.”;
}
};
“`

この`Person`オブ

【非同期処理】について学習したのでまとめてみた

# はじめに
非同期処理について曖昧だったので、アウトプットも兼ねて説明していきます。

# 同期処理と非同期処理
同期処理は、コードが上から順に実行される方法です。例えば、処理1、処理2の順番で処理が記述されている場合、処理1が完了してから処理2が実行されます。

一方、非同期処理では、処理が終わるのを待たずに次の処理が行われます。つまり、処理1を実行中に処理2も同時に実行されます。

非同期処理の利点は、処理が待機されずにすぐに次の処理が行われるため、全体の処理が速くなることです。

# 非同期処理の実行
非同期処理を実行するために、JavaScriptでよく使われるのがsetTimeout関数です。これは一定時間後に特定の処理を実行するためのタイマー機能です。

以下にsetTimeout関数の例を示します。
“`react
setTimeout(() => {
console.log(‘こんにちは’);
}, 1000);

setTimeout(() => {
console.log(‘こんばんは’);
}, 1000);
“`
このコードでは、1秒後に同時に「こ

デメテルの法則とは

# デメテルの法則とは
デメテルの法則（Law of Demeter）は、オブジェクト指向プログラミングにおけるソフトウェアデザインの原則の一つです。この法則は、オブジェクト間の結合を緩やかにすることを目的としています。

デメテルの法則は、次のように表現されます。

「モジュールは、他のモジュールに直接の依存を持たないようにすべきである。」

より具体的には、以下のような原則に基づいています。

1. メソッドは、自身のクラス、引数として渡されたオブジェクト、メソッドで生成またはインスタンス化されたオブジェクト、その属性にのみメッセージを送信するべきです。メソッドがこれら以外のオブジェクトにメッセージを送信する場合、それはそのオブジェクトとの結合を強めることになります。
2. メソッドは、引数として渡されたオブジェクトのメソッドのみを呼び出すべきであり、そのオブジェクトの属性には直接アクセスすべきではありません。
3. メソッドは、自身のクラスに属する属性やメソッドにのみアクセスすべきです。他のオブジェクトの属性やメソッドに直接アクセスすることは避けるべきです。

# まとめ
デメテ

JavaScript の Markdown パーサを選定したい…

:::note alert
書きなぐりです… まだ書きかけです… リンクとかぐちゃぐちゃです…
:::

目次

2. Markdown パーサ
3. Markdown 方言
4. サービス, SSG が採用しているパーサ
5. ライブラリが採用しているパーサ
6. 独自記法を定義することについて
7. そのほか

【JavaScript】そういうことか！DOM操作！（ドロップダウンメニューを作ってみた）

# はじめに
この記事はJSの学習を始めて1週間の初心者が学んだことを備忘録的に書いたものです。間違っている点などがあれば、コメントで教えていただけると幸いです(__)

本記事では、よく使うDOM操作についてまとめた上で、実際にドロップダウンメニューを作ってみようと思います！

# DOMとは
そもそも、DOMって何？って話なんですよね。。

現段階の私のイメージとしては、

**「HTMLの構造が格納されている箱」**

です。

DOM操作では、その箱の中身(HTML要素)に変化を加えることで、Webページを動的なものにしてくれます。

# DOM操作
DOM操作でよく使うメソッドを紹介していきます！

### 1. document.querySelector() , document.getElementById()
– **querySelector**
このメソッドはCSSセレクターを使ってHTML要素を取得できます。
ただし、一致する最初の要素だけを取得してくるため、一致するすべての要素を取得したいときは、**querySelectorAll**を使います。

– **

swagger-uiでOpenAPIをGitHub Pagesに公開する

# はじめに
今回は前回作成した、OpenAPIをSwagger-uiというツールを使用しGitHubPagesに公開していきたいと思います。
前回の記事はこちら

https://qiita.com/rikuya98/items/504f7a8385349fda0a46

## Swagger UIとは

https://swagger.io/tools/swagger-ui/

公式より引用
>Swagger UI allows anyone — be it your development team or your end consumers — to visualize and interact with the API’s resources without having any of the implementation logic in place. It’s automatically generated from your OpenAPI (formerly known as Swagger) Specification, with the visual docume

YouTubeのチャンネル登録を一斉解除するJavaScript

## Youtubeのチャンネル登録を整理したかった
* チャンネル登録の要否をひとつずつ判断するのも面倒
* だったら一旦すべてのチャンネル登録解除して本当に必要なものだけ再登録しよう
* デフォルトの機能だと一括チャンネル登録解除はできなかった

## 開発者ツールから簡単に実行できるJavaScript使う
1. 対象のGoolgeアカウントにログインする
1. こちらのURLにアクセスする　https://www.youtube.com/feed/channels
1. 開発者ツール>Consoleタブに下記のスクリプトを貼り付けて実行

“`
function unsubscribeFromAllChannelsWithTextClick() {
const unsubscribeButtons = document.querySelectorAll(‘#notification-preference-button > ytd-subscription-notification-toggle-button-renderer-next > yt-button-s

YouTubeみたいな動画を作成できるhtml,css,Javascriptの紹介(未完成品)参考

htmlで、何とかしたい、という願望から組み始めました。まだ、サイズは小さいですが。大きくすると投稿できないという、難点のもとで組んでいます。

現在出来ているのが下記の通りです。

@otomachiuna こんな感じでミニが出来ています。 pic.twitter.com/66YxufuBWg

— Tattyan(Tachan)🇯🇵 (@Tattyan_03) March 24, 2024

スクリプの紹介。未だ出来上がっていません。

“`html







<

ReactでSVG要素をドラッグして移動、拡大縮小

# はじめに
ReactでSVG要素を書いてそれをドラッグしたくなったのですが、自分で`onMouseDown()`とか書くのは嫌だなぁと思いました。
何度かやったことがありますが細かいところでめんどくさいです。マウスダウンしたまま、ウィンドウの外に出した場合とか、移動しすぎ、拡大縮小しすぎた場合とか、やってみるとたくさんあるんです。

こんなの誰かがモジュール作ってくれてるでしょうと思ったらやはりありました。今回、この`react-zoom-pan-pinch`の使い方をさらっと説明します。インストールとか割愛。

https://www.npmjs.com/package/react-zoom-pan-pinch

今回の私のコードは下記。(canvasって名づけてしまったけどsvgです）

https://github.com/yo16/react_canvas_prac

# 使い方
“`JavaScript:MySvg1.js
import { TransformWrapper, TransformComponent } from ‘react-zoom-pan-pinc

JavaScript基礎①

学校で学んだJavaScriptの基礎の振り返りを作成していきます。
あくまでも個人メモであることをご了承ください。

まずJavaScriptはインタプリタ言語です。

:::note info
プログラムを逐次解釈しながら実行する言語のこと
:::

JavaScriptではJIT(Just-In-Time)コンパイラを利用して実行します。

JavaScriptを最低限利用するするには
テキストエディタとWebブラウザが必要です。

JavaScriptのプログラムはScriptタグ内()に記述します。

“`html:sample001.html

“`

また、JavaScriptのプログラムを外部ファイルに定義しておき
HTMLに組み込んで利用することもできます。
その場合は「src属性」を利用します。

“`html:sample002.html


```
`01234`が表示されると思ったら大間違いです。本当です信じて下さい。発動順はimg、iframe、svgとなります。配置場所は無関係です。
最後のbody要素のonloadはscript要素により書き換わっています。逆にhead要素にscript要素を記述している場合はbody要素のonloadがそのまま発動します。
さて、そうなると`1423`が表示されるのでしょうか? あいにくとそういう訳にはいきません。
何と最終的に1のみ表示されます。何でもしませんから信じて下さ