- 1. ユーザー満足度を高めるウェブアプリ開発：5つの必須設計思想とその実践法
- 2. 【JavScript】Objectの扱い方
- 3. 睡眠時間を計りたくて（計算）。
- 4. NeosVR コンパイラ その12
- 5. 【ブラウザ拡張機能】Reactサイトに外部からHTMLタグを挿入する
- 6. React, NextでPaginationを作成
- 7. 【Elysia/Bun】静的プラグイン(Static Plugin)について
- 8. NeosVR コンパイラ その11
- 9. 田舎と都会論争に審判登場！？
- 10. JavaScriptは「参照渡し」をしないって本当？
- 11. Pythonでフォルダの内容を比較してHTML化 (for NI Maschine)
- 12. JavaScript 第8回 初歩のモードレスウィンドウ（必要最低限）
- 13. 【L2、L3】サーバーでWorkerを動かしてみる
- 14. VueプロジェクトでのMQTTの使用方法
- 15. JavaScript MQTT Client: MQTT.js 初心者向けガイド
- 16. electronでfirebase-authを使うときにlocalhostを承認済みドメインに入れたくない！
- 17. gulpfileをES Modulesに変換
- 18. D3 v7 応用 – Enter / Update / Exit
- 19. 【JS/ES6】@ts-checkを使ってJSファイルで型チェックする
- 20. ESMとCJSのimportとexport
ユーザー満足度を高めるウェブアプリ開発：5つの必須設計思想とその実践法
最近のウェブアプリは、以前に比べて機能が充実し、複雑になっています。そのため、信頼できるアプリを開発するためには、適切な設計の考え方が必要です。
ここでは、モダンなウェブアプリを開発するための5つの設計の考え方を紹介します。
# 1 モジュール化
モジュール化とは、アプリを小さな部品（モジュール）に分割することです。モジュール化を行うことで、以下のメリットがあります。コードが読みやすくなり、理解しやすくなる
問題が発生したときに原因を特定しやすくなる
機能の追加や変更がしやすくなる
モジュール化を行う際は、以下のようなポイントを押さえましょう。– モジュールの単位は、小さく単純なものにする
– モジュールの役割や責任を明確にする
– モジュール間の依存関係を少なくする## 1-2 モジュール化のサンプル
モジュール化の概念を具体的なコードの例で説明します。
ここでは、簡単なユーザー管理システムを想定し、ユーザーの情報を扱うUserクラスとユーザー情報の検証を行うValidatorクラスをモジュールとして分割します。
以下に、その二つのモジュール（User.js と V
【JavScript】Objectの扱い方
# はじめに
プロパティへのアクセス方法が色々あって、あれ？ってなったので整理してみます。# オブジェクトとは
Javascriptにおけるオブジェクトとは、プロパティの集まりである。
プロパティは名前（キー）と値との関連付けで成り立っている。
中括弧`{}`で定義することができる。var myCar = {
make: “mini”,
model: “clubman”
year: “1995”,
}オブジェクトに割り当てられていないプロパティは`undefined`になる。nullではないので注意。（条件分岐でnullだけを指定していたらバグの温床になりそうですね。知らなかった。`undefined`と`null`の違いもよくわからんので後ほど調べますか。）
# プロパティへのアクセス方法
ドット演算子とブラケット記述法でアクセスできる。myCar.make // mini
myCar[“make”] // mini#### ドット演算子での注意点
プロパティ名
睡眠時間を計りたくて（計算）。
# 睡眠時間を計りたくて（計算）。
無性に睡眠時間を計りたくて作ってみた。スマホのストップウォッチを使用すれば計れるのですが、なんか目覚めとともに作りたくなったので作りました。
—
—
“`html:index.html
睡眠時間計算
就床時間–
NeosVR コンパイラ その12
# 概要
NeosVRのオブジェクトを外部で生成するコンパイラを開発した。
俺コードのコンパイラ仕様を見直しする。# 俺コードのコンパイラ仕様変更
– elixir製オブジェクトサーバーを取りやめる。
– obj.jsを採用。# サンプルコード
“`
var out = document.getElementById(“out”);
var src = document.getElementById(“src”);
var a = {};function run() {
var str = src.value;
var lines = str.split(“\n”);
for (var i = 0; i < lines.length; i++) { if (lines[i].substring(0, 1) == "{") { lines[i] = lines[i].replace("{", ""); var code = lines[i].split("} ="); var va = code[0].split(",
【ブラウザ拡張機能】Reactサイトに外部からHTMLタグを挿入する
## 事象
Chrome拡張機能にて、**Reactを使用しているサイトに対し** 下記のようにHTMLコードを直書きしたところ、
“`javascript
root.innerHTML += new_HTML
“`
そのサイトの更新が停止した。## 解決手法
`innerHTML`書き込みでは、 **`React`のレンダリングが機能しない**`appendChild`で解決される。
“`javascript
root.appendChild(new_tag)
“`これで [ページ乗っ取りの王、ページ乗っ取りキング](https://qiita.com/uts1_6/items/11e348ead4bae71571b8)ですね。
React, NextでPaginationを作成
## はじめに
大学の単位が取れれば来年から正社員です。
つまりまだ学生のひよっこです。
自力で考えたコードなので、強強な方が見ればそれはよくないよ!!みたいな書き方をしている可能性もあります。
## 前提
必要なデータを全件取得しstateに配列で保存している。
そこから任意の個数で表示し、ページネーションで表示を切り替えることを想定しています。
環境はNext14 x TypeScriptで作成しています
## 今回使用するコード
“`tsx
“use client”;import { useState } from “react”;
const items = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const SHOW_COUNT = 3;export default function Home() {
const [offset, setOffset] = useState(1);
const [results, setResults] = useState(items);const nextPage = () => {
【Elysia/Bun】静的プラグイン(Static Plugin)について
ここまで、起動用の index.ts ページにHTMLもCSSも全部まるっと書いてきましたが、例えば、Express などで言うところの「app.use(express.static(‘public’));」みたいな機能は、Bun にも Elysia にもあります。
# ディレクトリ構成
例えば、 Elysia で次のようなディレクトリがあるときに、、、
“`
.hoge/
├─ src/
│ └─ index.ts // 起動用ファイル
├─ public/
│ ├─ tako.png
│ └─ piyo/
│ └─ ika.png
“`
tako.png
ika.png
NeosVR コンパイラ その11
# 概要
NeosVRのオブジェクトを外部で生成するコンパイラを開発した。
俺コードの言語仕様を見直しする。# 俺コードの目的
NeosVRのオブジェクトの生成を記述する。# 俺コードの言語仕様
– use Ore test0
rootのオブジェクトを実体化して、「test0」と名前を付ける。– new LogiX.T
LogiXオブジェクトの「T」を実体化する。– add LogiX.T
LogiXオブジェクトの「T」をrootのChildrenにpushする。– {a} = LogiX.T
aは、バーチャルワイヤーでLogiX.Tの出力に繋ぐ
入力は無し。– {} = LogiX.Display a
バーチャルワイヤーaを、LogiX.Displayの入力に繋ぐ
出力は無し。基本 左辺が出力、右辺が入力。
# 俺コードのサンプル
LogiXノード、TとDisplayを繋ぐコード。“`
use Ore test0
new LogiX.T
new LogiX.Display
{a} = LogiX.T
{} = LogiX.Display a
ad
田舎と都会論争に審判登場！？
## 1. 田舎ｖｓ都会
田舎に住むのはどうとか、都会に住むのはどうとか
色々と持論を展開している人は多いですね。田舎の定義や都会の定義は
ご存じでしょうか。広辞苑によると
ということみたいです。
都会はまあ皆さんのイメージにお任せします。
皆さんは田舎に住みたいですか？
都会に住みたいですか？
現在は田舎に住んでいますか？
都会に住んでいますか？わたしは田舎派なのか都会派なのかというと
利便性という点では都会が好きです。
ゴルフ場が多い点では田舎も好きです。とは言うものの
どこまでが田舎で
どこからが都会なのかの判断は難しいと思います。私自身も自分が生まれ育った場所が
都会なのか田舎なのかは判断がつきません。自信をもって
「田舎だ」とか「都会だ」
と判断する人はいます
JavaScriptは「参照渡し」をしないって本当？
## 概要
タイトルの答えは**YES.**JSを勉強し始めたばかりで、JSにおける値渡し/参照渡し/参照の値渡しの処理の違いがわかりませんでした。
調べていくうちに「え、JSって参照渡ししないんだ！？」となったので、ここに学んだことをまとめようと思います。## 結論
– JSでの処理は「プリミティブ値は値渡し」「オブジェクトは参照渡し」と言われていますが、厳密には「参照渡し」はしません。
– JSでは「参照の値渡し」(共有渡し、本文中では共有渡しに統一)が行われています。## 値渡し、参照渡し、共有渡しとは
– 値渡し
– 引数に値を渡す時、変数の値をコピーして渡す処理。
– 呼び出しもとの変数は変化しません。
– 参照渡し
– 引数に値を渡す時、参照(=メモリ番地)で渡す処理。
– 変更が呼び出しもとに反映されます。
– 共有渡し
– 引数に値を渡す時、変数に格納されている参照をコピーして渡す処理。
– 大抵の言語はオブジェクトを渡す時にこの形態になります。
– 参照渡しと似ているよ
Pythonでフォルダの内容を比較してHTML化 (for NI Maschine)
## はじめに
ふたつのフォルダを比較してHTMLで見やすく表示するプログラムを作りました。
ファイル数が少なければlsとdiffでもいいですし、[WinMerge](https://winmerge.org/)を使うとかなり見やすくなります。しかしながら数万ファイルあるとそれでも不十分です。やりたいことは、2カラムで左右にそれぞれ階層のあるフォルダを比較して、フォルダを開いたり閉じたりできること、また必要なファイルを見つけるために検索機能もあると嬉しいです。
いろいろ探しても望むツールが見つからなかったのでPythonとJavaScriptで自作しました。Pythonでフォルダ探索をしてHTMLを出力して、階層の開閉と検索はJavaScript側で実装しています。
## ソースコード
https://github.com/aike/M2LibraryList
## デモページ
https://aike.github.io/M2LibraryList/
モードレスであることを確認するため、もうひとつウィンドウを作ってもみます。
[Vue](https://vuejs.org/)は、ユーザーインターフェイスを構築するためのプログレッシブなフレームワークです。他の一枚岩のフレームワークとは異なり、Vueは段階的に採用可能な設計がなされています。コアライブラリはビューレイヤーにのみ焦点を当てており、他のライブラリや既存のプロジェクトと簡単に統合して使用することができます。一方で、現代的なツールとサポートライブラリと組み合わせることで、洗練されたシングルページアプリケーションを動かすこともできます。
[MQTT](https://mqtt.org/)は、公開/購読モデルに基づいた**軽量IoTメッセージングプロトコル**です。このプロトコルは、一対多のメッセージ配布とアプリケーションの非結合を提供します。低い伝送消費とプロトコルデータ交換、最小化されたネットワークトラフィッ
JavaScript MQTT Client: MQTT.js 初心者向けガイド
**目次**
– [はじめに](#はじめに)
– [インストール](#インストール)
– [MQTT ブローカーの準備](#mqtt-ブローカーの準備)
– [MQTT.js の簡単な例](#mqtt-js-の簡単な例)
– [MQTT.js コマンドライン](#mqtt-js-コマンドライン)
– [MQTT.js API 紹介](#mqtt-js-api-紹介)
– [MQTT.js Q&A](#mqtt-js-q-amp-a)
– [MQTT.js 上級](#mqtt-js-上級)
– [まとめ](#まとめ)## はじめに
[MQTT.js](https://github.com/mqttjs/MQTT.js) は [MQTT プロトコル](https:/
electronでfirebase-authを使うときにlocalhostを承認済みドメインに入れたくない！
*この資料はナレッジワークの社内勉強会で利用したものを公開したものです
—
# 問題点tl;dr
electronのrendererプロセスでfirebase-sdkを利用する場合、URLにlocalhostを使うことになるので、firebase-authの承認済みドメインにlocalhostを許可せざるをえないという問題があります
—
# 解決策tl;dr
以下のように解決します
– mainプロセスへfirebase sdkを利用する処理を逃がす
– sign inはサーバーを用意し、firebae-adminで `createCustomToken` を使って行い、そのtokenをmainプロセスで利用する
– ただし、mainプロセス（=nodeのプロセス)上ではfirebase-authのユーザーのPersistができず、アプリ立ち上げ時に過去に取得した認証情報を取ることができない問題がある。その対処としてelectron用に独自のpersistenceを実装することで問題を解決する（参照実装は[こちら](https://github.com/sisis
gulpfileをES Modulesに変換
## はじめに
今まで画像圧縮はオンラインツールを使っていたのですが、今さら自動化しようと思い
npm packageの[imagemin](https://www.npmjs.com/package/imagemin)を使おうとしたのがきっかけです。
imageminはVersion 8 からES ModulesになったようなのでgulpfileもCommonJSからES Modulesへ書き換えることにしました。
### 環境
- Node
- Ver. 20.9.0
- npm
- Ver. 10.1.0
- Gulp
- CLI Ver. 2.3.0 Local Ver. 4.0.2
- Gulpはnpxで実行しています
## 手順
1. gulpfile.jsの拡張子をgulpfile **.mjs** にリネーム。拡張子を変更したくない場合はpackage.jsonに `”type”: “module”` を追記
“`js
D3 v7 応用 – Enter / Update / Exit
[D3 v7 入門 – Enter / Update / Exit – Qiita](https://qiita.com/sand/items/8b5ca42d1bf511e61ccd)
[D3 v7 応用 – Enter / Update / Exit – Qiita](https://qiita.com/sand/items/999715cebe52ade66c0b)この前の記事では D3 の基本概念である **Data Join – Enter / Update / Exit** の基礎について説明しました。**これはデータセット（JavaScriptの配列）とView要素（DOM 要素）を結びつけるものです。** ハッキリ言ってこの基本概念は、使用例を見ないとわかりにくいと思います。本記事の目的は **Data Join – Enter / Update / Exit** の使用例をみることで、この基本概念の持つ意味を探ることです。
D3 は、提供されたデータのグラフを書き、その後、時々刻々と変化するデータを反映して、グラフも更新していきます。それを効率よく行うために考
【JS/ES6】@ts-checkを使ってJSファイルで型チェックする
# はじめに
JS勉強中に教えてもらった@ts-checkが便利だったので忘れないようにメモ。# @ts-checkを使ってJSファイルで型チェックする
JSでは関数や変数などの型を正しく記述する必要がある。
vocodeにはJSファイルをtypescriptのように型チェックできる機能がある！それが@ts-check！
例えば下記のような誤ったコードがあったとする。
通常のJSファイルだと特にエラー的なものは出ないが、
ファイルの最初に「@ts-check」を追加すると、pushに赤い下線が表示される。
 => {
//do something
}module.exports = somoFunc
“`
### 複数のモジュールのエクスポート
“`sample-1-2.js
const someFunc () => {
//do something
}
const hoge =”hoge”// その1 まとめてexport
module.exports = {
culc: someFunc
hoge: hoge
}
// その2 一つひとつエクスポート
exports.someFunc = () => {
//do something
}
exports.hoge = “hoge”“`
## ESMの場合のExport
### 一つのモジュールをエクスポートする場合
“`sample-2.js
//デフォルトのエクスポート その１
expo
