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

JavaScript について説明できる

# 1. JavaScript とは
JavaScript は、Webページを動的に制御し、対話的な要素を追加するためのスクリプト言語です。JavaScriptは主にブラウザ上で動作し、ユーザーとの対話やWebページの挙動を制御する役割を果たします。

# 2. ECMAScript とは
ECMAScriptは、JavaScriptの標準規格のことを指します。JavaScriptは、Webページ上で動的な挙動や対話性を実現するためのスクリプト言語であり、その基本的な仕様や機能がECMAScriptによって定義されています。

プログラム言語には標準規格が存在し、それに基づいて開発されたプログラムが異なる実行環境で一貫性を保つためには、標準化が不可欠です。ECMAScriptはJavaScriptの標準規格であり、各ブラウザやJavaScriptエンジン（Node.jsなど）はこの標準に基づいてJavaScriptを実装しています。

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

先日書いた記事をベースにBunのAPIに書き換えた版を作ってみます。

https://qiita.com/n0bisuke/items/0ab7b3b38557384370ed

## BunとNode.jsの互換性もあるけど

前提としてBunのランタイムはNode.js互換性があるので、何もしなくてもそのまま（少なくとも今回のコードは）Node.jsで書いたコードも動きます。
そんなに調べてませんが昔は互換性が微妙って話もちらほら聞いてましたけどv1.0になって良くなったのか、シンプルな内容だからなのか

BunのネイティブAPIを使って書き換えられる部分を書き換えてみたいと思います。

## Bun.serve()とBun.CyptoHasher()

主にサーバー部分とHA256アルゴリズムでハッシュ化する部分の2箇所を書き換えてます。

### サーバー部分 – Bun.serve()

ドキュメントみるとこんな感じで書くみたいですね

“`js
Bun.serve({
fetch(req) {
const url = new URL(req.url);

JavaScript: Logical OR (||) と Nullish Coalescing (??) の違い

JavaScriptには`||`（論理OR）と`??`（Nullish Coalescing）という2つの演算子があります。

これらはどちらも値が`null`または`undefined`のときにデフォルト値を設定するために使用されますが、その挙動には重要な違いがあります。

## 論理OR (||)
“`javascript
return params || “”;
“`

`||`演算子は左辺の値が`falsy`（評価時に偽となる値）の場合に右側の値を返します。JavaScriptでは以下の値は `falsy`と評価されます。

“`
false
0 や -0
“”（空文字列）
null
undefined
NaN
“`

このため、`params`変数が`null`や`undefined`だけでなく、その他の`falsy`な値（例えば空文字列や`0`）の場合にも右辺のデフォルト値（この場合は空文字列`””`）が返されます。

## Nullish Coalescing (??)
“`javascript
return params ?? “”;
“`

`??`演算子

「デデンネする」をJavaScriptでコードゴルフ

## 元ネタ

http://kutachu.web.fc2.com/dedenne.htm

## ルール

* デ：50%, ン：25%、ネ：25% の割合でランダムな文字列を生成する。
* 末尾がデデンネになったら生成を止め、文字列を表示する。

## コード

70文字

“`js
for(t=”;!t.includes(d=’デデンネ’);)t+=d[Math.random()*4|0];console.log(t)
“`

“`js:読みやすく加工
for (t = ”; !t.includes(d = ‘デデンネ’);) {
t += d[Math.random() * 4 | 0];
}
console.log(t);
“`

Highcharts よく使いそうな設定まとめ

# 概要
Highchartsでよく使いそうな機能や設定をまとめていきます。
ちなみにHighchartsはグラフを表示するためのJSのライブラリです。

# 公式ドキュメント
公式ドキュメントは最新のバージョンに対するもののみのようです。
使っているHighChartsのバージョンと一致しない場合、公式ドキュメントと挙動が一致しない場合もあるので注意してください。
– [公式トップ](https://www.highcharts.com/)
– [公式HighCahrtsドキュメント](https://www.highcharts.com/docs/index)
– [公式HighChartsの概要がわかるドキュメント](https://www.highcharts.com/docs/chart-concepts/understanding-highcharts)
Chart concept以下に纏められた記事（Understanding Highcharts等）を順に読んでいけば、HighChartsで使う基本的な設定やできることの大枠が掴めると思います。
– [公式各グラフのデモ

HTMLでJavaScriptを読み込む方法

# はじめに
HTMLでJavaScriptを読み込む方法について学んだので，アウトプットしていきます．

# 方法1：JavaScriptをHTML内に記述する
`script`タグ内にJavaScriptのコードを書いていく．HTMLの読み込みが途中で止まらないように，`body`タグの最後に書くことが奨励されている．
“`html

“`

# 方法2：JavaScriptを外部ファイルとして読み込む
`script`タグの`src`属性にJavaScriptファイルを指定する．
“`html

<

InternetExplorerの終焉とJavaアプリケーションとアプレットの意味

[マイクロソフトはInternet Explorerのメインストリームサポートを2022年6月に終了することを発表した](https://docs.microsoft.com/en-us/lifecycle/faq/internet-explorer-microsoft-edge#:~:text=Internet%20Explorer%20is%20a%20component,systems%20starting%20June%2015%2C%202022.)。その時点で、IE11デスクトップアプリケーションは使用できなくなり、Microsoft Edgeにリダイレクトされます。

Microsoft Edgeがこの責任とそれ以上のことを引き受けることができるようになったため、Internet Explorer 11デスクトップアプリケーションは、Windows 10の特定のバージョンにおいて、2022年6月15日に引退し、サポートを終了します。

1995年に発売されたInternet Explorerは、今日の消費者市場では長い間無用の長物となっていたが、多くの古い企業向けソフトウ

React+D3 アプリ作成入門

React+D3 アプリの簡単な作り方を説明しました。React や D3 については【関連記事】を参照してください。記事の全体は【古い記事】のリライトの側面もありますが、React がかなり更新されているので新記事として読んでいただければと思います。

【関連記事】
[React 再入門 (React hook API) – Qiita](https://qiita.com/sand/items/7a6ef787d11c3ebabf08)
[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 v7 グラフ – d3-scale、d3-axis、d3-shape – Qiita](https://qiita.com/sand/items/721db51592e1

Array.prototype.sort()について学びなおす。

今回はArray.prototype.sort()について学びます。
早速解説を見ていきます！

> sort() は Array のメソッドで、配列の要素をその場 (in-place) でソートし、ソートされた同じ配列の参照を返します。既定のソート順は昇順で、要素を文字列に変換してから、 UTF-16 コード単位の値の並びとして比較します。

疑問が出たポイントを調べてみます。

– その場 (in-place) でソート
– 元の配列を変更すること。(新しい配列を作らない破壊的変更)
– 同じ配列の参照を返します
– 返り値が配列なので、そのままメソッドチェーンが可能。
– 既定のソート順は昇順
– 小さい順から並び替えます
– 要素を文字列に変換してから
– 数値10は文字列”10″に変換されます。
– UTF-16 コード単位
– UTF-16 コード単位は、Unicode文字をエンコードするために使用される16ビット（2バイト）の値のこと。
– 数値の10と2は文字列として比較すると、”10″ は “2” よりも小さいと判断されます。

試してみまし

【環境構築】MacのC++でstdc++.hやちょっとだけ他言語と比較してみる

## ハマったこと
C++の`bits/stdc++.h`をincludeしたかった。
STLをひとつひとつincludeするのは面倒なので、全部入り神モジュールである`stdc++.h`を入れたい。

2つ必要なことがあった。
1️⃣ファイル本体が必要
2️⃣静的解析がエラーを吐く

環境はMacでvimです。

### 1️⃣ファイル本体が必要
ようはstdc++.hというファイルが、欲しいincludeを死ぬほど大量にincludeしまくってくれてるファイルということ。
だから、欲しいincludeを全部あらかじめincludeしておいたファイルを、1枚だけincludeすれば楽だよねっていうだけ。とくに魔法みたいなことはしてない。

`stdc++.h`はどこにあるか？
gccの最新を入れると一緒についてくる、gccを入れたくない場合は、ネット上に転がっているファイルを取ってくればいい。
または自分で好きにカスタムすればいい（多すぎるincludeを自前で用意したいならの話）

“`gccをいれる.sh
brew install gcc
“`

“`ここにあるはず.バージ

【JavaScript】三項演算子の入れ子、いうほど可読性悪くない説

## ワンライナーで書かれた入れ子は見にくいけど…

“`js:例1
const result = isFizz && isBuzz ? ‘FizzBuzz’ : isFizz ? ‘Fizz’ : isBuzz ? ‘Buzz’ : i;
“`

## 改行されていればそんなに可読性が悪くない

“`js:例2
const result = isFizz && isBuzz ? ‘FizzBuzz’ :
isFizz ? ‘Fizz’ :
isBuzz ? ‘Buzz’ : i;
“`

改行されていても見にくいかも？と感じる方は三項演算子を気にしすぎているかもしれません。
`?`や`:`のことは気にせず、このように脳内変換すれば読みやすくなるでしょう。

“`js:例3
const result = isFizz && isBuzz ⇒ ‘FizzBuzz’
isFizz ⇒ ‘Fizz’
isBuzz ⇒ ‘B

Next.jsで()付きのディレクトリの扱い

## バージョン

“`php
“next”: “13.5.6”,
“react”: “^18”,
“react-dom”: “^18”,
“`

## 概要

Next.jsでルーティングを行う時にディレクトリ内にpage.tsxを作成するとルーティングが可能になる。例えば、下記のようにディレクトリ内に作成すると`[http://localhost:3000/](http://localhost:3000/contact)pages`となる。

“`php
pages
→page.tsx
“`

## 課題

仮にpagesディレクトリにtaskディクトリとcontactディレクトリを作成して、それぞれの配下にpage.tsxを作成する。それぞれのルーティングは`http://localhost:3000/pages/task`と`http://localhost:3000/pages/contact`になる。このパス中のpagesの記述をなくしたい。

## 解決策

pagesディレクトリを(pages)に書き換えることで、それぞれのルーティン

ライブラリインストール時nuxt prepareが失敗した時の対処

# 困っていたこと

`nuxt.config.ts`に下記のようにライブラリのインポートが記述してあると、`npm install`や`npm ci`でエラーになってしまう。

“`typescript:nuxt.config.ts
import axios from ‘axios’

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
devtools: { enabled: true },
“`

エラーメッセージは以下。

“`bash
$ npm ci
> postinstall
> nuxt prepare

Error: connect ECONNREFUSED ::1:80
at AxiosError.from (node_modules/axios/dist/node/axios.cjs:837:14)
at RedirectableRequest.handleRequestError (node_modules/axios

JSでWebページのレスポンス待機メッセージを表示/非表示する

# はじめに

[前回](https://qiita.com/takahas_a/items/85abc1f5337aeb2afb71)、ChatGPTをSpringアプリケーションに組み込みました。しかし、ChatGPTのレスポンスを待機する間、ユーザーは待機中であることを認識しづらいという問題がありました。

そこで、**JavaScriptを使って待機メッセージを表示/非表示**させてみました。

### やりたいこと

主な処理の流れは、次の通りです。
1. ボタンをクリックすると、待機メッセージ「考え中…」が表示される（画像①）
※このとき、過去のレスポンスは消える。
2. レスポンスを受信すると、待機メッセージは消え、レスポンスが表示される（画像②）

▼ フォームに入力し、ボタンクリックした後（①）

▼ レスポンスを受信

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`というストアの利用を前提としたセッション管理モジュールを開発・公開してみたので、今回はそれを利用してどのようにセッション管理を実装できるか？を取り上げたいと思う。

https://www.npmjs.com/package/svelte-kit-sessions

## [sve

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


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

# マーメイド記法とは

設計時にフローチャート、シーケンス図、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アプリの開発中、「モーダル表示できたら天才…」と思い、実際にモーダル機能をつけてみました。
 

[](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