f@ctor

JavaScript関連のことを調べてみた

JavaScript関連のことを調べてみた
目次

SvelteKitにおいてストアを利用したセッション管理を行う svelte-kit-sessions

## はじめに

SvelteKitでのセッション管理のライブラリを探してみると、どうやらCookieにセッション情報を保存するようなものや、ストアがRedisに固定化されているものしかないようだった（探し方が悪いのかもしれないが…）。

個人的には[Express](https://expressjs.com/ja/)での開発経験があり、その時に利用していた[express-session](https://www.npmjs.com/package/express-session)のように自由にストアを選べ、セッション情報はストアに保存するようなセッション管理のモジュールで、SvelteKitでのセッション管理も実現されると望ましいのではと考えていた。

そこで、`svelte-kit-sessions`というSvelteKitでストアの利用を前提としたセッション管理モジュールを開発して公開してみたので、今回はそのモジュールを利用してどのようにSvelteKitでセッション管理を実装できるか？を取り上げたいと思う。

https://www.npmjs.com/package/sv

元記事を表示

一度は試してほしい！シーケンス図を書くならマーメイド記法

![mermaid_title.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2633992/09bd61d4-3e1f-af78-51c6-0e31a06ebfc4.jpeg)

エスプリフォートでは日々アンテナを張りながら技術力を高め、積極的に新しい事を取り入れ、日々のシステム開発に生かしていっています。
これら磨きあげた技術力が、お客様に高いクオリティでシステムを提供する一助になっています。

# マーメイド記法とは

設計時にフローチャート、シーケンス図、ER図などを書く場合には、どのようなツールを利用していますか？

たとえば設計時にUMLを活用して書いていく場合は、ArgoUMLなどのUMLエディタを利用したりするかと思いますが、一括置換できず図形を一つずつ修正したり、変更の差分がどこかを確認するために一つずつ見比べたりなど、面倒なことを解決できたらと思った事はありませんか？

今回はそんな悩みを解決するひとつとして、マーメイドというマークダウン内で図形を作成できるライブラリを解説していき

元記事を表示

指定したファイルに指定した文字列を追記するJavaScript

# 指定したファイルに指定した文字列を追記するJavaScript

たくさんのHTMLファイルに、規定の文字列を差し込みたい要望があったので作成。

たとえば、ある注釈テキストのHTMLコードを、たくさんのHTMLファイルに差し込みたい、など。

数ページの対象のファイル数でのみテストしたので、大量だと動作保証できないです。

## 検証環境

* MacOS 13.5.1
* node v14.20.0

## JS

“`index.js
const fs = require(‘fs’);
const readline = require(‘readline’);

//
// ファイルの存在チェック
// 1: ファイルパス
const isExist = (filePath) => {
let ret = false;
try {
fs.statSync(filePath);
ret = true;
} catch(err) {
ret = false;
throw new Error(“ファイルが見つかりません ” + fil

元記事を表示

[備忘録] React x Firebase アプリのセットアップ手順

## React x Firebase のプロジェクトをセットアップする手順
もう何度かやってるけど、たまに手順が曖昧になってしまうので、備忘録。
今回は、新しいMacBookを買い替えたので、CLIのインストールからやらんとあかん。
最初にnode.js/npm/Gitはマシーンにインストールしておく。

### 1, Vite で React App を作る。
VS Codeからプロジェクトディレクトリを作り、下記コマンドでプロジェクトの初期化。
Viteは、create-react-app より全然高速で使いやすい。
“`:Terminal
npm create vite@latest
“`

Dependencyのインストール
“`:Terminal
npm install
“`

### 2, Firebase CLI のインストール
“`:Terminal
npm install -g firebase-tools
“`
今回はパーミションエラーが出たので、Macのターミナルから
“`:Mac Terminal
brew install firebase-c

元記事を表示

【Rails】JavaScript ”だけ” を使ったモーダル表示

 

Railsを使ったWebアプリの開発中、「モーダル表示できたら天才…」と思い、実際にモーダル機能をつけてみました。
 

[![Image from Gyazo](https://i.gyazo.com/178fe3e632bc214a3a056d9b0e392500.gif)](https://gyazo.com/178fe3e632bc214a3a056d9b0e392500)

:::note
**今回実装するモーダルの仕様** （ ≒ 要件定義）

*モーダル非表示時*
* ボタンを押すと、モーダルが開く
* 画面は、スクロール可能
 

*モーダル表示時*
* 「×」ボタンを押すと、モーダルが閉じる
* モーダルの外側を押しても、モーダルは閉じる
* モーダル背景部分は、スクロール ”不可”
 

:::
 
 
モーダル機能は、とてつもなく重要です。なぜなら…
* 重要な理由①：viewファイル新規追加／ページ更新といったステップを踏むことなく、補足事項をユーザーに伝えることができるから :fir

元記事を表示

LINE BotをNode.jsで外部依存モジュールを使用せずに作ってみる – 2024年1月版

Node.jsでLINE Botを作る際に普段は[@line/bot-sdk](https://www.npmjs.com/package/@line/bot-sdk)を使っていますが、外部のモジュールを使わずに書いてみます。

[6年前に書いていた記事](https://qiita.com/n0bisuke/items/56d7ace2193fbc106639)を自分で見ていて色々書き換えられそうな点が多かったので勉強がてら書き換えます。

## 環境

– Node.js v21.2.0

## 先にオウム返しBotの完成コード – コピペ用

ベースとしてLINE Botの作り方みたいな話はこちらの記事でやってる通りです。

https://qiita.com/n0bisuke/items/ceaa09ef8898bee8369d

今回は外部モジュールに依存していないので`npm i`は必要ないです。
通常だと`express`と`@line/bot-sdk`を使うのが一般的です。

オウム返しでテキストを簡単に返す部分だけになります。

“`js

const crypt

元記事を表示

全四字熟語データベースを作成するために必要な3つの注意点

# はじめに
こんにちは。sabapenです。
先日、Twitter（新X）で[**全俳句データベース**](https://horicun.moo.jp/contents/haiku/)というWebアプリが話題になっていました。
あ~んの50音+濁音等のひらがなの全ての組み合わせにIDを振って網羅した一種のジョークアプリとなっております。

ありそうでなかった発想の勝利とも思える作品に感動した私は、自分も似たようなWebアプリを作ってみようと思い立ち、Viteの練習も兼ねつつ**全四字熟語データベース**を作成しました。

全四字熟語データベースでは2136文字の常用漢字を使った約20兆通りの四字熟語を網羅する必要があります。その際に気をつけた以下の3つの注意点に関してこの記事で解説したいと思います。
1. 常用漢字の判定
2. 漢字の組み合わせとIDの1対1対応
3. 20兆程度の大規模な組み合わせ

# 制作物
https://x.com/sabapen120/status/1744370057910616183?s=20

https://sabapen.github.io/a

元記事を表示

セリフ実績画面の実装

## 実装した機能

アラームを指定時間内に止めることによって、解放されるセリフを実績画面で確認できるようにする機能を追加しました。

未開放のセリフは「???」で表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676445/80824f23-32aa-c001-0c1e-8e8393b71968.png)

## コードの中身

アラームを止めることをトリガーに、
AlarmScreenからHistoryScreenへnavigationを利用して、
セリフのIDを送っている。

“`react
//AlarmScreen.js
//再生するボイスファイルを定義
const voiceFiles = {
1: require(“../voice/voice1.mp3”),
2: require(“../voice/voice2.mp3”),
3: require(“../voice/voice3.mp3”),
4: require(“../voice

元記事を表示

Babylon.js のパーティクルシステムでビルボードモード（BillBoard Mode）を変更してみる

## はじめに
Babylon.js のパーティクルシステムについて、Qiita に記事をいくつか書いたのですが、その際に見かけていた「ビルボードモード（BillBoard Mode）」が気になったので、記事に書いてみます。

## ビルボードとは？
ビルボードとは、以下の記事の記載から引用すると、「カメラの視線ベクトルに対し常に垂直な姿勢を持つようにモデルをレンダリングすること」となります。

●wgld.org | WebGL: クォータニオンとビルボード |
　https://wgld.org/d/webgl/w035.html

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/6c039837-6bfc-a478-81bd-8433bd051687.png)

例えば、板状のポリゴンにテクスチャを貼っている状況で考えると、カメラに対して常にポリゴンが正面を向くので、カメラの方向によらずテクスチャが常に見える状態になります。

![image.png](https://q

元記事を表示

アナログ回路 その29

# 概要
問題みつけたので、解いてみた。

# 問題

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/6238013b-ba4d-3fcc-43d9-bf71ea7c3f0c.png)

# シュミレーション結果

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/6f729a16-f2be-0c41-e8f7-f4c8a8819a17.png)

上手く行ってないが、答えは２かな

# 成果物

https://embed.plnkr.co/plunk/37WBI0nzh4VARcku

以上。

元記事を表示

[Three.js] r155からライトの光度単位が変わりました

## 先に結論だけ

Three.js r155からデフォルトの光度単位が変わりました。PointLightとSpotLightのデフォルトの光度は1カンデラになり、大幅に暗くなっています。

Three.jsを更新してシーン全体が暗くなったり、モデルにハイライトが入らないと感じたら、以下の2点を調整してください。

1. PointLightとSpotLightの光度を数百倍に強くする
2. それ以外のライトの強度をMath.PI倍にする

## はじめに

この記事は、Three.js r155での照明の変更とその対処を共有するためのものです。

### 対象とする読者

この記事は、すでにThree.jsを利用しているユーザーを対象にしています。Three.jsの解説やインストールガイドは含みません。

### 対象とする環境

この記事は、Three.js r155以降を前提としています。記事を読む前にお手元の環境をご確認ください。

## Three.js r155での変更点

2023年7月にリリースされたThree.js r155から[WebGLRenderer.useL

元記事を表示

live-serverでMIME typeエラーが出た話

# はじめに
最小構成でwebアプリを作ろうと思い立ちgithub copilotを使いながら楽々作っていこうと思ったらつまづいたので備忘録として残しておきます。

## 開発環境
* Terminal Zsh
* VSCode Version: 1.85.1 (Universal)
* Google Chrome ver120.0.6099.129（Official Build） （arm64）
* npm v10.2.3
* node v20.10.0
* live-server

## live-serverのインストール
live-serverはVSCodeの拡張機能でもありますが、ターミナルから実行したかったのでnpmでインストールしました。
“`zsh:zsh
npm install -g live-server
“`

## ディレクトリ構成
“`
.
├── README.md
├── index.html
└── module
├── Hello.js
└── time.js
“`

## プログラム
以下のようなコーディングを行いました。

元記事を表示

元プログラマー自身の困惑 (ソースコードの整理は大変)

# はじめに(起)
現役をリタイヤーして早や、15,6年になります。今でも、趣味で、Webサイトのページを作成しています。そこで、自身に困惑しているなることがあります。これまで作成してきたソースコードは長年のメンテナンスでかなりゴミ交じりのコードになっています。そのたの適宜、ソースコードの整理を始めますがいつでも中途半端で終わっています。いざ、やり始めても、やることが多すぎてあきらめてしまいます。これまで、その繰り返しです。

# なぜできないのか(承)
理由はいろいろあります。
#### ・本気で時間をかけてやろうとする意欲が出ない。
理由は、趣味で行っていることが原因です。仕事であれば、ある程度の結果は出せるとは思いますが、
#### ・これも下手に手を出すと返って藪蛇になることもあります。
よく、システム更新時に起こる問題です。世の中のあるシステムでも問題になっています。プログラムコードはちょっと修正しただけでも、その後にとんでもないシステム事故になることがあります。
今の時代は車でも電気製品が多く組み込まれています。その中にプログラムが組み込まれていてときどき不具合が発生してリ

元記事を表示

next-sessionでセッションを再生成するときの注意点

next-sessionはNext.jsでのsession利用を簡単化するためのライブラリです。
主に以下を行ってくれます。
– session cookieの管理
– session storeとの接続 (session idの突合）
– HTTPヘッダーの設定、Storeへの書き込みを暗黙的に行うautoCommit機能

参考: [hoangvvo/next-session（github)](https://github.com/hoangvvo/next-session)

この記事では、セッションを再生成する実装を行う際に私がハマったことについて共有します。
先に書いておくと、`autoCommit: false`を指定した場合は同じ原因でハマることはありません。

## どういう時にセッションを再生成するのか
セキュリティの観点から、ログイン成功時に新しいセッションを開始し古いセッションを破棄することが望ましいです。
これは、IPAのセキュリティガイドにも記載されています。

参考: [1.4 セッション管理の不備　](https://www.ipa.go.jp/secur

元記事を表示

【JS/ES6】疎結合と密結合

# はじめに
JSを勉強中に疎結合と密結合という言葉を知った。

# 疎結合と密結合って？
「密結合」は素間の関係性が強く、個々の要素が他の要素へ及ぼす影響が大きな状態。
「疎結合」は要素間の関係が相対的に緩く、独立性が高い状態。

# JSにおいての疎結合と密結合
JSのメソッドを作る時、グローバルで定義した変数を使うのは便利な反面、密結合が起こりやすい。
“`
let word = “hoge”;

const hoge = () => {
word = “fuga”;
};

hoge();
“`
この場合、グローバルで定義したwordを作成した関数で直接書き換えているが、この書き方だと変数（word）と関数（hoge）をセットで使用することになる（密結合）。
また、他の関数で同じ変数を使うこともあり得るので避けたい。
“`
let word = “hoge”;

const hoge = (word) => {
word = “fuga”;
};

hoge(word);
“`
こちらの書き方は結果は同じだが、変数で引数を渡して使用することでメソッドを独立して

元記事を表示

【JS/ES6】関数（メソッド）の宣言の仕方（書き方）

# はじめに
関数を宣言するときに忘れそうになるので備忘録メモ。

# 通常の宣言パターン

“`
const 関数名 = function(引数){
// ここに処理
};

const 関数名 = (引数) => {
// ここに処理
};
“`

# プロパティを持たせての宣言パターン

“`
const オブジェクト名 = {
プロパティ名1: 値1,
プロパティ名2: () =>{
// ここに処理
}
}

オブジェクト名.プロパティ名2();
“`

# クラス定義

“`
class クラス名{
constructor(引数){
this.変数名 = 値;
}

メソッド1(){
}

メソッド2(){
this.メソッド1();
}
}

//クラスからインスタンスを生成
const インスタンス名 = new クラス名();

“`

### クラスAを継承したクラスB
“`
class A{
constructor(){
}
}

class B extends A{

元記事を表示

講義第２回

# Javascriptを利用したコーディングを知ろう
# 初めに
## 今回の目的
Javascriptを利用して非同期処理を動かしてみる
APIを利用してみる

# 1. 非同期処理
## 非同期処理とは？
一言でいうと…
「一つの処理を実行中であっても他の処理を実行できる実行方式」

逆に同期処理とは？
「１つずつ前から順番に処理を実行できる実行方式」
## 1-1. ペペロンチーノの作り方
ペペロンチーノを作る料理工程に例えて
ハンズオン形式で非同期処理の理解を深めよう！
![food_spaghetti_pepperoncino.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3655585/ee2d1865-d283-78fd-ce50-132ad3681c4d.png)
ペペロンチーノ料理工程
1. パスタを茹でる（5分）
1. ニンニクを切る（1分）
1. ソースを作る（4分）
1. 皿に盛り付ける

## 1-2. ペペロンチーノの作り方（同期処理編）
実行用ファイルを作成
まずは料

元記事を表示

ユーティリティクラスを作るべきか考える

:::note
JavaScript,TypeScriptでのユーティリティクラスを今回は扱います
:::
## この記事で分かること
– ユーティリティクラスの定義
– eslintで非推奨にされている背景
– ユーティリティクラスがもたらす技術的負債
– ユーティリティクラスではなくて個別で関数、定数宣言するべき

# 1. 背景
staticなプロパティのみのclassを実装することがあリましたが使い時として妥当だったのかと思うことがあった為です。

# 2. ユーティリティクラスの定義

https://lindbakk.com/blog/utility-and-helper-classes-a-code-smell

– 以下をプロパティに持つクラス
– static メソッド
– static 変数
– インスタンス化できない
– 状態を持たない

「ヘルパー・クラス」もユーティリティクラスに含まれるそうです。

ユーティリティクラスの定義が誤っていた場合はコメントでご教授ください🙏

ユーティリティクラスの例
– [Math](https://develo

元記事を表示

Babylon.js Playground にあるの公式サンプル「Particle System Examples」を最小化してみたり利用するパーティクル用画像を変えてみたりする

## はじめに
この記事では、以前書いた以下の記事でも使った [Babylon.js Playground上の公式サンプル「Particle System Examples」](https://playground.babylonjs.com/#0K3AQ2#3067)を扱います。

●Babylon.js Playground上のサンプルで自分が欲しい部分を ChatGPT に取り出してもらう【完走賞ゲット-22】 – Qiita
　https://qiita.com/youtoy/items/051e8e723dbd2bd72dff

上記の記事では、Babylon.js Playground上のコードを最小化していたのですが、今回は HTML のファイル全体を最小化してみます。
また、パーティクルシステムで利用されている画像を別のものに変更する、というのもやってみます。

## 今回の内容
Babylon.js Playground上でコードを扱う際には、JavaScript のプログラムの一部のみを編集するだけで処理を実行でき、HTML や CSS などの記載は考慮せずに扱える

元記事を表示

【JavaScript】単純リクエストを飛ばすことでpreflightでのエラーを回避する（突貫工事）

## 困ったこと
#### 状況
HTMLにJavaScriptを組み込み、XMLHttpRequestを使い外部のAPIを叩きたかった。
（HTTPメソッドはPOST。ヘッダーには`Content-Type`として`application/xml`を指定）
動作確認のため、このHTMLをGoogle Chromeで開き、JSを実行してみた。

#### 結果
APIのレスポンスを得られなかった。Chromeの開発者ツールでコンソールを見てみると、
「 **preflight** に失敗しました」という内容のエラーが出ていた。
（エラーメッセージをコピペし忘れました）

## 調査内容
– preflightは、実際のリクエスト前に、クライアントがサーバーから通信許可を得るために行われるもの
– preflightは、実際のリクエストが **単純リクエスト** ではない（かつCORS）の場合に行われる
– preflightのエラーの突破策は以下
1. リクエストを単純リクエストとすることでpreflightが行われないようにする
2. APIのレスポンスをいい感じに

元記事を表示

OTHERカテゴリの最新記事