Node.js で閲覧パスワードをつける方法

どうもこんにちはAtsu1209です。
今日は`Node.js で閲覧パスワードをつける方法`を書いていきます

## これを書く理由
理由? なんとなくです

# 使うもの
今回は
・express
・nodemon
・body-parser
・ejs
を使います。

# 作る
ではまず閲覧制限をかけたいページのコードを書きます

“`html:index.ejs

欲しい物を選んでね

ケーキ
金



“`
:::note alert
用途もコードも適当です。
:::
# index.js
次にindex.js

【Rails】data-disable-withって何者

## 結論
HTMLのフォーム送信ボタンに使用される、
**二重サブミットを防止**する便利なオプションです。

本記事では、
– data-disable-withの挙動
– data-disable-withが使えないケース
– data-disable-withが使えない時の代替案

をざっくりと説明していきたいと思います。

## data-disable-withの挙動
はじめに、data-disable-withとは
– Railsの`rails-ujs`[^1]というJavaScriptライブラリによって提供される
– フォーム送信ボタンにオプションとして指定することが出来る
– 指定されたボタンは、一度クリックされるとボタンが無効となる

といった特徴から、
railsでフォーム送信を行う際の二重サブミット[^2]対策として使われています。

以下はform_withにdata-disable-with属性を使用する際のサンプルコードです。

[^1]: **UJS**とは「Unobtrusive（控えめな）JavaScript」の略で、
rails-ujsとはrai

React 19 RC 触ってみた

# はじめに
この記事では、2024年4月から利用できるようになった React 19 RC を動かしてみます。

https://react.dev/blog/2024/04/25/react-19

# 開発環境
開発環境は以下の通りです。

– Windows 11
– VSCode
– JavaScript
– React 19.0.0-rc-cc1ec60d0d-20240607
– Vite 5.2.0

# ライブラリのアップデート
React 及びそれに関連するライブラリをアップデートします。
以下のコマンドで 19 RC の React と ReactDOM をインストールします。

“`powershell
npm install react@rc react-dom@rc
“`

インストールが成功すると、“`package.json“` の値が以下のように更新されます。

“`package.json
“dependencies”: {
“react”: “^19.0.0-rc-cc1ec60d0d-20240607”,
“reac

switch文で複数の式を扱いたい時

こんにちは。
いきなりですが、皆さんはswitch文を使う機会は多いでしょうか？
私はJavaScript(以下JS)を学び始めた頃に、if文よりも一度に多くの「もしも」が書けるんだ！　と感動し、
それ以降現場でもよく使う事が多くなったのですが、ふとある時に躓いたケースがありました。

**一度に複数の式で条件の判定をしたい！**

例えば、フォームに入力された複数の回答を条件に処理を振り分けたいと思います。
思考が単純な私は最初、以下のようにコードを書いてみました。
“`JavaScript
const A = // 項目1の回答;
cosnt B = // 項目2の回答;

switch(A,B) {
case ‘C, D’:
// 回答の値が「C, D」だった場合の処理
break;
}
“`
……はい、動きませんね！（ここでは省略しておりますが、defaultの結果が返ってきます）
switch文の冒頭の括弧に入れられる式は1つだけです。
カンマを入れれば複数判定してくれるだろう……という甘い考えは通じません。

▼ご参考にMDNさんのリン

[Bootstrap] 他のところをクリックしたらtoastを閉じる

Bootstrap5での話

qiitaやgoogleの、よくある感じのアカウントメニューを楽して作りたい。


とりあえずtoastで作っても、「外側をクリックしたら閉じる」という実装は自分でやらなきゃならなかった。
よくやりそうなことなので共有:ghost:

## 実際の動き Fiddle


https://jsfiddle.net/koyayashi/9yqLbzwe/49/

## コード

* bodyでのクリックハンドラで乱暴にhideすると、開いた瞬間に閉じら

にじさんじのタイピングゲームを作ってみた

## はじめに
およそ2年前にタイピングゲームを作りました。
http://hiroshihp.html.xdomain.jp/typing/

Vtuberグループ「にじさんじ」の**英語名**のタイピングです。にじさんじを知らなくてもプレイできますので、仕様の確認がてらプレイしてみてください。

大文字小文字は区別します（「S」であればshift + S）
スペースも入力対象になります。
英語名のタイピングなので「月ノ美兎（英語名:Tsukino Mito）」を「**Tu**kino Mito」のように打つことはできません。

タイピングゲームは結構ありふれた題材かと思いますが、「そういえばこれって自力で実装したんだったな」ということで、このタイピングゲームの実装をここに記したいと思います。

## 実装方法
### まずはinputに直接入力する
本ゲームは目に見えないinputタグに文字を入力し、その値を用いて判定をしています。
この方法により、「入力すべき文字が大文字のときは同時にShiftキーを押しているかを判定する」などの記述をなくすことができました。
“`html:i

【JavaScript】不特定多数の引数を受け取る関数を定義する

今回は、JavaScript で不特定多数の引数を受け取る関数を定義してみます。
受け取る引数の数が事前に決まっていない場合に便利です。

“`javascript:script.js
let attendMembers = [];

/**
* 引数の値を追加したリストを返す関数
* @param members
* @returns [attendMembers]
*/

function addMembers(…members) {
for (const added of members) {
attendMembers.push(added);
}
return attendMembers;
}
“`
上記の addMembers() 関数では「…引数」という形で記述することで、引数で指定された不特定多数の値（参加するメンバー）を受け取ります。

関数の外で attendMembers という参加メンバーのリストを定義しておくことで、関数を実行するたびにリストが初期化されず、値を保持し続けます。

“`javascr

JavaScript: 部分文字列編

部分文字列の出現回数を計算する処理(2回以上する出現する全ての部分文字列)における、組み込み関数の性能を比較してみます。ちなみに手法自体は素朴で馬鹿力任せのごみです。
“`js
//対象文字列
const txt=Object.getOwnPropertyNames(this).join(” “).slice(0,1<<12); // indexOf法 function ss_index(s){ for(var a=new Date,b=0,t=2,i,j,m={__proto__:null},p,f=1,z=s.length;f;++t) for(f=i=0;i

【雨嫌い必見】梅雨でも気持ちよく出かけたいよね☔それobnizで解決しようよ💡

## 雨って萎えません？
皆さん雨は好きですか？
私は嫌いです。

私の住む北陸地方は年間降水量ランキングTOP3（石川、富山、福井）を独占しています。
1日平均にすると**6時間**ほど降っている計算だそうです。

子どものころ、楽しみにしていた予定が雨のせいで中止になったことが何度あったことか。。。

## 気持ちよく出勤するために
そして大人になった今、我々は例え雨でも出勤しなけばならないのです。

雨を止ませることはできませんが、雨にイライラする気持ちを対処することはできるのではないでしょうか？

ですので、今回はobnizを使用して今日の天気が雨なら、楽しい音楽で傘を持参することを促す装置を作りしました💡

## 早速デモ
「傘ぁ～持っていきぃ～♪」と歌っていますね笑

https://x.com/vanch

【kintone × Zapier × Jira】特定ステータスでZapierを経由してJiraにチケットを起票する

## はじめに
kintoneのレコードを特定のステータスにすると、Zapierを経由してJiraにチケットを作成する方法を試しました。
Jiraのプランが足らなかったためZapierを経由して作成しています。

## どのような背景があって作成したのか？
kintoneで特定業務を管理しておりレコードを特定のステータスにした際、他チームへタスクが発生するフローになっています。これまでは手動でJiraチケットを起票していましたが、起票が漏れたり遅れたりすることで他チームに業務のしわ寄せが発生していました。
これらを解消する目的で作成したものです。

## コード
kintoneに設定しているscriptです。どなたかの参考になれば。。。🙇‍♂
素人が書いているscriptなので書き方がイマイチな箇所があると思いますが、何かあればコメントいただけますと幸いです。

“`javascript:test.js
(function() {
‘use strict’;

// レコード詳細画面で、プロセス管理のアクションが実行された時
kintone.events.on

季節外れのホワイトクリスマス

## ツリーの飾りつけ
我が家ではクリスマスツリーの飾りは、毎年一つづつくらい新しい飾りつけを追加している。

去年はLEDの点滅するものを新調した。そして、今年は少し工夫を凝らしたLEDと音楽を奏でるグッズを追加することにした。

まだ6月なので半年ほど早いが、直前になるとまた忘れてしまうので、早めに準備をするということと、今回はDIYなので、少しづつ完成度を高めていこうと思う。

## obnizでプロトタイプを作成

使用するものは、
– obniz Board 1Y
– 光センサ　CdSセル 5mmタイプ
– 超音波距離センサー HC-SR04
– 高精度IC温度センサ LM60BIZ
– マイコン内蔵RGBLED 8mm PL9823-F8
– 青色LED

これだけを使って、光と音のハーモニーを演出したい。

## 見る人を驚かせたい

DOMイベント入門 [JavaScript]

DOMの中でも、DOMイベントについてまとめていきたいと思います。

イベントを使うことで、

・ユーザーがクリックしたとき
・ホバーしたとき
・ドラックしたとき
・サブミットしたときなどに特定の処理を行えるようになります。

つまり、

:::note info
**ユーザーが行ったアクションに対して反応する**
ために欠かせないのが、DOMイベントになります。
:::
DOMイベント自体は大量に種類があるので、
今回はDOMイベントの書き方に絞ってまとめていこうと思います。

## 目次：

– [1. イベントの書き方(インラインイベント)](#1-イベントの書き方インラインイベント)
– [2.イベントの書き方(JavaScriptファイルから定義する)](#2-イベントの書き方javascriptファイルから定義する)
– [3. イベントの書き方(addEventListenerを使った書き方)](#3-addeventlistenerを使った書き方)

## 1. イベントの書き方(インラインイベント)

イベントを書く方法は主に３種類あります。
それぞれ説明していきます

【Figma Plugins】ユーザー間で同期したくないデータを保存する

## はじめに

FigmaのPluginを開発する際、ユーザー間で同期さたくないデータを保存したいなと思ったことはありますか？
そんな時に使うのが、「**figma.clientStorage API**」です。

この記事では、「**figma.clientStorage API**」について解説しようと思います。

## figma.clientStorage API とは？
**figma.clientStorage API** は、データをユーザーのローカルマシンに保存できます。
ドキュメントに保存されるデータ（[`setPluginData`](https://www.figma.com/plugin-docs/api/properties/nodes-setplugindata/)）とは異なり、ユーザー間で同期されないのが特徴です。

`Window

Qiita予約投稿機能を作ってみた

エンジニアとして働いていると度々お世話になるQiita記事。その有難さには頭が上がりませんが、私のエンジニア歴も1年に達しQiitaの投稿を少しずつ始めた中で一つだけ不満がありました。
**Qiitaにはなぜ予約投稿機能がないのだろうか？**
…ということで、JavaScriptの練習をかねてQiitaの予約投稿機能をChrome拡張で作ってみました。

## 使い方

https://chromewebstore.google.com/detail/qiita%E4%BA%88%E7%B4%84%E6%8A%95%E7%A8%BF/fdlailgogjlojolaiehgpkhbcikjgdeh?hl=ja&utm_source=ext_sidebar

1.上記リンクより拡張機能を追加してください。
2.拡張機能を有効にすると、Qiita記事編集ページに予約投稿ボタンが現れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3519892/4c48bc78-a002-0450-

【個人開発】公式サイトのマンガ更新情報を検索機能付きで作ってみた

## 公式マンガ検索サイト「まんさく！」をリリースしました。

https://search-manga.com
### 開発経緯
友人と話している際にジャンプやマガジンなど公式で公開されている漫画が一覧になってるサイトあったらいいよねーという話になり、更新作品がまとまって検索機能なんかもあったら需要あるんじゃね？と思い開発を始めました。
## システム
### 主に使用した技術スタック
– NextJS
– TypeScript
– Shadcn/ui
– Supabase
–

iframeの反乱

# はじめに
私の参画している現場の使用でiframeを通して、別ドメインのwebアプリを開きlocalstrageからとあるデータを取得する必要があり、実装を黙々と進めていました。
その時に私がiframeからお叱りを受けたので、そちらを備忘用として記しておきます。

# TL;DR
iframeから別ドメインのlocalstorageにはアクセスできない

# 概要
Aシステム、Bシステムという2つのシステムがあり、とある機能を実装するためAからBの画面をiframeで呼び出す必要がありました。iframeからBのlocalstorageにアクセスし、必要な情報を取得してAに渡すという魂胆です。

“`js
function sendDataToParent() {
// Bシステムから

JavaScript: 重みつきSplay木による圧縮

1991年4月頃にPhilip G. Gageが考案(作者はこの手法をAdaptive Huffman frequency compressionと呼称)。木の変形法はsplay符号風ですが、節点に重みを加えることで適応型huffman符号並みに均衡がとれた木となります。符号長の変化が素早いため情報の変化に追随しやすいです。いい事ずくめで人気を独占しそうですが、多分 DDJ Data Compression Contest(1991年)以外での使用例はないでしょう。
## 実装
そんな前置きはどうでもいいかもしれないので、本題にすり替えていきます。何はともあれ、木を表すobjectの定義から。
“`js
// 配列もどき
function Hit(){}//頻度
function Up(){}//親節

/*
重みつきsplay木
@max: 重み最大値
@up: 加重値
@cs: 記号の最大値
*/
function Tree(max,up,cs){
this.F=new Hit;
this.U=new Up;
this.inc=up||1;
this.max=max||1

【環境構築】TypeScript, Node.js

## 環境
以下の環境で構築していきました。
・macos Sonoma
・MacBook Air M1

## 前置き
今回 TypeScriptの学習をする機会があったのでその備忘。
これから環境構築をしようと考えている方々に、方法を共有しようと思い書きました。

### はじめに
#### Homebrew
まず、Homebrewのインストールを行いましょう。
以下のリンクからインストールが行えます。

https://brew.sh/

パスワードやエンターを求められるので、都度入力しましょう。
インストールが完了したか、以下のコマンドで確認してください。バージョンが表示されれば完了しています。
“`
brew –version
“`

### Node環境の構築
TypeScriptを使用するためにはNode.js環境が必要です。Node.jsはTypeScriptコンパイラを実行するために必要となってきます。
以下の手順で環境を構築しましょう。[構築済みの方は次へ進んでください](#TypeScriptの環境構築)

まず、　.zshrcファイルがあるか確認し

【kintone】レコードに投稿されたコメントをslack通知する

## はじめに
kintoneでレコードに対してコメントをすると、kintone上では通知が来ます。コメント内容をslackの特定チャンネルに通知する方法を試しました。

## どのような背景があって作成したのか？
コミュニケーションツールにはslack、CRMにはkintoneを使用しています。
kintoneレコードのコメントに投稿される内容に意外と重要なものが多く、これまではコメントをした人しか内容を把握しておらず他メンバーは検知にムラがありました。情報格差が起きないよう、チームメンバーが見ることのできるslackチャンネルに通知し即確認できるようにしました。

## コード
kintoneに設定しているscriptです。どなたかの参考になれば。。。🙇‍♂
素人が書いているscriptなので書き方がイマイチな箇所があると思いますが、何かあればコメントいただけますと幸いです。

“`javascript:test.js
(function() {
‘use strict’;

var triggerEvents = [
// レコード詳細画面を表示し

【kintone】特定ステータスで別アプリにレコードを新規作成する

## はじめに
kintoneアプリ①でレコードが特定条件を満たした際に、kintone REST APIを使用してアプリ②にレコードを新規登録する方法を試しました。
新規登録する際には、アプリ①のレコード情報を引き継ぐように作成しています。

## どのような背景があって作成したのか？
営業案件が受注した場合に、契約情報を管理するアプリに営業情報を手動登録しており、その作業の抜け漏れ防止を目的として自動起票させました。

## コード
kintoneに設定しているscriptです。どなたかの参考になれば。。。🙇‍♂
素人が書いているscriptなので書き方がイマイチな箇所があると思いますが、何かあればコメントいただけますと幸いです。

“`javascript:test.js
(function() {
‘use strict’;

var triggerEvents = [
// // レコード詳細画面で、プロセス管理のアクションが実行された時
“app.record.detail.process.proceed”
];

kintone.