[Gather.town]スペースキーで自身の最短距離にある操作可能なオブジェクトの情報を取得

– リモートコミュニケーションツールとして[Gather](https://www.gather.town/)を利用しています。
– Gatherは基本機能以外の仕掛けが沢山あり、その中の1つがブラウザコンソール等で扱えるSocket APIの存在です。
– 「現在位置の取得」や「参加者情報の取得」など豊富に存在しており、それらを適切に組み合わせることで色々な操作を行うことが可能です。
– 今回は**スペースキーで自身の最短距離にある操作可能なオブジェクトの情報を取得**する方法を記録いたします。
– [過去の実装記事一覧](https://dev.classmethod.jp/search/?q=gather&author=t_o_d&page=1)はこちら

## 結果
– 以下のようにマップ内に操作可能なオブジェクトがいくつかある状態とします。
– **例として「[テトリス](https://support.gather.town/hc/en-us/articles/15910362002708-Integrated-Games)」「[ホワイトボード](https://s

【React】useStateとuseRefの違い 【初心者にも分かりやすく】

## はじめに
恥ずかしながら実業務をしてる際に、題目の「useStateとuseRefの違い」
を答えることができなかったので今回はまとめさせて頂きます。

~~文法覚えただけなのほんまに良くない~~

## useStateとは
`useState`とは、関数コンポーネントの`state`を保持したり、更新したりするためのフックになります。
`useState`はReactのコンポーネントの状態管理に使用されており`state`が変更されると**再レンダリング**されます。

“`jsx:App.js
import { useState } from ‘react’
import ‘./App.css’

function App() {
const [count,setCount] = useState(0)

const handleClick = () => {
setCount(prev => prev + 1)
}

return (
<>

useState

jQuery 属性系メソッド

# attr
指定した要素の属性値を取得または設定する．
**取得する場合**
“`javascript
//基本形
var elementAttribute = $(‘selector’).attr(‘attribute’);

//例
var id = $(‘p’).attr(‘id’);
“`
**設定する場合**
“`javascript
//基本形
$(‘selector’).attr(‘attribute’,’value’);

//例
$(‘p’).attr(‘id’,’example’);
“`
* `selector`：属性の値を取得または設定する要素を指定する．
* `attribute`：取得または設定した属性名を指定する．
* `value`：属性に設定する値を指定する．

# removeAttr
要素から指定した属性を削除する．
“`java

【TypeScript】The left-hand side of an arithmetic operation must be of type ‘any’, ‘number’, ‘bigint’ or an enum type.

~~~typescript
const dates = [
“2024-11-12T00:00:00.000Z”,
“2024-02-12T00:00:00.000Z”,
“2025-08-26T00:00:00.000Z”,
“2020-11-16T00:00:00.000Z”,
“2020-11-14T00:00:00.000Z”,
];

const sortedDates = dates.sort((a, b) => {
return new Date(a) – new Date(b);
});
~~~

上記のように、配列に日付を格納して日付の古い順にソートするようなプログラムを書くと、以下のようなコンパイルエラーが出力されます。
~~~bash
The left-hand side of an arithmetic operation must be of type ‘any’, ‘number’, ‘bigint’ or an enum type.
~~~

これは、TypeScriptにおいて、演算子（算術演算子、比較演算子など）を使用する際に、

セレクトボックス値変更時のページ遷移にURLオブジェクトを利用する

こんにちは、みやがわ です。

セレクトボックスの値変更と同時にページ遷移する挙動をMPAで実装する際に、
JavaScriptのURLオブジェクトを利用するのが便利だったのでご紹介します。

## やりたいこと
選択された値のvalueに対応するURLへの移動をJavaScriptで行っています。

[](https://gyazo.com/f18cc557b38a2dc3a3f2caac9803534c)

## URLオブジェクトとは

文字通りURLをオブジェクトとして参照・変更するためのものです。

https://developer.mozilla.org/ja/docs/Web/API/URL

これを利用することで、URLを純粋な文字列操作よりも便利に扱うことができます。

参照の例

“`jsx
const url = new URL(‘https://qiita.com/search?sort=&q=

Javascript何覚えればいいのかわからない人！！

Javascript何覚えればいいのかわからない人！！
Javascriptって結局これだけなんです。
Web意味わからない、getEle(document.getElementId(XX))って関数読んでんだけど次の現場いったら関数ないんだけどみたいなことって結構初心者にとってあるあるなんです。

Window.documentって書くと動作しないこともありますが、ブラウザによって分かれます。
※今後統一されることがあるかもしれません。


この画像が何なのかを1個ずつ調べ

8/1 Javascript基礎8日目:オブジェクトとアロー関数

目次
—
– [復習](https://qiita.com/hvile072500/items/0b6bc6da137d64ab985b#%E5%BE%A9%E7%BF%92)
– [引数の読み込み疑問](https://qiita.com/hvile072500/items/0b6bc6da137d64ab985b#%E5%BC%95%E6%95%B0%E3%81%AE%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%81%BF%E7%96%91%E5%95%8F)
– [オブジェクトとは](https://qiita.com/hvile072500/items/0b6bc6da137d64ab985b#%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%A8%E3%81%AF)
– [アロー関数](https://qiita.com/hvile072500/items/0b6bc6da137d64ab985b#%E3%82%A2%E3%83%AD%E3%83%BC%E9%96%A2%E6%95%B

TypeScriptのパワフルなツール: Null合体演算子 (`??`) をマスターしよう！

## 目次
1. [はじめに](#intro)
2. [Null合体演算子とは？](#null-coalescing)
3. [Null合体演算子の使用例](#examples)
4. [Null合体演算子 vs OR 演算子](#comparison)
5. [まとめ](#conclusion)

—

## 1. はじめに

JavaScripttは、日々の開発作業を容易にし、コードをより簡潔に書くための多くのツールを提供しています。その一つが**Null合体演算子**（`??`）です。この記事では、Null合体演算子の使い方とその強力さを解説します。

—

## 2. Null合体演算子とは？

Null合体演算子（`??`）は、左辺の値が`null`または`undefined`の場合に、右辺の値を返します。それ以外の場合、つまり左辺の値が`null`または`undefined`でない場合には、左辺の値がそのまま返されます。

—

「Reactの新機能！Concurrent ModeとuseDeferredValueを詳しく解説」

## 目次
1. [はじめに](#intro)
2. [Concurrent Modeとは](#concurrent)
3. [useDeferredValueとは](#use-deferred-value)
4. [Concurrent ModeとuseDeferredValueを使ったコードサンプル](#example)
5. [まとめ](#conclusion)

## 1. はじめに
Reactの新機能、Concurrent ModeとuseDeferredValueが話題になっていますね。しかし、これらの新機能はどのように使用するのでしょうか？ 今回は、これらの新機能を詳しく解説し、実際のコードサンプルを通じてその活用方法を探ります。

## 2. Concurrent Modeとは
Concurrent ModeはReactの新機能で、アプリケーションのレンダリングをより効率的に制御することができます。

従来のReactでは、一度に一つの更新タスクを処理します。このモードでは、一度に

オープンソースWeb地図ライブラリの活用：Leaflet

# はじめに
インタラクティブなWeb地図を作る機会があったのでまとめてみました。
地図ライブラリを使うと結構簡単にいろいろなことができました。
初心者が、QGIS を用いて、地理情報の表記に geojson 形式のファイルを表示、編集できるか試してみた手順を、あくまで「とっかかり」用のメモとして、記録しています。
QGIS が 3.12 にアップデートされていたのでこれに合わせて追記修正します。

# Leaflet
LeafletとはオープンソースのWeb地図を作成するためのJavascriptライブラリです。
簡単に導入でき、機能も十分なのでLeafletでインタラクティブな地図を表示する方法をStepに別けて解説します。
[公式サイト](https://leafletjs.com/)
![fig002.png](https://qii

雰囲気で理解する 非同期処理 async/await とは

# 非同期処理 async/await

分かりやすさ重視、所々本質とは違うと思います。理解の備忘録としてご了承ください。

# 同期処理と非同期処理

コードを実行する際に

同期処理：上から順に実行される通常の実行

非同期処理：一部処理を退避させて別処理させる。

# promiseについて

promise：**関数の返り値としてアタッチ**される、**関数の種類、関数の返り値の型**と思ってもいいかも。処理の実行を約束する。失敗やその途中経過や結果を返す。

**返される結果について**
– pending(実行中)
– settled(実行完了)
→settled(実行完了)の中身
– rejected(失敗)
– fulfilled(成功)

**・promiseの関数について**

返り値をreturn とかで記述しない。returnの代わりに

成功時（fulfilledの内容）→resolve(“返したい内容“)

失敗時（rejectedの内容）→reject(“返したい内容“)

# asyncについて

関数の頭につけると返り値が強制的

JavaScriptを勉強していたら、途中からバッティング練習になった

おはようございます！
今日も昨日やったことの振り返りをしていきます！

## 昨日やったこと

昨日は、下記のサイトのチュートリアルで数字当てゲームを作りました。

https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/A_first_splash

初心者から上級者までレベルが設定されていて、JavaScriptを体系的に学ぶことができるサイトです。

実際に作ったものがこちらです。

今日はこれを進めている！https://t.co/fdUxEq8HeH pic.twitter.com/7umbl1eZGz

— Yooji Yang (@YangYooji3942) July 31, 2023

### 気付き

数字当てゲームを作る上で、最初のステップとして用意されていたのが、ゴールを思い描くということでした。

>プログラマーのように考えるプログラミングで一番難しいのは、書き方を覚えることではなく、現実の問題にどう適用するかということです。
>プログラマーのように考え始める必要があります — それは一般的に、そのプログラムが何をしなければならないかという説明を見て、それを満たすためにコ

jQuery CSS系メソッド

# css
指定した要素のCSSスタイルを取得または変更・追加する．
**取得**
指定する要素のCSSスタイルを取得したい場合は，引数に取得したいプロパティの値を入れることで，すでに設定されているプロパティの値を取得できる．
“`javascript
//基本形
var style = $(‘selector’).css(‘propertyName’);

//例
var style = $(‘p’).css(‘color’) // pタグの要素の色を取得
“`
**変更**
cssの変更や追加を行う場合，CSSのプロパティと値を引数で指定する．すでに設定されている場合は，その設定を上書きする．
“`javascript
//基本形
$(‘selector’).css(‘propertyName’,’value’);

//例
//javascript
$(‘p’).css(‘color’,’#f00′); // pタグの要素を赤色に変える
“`
* `selector`: CSSプロパティを取得または設

Swiperで自動で動くスライドリストを作る（jQuery不要）

# Swiper（スワイパー/スウィパー）で動くリストを作る

お世話になっております。コウヤです。

今回は動くメニューリストをSwiperを使って説明していきたいと思います。正しい読みがスワイパーなのかスウィパーなのかはいろいろなサイトを検索しても両方の言い方しているので、ここではSwiperと英語で書きたいと思います。
作成するものは以下のものを想定しています。（iPhoneで見た場合）

今回はPCでもスマートフォンでも両用できるようにSwiperのメニューリストを作成していきたいと思います。

以下のメニューが自動で左側に無限ループで動かすことを考えます。
【PCで見たとき】

【スマートフォン（iPhone）で見たとき】
![image.png](https://qiita-image-store.s3.ap-northeast-1.

7/31 プログラミング7日目:関数

目標：Javascriptでシューティングゲームを制作
・javascript

始まりに
—
前回の復習
・構文
“`js
for (初期化; 条件式; インクリメント) {
// 処理
}
“`
・ループ処理
“`js
// forループ
for(let i = 0; i < 15; i++) { console.log("日数:", i); } console.log("処理終了"); console.log("---------------------------"); // while文 let i = 0; while(i < 15) { console.log("メンバー:", i); i++; } console.log("ループ終了"); ``` ・関数について --- 関数とは一連の処理をまとめて実行するためのブロックです。 ```js function 関数名(引数1, 引数2, ...) { // 処理や計算など return 結果; } ``` 上記の内容 ・function キーワード:関数を定

Next.js App Router API JavaScript Hello, World!

Next.jsのApp Router APIを使ったHello, World!です。

“`app/api/route.js
import { NextResponse } from ‘next/server’

export async function GET() {
return NextResponse.json({ message: ‘Hello, World!’ })
}
“`

`http://localhost:3000/api` にアクセスして
次の結果がブラウザに表示されることを期待する。

“`json
{“message”:”Hello, World!”}
“`

コールバック関数ってなに

# コールバック関数

:::note
プログラムにおいて非同期処理やイベント駆動処理を実現するための概念

**ある関数の引数として渡され、その関数内で特定のタイミングや条件が発生した際に呼び出される関数のこと**
:::

## コールバック関数　利用場面の例

### 非同期処理

**非同期処理が完了した後に実行されるコードを指定**
→その処理が完了するまで待たずに他の処理を継続できる

・タイマー処理
・HTTPリクエストなど

非同期処理とは

### 非同期処理

:::note
プログラムの実行において、タスクが同期的に逐次的に処理されるのではなく、**順序なく並行して実行される処理**のこと
→プログラムの性能向上やユーザーエクスペリエンスの向上に役立つ

☆ウェブブラウザでは非同期処理が重要
→ウェブページが応答しなくなるブロッキングを防ぐために非同期なリクエストが多用される
:::

#### 非同期処理の例

– **タイマー処理**
一定時間後に特定の処理を実行する場合
→非同期なタイマー処理を使う

【2023年最新】JavaScript ES13の新機能6選！コード例付きで詳しく解説します！

## 目次
1. [はじめに](#introduction)
2. [配列の新メソッド: .at()](#at-method)
3. [新しいオブジェクトメソッド: Object.hasOwn()](#Object.hasOwn-method)
4. [モジュールのトップレベルでのawait](#top-level-await)
5. [プライベートプロパティ宣言に # の使用](#private-properties)
6. [クラスのメンバ変数の簡単な設定](#class-member-variables)
7. [配列の末尾から要素を探す: findLast](#findLast-method)
8. [まとめ](#conclusion)

## 1. はじめに
みなさん、こんにちは！JavaScriptが2023年に導入されたES13の新機能をご存知ですか？今回の記事では、これらの新機能を詳しく解説し、具体的なコード例とともに紹介します。JavaScriptのスキルをさらに磨きたい方はぜひ最後までお読みください。

【JavaScript】西暦を和暦に変換する10のパターン

先日、西暦を和暦に変換することがあり、調べると様々なオプションがあったので、10パターンまとめてみました。

# 変換10パターン

“`javascript
const date = new Date(‘2023/08/01 15:00:03’)

// R5/8/1
const japaneseDate = date.toLocaleDateString(‘ja-JP-u-ca-japanese’)

// 令和5/8/1
const japaneseDate2 = date.toLocaleDateString(‘ja-JP-u-ca-japanese’, {
era: ‘long’
})

// 令和5年8月1日
const japaneseDate3 = date.toLocaleDateString(‘ja-JP-u-ca-japanese’, {
dateStyle: ‘long’
})

// 令和5年8月1日火曜日
const japaneseDate4 = date.toLocaleDateString(‘ja-JP-u-ca-japanese’, {

ElectronでHTMLコンテンツをPDF出力する方法

## 概要

**McGwire Markdown**は**HTMLコンテンツをPDFとして出力する機能を備えた**Electron製マークダウンエディタです。

https://github.com/itsuki-maru/McGwire-Markdown

このPDF出力は**Electron（Chromium）が持つ標準機能のみで実現可能**です。

今回はこの「**ElectronでHTMLコンテンツをPDFする機能**」の実装方法をアウトプットします。

## 実装手順

### 実行環境

今回の環境は次のとおりです。

| 環境 | 内容 |
| —- | —- |
| OS | Ubuntu Desktop 22.04 |
| Node.js | v18.16.0 |
| Electron | 25.3.2 |

### 1. プロジェクトの作成

まずは`npm`を使用して新規プロジェクトを作成しましょう。

“`shell
mkdir electron-app && cd electron-app
npm init -y
npm install elect