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

【初心者向け】プログラミング言語を日本語として理解する

## 概要
プログラミングを始めたばかりで中々覚えることができない。
色んな言語を触りたいけど一から勉強するのは疲れる。
とりあえず実装できたけど正直どう動いているのか理解していない。
過去この様なことを経験して悩んでいましたが、「日本語として理解」したら思いのほか簡単に解決できたのでこの記事ではTypeScriptの記述でどういったことなのかを説明します。※TypeScript限定ではないです。
今後のプログラミングの勉強や新しい言語取得への手助けになればと思います。

## この記事で取り上げるもの
– 変数
– 条件分岐
– ループ

## プログラミング言語の日本語化
### 変数
TypeScriptやjavascriptで言えば **”let name”**、**”const name”**、**”var name”**。
phpは **”$name”**、Pythonは **”name”** といった感じで変数を定義します。
変数名からどいったものかはある程度理解できますが、経験からすると変数の意味をちゃんと理解していないとバグを生み出すことが多々あります。
今回のパター

イベント処理について簡潔にまとめます【初級編②】

# はじめに
今回は、JavaScriptのイベント処理について詳細をまとめていきます。JavaScriptのイベント処理は、ユーザーの操作やブラウザの動作に対して、特定のアクション（処理）を実行する仕組みを指します。

# イベント処理の基本
## イベントとは
特定の状況や操作が発生したことを示します。主なイベントには以下のようなものがあります。

“`js
click: // ユーザーが要素をクリックしたとき
mouseover: // ユーザーが要素にマウスカーソルを乗せたとき
keydown: // キーボードのキーが押されたとき
submit: // フォームが送信されたとき
load: // ページや画像が完全に読み込まれたとき
“`

## イベントリスナーとは
イベントが発生したときに実行される関数を「イベントリスナー」と呼びます。このリスナーは、特定の要素に「待ち構える」形で設定します。

# イベント処理の構文
“`js
element.addEventListener(‘イベント名’, 実行する関数); // イベントリスナーの設定
“`

## 例１）

CLIのプログレスバーを作ってみた

## はじめに

皆さん、こんにちは。株式会社BTMの風間と申します。

今回はCLIで動くプログレスバーを作成してみました。
実際に作ったのはこちら。


コンソール（ターミナル）で、yum、apt、brewなどを利用したパッケージのインストールをされたことがある方は、こういった進行状況の表示をよく見ていると思います。

この進行状況の表示方法に以前から興味があったので、実際に作ってみて、使った方法をまとめてみました。

:::note info
本記事で紹介する実装・実行は以下の環境にて行いました。
・Windows11
・WSL2（Ubuntu 22.04.3 LTS）
・Node.js 20.11.1
・Git Bash（推奨ウインドウサイズ Columns:80 x Rows:20）
:::

## 実

JimdoRepeatプラグインの製作メモ

# はじめに
ある機会でjimdoブログを知りました。アメバはいつも使用しています。この記事はブログにyoutube動画を埋め込んだ時に、リピート機能も付けたいと思い、ブログインとして作成したときのメモです。
アメバはすでに作成済みですが、今回、jimdo版も作成したいと思い作成することにしました。
リピート機能はすぐに作成できました。そこで、さらにもう一つの機能も追加しようとして、いろいろな困難に出会いましたので、その製作記録をメモしました。

# 追加した機能
今回、追加した機能は、jimdoブログに複数の動画を埋め込んだ時に、動画の再生/一時停止ボタンが連携して動作するプラグインです。
この機能が必要になった理由は、一つの動画を再生する場合、他で再生中の動画は自動で一時停止にしたいと思ったからです。
jimdoも、アメバもそうですが、この複数動画が連携して動作する機能はありません。そのため、製作することにしました。

# テスト画面
先に、今回、作成したテスト画面から見てみます。以下がその画面です。
(1)ブログページ
jimdoのブログぺージを開き、この画面を表示します。
UR

DOMをキャプチャしてPDFで保存する方法

## はじめに

DOMを画像としてキャプチャし、PDFに挿入してダウンロードする方法を備忘録として残します。

## 使用モジュール

以下のモジュールを使用します。

### html-to-image

バージョン：1.11.11
DOMを画像に変換できる

### jspdf

バージョン：2.5.1
PDFを生成・保存できる

## コード

“`typescript
import { toBlob } from ‘html-to-image’;
import { jsPDF } from ‘jspdf’;

// blobファイルを読み込む
const readBlobAsDataURL = (blob: Blob) => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => {
const result = reader.result as string;
resolv

【Javascript】乱数～ランダムな数字を出力する～

“`ruby:0～1の間でランダムな数が出る

var randnum = Math.random();
console.log(randnum);

出力例
0.87420719877558
0.16926314395231623
“`
“`ruby:0～10の間でランダムな数が出る
var randnum = Math.random()*10;
console.log(randnum);

出力例
4.8754318842710065
8.9099030485857
“`
“`ruby:0～10の間でランダムな整数が出る
var randnum = parseInt(Math.random()*10);
console.log(randnum);

出力例
3
9
“`

“`ruby:1～3の間でランダムな数が出る
var randnum = parseInt(Math.random()*3) + 1;
console.log(randnum);
“`

“`ruby:5～7の間でランダムな数が出る
var randnum = parseInt(Math

JavaScriptのprintデバッグは{variable}形式が便利

JavaScript や TypeScript で print デバッグを行うとき、確認対象と変数名を一緒に表示するためにラベル用の文字列をつけて表示することがあるかと思います。例えば以下の感じ。

“`javascript
const cat = { emoji: ‘🐈’ };
const dog = { emoji: ‘🐕’ };
console.log(‘cat: ‘, cat); // -> cat: { emoji: ‘🐈’ }
console.log(‘dog: ‘, dog); // -> dog: { emoji: ‘🐕’ }
“`

このとき、[オブジェクトの値の省略記法](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer#%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E3%81%AE%E5%AE%9A%E7%BE%A9)を使うと便利です。

これは「キーと同じ名称の変数を値にとる

State of Javascript 2023をかいつまんで読んでみた

[State of Javascript 2023](https://2023.stateofjs.com/en-US/)がついに公開されてました。
2024年もあと4ヶ月経てば2025年になってしまうので、今年は来ないと思いましたがまさかこのタイミングでくるとは思いませんでした。

やっと去年の状況を見ることができると思い、早速読んでみました。

1. 今年の各フレームワークの人気ランキング
2. 新しいフレームワークの登場の確認

# 1. 今年の各フレームワークの人気ランキング
[Front-end Frameworks Ratios Over Time](https://share.stateofjs.com/share/prerendered?localeId=en-US&surveyId=state_of_js&editionId=js2023&blockId=front_end_frameworks_ratios&params=&sectionId=libraries&subSectionId=front_end_frameworks)

![image.png](htt

スーパーコンピューティング。GPUの綾波。意味　重なり合う波。10^8乗の計算スピードの世界。



重なり合う波を描画するためのHTMLコードを、Three.jsを使用して作成します。Three.jsはWebGLをラップしたJavaScriptライブラリで、3Dグラフィックスを簡単に描画できます。以下のコードでは、複数の波を表現するためにPlaneGeometryを使い、シェーダーで波の動きをシミュレートします。

1. はじめに
Three.jsは、WebGLの機能を簡単に扱えるJavaScript

サイト模写を通じたWeb開発学習: CSS, HTML, JavaScriptの活用法

Web開発の基礎技術であるCSS、HTML、JavaScriptを使い、実際に既存のサイトを模写する学習に挑戦しました。この記事では、その学習プロセスを要約し、特にIDやクラスの使用、スタイルの適用、そしてJavaScriptによる動的な機能の追加に焦点を当てています。

## **HTMLの基礎**

HTMLはウェブページの骨組みを構築するための言語です。HTMLを書く際には、**`

`**、**`

`**、**`

【TypeScript + Vite】今すぐ誰でも、ローカルで GoogleAppsScript の開発を始められるテンプレート (初心者向け)

# 🏰 作ったもの
ローカルで TypeScript を使った GoogleAppsScript の開発を
**今すぐ・誰でも**はじめられるテンプレートです。

▶︎▶︎▶︎ **TypeScript で GoogleAppsScript の開発を始めるテンプレート** ◀︎◀︎◀︎

できるだけプロジェクトの内容をシンプルにするために
『TypeScript で GoogleAppsScript の開発をする』
ことに関係のないものはプロジェクト内にほとんど含めていません。

過去の僕がファイル数が多くなると
どのファイルが何に効いているのか分からなくなって思考停止してしまうマンだったため、
過去の僕向けに作った結果、シンプルになりました。

# 🙋‍♀️ 対象者

下記のような願望を持っている、
何度か GAS 開発をやったことがある人を想定しています。

–

wikidata からmermaid記法で家系図を作成（ブラウザ版）

# 概要
– wikidata の Q番号（P5(ヒト)だったら）から、子孫、先祖をたどって、jsonで抽出
– ネットワークの幅優先探索(BFS)と深さ優先探索(DFS) を使って範囲を絞る
– markdownのmermaid記法を使って、家系図のようなものを表示する
– ブラウザのみで動きます

# デモページ
次のページで試してみてください。
https://wonox.github.io/pedigree/bfs_test.html

# python版
以前書いた、
[wikidataからnetoworkxをかましてmermaid記法で紫式部の系図を作成](https://qiita.com/wonox/items/f310839480e8eb7a9e01)
をjavascriptで書き直しました。
基本的なロジックは、このputhon版と同じです。

# bfsとdfs
以下をほぼそのまま使わせていただきました。ありがとうございます。
[グラフとBFS(幅優先探索)・DFS(深さ優先探索)をJSで実装してみる](https://qiita.com/oimo23/items

JavaScript オブジェクトから特定のプロパティを変数へ取り出す方法

## JavaScript オブジェクトから特定のプロパティを変数へ取り出す方法

スプレッド構文と分割代入を応用すると、あるオブジェクトからほしい値だけを、変数代入することができる（学習メモ）

“`javascript
const profile = {
name: ‘taro’,
age: 27,
address: ‘tokyo’
};

const {address, …other} = profile;
console.log (address); // => tokyo
console.log (other); // => {name: ‘taro’, age: 27}

“`

Micrsodft Edgeで表示されているページをHTMLで保存するブックマークレット

# 目的
保存した日時をファイル名に入れる
改行コードをcrlfに変換する
# ブックマークレットと「名前をつけて保存」の違い

|項目|ブックマークレット| 名前をつけて保存(html/単一のページ)|
|:—-|:—-|:—-|
|文字コード|UTF-8|UTF-8|
|改行コード|LF|LF|
|ページの構成|不正確|正確|

例えば次のYahooのニュースページ
https://news.yahoo.co.jp/articles/dd13b8c3585149ceed02f56023b0aeb890deb726
を取得し、ブラウザで表示させると、次のように異なる。最も写真はブラウザが上記のURLから取ってきているので、写真自体は消える可能性がある。

### 名前をつけて保存


### ブックマークレット

![image.p

マイジオ（MyGeo）を作ってみた。（Youは、自分が作ったGeoデータをどうやって外出先のスマホ・タブレットで見る？）

【マイジオ】
https://office-shirado.com/mygeo/

「Youは、自分が作ったGeoデータをどうやって外出先のスマホ・タブレットで見る？」

そんな素朴な疑問を自分に投げかけ、「あっないかもｗ」ということで、新しいＷｅｂ地図を作成しています。

いつも通り、「自分が使うＷｅｂ地図」を目指しています。
Ｗｅｂ地図（ＷｅｂＧＩＳ）のベースは、MapLibreで、データはMySQLのテーブルに入れています。

技術的なことを簡単に言うと、ローカルファイル（SIMA・GeoJS

パイプライン演算子のない言語でパイプライン演算もどき(関数の連鎖)を実現する方法

# はじめに
カリー化を理解しようとサンプルを考えていたら、パイプライン演算子もどきの関数を思いついたので紹介します

# パイプライン演算子とは
最近お気に入りのjuliaという言語では関数を連鎖的に実行してくれるパイプライン演算子という構文があります

https://ja.wikipedia.org/wiki/%E3%83%91%E3%82%A4%E3%83%97%E3%83%A9%E3%82%A4%E3%83%B3%E6%BC%94%E7%AE%97%E5%AD%90

“`julia:juliaの例
const HALFWIDEDIFF = ‘ａ’ – ‘a’
function toWideChar(str::String)
return replace(str, r”[a-zA-Z0-9]” => x -> Char(codepoint(x[1]) + HALFWIDEDIFF))
end
function toHalfChar(str::String)
return replace(str, r”[Ａ-Ｚａ-ｚ０-９]” => x -> Char(codepo

オプショナルチェイニング演算子の理解とその効果

※自分の学習メモとしても残しております。

オブジェクトに属するメソッドにアクセスするには、ドット演算を利用するのが基本。

オプショナルチェイニング演算子（?.）がない場合にエラーとなる理由は、null や undefined に対してメソッドを呼び出そうとすると、JavaScriptはそのオブジェクトが存在しないため、エラーを投げるからです。

## オプショナルチェイニングがない場合の動作
次のコードを例に考えてみます。
“`
const str = null;
console.log(str.substring(3));
“`
この場合、str は null であり、substring(3) メソッドは null には存在しないため、以下のようなエラーが発生します。

“`
TypeError: Cannot read properties of null (reading ‘substring’)
“`

### エラーが発生する理由

1. **null や undefined にはプロパティやメソッドがない**
null と undefined は特別な値であ