- 1. kintone テーブルの変更イベントで行位置を求める
- 2. TypeScript – カレンダー日付の妥当性確認(2)
- 3. jQueryで実行順序を保証する記述方法
- 4. 気になるあの人のタイプは〇〇！
- 5. Vueでリアクティブ性が失われない分割代入
- 6. 【JavaScript】正規表現を使ってみたりパスワードを画面上に表示させたりする
- 7. 式の余興に「AWS＋GASシステム」で超盛り上がった件 〜画面編〜
- 8. ユーザー満足度を高めるウェブアプリ開発：5つの必須設計思想とその実践法
- 9. 【JavScript】Objectの扱い方
- 10. 睡眠時間を計りたくて（計算）。
- 11. NeosVR コンパイラ その12
- 12. 【ブラウザ拡張機能】Reactサイトに外部からHTMLタグを挿入する
- 13. React, NextでPaginationを作成
- 14. 【Elysia/Bun】静的プラグイン(Static Plugin)について
- 15. NeosVR コンパイラ その11
- 16. 田舎と都会論争に審判登場！？
- 17. JavaScriptは「参照渡し」をしないって本当？
- 18. Pythonでフォルダの内容を比較してHTML化 (for NI Maschine)
- 19. JavaScript 第8回 初歩のモードレスウィンドウ（必要最低限）
- 20. 【L2、L3】サーバーでWorkerを動かしてみる
kintone テーブルの変更イベントで行位置を求める
kintone テーブルの変更イベントには、テーブル行位置の情報が無いので、テーブル行位置を求めてみます。
# 概要
テーブルの変更イベント時の情報には、テーブル行のオブジェクトがあるので、テーブルの各行とオブジェクト比較を行うと、テーブル行位置を求めることができます。
例：
table[i] === event.changes.rowcybozu developer network [レコード編集画面でフィールドの値を変更したときのイベント](https://cybozu.dev/ja/kintone/docs/js-api/events/edit/edit-change-event/)
>changes.row オブジェクト 値を変更したテーブルの行データ
行を追加した場合：追加した行のデータ
行を削除した場合：「null」
テーブル外のフィールドを変更した場合：「null」# 確認用アプリ
テーブル内項目を変更したら、テーブル行位置に行位置をセット
FullCalendarライブラリで日付の移動をするときに、2/31や4/31などカレンダー上存在しない日付であるかチェックをする関数をどうやって実装するか調べました。
前回記事：
https://qiita.com/taitaitai55/items/5c0d8e1446474b77b208
■改善点
Dateオブジェクトを生成するときに「new Date(‘1/01/41’)」とすると、2041/1/1(Tue Jan 01 2041 00:00:00 GMT+0900 (日本標準時))で生成されます。
1年1月41日と解釈すると、カレンダーの日付として存在しないため、厳密なチェックをする必要があります。
厳密なチェックとして、文字数のチェックや正規化を使ったカレンダーの日付の範囲であるかのチェックを関数に加えてみました。■関数
“`Typescript:sample1.ts
// 引数は、年・月・日の３つ
// 戻り値は、true:カレンダー日付として存在、false:カレンダー日付として存在しない
const isValidCalendarDate = (year:
jQueryで実行順序を保証する記述方法
※この記事は僕がぶち当たった問題をとりあえずChatGPTくんに丸投げしてライティングしてもらったものです。
jQueryを使用してWeb開発を行う際、時には特定のコードが正確な順序で実行されることが重要です。
これには、異なる要素や処理が依存関係を持っている場合や、特定の初期化手順が必要な場合があります。
この記事では、そのようなケースで実行順序を確実に保証するためのjQueryの記述方法に焦点を当てます。# コードの依存関係を理解する
まず初めに、コード内の異なる部分がどのように依存しているかを理解することが重要です。
例えば、特定のDOM要素が存在するかどうかを確認してから特定の処理を実行する場合などが挙げられます。
“`js
$(document).ready(function() {
// 依存関係を確認
if ($(‘#myElement’).length) {
// 依存関係が満たされたら処理を実行
myFunction();
}
});function myFunction() {
// ここで
気になるあの人のタイプは〇〇！
## 1. 見た目のタイプ判定をする冷徹なLINEBot
今回は合コンや婚活を想定したLINEBotを作ったのでご紹介します。
皆さんは気になる異性に見た目がタイプであることを伝えた経験はありますか。
伝え損ねたせいで
**友達どまりになってしまった。**
ということがあるんじゃないでしょうか。まあ伝えていたら進展が見られたかはわかりませんけどね。
しかし、あの頃
上手に伝えられていたら
後悔は少ないと思っている方は多いのではないでしょうか。なかなか相手に直接、そういった気恥ずかしいことを伝えるのは
抵抗がありますよね。そこで
***Taechable Machine***
の力を借りて
その悩みを解決させる
***LINE Bot***
を作りたいと思います。## 2. 完成したLINEBot
このLINEBotを使えば
顔写真を送ってもらうことで
その相手に
見た目がタイプ
Vueでリアクティブ性が失われない分割代入
まだ追記予定ですが、いつになるかわからないのでとりあえず公開
## 概要
Vue3.x Composition APIにて使用される`ref()`や`reactive()`といったリアクティブな変数を定義する機能があります。よく言われるのは**オブジェクト型リアクティブに分割代入をするとリアクティブ性が失われる**といった話がありますが、実はそうでない場合が簡単に起こりうることが分かったので書いてみようと思います
## 読者対象
・TS・JSでのある程度の変数型を使ったことがある人（特に配列やMap）
・Vue3.xのComposition APIを触ったことがある人
・Vueのリアクティブを深く理解したい人## 基礎知識：`ref()`と`reactive()`の原理
まずはVueでのリアクティブのおさらいです
Composition APIではリアクティブな変数を利用するために
– `ref()
【JavaScript】正規表現を使ってみたりパスワードを画面上に表示させたりする
こんにちは。
株式会社クラスアクト インフラストラクチャ事業部の大塚です。前回、JavaScriptの勉強の一環でユーザ/パスワードを入力するフォームでデータが入っていない場合の警告ダイアログを表示する方法を学びました。
https://qiita.com/ohtsuka-shota/items/a5a3fcedc7734879e2bd
これだけでも勉強になったのですが、ダイアログを出さないまでも入力を求めるようにするくらいであればHTMLのrequiredでも出来たりします。
そこでもう少しJavaScriptの利便性を確認するために、入力された文字列が英語かどうかを確認するためのコードの書き方や●●という風に隠されているパスワードをどうやって表示させるのかを勉強してみました。# 実装した画面
パスワードの目の部分が雑ですが、こんな感じです。
」の続きになります。
※**前回記事を読んでいない人はぜひ読んでください。お願いします!!**
今回の記事は主に、**システムの構成と画面周り**の実装に焦点を当てています。# 🙋♂️プランナーさんに確認
そもそも自作したとして、**会場側から許可が降りるのか**。**会場スクリーンにどのように出力できるのか**を確認しなければ、作る意味もないし、何も決められません。とりあえずプランナーさんに確認してしたところ、二つ返事で**許可が降りました**。
会場スクリーンの出力はHDMIに対応しているようでした。
意外にも、パソコンを利用した余興は一般的らしいです。
※どんな余興をしてるんだろう。。すごい気になる….さっそく、システム構成を考えてみました。
# 📏システム構成
Webアプリケーションでの実装としました。!
ユーザー満足度を高めるウェブアプリ開発：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/
モードレスであることを確認するため、もうひとつウィンドウを作ってもみます。
