enchant.jsをタッチパネルに対応させるため修正してみた

## 今さらenchant.js？
　GIGAタブレットが全国の小中学生全員に配布されています。市町村によって機種が異なり、Windows、Chromebook、iPadの3種類のどれかになっています。Webアプリであれば、3種類のGIGAタブレット共通に動きます。enchant.jsもWebアプリを作動させるライブラリとして利用できます。しかし、enchant.jsはiPadでは問題なく作動しますが、タッチパネル上の移動イベント（touchmove）を取得できないため、Windows、Chromebookでは作動が不完全になります。
　そこで、touchmoveが作動するように書き換えてみました。これで、過去に作成したenchant.jsを利用したプログラムがGIGAタブレットでも作動可能になります。

×[タッチパネルで操作できない例「とけいの学習」（マウス可、iPadでは作動）](https://kaihatuiinkai.jp/enchantjs/tokei083/ “とけいの学習”)

〇[タッチパネルで操作可能の例「とけいの学習」（マウス可、iPadでも作動）](

海馬社長にカードだけじゃなくてビジネスも教わりたい

# 海馬瀬人のおさらい
海馬瀬人は、アニメ「遊戯王デュエルモンスターズ」に登場するキャラクターです。
主人公の武藤遊戯のライバル的存在で、玩具やゲームの開発・販売を行う海馬コーポレーションの社長でもあります。デュエルで使用するソリッド・ヴィジョン・システムも海馬コーポレーションで開発されました。

海馬は自信家で人に対しては見下した態度も取りますが、常に真剣で弟思い、そして情熱的で勝利に貪欲という魅力的な人物です。

“`plantuml
@startuml

footer コナミ公式サイトより
title
@enduml
“`

## こんな人たちへ向けたLINE botです

リアルタイム読み上げサイトの作り方

機会音声のリアルタイム読み上げサイトがリニューアルしました！💡
是非お試しください！
キーボードう打てばリアルタイムに機会音声に変換されます❗️#javascripthttps://t.co/qvGDSk6mJr pic.twitter.com/uhvZ1qA7GZ

— gfkska⑨な人PJT (@hsjakkallavfhd) Novembe

[ES6] 変数の分割代入

## Reactで頻出するこれ

“`jsx
// id, name, email がpropsで渡ってきているとして
const　userData = {
id,
name,
email,
……..
}
“`
こういう書きかた。
よくわからないがkeyとvalueが同じであれば省略できるという理解でいる。
詳しく理解せずに1年以上もReactを書いている。
よくない。調べようと思う。

## 「分割代入」と言うらしい

前述のuserDataオブジェクトは、昔ながらの書きかたではこうなる。

“`jsx
// id, name, email がpropsで渡ってきているとして
const　userData = {
id = id,
name = name,
email = email,
……..
}
“`

しかしReactでは**propsで持ってきた変数にデータを代入すること**が頻発するため、さすがに冗長に感じてしまう。

そのときにES6で加わった分割代入という新しい書きかたをしているのが、一番上のコードだったのだ。

JavaScript Lintツール

## Lintとは

静的解析ツールのこと

プログラムコードを読み込んで、問題がないか調べてくれる

linterとも呼ぶ

## コンパイラとの違い

コンパイラ：言語仕様や構文規則などに違反する誤りがある場合にエラーを返す
Lintツール：文法上の誤りだけでなくバグの原因となり得る疑わしい記述を返す

## JSのLintツールの一覧

ESLint
JSHint
JSLint

## ESLintの使い方

### 1. ESLintのインストール
“`
npm install eslint –save-dev
“`

### 2. 設定ファイルの初期化

“`
npx eslint –init
“`

### 3. ルールのカスタマイズ

.eslintrcファイルに、ルールを記述する

### 4. Lintを実行する

“`
npx eslint yourfile.js
“`

JavaScript npm

## npmとは

“`
①パッケージの管理をしてくれる

そのプロジェクトで、必要なライブラリやパッケージを容易にインストールすることを可能にする

②依存関係を管理してくれている

package.jsonに記載されている情報をもとに、
必要なバージョンを正確に、一括でインストールすることを可能にする
“`

##

任意のディレクトリで npm init を実行し、package.json を作成

“`
npm init
“`

の実行結果、

“`
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install ` aft

JavaScript try…catch

## try…catch文とは

結論
“`
一言説明　：　エラー特化のif文みてーなもん
“`

ちゃんと説明

“`
例えば、関数やクラスやオブジェクト、JSプログラムにおいて、
特定の条件が発生した場合に、意図的に（わざと）エラーを発生させたい場合に使うもの
“`

## 実例

“`
//関数定義
function checkDivisibleByFive(num) {
let target = num % 5;
var result;
if(target == 0 ){
result = true;
}
else{
result = false;
}
return result
}

// try…catch 構文
try{
const result = checkDivisibleByFive(4);
if(result === false){
throw new Error(‘5で割り切れない数字です’);
}
else{
console.log(result)
}

}

JavaScript　　console.logとconsole.errorの違い

`console.log` と `console.error` は、どちらもコンソールにメッセージを出力する際に使用されるメソッドですが、異なる目的で使われます。

– **`console.log`**: 一般的な情報やデバッグ情報を表示するのに使われます。主に一般的なログ、変数の値、オブジェクトの内容などを表示するために使われます。通常のプロセスや実行の流れを理解するための情報を出力します。

“`javascript
console.log(‘This is a log message.’);
console.log(variable); // 変数の値を表示
“`

– **`console.error`**: エラー情報や警告を出力するのに使用されます。特に問題がある場合やエラーが発生した場合に、その旨を強調して表示するために使われます。エラーが発生した場所や原因を特定しやすくするために使われます。

“`javascript
console.error(‘This is an error message.’);
console.error(errorVariabl

JavaScript クラス　｜　class構文

## JavaScriptのクラスについて

ES2015（ES6）までは、`class構文`なんてものは存在しなかった。

JavaScriptは、プロトタイプベースの言語であり、クラスベースの言語ではないからだ。

しかし、クラスが作れないのは不便だ

ということで、ES2015以降は、クラスも使えるようになった。

これによって、ありがたいことに、クラスベースの言語を習得している人にとって、わかりやすくJavaScriptでも同様にクラスを作成できるようになった。

## クラスの作り方

“`
//クラスの定義
class Playlist{
//コンストラクタを作っている
constructor(name){
this.name = name;
this.songs = [];
}
//メソッドを作っている
addSong(song){
this.songs.push(song);
}
//メソッドを作っている
play(){
return this.songs[0]
}
//メソッドを作っている

TruthyとFalthy JavaScriptとPHPの違い

## Truthyとは
動的型付け言語において、真偽値型に変換されたらTrueになる値のこと

## JSとPHPで異なる例
#### ‘0’（文字列の0）
JSではtrue、PHPではfalse
“`test.js
‘0’ == true // true
“`
“`test.php
‘0’ == true // false
“`
#### []（空配列）
JSではtrue、PHPではfalse
“`test.js
[] == true // true
“`
“`test.php
[] == true // false
“`
ちなみに、JSでは{}（空オブジェクト）もtrue
“`test.js
{} == true // true
“`
#### 公式
https://developer.mozilla.org/ja/docs/Glossary/Truthy

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

https://www.php.net/manual/ja/types.comparisons.p

IPアドレスから天気を取得するサイトを作ってみよう

# 1.はじめに
今回はIPアドレスから現在地を取得して気象情報を表示するサイトを作成してみました。
また、天気の状況によって表示される背景を変更できるようにしました。
使用したAPIは
[Open Weather Map](https://openweathermap.org/api)
[IPInfo](https://ipinfo.io/)
です。
“`:環境
windows10
vscode
IP info API
Open Weather API
“`

# 2.HTML
“`html:index.html

【javascript】【jquery】urlの文字列編集

# コード
“`javascript

var url1 = “http://192.168.55.33/nnnnnn/aaaaaaa”;
var match = url1.match(/\/\/[^/]+(\/.*)/);
console.log(match ? match[1] : url1);

var url2 = “https://192.168.55.33/aaa/”;
var match = url2.match(/\/\/[^/]+(\/.*)/);
console.log(match ? match[1] : url2);

var url3 = “http://192.168.55.33”;
var match = url3.match(/\/\/[^/]+(\/.*)/);
console.log(match ? match[1] : url3);

“`

# 結果
“`javascript

“/nnnnnn/aaaaaaa”
“/aaa/”
“http://192.168.55.33”

“`

自分が関わったコードの中で最凶のクソコード

# 最凶コード

論より証拠、そのコードを見てみよう。そのコードとは、JavaScriptで書かれたコードである。

“`Original.js
t = 1234.56
:
if(n==0){
var a, b, c, d, e, f = t,
w = self._iFirst,
x = self._iSecond,
y = self._iThird,
z = self._iFourth;
z.innerHTML = “0”,
f > 100 ? (a = f, b = self._getRound(a),
d = “”,
y.style.width = “234px”,
w.innerHTML = “120”,
x.innerHTML = “240”
)
: (c = self._getRound(f), e = self._getRound(f / 2),
y.styl

JavaScript　documentオブジェクト　徹底網羅　これで全部わかる

# documentオブジェクトとは

htmlファイルのページ全体を言う。

## documentオブジェクトの使い方

“`
.プロパティ
“`

“`
.メソッド
“`

のように指定して、呼び出す

## 個々のテクニック

1. getElementById
1. getElementsByName
1. createElement
1. document.write
1. document.forms
1. queryselector

えーと、無数にあるのでござる

[ES6] 関数のデフォルト引数

Reactのjsxやtsxでは多用されるが、本来の使いどころどういうパターンなのか調べた。
“`demo.js
function fn(options) {
console.log(options);
}

fn();
“`

↑この場合、optionsが定義されていないのでconsoleはundefinedになってしまう。
“`demo.js
function fn(options = {}) {
console.log(options);
}

fn();
“`

↑こうすることでoptionsが何も設定されなくても空のオブジェクトが定義される。

これの何がよいのか。

今まで関数の引数を設定した場合、引数が入力されなかったときのためにこう書いていた。

“`demo.js
function fn(options) {
options = options || {};
…
}
“`

この options = options || {};　が必要なくなる。

このnullがきたときの対策は、TypeScriptやESLintを入れているとリア

活字読めない人間なので読み上げアプリに助けてもらう

## 活字が苦手です・・・
**私は活字を読むことが苦手です・・・** ので昔から本が読めません・・・
それにより現在ひとつの問題を抱えております。
それは **大好きなラグビーのルールが覚えられない！！** という事です。

のっとりりーすざぼーる？のっとろーるあうぇい？？のっとすとれーと？？？
似てる名前のルールが多いし、文章で読んでもよくわからん！となっております。

という事でそんな自分を助ける為に、**JavaScriptとWeb Speech APIを使って、ラグビーのルールを読みあげてくれるアプリを作ってみました！**

## ゴールの設定
今回作成するアプリでは以下の点をゴールに設定して実装していきます！
言語切り替え機能は、**審判が英語で話す事への対策としておまけで実装します！**

:::note info
**・ ルール名のボタンを押すと説明を読みあげてくれるアプリを作る
・ 日本語と英語の切り替え機能を付ける**
:::

## 完成品はコチラ！
作成したアプリはこちら！紹介動画と共にご覧ください！
**※音がでるので注意してください※**

JavaScript DOM

# DOMって何？

“`
JavaScriptから、HTMLを操作できる
“`

## DOMでHTML要素を書き換えよう

dom.html
“`

ブログ

タイトル：

本文：

JavaScript（React）で複数ファイルアップロードの読込待ち

JavaScript (React) の複数ファイルアップロードしたときのファイル表示にちょっとはまったので備忘録でメモ
やったこととしては `FileReader` の `onload` のところを `Promise` を待つようにしてる
あとはファイルインプットの `onChange` で使う関数も `async` つけてファイル読込処理を待つようにする
`map` で処理すると待つのにもう一つ関数を作る必要があるので煩雑になりそうなので `for of` でループ処理してます

“`jsx
import { useState } from ‘react’;

const App = () => {
const [selectImags, setSelectFiles] = useState([]);

// ファイル選択時の処理 async つける
const change = async (e) => {
const imags = [];
// 選択したファイルごとに読込処理 await で待つ
for (const file of

JavaScript オブジェクトの使用

# オブジェクトとは？？

結論、`データを格納する手段の1つ`です。

変数、配列、オブジェクト、、、

といった感じです。

jsのコードでよく見かけるであろう、

“`
const obj = {
gender: ‘free’,
name: ‘山田太郎’,
age: 12
}
“`

このようなコードは、オブジェクトである

## オブジェクトに関する用語を理解しよう

オブジェクトの中で、

・　「名前：値」

これは、プロパティと呼ぶ

・　「名前：関数」

これは、メソッドと呼ぶ

つまり、JavaScriptは最高である
なぜなら、オブジェクトという面白いものを自分で作れるからだ。

“`
const ningen = {
name : ‘山田　太郎’,
age : 99,
getName: function() { console.log(this.name) }
}
“`
これは、オブジェクトだが、

“`
getName: function() { console.log(this.name) }
“`

この部分

わがままゴルファーのためのLINE Bot

## 1. ゴルフの要素って多くない！？
こんなどうでもいいことを友達に聞くのもアレなのでChatGPTに同意を求めてみた。
プレイするという観点からもゴルフは考えることが多くて複雑であると
改めて教えてもらった。

私が個人的にゴルフをしていく上で気になるのは
* **どうやって練習したらいいのか**
* **ラウンドに必要なものは揃っているか**
* **予約はどうやって取ればいいか**
* **ラウンドの日の天気はいいのか**
などである。

もちろん時間をかければわかる。

練習の情報もあふれているが、取捨選択の時間があれば
必要で効率のよい練習方法にたどり着けるだろう。

ラウンド前に必要なものが足りていなければ
買いに行けばいい。

ゴルフ場に電話したり
アプリを使えば予約もできる。

ラ