144.ダイナミックインポート

ブラウザが対応しているかどうかは必ず確認しておく
ちなみに
*chrome
*Edge
*Safari
以上3つは使えるとのこと
#### dinamic importの目的
ページの初期表示時の処理負荷をへらす
（必要な時に必要なだけ使う）
→コンテンツが展開する度に必要なモジュールを遅延ロードする方法

### 比較
#### 今までの静的メソッド
→ページがインポートされた時点で、モジュールもインポートされる
“`javascript
import{ publicVal,publicFn} from ‘./moduleA.js’;

publicFn();
“`
#### 動的メソッド
→モジュールは必要な時だけ、非同期によって呼ばれる
“`javascript
//書き方1.
import(‘./moduleA.js’).then(function(modules){
console.log(modules);
modules.publicFn();
})
//書き方2.
async function fn(){
const modules = await

JavaScriptの正規表現について part3

# 初めに
前回の続きです。今回は正規表現に関連するメソッドをまとめてみました。

前回のリンクです。

https://qiita.com/hu-yu/items/fb7b11953ff09cc48a8c

今回の参考文章はこちらです。

https://www.tohoho-web.com/js/regexp.htm

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions

https://javascript.info/regular-expressions

# Tools
検証ツール（パターン／ライブラリ付き）

https://regexr.com/

https://regex101.com/

# Memo
#### Properties

– `RegExp.prototype.lastIndex`：フラグ`g`、フラグ`y`。
– `regex.lastIndex`から`exec()`、`test()`など現在の検索位置を把握することができ、指定する

【計算結果が正しくない！？】案外知らない、計算誤差の話

# はじめまして
63歳ですが、プログラム書いてます。
30年以上昔に知った話を、最近、また耳にしましたので、ちょっとご紹介させていただきます。

# 実数計算が正しいか、９種類の言語で試しました。
今回試したのは、linux 標準の bc（計算機）、PHP、python3、ruby、perl、node.js、C++、go、fortran95 の９つの言語です。
C++ のコンパイルは “`gcc ru88.c -lm -o ru88.out“`、“`gcc ru88-boost.cpp -lstdc++ -o ru88-boost.out“`、
fortran95 のコンパイルは “`gfortran -O3 -o ru88.exe ru88.f95“`、
“`gfortran -O3 fmsave.o fm.o fmzm90.o fm_interval.o fm_doubleint.o fm_quadint.o fm_quadreal.o fm_rational.o -o ru88-FM.exe ru88-FM.f95“`、
go は “`go run ru88.

レガシーで押しにくいラジオボタンを押しやすくするスクリプト

# はじめに
会社で答えなきゃいけないアンケートがあったんですが、アンケートシステムがレガシーだったんですね。質問に回答するのにマウスの正確な操作を求められて、いらいらMaxでした。

ということで、レガシーなシステムのラジオボタンを勝手に改善します。

# 困っていること
ラジオボタンにラベル属性が付いてなく、ラジオの○の部分だけが押せる状態だった。4択アンケートに50問くらい回答しないといけないのに、ミリ単位でマウスを絶妙に合わせる作業をする必要があった。

# 改善してみる
JavaScriptを書いてこの状況を改善します。
たった10行でラジオボタンを押しやすくなりました。

:warning:私の困っていたサイトでは、ラジオボタンの上位タグがtdだったためtdにイベントを差し込みました。元のHTMLの構造に左右されるのでHTMLの構造をハックしたうえで適切にスクリプトを書き換えてお使いください。

レガシーなHTMLのサンプルがないと試せないので、あえて作ってここに置いときました。ご自由にお使いください。

https://kanaxx.github.io/bookmar

【Webプライバシー】HTMLの中心で愛を叫んでも、漏れない

# 概要
– **Shadow DOM**で、一応見えなくなるよ
– **別オリジンのページをiframe**内にロードすると、一応見えなくなるよ
– 弱点の対策と、レイアウト調整が面倒だよ

# 背景
ユーザ（Webブラウズしている人）には見せたいが、他には漏らしたくない情報があるとします。この情報を見せようと、素直に**DOMに追加すると、同じページの他のスクリプトに丸見え**で、漏れてしまいます。

### 自作Webサイトの場合
この場合、情報を漏らさないスクリプトのみを選べるため、理論上は機密が保たれます。

フィクションで「理論上」はだいたいフラグですが、現実でも様々な地雷が埋まっており、理論通りにするのは言うほど簡単ではありません。

– [安全なウェブサイトの作り方](https://www.ipa.go.jp/security/vuln/websecurity.html)
– [Web Security Cheat Sheet](https://infosec.mozilla.org/guidelines/web_security.html)
– [OWASP Ch

Python,Ruby,PHP,Java,JavaScript,Perlのfor文の比較

Qiita > プログラミング言語の比較

Python,Ruby,PHP,Java,JavaScript,Perlのfor文の比較

# Python

https://qiita.com/Morio/items/e8aed85346c0055beea7

# Ruby

https://qiita.com/Morio/items/3ac5cac9ace7e9ddbdb4

# PHP

https://qiita.com/miriwo/items/d1b5d5ece4f16c7b5985

# Java

https://qiita.com/Co_Pilot/items/7c59410cd90be4cf06d8

# JavaScript

https://qiita.com/w-tdon/items/f3ecb29dc9350f2f2e8d

# Perl

https://perlzemi.com/blog/20080327120662

スプレッド構文（配列のコピーについて）

# スプレッド構文（配列のコピーについて）

Jsの配列のコピーは、「＝」でコピーすると参照元が変化してしまうので、スプレッド構文（…arr1みたいな感じ）でコピーする。

“`
// const arr1 = [10, 20]

// const arr2 = arr1;
// arr2[0] = 100;
// console.log(arr2); => [100, 20]

// console.log(arr1); => [100, 20] (*arr2のみ変更したつもりが、参照元のarr1も変更されてしまっている。。。。)
“`

これをなくすために、スプレッド構文を使用し、配列をコピーすることで、参照元のarr1には影響を及ぼさないようになる。

“`
// const arr1 = [10, 20]

// const arr2 = [… arr1]; (←先ほどのconst arr2 = arr1;部分をスプレッド構文に変更。)

// arr2[0] = 100;
// console.log(arr2); => [100, 20]

//

ESP32の周りのBLEデバイスを監視

バッファローの「探せるキーホルダー」や、Logitecの「ぶるタグ」、懐かしい「Stick-N-Find」やNTTドコモのProject Linkingの「Pochiru」や「Tomoru」など、あるいは、LINE Beaconなど、常に電源On状態でアドバタイズし続けるBLEデバイスの、稼働状態や出入りを監視します。

BLEアドバタイズやレスポンスのスキャンデータには、デバイスがサポートするサービスUUIDが含まれています。
そこに、以下のUUIDが含まれていたら、生存していることとしてサーバに通知します。

　Stick-N-Find：bec26202-a8d8-4a94-80fc-9ac1de37daa6
　Project Linking：b3b36901-50d3-4044-808d-50835b13a6cd
　Immediate Alert Service：0x1802
　LINE Things：0xfe6f

スキャンするBLE CentralデバイスとしてESP32を使います。
M5StampC3が小さくてちょうど良い感じです。とはいっても、どのESP32でも動作します

Next.jsでpages配下のurlに紐づくファイルをindex.page.tsxにする方法

アプリが大規模になってくると、ファイルがかなり多くなってくるので、urlにひもづくファイルを一目で見分けたいときなんかに使える。

### 実装方法
とはいってもやることは簡単。

“`next.config.js
/** @type {import(‘next’).NextConfig} */
module.exports = {
swcMinify: true,
reactStrictMode: true,
//pageExtensionsを追加
pageExtensions: [‘page.tsx’, ‘page.ts’],
};

“`

あとは
“`
_app.tsx → _app.page.tsx
index.tsx → indexs.page.tsx
“`
などするだけ。

簡単な修正のだが、割と便利だと思う。

axiosがfetchより使いやすいと思う理由

JavaScriptでAPIを叩く際に使用する代表的な武器として、fetchとaxiosが挙がると思います。

fetchはJavaScriptの標準ライブラリなのに対し、axiosはインストールする必要があります。

それでも僕がaxiosがfetchより使いやすいという理由を、ざっくりと両者の特徴を紹介しながらいくつか述べてみました!

サンプルのAPIとして、猫の雑学(英語)をランダムで返してくれる[catfact.ninja](https://catfact.ninja/)をお借りしています?
~~~
https://catfact.ninja/fact
~~~

—
### 1. エラーハンドリング

#### 【fetchの場合】
fetchは、`サーバのレスポンスが届きはじめた時点でPromiseを解決する`という特徴があります。つまり、サーバのレスポンスが届きさえすれば、とりあえずPromiseの`resolve()`が実行されてしまうということです。

これが、若干不便です。
400エラーや500エラーが起きた場合でも、`then`の中が実行されてしまうのです。

Reactの基礎3

https://qiita.com/hiro949/items/855e64ba7934d1774d91

https://qiita.com/hiro949/items/633a9086abfb1be274fe

の続きです。

# 配列に対する操作

配列のメンバ関数mapに引数として関数を与えれば、配列の各要素に対してその処理をしてくれます。

“`index.js
const nums = [1,2,3,4,5];
const squares = nums.map(function(num) {
return num*num;
});

console.log(squares);

const pokemon = [“Bulbasaur”, “Charmander”, “Squirtle”];
const paragraphs = pokemon.map(mon => `

${mon}

`);

console.log(paragraphs);
“`

“`
[ 1, 4, 9, 16, 25 ]
[ ‘

Bulbasaur

‘, ‘

C

Reactの基礎２

https://qiita.com/hiro949/items/855e64ba7934d1774d91

の続きです。

# 変数の導入

ベースのコード：

“`index.js
import React from ‘react’;
import ReactDOM from ‘react-dom/client’;

function HelloWorld(){
return (

Hello World!

);
};

const root = ReactDOM.createRoot(document.getElementById(‘root’));
root.render();
“`

{ }で囲んだものをhrml形式のところに書くと、それは変数として認識されます。

例えば次のコードでは名前と苗字、現在の時刻を変数として付け加えてみました。

“`index.js
import React from ‘react’;
import ReactDOM from ‘react-dom/client’;

functio

JavaScriptのsetTimeout(func.bind(null,value));のbind周りを書く意味

詰まったので自分用メモ

結論
—
* setTimeoutの第一引数は***関数***じゃないと効かないっぽい
* bindの返り値は***新しい関数***
→`func.bind`で新しい関数を作り、それをsetTimeoutに渡してるから動くっぽい

例)
`hello.bind(null,cat)`が実行されてからsetTimeoutに渡されている
→`hello.bind(null,cat)`の返り値は`hello(cat){console.log(‘こんにちは！！　’ + cat);}`という`hello`メソッドの引数だけ`cat`になったやつ
=>`setTimeout(hello(cat),1000);`になって1秒後に出力される
“`
function hello(animal){
console.log(‘こんにちは！！　’ + animal);
}

const cat=”ネコチャン”;
setTimeout(hello.bind(null,cat),1000); // 1s後に「こんにちは！！　ネコチャン」
“`

↓setTimeoutが効かな

初めてのウェブサービスに縦書きエディタを選んだ理由（３）

# 1.はじめに
　GIGAスクール構想で児童・生徒が使うChromebook用に、縦書き原稿用紙の機能をウェブで提供しようと開発した作文ウェブアプリ「[sakubun](https://www.sakubun.tokyo)」。これまで、[初回](https://qiita.com/tategaki3/items/14266860629892376d29)に原稿用紙をどうやって実現したか、[2回目](https://qiita.com/tategaki3/items/1b779a2397c47d6c27b9)には作成した原稿の保存・ダウンロード機能の実装をご紹介してきました。３回目はページネーションをどうやって実装したかをご紹介します。

https://www.sakubun.tokyo/

# 2.ページネーションとは
　ページネーションとは、ページ割りやページ送りのことで（正直、実装の必要性を感じるまでそんな言葉があることも知りませんでしたが……）、Googleで検索すると一番下に出る数字でページが選べるやつです。

　原稿用紙というとやはり縦20字詰め、横20行の計400字詰め

Reactの基礎１

Reactはユーザインターフェイス(UI)を作成することに特化したJavascriptのパッケージです。

# 環境構築

Windowsでnode.jsをインストールしておきました。エディターはvscodeでvscode上でコマンドプロンプトを動かして操作します。詳しくは以下の記事をご覧ください。

https://qiita.com/gumiTECH/items/4b82e4e3757f226df6b0

https://qiita.com/hiro949/items/8f992bdafa8f90828b62

ターミナルで
“`
npm install -g create-react-app
create-react-app tutorial
“`

と入力してreactが使えるディレクトリtutorialを作り、この中でデモをやっていきます。

以下の記事の通りにやれば、補間機能も設定できます。

https://mattdufeu.co.uk/blog/setup-intellisense-vscode-react-js/

# 実行

ターミナルで

“`
npm

jQueryで画像一括アップロードを作ったよ

# 解説

ファイルを複数選択してドラッグ＆ドロップしてファイルを一括アップロードする処理を書きました。
Deferredを使って、ファイルアップロードが全部終わったらローディングアイコンを消すようにしました。
※サーバ側の処理は自分で実装してください…。

# 実装

## HTML

“`html

ここにファイルをまとめてドロップ

“`

## CSS

“`css
.drop_area_multiple {
border: 2px dashed gray;
text-align: center;
background: #ffffff;
width: 447px;
line-height: 150px;
}
.dragta

【JavaScript】ダークモードの切り替えボタン

ダークモード始めましたか？

エディターをダークモードにしたのがきっかけで、OS、アプリとダークモード始めました！
ダークモードに慣れてしまうと、ダークモード非対応のサイトがめっちゃ眩しい…:persevere:

というわけで、ユーザーの好みに応じてサイトのカラーモードを切り替えられるボタンを作ってみました！

ちなみに…
私はドラキュラテーマの大ファンです。
エディターだけかと思ったら、たくさんのアプリにも対応してくれています。
いっそのことWindowsのOS自体も対応してほしい！

以下のアプリにドラキュラテーマを適用しています。

* Visual Studio Code
* Chrome
* Firefox
* Thunderbird
* Slack

FileZilla にも対応してくれないかな…

https://draculatheme.com/

## 仕様

ブラウザを開いてる間変更したカラーモードを保存するため、セッションストレージを利用します。

* ページ読み込み時のカラーモード
* セッションストレージなし
* OSのカラーモード
* セッ

世界一優しいReactの基本その6 -exportの種類とは-

## はじめに
前回はReactの再レンダリングを学びました。最後にReactのexportの種類についてを書いていきたいと思います。

https://qiita.com/k-tetsuhiro/items/c31dd0dc57a0b2bed902

## 通常のexport
Reactではexportすることによって、コンポーネントの取り込みを行ってきました。

通常のexport
“`components/SampleComponent.jsx
export const SampleComponent = () => {
//　実装
};
“`

import側
“`App.jsx
import { SampleComponent } from “./components/SampleComponent”
“`

ただし、分割代入のイメージと同じで、対象となるexportがないとエラーになります。
“`App.jsx
// TestComponentはないのでエラーになる
import { TestComponent } from “./components/Sa

世界一優しいReactの基本その6 -再レンダリングとは-

## はじめに
前回はReactのStateを学びました。今回はReactの再レンダリングについてを書いていきたいと思います。

https://qiita.com/k-tetsuhiro/items/07118dd9cf7290149ba5

## 再レンダリング
Reactの重要な機能のPropsやStateについてマン出来ましgたが、これらに加えて再レンダリングについて知る必要があります。前回作ったボタンを押すとカウントアップするAppですが、画面をリロードしていないのに、ボタンを押すとカウント数が自動で更新されていました。これは**コンポーネントが再レンダリング**されたからです。

sandboxApp: https://codesandbox.io/s/use-staet-te

世界一優しいReactの基本その5 -Stateとは-

## はじめに
前回はReactのPropsを学びました。今回はReactの重要なStateについてを書いていきたいと思います。

https://qiita.com/k-tetsuhiro/items/99f7d34ac72b2f941404

## State
Reactでは**stateを用いて状態の管理**を行います。
例えば、以下のようなものが考えられます

– ボタンが押せるかどうか
– エラーがあるか
– テキストボックスの中身の値

このようにユーザーの操作によって値が変化する状態をstateを用いて管理します。

### useState
Reactでは`React Hooks`と呼ばれる機能の中で`useState`という便利な機能があります。
これをimportすることで簡単にstateの管理が出来ます

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

useStateの使い方は実にシンプルで、1つ目にState変数、2つ目にそのStateを更新するための関数を定義します。例えばnumという変数を管理したい場合以下のよう