JavaScript関連のことを調べてみた2022年10月12日

ブラウザ内にPDFを並べて表示

リモートで画面共有しながら説明する際に複数のPDFを並べる必要がありました。

ブラウザ内に表示させたかったので HTML を書いてみました。

# スプリッター

サイズ調整したかったので既存のライブラリを使用しました。

* https://split.js.org/

今回は CDN 経由で利用します。

* https://cdnjs.com/libraries/split.js

# HTML

必要最低限の内容を示します。

“`html

paizaラーニング レベルアップ問題集 Aランクレベルアップメニュー JavaScript 素数判定

素数判定 (paizaランク C 相当)

https://paiza.jp/works/mondai/a_rank_level_up_problems/a_rank_calculation_step3

JavaScriptで解いてみました。

# 解答例
Nの条件が`1 ≦ N ≦ 10 ^ 10`なので、ふつうに、Nが、2からN-1まで、割り切れるか調べると、タイムオーバする可能性があります。
数学的な証明は省きますが、N-1まで調べなくても、Nの0.5乗(ルートN)の整数まで調べればOKです。

“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);

const N = Number(lines[0]);

//Nが１ならば素数でない
if (N === 1) {
console.log(“NO”);
//nが２ならば素数
} else if (N =

Javascriptでの繰り返し処理

# はじめに
学習中のJavascriptで自分用の備忘録として繰り返し処理をまとめました。
## for文を使った繰り返し
Javascriptでの繰り返し処理の方法の一つとしてforを使った繰り返し処理がある。
基本構文
“`javascript
for ([初期化式]; [条件式]; [加算式];){
//繰り返す処理内容
}
“`
になる。
例:出力回数を３回カウントしながら表示を繰り返す処理
“`javascript
let count = 1
for (let i = 1; i <= 3; i += 1) { console.log(`${count}回目の出力`) count += 1 } ``` ## forEachを使った繰り返し処理 配列に格納されている要素に対して繰り返し処理を行うために用いられるのがforEach関数です。 ```javascript 配列.forEach( function(value){ // 処理の記述 }) ``` で記述することで、配列の要素を使った繰り返し処理が実行できます。 例:３つのvalueの配列を１つ

What is Custom Software Development?


Whether you’re an entrepreneur, business owner, or a team of software developers, you know how crucial good software development and management is.

Software development has become a crucial business need since the advent of the digital economy. However, software development isn’t easy. It’s time-consuming and requires not onl

睡眠不足が続いているので、永久の眠りにつかせてくれる世界を作った

## 永久の眠りにつきたい
睡眠不足が続くと、もう永遠に眠りたい衝動に駆られます。
そんなとき、こんなものを発見しました。

これがあったらもう会社に行かないでも良いのではとさえ思える！笑
アラーム設定しているのに、それをあえて消す発想が面白い！睡眠大切これ絶対?#protoout #無駄づくりhttps://t.co/wRPnhVA139

— Umemoto Ryota (@UmeUmeTanTanR) October 8, 2022

これ、アラームが鳴ったらスヌーズを押して、永久にスヌーズにする装置なんです。
衝撃的なのは、アラームをつけているのに、消すんです！！
私はこれをみた時に、 **これだ！** と思いました。
いわばこれは、己の意志とは関係なく、アラームが消されるわけですよね？つまり、誰が悪いわけではなく、ただそういう世界なだけなんです。これで起きなくても誰も責めることはできないはず！:heart_eyes:(それはない？)

つまり、**「私自身は起きようとしている、だけど世界がそれを許してくれないならずっと寝ててもいいんじゃないか？」**

私はそんな世界を目指しました。

## やりたいこと

手元にあるものでできることを考えた結果、**自動照明OFF装置**を作ることにしました。

イメージとしては、朝起きて部屋の明かりをつけようとしたら、永遠に照明を

ECMAScript提案：Observable – 最も面白いJavaScript新機能

はいさい！ちゅらデータぬオースティンやいびーん！

# 概要

最近、Angularで遊んでいてServiceの中で`Observable`というインスタンスを始めて使いました。

これがなんなのかさっぱりわからず、ネットを明後日調べました。

すると、**これが最高に面白い技術であることを知った**のです。

この`Observable`は現在、ECMAScriptのステージ１提案になっており、数年前からネイティブのJavaScript機能として組み込んでいきたいという話が出ています。

本記事では`Observable`がなんなのか簡単に説明します。

# `Observable`とは何か

`Observable`は、`Promise`だと考えれば早いです。

“`
じゃあPromiseと何が違うの？
“`

`Promise`は、`resolve`で一つの結果しか返せないのに対して、`Observable`は無限の`resolve`を実行することができます。

以下の例で`Promise`と`Observable`で同じ結果が得られます。

### Promise

“`

[LINEBot] Splatoon3の多機能Botを作った件

# 目次
[1.はじめに](#1-はじめに)
[2.Botの概要など](#2-Botの概要など)
[3.Botの仕組み](#3-Botの仕組み)
[4.使い方](#4-使い方)
[5.さいごに](#5-さいごに)
[6.参考など](#6-参考など)
# 1. はじめに
最近はPython入門の記事を書いていますが、合間合間にLINEBotを作った話を書いていきたいと思います。
Pythonから少し離れてGoogleAppsScript(JavaScript)を使用します。
第一回では宣伝もかねて機能と、軽く仕組みを説明します。次回以降、コードについても記述していきます。
# 2. Botの概要など
Splatoon3の情報をリアルタイムでLINEで確認できたら便利だなあ、と思い作成しました。
簡単にステージ情報などを取得でき、ランダムステージなどの機能もあります。
ボタンもあるので、感覚的に簡単に使用できます。
その他の機能などは下で紹介していますので、ぜひ最後まで見てください。
友達追加も画像下のurlより可能です！

使用時の画像 :
JSとPuppeteerで「slider CAPTCHA」をバイパスする方法

次のトピックは[「slider CAPTCHA」をJSで解決する方法です](https://medium.com/@filipvitas/how-to-solve-geetest-slider-captcha-with-js-ac764c4e9905)


スパムはウェブサイトの所有者にとって大きな問題です。その一方でCAPTCHAは私をひどくイライラさせるもので、ユーザーエクスペリエンスに悪影響を及ぼします。

CAPTCHAは最悪です。素直に認めましょう。人間かどうか検証する方法はたくさんありますが、どの方法も最悪です。

近年、BOTは日々賢くなっており、BOTからウェブサイトを守ることは困難です。ですが多くの空き時間と十分なリソースがあれば、ほぼどんなCAPTCHAでもバイパスできます。

Puppeteerが[reCAPTCHAを突破](https://github.com/berstend/puppeteer-extra/tree/mas

Obnizテルミン制作の道【超音波距離センサー編】

## 楽器を自分の手で作ってみたい！
MakerFairなどで様々な楽器や音楽の制作について見ることが多く、「どうやってこんな音が鳴ってるんだろう」「自分もこんな面白そうなものが作ってみたいな」と思うものの、どうやったらいいんだろう、と思っていました。

そんな中Obnizを学ぶ機会があり、スピーカーがあったり各種センサーが存在していることがわかったので「自分もObnizを使ったら何かしら演奏ができるものが作れるんじゃないだろうか」と思い制作に着手しました。以下は影響を受けた発明を紹介しているツイートです。

これMaker Faireで見たやつで一番驚いたものだ！
バーコー

Chart.js3.9.1におけるパラメータの設定[JavaScript]

こんにちは、[Kuni](https://qiita.com/kuniengineer)です。先日[ポートフォリオサイト](https://kuniportfolio.web.app/)でChart.jsを利用した際に詰まり、公式ドキュメントと戦う羽目になったので記録します。(詰まったのは、ver3.9.1に対する記事が少ないand以前のバージョンから書き方が大きく変わったためと思われます。。)

# グラフのラベル表示を消す
ver3.9.1ではグラフ上部に出るラベル表示のオンオフは下記のパラメータを変更することで出来るようです。

サンプルコード

“`rb
options: {
plugins: {
legend: {
display: false,
labels: {
color: ‘rgb(255, 99, 132)’,
},
},
}
“`

display:trueで表示、

依存パッケージの脆弱性修正には、package.jsonのoverrides / resolutionsフィールドを使いましょう

## はじめに

この記事は、npmとyarnの依存関係ツリーを上書きする`overrides` / `resolutions`フィールドの使い方を共有するためのものです。

### 想定する環境

– node.js 16.17.1
– npm 8.15.0
– yarn v1.22.19

:::note warn
overridesフィールドは、npm [v8.3.0](https://github.com/npm/cli/releases/tag/v8.3.0)で導入されました。それ以前のバージョンでは動作しません。
:::

:::note warn
この記事は[yarn v1](https://classic.yarnpkg.com/lang/en/)系統を対象としています。[yarn v2+](https://yarnpkg.com/)では挙動が変わるかもしれません。各自でご確認ください。
:::

## 依存関係ツリーを上書きして脆弱性に対応する

依存パッケージが以下のような状態だと、セキュリティ更新に追従するのが難しくなります。

– 脆弱性を持ったパッケージに依存

React + TypeScript: イベントとエフェクトにロジックを分ける

本稿執筆時現在、「React Docs」(BETA)の公開が進んでいます。その中の記事のひとつ「[Separating Events from Effects](https://beta.reactjs.org/learn/separating-events-from-effects)」は、イベントとエフェクトのロジックををどのように切り分けるか解説したていねいな記事です。

本稿は基本的に記事の情報は網羅しているものの、邦訳ではありません。足りない部分は補ったり、説明の仕方を改めたり、不要と思われる記述は削除しました。また、公式サイトと異なり、サンプルコードはモジュール分けし、さらにTypeScriptも導入しています。

イベントハンドラは、あらかじめ定めたインタラクションを行ったときにのみ再実行されます。それに対して、プロパティや状態変数のような読み取った値が、直前のレンダリング時と異なるとき再同期するのがエフェクトです。場合によっては、ふたつの動きを組み合わせたいかもしれません。エフェクトをある値に応じては再実行し、他の値には応答させないというときです。こういう処理の考え方につ

lodashのimportでtree shakingが効かないパターン

先日、業務中にこんなコードに出会いました。

“`js
import _ from “lodash”;

// ここは適当なオブジェクトです
const user = {
username: {
first: “taro”,
last: “yamada”,
},
};

const userCopy = _.cloneDeep(user);
“`

あれ？この書き方ってtree shaking効くのかな？
そういえばlodashって、lodash-esと2パターンあったけど、何が違うんだっけ？
と思ったので、試してみました。

## 結論
先に結論ですが、こうなりました。
lodashはES Module形式で書かれていないため、tree shakingを使用するにはlodash-esを使用する必要がありました。

| パターン | ファイルサイズ | tree shaking |
| ———————————— | ————– | —

Python,Ruby,PHP,Java,JavaScript,Perlの自動試験(ユニットテスト)の比較

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

Python,Ruby,PHP,Java,JavaScript,Perlの自動試験(ユニットテスト)の比較

# Python

https://qiita.com/_dakc_/items/e663359c81645bc4e65e

# Ruby

https://qiita.com/jnchito/items/ff4f7a23addbd8dbc460

# PHP

https://qiita.com/yamato1491038/items/7aa0168a6145749db78c

# Java

https://qiita.com/ryuutamaehara/items/c8efb304b73cc0542e6f

# JavaScript

https://qiita.com/jintz/items/61af86a12b53b24ef121

# Perl

https://perlzemi.

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

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

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

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

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

# ?‍♀️ 対象者

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

– GAS で開発したプロ

Webページにツールチップを出すには？

# Webページにツールチップを出すには？
1. ツールチップ要素に、以下のスタイルをあてておく。
“`
position: absolute;
box-shadow: 3px 3px gray;
z-index: 適当な大きな数;
“`
1. 一旦、適当な位置指定で配置
1. getBoundingClientRectで配置位置を得る
1. 本当に配置したい位置との差分を計算して、位置指定して配置

# コード例

【JavaScript】URLSearchParamsを使っていい感じにURLパラメータを作る

# 概要

以前投稿した[【JavaScript】URLパラメータを今風に取得する](https://qiita.com/g-iki/items/8c6dbc8f55051fce834c) で使用した[URLSearchParams](https://developer.mozilla.org/ja/docs/Web/API/URLSearchParams)を使用すると、いい感じにURLパラメータを作ることができたのでそのメモです。

# あんまりおしゃれでない実装(個人的主観)

“`js
location.href = ‘/search?’
+ (q ?? ‘q=’ + q)
+ (start ?? ‘start=’ + start)
+ …
“`

(パラメータはGoogle検索のキーワードとページ)
パラメータ指定があったらひたすら文字列結合をしていく方法。
パラメータが少ないうちはいいですが、なんか野暮ったい感じ。。。

# いいかんじの実装(個人的主観)

– URLパラメータをすべて作る
– もともとのURLパラメータの内、一部分だけを書

javascript1・2終了

大学でC言語を習っているため、文法は違うものの考え方は一緒なのでサクサク進むことができる。
progateは非常によくできているサービスなので普通に進めていればエラーになることはなく、正直つまらないので早く自分で構想したものをコーディングしたい。

pythonの自動化も興味があるし、kaggleに出場してスコアを競い合いたい欲もある。機械学習や深層学習も勉強したい。やりたいことを絞って取り組んでいきたい。

令和のReact再挑戦

# 令和のReactに再挑戦

## はじめに
過去記事でVueについての記事をいくつか書いておりますが、実はSPAの勉強をし始めた当初、Reactに挑戦しなかなかわからなかったためVueで学習を進めたという経緯があります。
今回は令和になったということで、Reactに再挑戦してみようというものです。

以下の方向けに書いていきたいと思っております。
– Reactの初学者
– javascriptは書いたことがある
– webアプリを作りたい

## そもそもReactとは

Reactの公式サイトをみると以下のように言葉が添えられています。
**「ユーザインターフェース構築のための JavaScript ライブラリ」**

ブラウザ上に表示する全体をコンポーネントという単位に分解し、そのコンポーネントを実装するのに非常に楽な開発体系を提供するライブラリと考えております。よりUIライクな発想で開発を進めるためのライブラリとも取れるかと思います。

## React を起動する

Reactを起動するにはPCにnpmもしくはyarnのコマンドを叩ける状態にしてもらいたいと思います

ball sort puzzleを作ってみた

# はじめに
そのままなんですが、ball sort puzzleを作ってみました。
作ったきっかけは、妻が広告がうざいというから、そんなの簡単に作れるわとうっかり言ってしまい、３連休がつぶれました。

こんな画面のものです。広告は出ませんｗ
ボールの色と深さ、空きの数を指定して、開始します。

実行環境はこちら
http://ball-sort-puzzle-yo16.herokuapp.com/

ソースはこちら

https://github.com/yo16/ball_sort_puzzle

# 技術的なこと
いつものとおり、JavaScriptでやってしまいました。新しいことを身に着けたいと言いながら、いつも同じパターンに戻ってしまう。

d3.jsを使って、ボールを描いたり移動させました。d3.jsともだいぶ仲良しになってきました