- 1. スロット
- 1.0.1. React入門５: リファクタリング [インタラクション編]
- 1.0.2. ブラウザ間で3Dシーンを同期: localStorageとThree.jsの革新的活用
- 1.0.3. NatureRemoをPCで操作するためChatGPTに頑張ってもらった
- 1.0.4. #p5js を使って 2023年の後半半年で作った作品に関し利用した技術を振り返る【p5.js】
- 1.0.5. plunkerでpdf.js
- 1.0.6. React で WebWorkerを使う方法
- 1.0.7. ファミコン互換機からパッキパキのピクセル抽出
- 1.0.8. ワンライナーなdo{}while()
- 1.0.9. N予備校動くWebアプリコンテスト2023 冬のページを作成しました
- 1.0.10. クライアントサイドのみでExcel出力
- 1.0.11. 2023年にOracle Formsを立ち上げるための代替方法
- 1.0.12. ブラウザ上の任意の場所をクリックした際、その要素を取得
- 1.0.13. #プログラミング #Javascript # バグネタ
数値と文字列の不等式
# 不等式
シンプルな事ですが、
数値の不等式と文字列不等式は結果が異なります。
当たり前のように聞こえますが、
基準が異なるために起こります。数値の場合は数値同士の差分による結果
文字列の場合はUnicodeに沿ったポイントの差（unicode上の並び順というイメージ）# 例
数値
9<10 結果 true 文字列 "9" < "10" 結果 false これは9より1の方がunicodeのポイントが小さい為。 ※さらに細かい理由は分かったら追記します。
Bunの実行可能ファイルを作ってみた
Bunも実行可能ファイルを作ることができます。こんな感じです。
“`sh: compile する
$ bun build ./hello.ts –compile
“`これで、hello.ts ファイルから hello という実行可能ファイルが生成できます。
–compile をつけて bun build するだけです。
ユーザーが Bun をインストールしていなくても、アプリを実行可能ファイルとして単一のファイルで配布できるわけで便利ですね。まぁ、Node.jsでも v19.7 から実装されていますが、ランタイム一体のアプリという感じでしょうか。
“`sh:出力ファイル名を指定して compile する
$ bun build ./hello.js –compile –outfile myhello
“`
–outfile ＜ファイル名＞ をつけると、hello.ts ファイルから myhello といった名前を指定して実行可能ファイルが生成できます。前後しますが、今回はファイルの中身をこれにします。
“`js:hello.ts や hello.
WebUI のドキュメント
## はじめに
タイトルがわかりにくいですが、ここで書いている WebUIというのは、Chrome（Chromium）の WebUIのことであり、普段からChromeを通して使っているものです。chrome://から始まる特別な表記のURLをアドレス欄に入力してアクセスします。chrome://about を見ると一覧があります。この部分に使われている Chromeの UIのことをWebUIと呼んでおり、HTML/CSS/Javascript で作られています。Chromeチームの人がWebUIを開発する開発者向けにドキュメントを整備しています
https://chromium.googlesource.com/chromium/src/+/main/docs/webui_explainer.md
## WebUI
私は普段 Javascriptを書かないので、Javascriptのちょっとしたことを調べたりするのにコードを書くというよりも毎回Webを検索したりしています。
最近は（Webの検索もしますが）代わりにchromium のWebUIのコードを検索する事が増えまし
[備忘録]Numpyでいうところの`array[:][idx]`をJSでもやりたーい
JavaScriptで2次元配列から特定の列の全要素を取得する方法について、Numpy`array[:][idx]`と同様の操作を行う方法を紹介。
# メモ
“`javascript
let idxColumn = array.map(row => row[idx]);
“`# mapを使う
Numpy、2次元配列（リストのリスト）から特定の列の全要素を簡単に取得できます。例えば、`array[:][1]`は、配列の全行から2列目（インデックス1）の要素を取得します。
JavaScriptで同じことを行うには、`map`関数を使用します。`map`関数は配列の各要素に対して指定された関数を実行し、その結果を新しい配列として返します。
### サンプルコード
以下のサンプルコードは、JavaScriptで2次元配列の特定の列の全要素を取得する方法を示しています。
“`javascript
let array = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];// 1列目の要素を全て取得
let firstColumn = array.map
React + TypeScript: use-debounceでコードの繰り返し実行を間引く
同じコードが短い時間に繰り返し実行されるとき、処理を間引きたい場合があります。そのような制御([debounce](https://ejje.weblio.jp/content/debounce))を行うライブラリが[`use-debounce`](https://github.com/xnimorz/use-debounce#readme)です。
* 間引き処理に特化しているため、容量は1KBにも及びません。
* 使い方が標準的で、実装は[Underscore](https://underscorejs.org/)や[Lodash](https://lodash.com/)と同じです。
* サーバーレンダリングにも対応しています。間引きの処理が必要な例として本稿で採り上げるお題は、公式サイトを参考にしたつぎのふたつです。
* テキストフィールドに入力される値の変更を間引く。
– 値をAPIにリクエストするような場合に送信の負荷を下げる。
* 画面がスクロールされるときに再描画を減らす。
– スクロールする範囲が大きい場合に逐次描画し直さない。# インスト
「文字の類似度」からポケモン名をサジェストするコンポーネントを実装【React】
# 概要
前回、ChatGPTを利用してレーベンシュタイン距離をもとにサジェストの配列を作成するプログラムを実装しました。
https://qiita.com/ishi720/items/3f58685ce6230c0e4d7d
今回は、Reactを使ったWEBアプリケーションに組み込んで実装したいと思います。
# 環境
– React
– Javascript
– sass# 完成したもの
一番名前入力が難しいであろう「バウッツェル」を曖昧な入力でも補完することができます。
**リポジトリはこちらとなります**
https://github.com/ishi720/levenshtein_distance_search
# プログラム
“`js:App.js
import React, { useSt
WEBで出来るスロット作成
# はじめに
高校生を卒業した私達は18歳。もうりっぱな成人ですね。18歳になると解禁されるものといえば…?
そう！パチンコなんですねぇ！でもパチンコはお金もかかるし、どうにかして気分だけでも味わえないものか..
じゃあ、自分で作ればいいじゃん。ということで今回は、Web上で動かせるスロットを作ってみました。
スロット
画像をうまく揃えられるように頑張って
React入門５: リファクタリング [インタラクション編]
# はじめに
私自身の復習兼、備忘録的な意味もあり、複数回の記事に渡って React を用いてマルバツゲーム(三目並べ)を開発していきたいと思います。
– [React](https://ja.react.dev/)
– [CodeSandbox(公式)](https://codesandbox.io/)
– [CodeSandbox(非公式)](https://csb-jp.github.io/)## シリーズの一覧
1. [React入門１: 環境構築 [オンライン版]](https://qiita.com/banana_bancho/items/64fa6ccb58101eadbb63)
– [React入門1.5: 環境構築 [ローカル版-番外編]](https://qiita.com/banana_bancho/private/30f5d9d2c5eea00ac11c)
1. [React入門２: 盤面の作成](https://qiita.com/banana_bancho/private/c50495b5d4c30555cec3)
1. [React入門３: イン
ブラウザ間で3Dシーンを同期: localStorageとThree.jsの革新的活用
Xでおもしろいアプリケーションを見つけたので紹介します。
https://github.com/bgstaal/multipleWindow3dScene
Three.jsとlocalStorageを使って、複数のブラウザウィンドウ間で3Dシーンを同期することで実現しています。
どのようにコードが書かれているか、重要な部分を抜粋して紹介していきます。:::note info
3Dシーン
複数の3Dモデルや環境要素（例えば光源、カメラ配置、背景など）を組み合わせた、より包括的な立体的な表示環境のこと
:::## 基本的な処理の流れ
1. **ウィンドウの初期化**:
– 新しいウィンドウを作成し、既存のウィンドウと同期させます。
– 同期は、`localStorage`に保存された状態情報を共有することで行われます。2. **3
NatureRemoをPCで操作するためChatGPTに頑張ってもらった
## NatureRemoをPCで操作したくなった
NatureRemoとは、スマートフォンから家電の操作ができるようにするリモコンのことです
テレビやエアコン、照明などの赤外線で操作されているリモコンを1つに集約し、スマートフォンなどのアプリ上から家電を操作することができます
我が家にはコイツが導入されており、現状では各部屋の照明、エアコン、扇風機等が管理されています
専用のスマホアプリから操作しても良いのですが、PCで作業をしている時にスマホを開き、アプリを開き、ボタンを押すのはめんどくさいな、PCでささっと動かせればな～という気持ちがありました
PC版のアプリは発表されておらず、非公式のアプリは僕の自宅環境では動作しませんでしたので、今回PC版のアプリを作成しようと思い立ちました## なぜChatGPTを使うのか
弊社にはChatGPT手当というものが存在します
エンジニアが働きやすい会社を目指す社風のため、業務でChatGPTを使うなら支援するべという事です いい会社ですね
「詳細な仕様を伝えたらそのまま動くプログラムが出来た！」的なポストがちょうどX(旧Twitter)で
#p5js を使って 2023年の後半半年で作った作品に関し利用した技術を振り返る【p5.js】
この記事は、[p5.js Advent Calendar 2023](https://qiita.com/advent-calendar/2023/p5js) の 8日目の記事です。
## 今回の内容
今回の内容は、2023年に p5.js を使って作った作品に関し、今年の後半半年で作った作品を振り返り、そこで使った技術を書き出してみようと思います。なお、前半については以下の記事で振り返りをしました。
●#p5js を使って 2023年の前半半年で作った作品に関し利用した技術を振り返る（一部抜粋）【完走賞ゲット-8】 #JavaScript – Qiita
https://qiita.com/youtoy/items/f69d89a04fd6dd012048## p5.js を使って作った作品
2023年に p5.js を使って作った作品を振り返っていこうと思うのですが、わりとたくさん試作をしたので、一部のみ抜粋する形で進めていきます。### 「window.screenTop／screenLeft」プロパティを使う
以下は、ブラウザのウィンドウをスクリーン上で動かし
plunkerでpdf.js
# 概要
plunkerでpdf.jsやってみた。# 参考にしたページ
# サンプルコード
“`
class MyPdf {
constructor(canvas, afterRendered) {
this.canvas = canvas
this.context = this.canvas.getContext(‘2d’)
this.pageNumber = 1
this.rendering = false
this.afterRendered = afterRendered
}
setAfterRendered(afterRendered) {
this.afterRendered = afterRendered
}
loadDocument(path) {
const renderPdf = (pdf) => {
this.pdf = pdf
this.getPage
React で WebWorkerを使う方法
# React + WebWorker + ときどきwebpack
React + WebWorker を実現するために試行錯誤した記録とたどり着いた解決策をここに記します。
## 環境
webpack5 + React 17 (React 18 でも同じことですが)
## React は値を保持しない
まず知っておくこととして関数コンポーネントは純粋関数でなくてはなりません。
そのため関数は再レンダリングにまたがって値を保持する方法として提供しているのが
`useState`, `useRef`, `useMemo`, `useCallback`等であり、
関数コンポーネント内で宣言された JavaScript 変数は再レンダリングをまたがって保持しません。
毎度レンダリング時に関数コンポーネントは再実行され、以前の変数は消え、今回のレンダリングで同じ変数は初期値を与えられます。
そのため worker を使うためには
どうにかして webworker のインスタンスを再レンダリング時にまたがって保持する必要があります。
## よく見かける提案
ネットを検索
ファミコン互換機からパッキパキのピクセル抽出
ファミコン互換機の眠い映像から、くっきりした画面を取得
キャプボ（カメラ）から映像を取得してCanvasのImageDataを加工します
“`js:AVerMedia.js
import {View} from ‘./js/View.js’class Pixelater extends View{
constructor(from,to){
super(‘Pixelater’)
this.delta = [10,0]//カーソルキーで微調整
this.source = new AVerMedia(from,{loaded:e=>{
console.log(e)
this.in = new Canvas(this.source.size,{willReadFrequently:true})
t
ワンライナーなdo{}while()
イテレータを使う
– イテラブル(反復可能プロトコル)
– `@@iterator` つまり `[Symbol.iterator]` がイテレータを返すメソッドである
– イテレータ(イテレータプロトコル)
– `next` がイテレータリザルトを返すメソッドである
– イテレータリザルト
– `value` が現在の値を表す
– `done` が次の値を生成できないことを表す真偽値
– trueのとき`value`は無視される“`js
({value:’hello’,done:false});// イテレータリザルト
({
next:()=>({value:’hello’,done:false})
});// イテレータ (注:無限ループ)
({
next:()=>({value:’hello’,done:false}),
[Symbol.iterable](){return this;}
});// イテラブル (注:無限ループ)
({
[Symbol.iterable]:()=>({
N予備校動くWebアプリコンテスト2023 冬のページを作成しました
## 概要
今年も 「N予備校動くWebアプリコンテスト2023 冬」 のコンテストを担当させていただくことになりました。
コンテストは2017年から夏・冬に開催しておりまして、今年で7年目となります。N予備校を学んでいる皆さん！ご応募お待ちしております :bow:
さて、2022年の夏からコンテストを担当させていただいているのですが、コンテストのページも作成しております。
これまで以下のページを担当してきました。
– 2022年夏
– 応募ページ: https://progedu.github.io/webappcontest/2022/summer/entry/index.html
– 結果発表ページ: https://nyobi-contest2022.web.app/
– 2022年冬
– 応募ページ: https://n-contest.web.app/2022/winter/entry/index.html
– 結果発表ページ: https://n-contest.web.app/2022/winter/result/index.html年
クライアントサイドのみでExcel出力
# 記事概要
クライアントサイドの処理のみで、事前に準備したTemplateであるExcelファイルの中身を更新・DLを実現する。# 利用ライブラリ
– xlsx-populate
– FileSaver.js# スクリプト
“`html
2023年にOracle Formsを立ち上げるための代替方法
マイクロソフトが[2022年6月にインターネット・エクスプローラーを正式に廃止](https://blogs.windows.com/windowsexperience/2021/05/19/the-future-of-internet-explorer-on-windows-10-is-in-microsoft-edge/)すると発表したことで、オラクル・フォームで構築されたアプリケーションに依存している組織に新たな打撃が与えられた。この最新の発表は、主要なブラウザーがJavaアプレットと、Oracle Formsがブラウザー上で動作するために依存していた基礎的なNPAPI技術のサポートを、セキュリティ上の問題から、最新のHTML5を優先して廃止するという流れに続くものだ。
ここ数年、
ブラウザ上の任意の場所をクリックした際、その要素を取得
# はじめに
ブラウザで開発ツールを使用して、いろいろいじっていると
時たま、今マウスカーソルが当たっている要素は何に該当するのだろうか。
時になることがある。
(開発ツールでもできるが、1度クリックするともう一度できないため。)
# 結論
“`
document.addEventListener(‘click’, function(event) {
const clickedElement = event.target;
console.log(clickedElement);
});
“`
いたるところでクリックすると、開発ツールのConsoleに出てきます。
試してみてください。
#プログラミング #Javascript # バグネタ
ずっと使ってる人だと当然だろうけど、たまに使うと忘れててやらかすもの。
“`
> [Number(3),Number(15),Number(10),Number(1)].sort()
> (4) [1, 10, 15, 3]0: 11: 102: 153: 3length: 4[[Prototype]]: Array(0)
“`なんでかというと下記の仕様の通り、文字列に変換されてからソートされるから。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
ただ数値順にしたいだけでもこうせにゃならん。“`
～.sort(
(a, b) => {
return (a > b ? 1 : -1);
}
);
“`
