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

ジンドゥーで鍵付きブログができないから、microCMSで近いものを作ってみたい

## 概要

ジンドゥークリエイターでは、パスワード認証のページ（パスワードを知っている人だけが見られるページ）を作れます。
また、ブログを作ることもできます。

ところが、ブログにパスワード認証をかけることはできません。

そこで、パスワード認証をかけたシングルページの中に、microCMSで作ったブログを入れてしまおうと考えました。

## microCMS側の作業

（アカウントの作成手順は省略します）

1. サービスを作成の画面で、一から作成するを選択します。
1. サービス名、サービスIDを決めて、サービスを作成します。
このとき、【サービスID】をコピーしておいてください。
1. サービスにアクセスしたら、APIを作成します。
とりあえず、ブログを選びました。
1. しばらく待つと、APIが作成されます。
1. 画面右上に、API設定があると思うので、そこをクリックしてください。
【エンドポイント】があると思うので、コピーしておいてください。
1. 画面左下に、1個のAPIキーというところがあるので、そこをクリックしてください。
【APIキー】を、コピーし

即時実行関数式（IIFE）とは何か？JavaScript で書く基本と応用


## 概要

JavaScript には即時実行関数式（IIFE）[^1]という関数式が存在します。
定義されるとすぐに実行される特徴があり、即時実行関数式を使うと様々な応用ができます。

今回の記事では JavaScript の即時実行関数式に焦点を当て、その応用例について考えていきたいと思います。

**この記事を読んでわかること**

– JavaScript の即時実行関数式の使い方

**対象読者**

– JavaScript 初心者
– JavaScript に

【JavaScript】買い出しメモアプリ

localStorageを使用した、簡易メモアプリです。
個人的にスーパーでの食品買い出し用に使いたくて作成。
自分が欲しい機能のみなので、順序入れ替えや個数入力欄などはありません。


各項目左のチェックボックスは単にテキスト背景をグレー表示させるだけのもので特別な機能はありませんが、私は買い物中の購入済みチェック用に使っています。

—-

#### [動作デモ](https://akebi.jp/temp/memo.html) ####

“`html:index.html

Promiseから学ぶJavaScript非同期処理

Promise の使い方がやっと少しつかめたのですが、きっとまた忘れてしまうので、忘れてしまった自分用に解説する記事を書いておきます。
ちなみに JavaScript の非同期処理では async / await がよく使われると思いますが、これは Promise をきれいに書くためのシンタックスシュガー(糖衣構文)で、何か新しいことをしているわけではありません。よって、まずは Promise を理解することが大切だと思いました。

## 目次

[1. 非同期処理と同期処理](#1-非同期処理と同期処理)
[2. Promiseの基本](#2-promiseの基本)
[3. Promiseを使う](#3-promiseを使う)
[4. Promiseを作る](#4-promiseを作る)
[5. 参考](#5-参考)

## 1. 非同期処理と同期処理

Promise は、非同期処理で使うものです。
まずは非同期処理と同期処理について整理しておきます。

### 同期処理

非同期処理の前に、まずは同期処理について説明します。同期処理は、プログラムを上から順番に実行

[JavaScript]イベント処理 初心者

# 1. はじめに

本記事では、JavaScriptのイベント処理についてをまとめていきます。

JavaScriptのイベント処理には3種類の書き方があります。それぞれの特徴を整理し、どのような場面でどのような記述方法を用いることが適切かを判断できるようになれればと思います。

# 2. イベント処理の種類

“`html

click



“`

上記のHTMLファイルを例として説明していきます。

実現したい処理としては、`

Webで現在地取得

webで現在地を取得します
こちらの[参考サイト](https://tech.mychma.com/javascript-geolocation-api/1956/#index_id7)よりコードを引用します。

“`js
navigator.geolocation.getCurrentPosition(function(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
console.log(“緯度:” + latitude + “, 経度:” + longitude);
//　緯度:30.0000000, 経度:130.0000000
});
“`

私の場合は小数点第7位まで測定できました。
[緯度と経度から現在地を調べられるサイト](https://user.numazu-ct.ac.jp/~tsato/webmap/sphere/coordinates/advanced.html)を使用しましたが、誤差数メートルです

“create-react-app”を使用せずにReactプロジェクトを作成する

# はじめに
この記事は、個人開発の際に得た知識を、いつでも見返せるように保存する目的で使用しているため、言葉足らずかつ不適切である箇所が多々あるかと思います。気付いた箇所がありましたら、ご一報いただけると幸いです。

`create-react-app`を用いてReactアプリケーションを作成する場合、細かい設定を気にせず開発をスタートできるのは非常にありがたい機能です。しかし、それら設定が隠匿されているおかげ、裏で動作している機能を理解する機会を失っているのも事実です。そのため、`create-react-app`を使用せずにReactアプリケーションを構築していきます。

# 前提
Node.jsをすでにインストール済みであると仮定します。

# 内容
適当なディレクトリを作成し、その中で開発を行います。名前はお好きなもので結構です。その後、作成したディレクトリに移動してください。

## Nodeプロジェクトを作成する
Nodeプロジェクトを作り、`package.json`ファイルを生成します。以下のコマンドを実行してください。
“`shell
$ npm init -y

JavaScript イベントと関数について

Javascriptの、イベント・イベントハンドラ・関数との紐付けについて学習した。
同じ事を何回も調べたり、理解が難しかったりした部分を記録しておく。

# イベントとは
ユーザーが何かの操作をしたことを知らせるJavaScriptの機能。
* ボタンをクリックすると画面をスクロールしてトップに戻る
* ボタンを押すと、ポップアップが表示される
* 画像が時間経過で変わる

などなど、webサイトでよく見る機能はJavaScriptを使えば実装できる。
# イベントハンドラとは
イベントが発生したときに実行する関数を関連付ける方法。
`on + イベント名`という形になっている。
| イベントハンドラ | 説明 |
|:-:|:-:|
| onclick | クリックされたとき |
| onchange | 内容が変更されたとき |
| ondbclick | ダブルクリックされたとき |
| ondrag | ドラッグされたとき |
| onkeypress | キーボードのキーが押されたとき |
| onload | ページが読み込まれたとき |
| on

二点間測地線距離（地球上）：各方法の誤差

こんにちは。
回転楕円体面上（地球上）の二点間測地線距離を計算する各方法の最大相対誤差の距離依存性を調べました（下記チャート）。

処理および各計算法は「[測地線距離計算式・計算ライブラリの精度評価](https://www.330k.info/essay/geodesic_distance_formula_comparison_2/)」（330K INFO）からそっくり拝借して使い、入力データは楕円体面上に稠密に二点を発生させ、その際 GeographicLib を利用し距離を与えています。

### 各計算法
* **Spherical**: Menelaus of Alexandria (about 100); Great-circle distance – Wikipedia; 通称 haversine
* **Flat-surface-ellipsoidal**: Newton, Cassini (1713); 起源探究は断念しました;

レーザーポインターのブックマークレット

### ソースコード

以下をブックマークに登録

“`js
javascript: {
document.addEventListener(‘mousemove’, (event) => {
let circle = document.createElement(‘div’);
circle.style.width = ’10px’;
circle.style.height = ’10px’;
circle.style.background = ‘red’;
circle.style.borderRadius = ‘50%’;
circle.style.position = ‘absolute’;
circle.style.left = `${event.clientX}px`;
circle.style.top = `${event.clientY}px`;
circle.style.opacity = ‘1’;
document.body.appendChild(circle);

setTimeout(() => {
c

変数のスコープ JavaScriptとPHPの違い

## JavaScript(letとconst)
1. {}でエリアが形成される
1. 内のエリアで、外のエリアで宣言された変数を扱うことはできる
1. 外のエリアで、内のエリアで宣言された変数を扱うことはできない
1. 外の複数のエリアで同名の変数が宣言されているとき、最も近いものが扱われる
#### 3. 内のエリアで、外のエリアで宣言された変数を扱うことはできる
“`test.js
const a = ‘aaa’
{
console.log(a) // aaa
}
“`
#### 2. 外のエリアで、内のエリアで宣言された変数を扱うことはできない
“`test.js
{
const b = ‘bbb’
}
console.log(b) // ReferenceError: b is not defined
“`
##### 4. 外の複数のエリアで同名の変数が宣言されているとき、最も近いものが扱われる
“`test.js
const a = ‘a1’, b = ‘b1’
{
const a = ‘a2’
console.log(a, b)

【初学者】Reactにおけるスタイリング方法をまとめてみた

# はじめに
はじめまして！りかと申します。
現在、RUNTEQにてプログラミングを学習しています。

12月に開催される「RUNTEQ祭」というイベントに向け、チーム開発を行いました。
その中で`React`を使用した際に、スタイリング方法が複数あることを知ったため、それぞれの概要・メリット・デメリットを調べてみました。

【チーム開発】2人協力型のホラー×謎解きゲーム「[MISERY](https://misery-seven.vercel.app/)」

https://misery-seven.vercel.app/

※一部音声が流れます

# 注意点
::: note warn
私はプログラミング学習中で、初学者です。
内容に誤りがある場合がございます。
もし間違いがあればご指摘いただけますと幸いです。
:::

# 目次
– インラインスタイル
– CSS Modules
– CSS in JS
– Tailwind CSS
– UIコンポーネントライブラリ

## インラインスタイル
インラインスタイルは、スタイルを`JavaScript`オブジェクトとして定義し、コン

【JavaScript】forEach, map, filter の前に、アロー関数とコールバック関数を押さえよう

## はじめに

配列のメソッドである`forEach`, `map`, `filter`がよくわからない！っていう人は、もしかしたらアロー関数とコールバック関数の理解があやふやなのかもしれません（私はそうでした。。）

この記事では、まず従来の関数の書き方を復習してから、アロー関数とコールバック関数について説明します。

その後、`forEach`, `map`, `filter`について説明していきます。

## 従来の関数の復習

まず、（アロー関数でない）従来の関数の書き方を復習しておきます。

### 関数宣言

関数はこのように宣言します。

“`javascript
function fn() {
// 関数が呼び出された時の処理
}
“`

### 関数式

数値や文字列等と同じように、**関数自体も変数に代入できます**。
関数を変数に代入している式を**関数式**と言います。

“`javascript
const fn = function() {
// 関数が呼び出された時の処理
}
“`

この変数に代入された関数式は名前を持たない[^

Javascriptで簡易的にモーダルを実装してみる

## はじめに
現在Javascriptを学習中で、簡易的にモーダルを実装してみました。

## 実装
### HTML
“`html







　　　　
モーダルを開く

✖︎
<

【JavaScript】「…array」ってなんだ？？

## はじめに

ES2015で追加された、配列の前に出てくる`…`について整理してまとめます。

**`…`は実は2種類あります**。これが混乱の元です。
– Spread構文：配列を展開する
– Rest parameters： 配列をまとめる

## Spread構文

Spread（広げる）という名の通り、**配列を展開します**。

たとえば、配列`array1 = [1, 2, 3]`を`1, 2, 3`に展開できます。

“`javascript
const array1 = [1, 2, 3];

// そのまま
console.log(array1) // (3) [1, 2, 3]

// Spread構文で展開
console.log(…array1) // 1, 2, 3
“`

### 例1

Spread構文で配列を渡せば展開してくれます。

“`javascript
const add = (num1, num2, num3) => {
console.log(num1 + num2 + num3);
};

// Spread構文な

「スクリーン上でブラウザのウィンドウを動かしたら描画に影響」「2つのブラウザのウィンドウの一方を動かすと他方に影響」という方向の実装作品の技術メモ

自分が観測していた中では、以下のポストが発端になっていると思われる話です。
この作品にインスパイアされた作品を作られた方も見かけていて、その作品や技術面のメモを残したく、記事を書きました。

Entangled #fxhash pic.twitter.com/SrD0oAQpUJ

— 𝕭𝖏ø𝖗𝖓 𝕾𝖙𝖆𝖆𝖑 (@_nonfigurativ_) November 22, 2023

## 技術的な部分について
「素敵な作品だなー！」と思って、も「し実装するとしたら必要そうなものは何か」と考えたら、「スクリーン内のブラウザのウィンドウの位置を取得する仕組み」と、「異なるページ間で情報をやりとりする仕組みがあれば良さそう」と思いました。

### ページ間の通信の仕組み
上記の 2つの技術のうち、「異なるページ間で情報をやりとりする仕組み」については、別端末間で IoT の仕組み（技術的には MQTT）を使って、こんな試作などをやったことがありました。

先日、 #p5js のプログラムにリアルタイム通信の仕組み（WebSocket、MQTT）を試しに組み込んだものを活用して、MacBook と iPad の間でのリアルタイム通信を試した！

MacBook のブラウザと iPad のブラウザの表示領域との間を、動く円が行き来するような表示がされるプログラムを書いてみた。 pic.twitter.com/DgHpIdBljF

— you (@youtoy) August 20, 2021

また、同じ端末内で同じブラウザのタブ間などであれば、自分が以下の記事で書いていた仕組みを使って

ReactのHooksを理解しよう：基本から応用まで

## 1. はじめに
ReactはFacebookが開発したJavaScriptライブラリで、ユーザーインターフェースを構築するためのものです。HooksはReactのバージョン16.8から導入され、関数コンポーネントでステートやライフサイクルフィーチャーを使用できるようになりました。

## 2. React Hooksの基本
### 2.1 Hooksとは？
Hooksは関数コンポーネント内でReactのステートやライフサイクルフィーチャーを使用するためのAPIです。これにより、クラスコンポーネントを使用することなく、ステートやライフサイクルメソッドを利用することが可能となります。

### 2.2 useStateについて
useStateはステートを関数コンポーネントに追加するためのHookです。useStateはステートの現在の値と、その値を更新するための関数のペアを返します。

“`jsx:App.js
// Reactとその内部のuseStateフックをインポート
import React, { useState } from ‘react’;

// Appという名前

[JavaScript]Setオブジェクト

:::note
`Set`オブジェクトはプリミティブ値やオブジェクト参照を問わず、あらゆる型で多数の一意の値を格納することができる。
:::

#### `Set`オブジェクトの特徴
* 値のコレクション
* 重複する値は格納できない
* その要素について挿入順で反復処理を行うことができる
* 挿入順は、各要素が`add`メソッドで正常に挿入された順番に対応する
* `has`メソッドは、値が`Set`内にあるかどうかをチェックする

#### 関連メソッド
* `Set()`
* 新しい`Set`オブジェクトを生成する
* `size`メソッド
* `Set`オブジェクト内の値の数を返す
* `add`メソッド
* `Set`オブジェクト内に同じ値を持つ要素がまだ存在しなかった場合、指定した値を持つ新しい要素を`Set`オブジェクトに挿入
* `delete`メソッド
* `value`に関連した要素を取り除き、要素の削除に成功したかどうかを示す論理値を返す

参照

https://developer.mozilla.org/ja/docs/

【Flask】 画像をファイルパスではなく画像データとしてJavaScriptに渡しブラウザに表示する方法

# はじめに
– Webブラウザ上に画像を表示したいとき、通常であればサーバーに保存した画像のファイルパスをフロントに渡すことで表示を行うかと思います。
– しかし、ファイルパスではなく画像そのものをフロントに渡してブラウザ上に表示したいことがあるかもしれません。（まあ、あんまりないですよね。僕はあったので書いているわけですが。）
– そこで今回は画像をファイルパスではなくデータとしてフロントに渡す方法を解説します。
– 具体的には、サーバーに保存した画像をFlaskでJavaScriptに渡し、HTMLに埋め込むまでの流れを説明します。

# 環境
バックエンド：Flask
フロント：JavaScript・HTML

# 手順
1. サーバーサイドに画像を用意
2. FlaskからJavaScriptに画像を渡す
3. JavaScriptで画像を受け取りHTMLで表示

## 1. サーバーサイドに画像を用意
– 何らかの方法で用意した画像ファイルが既にサーバーに保存されている前提で話を進めます。
– static/images こんな感じで画像フォルダがある想定です。

## 2

React18.2.0対応　JSX記法を丁寧に学ぶ　Hello World表示まで

# 目的
Reactを自己学習しています。「React最新バージョン18.2.0を学ばないと！」と思い、一通り一から復習をしています。最初の関門であるJSX記法についての自分への備忘録として記します。これも学んだ方がいい、こうした方がよいとうものがあればぜひコメントをお願いします。
# 画面に出力する方法
# root.renderに直書きしてHelloWorld!を表示させる
“`React
import { createRoot } from “react-dom/client”; //react-dom/clientからcreatRootをインポート(createRoot関数が利用可能となる)

const rootElement = document.getElementById(“root”); //index.htmlの

を取得しているイメージ
const root = createRoot(rootElement);//取得したルート要素を指定して新しいルートを作成、新しいルートが root 変数に格納される

root.ren