f@ctor

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

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

WebSocket調べてみた。

## はじめに
WebSocketは、リアルタイムの双方向通信を可能にする技術です。WebSocketの基本的な概念とその発展の歴史について紹介します。

## WebSocketとは
WebSocketは、リアルタイムの双方向通信を実現するための先進的な技術です。これは、ウェブアプリケーションがサーバーとの間で即時的にデータを交換できるようにするプロトコルです。

### WebSocketとHTTPの違い
WebSocketと従来のHTTPの最も大きな違いは、通信の持続性にあります。HTTPプロトコルは基本的に「リクエスト-レスポンス」モデルに基づいており、クライアントがリクエストを送信し、サーバーが応答を返すという形で通信が行われます。このモデルでは、クライアントが新たなデータを要求するたびに新しいリクエストを送る必要があります。

一方、WebSocketは「フルデュプレックス」通信を提供します。これは、一度のハンドシェイク（接続確立）後、クライアントとサーバー間で持続的な接続が維持されることを意味します。この接続を通じて、クライアントとサーバーは互いにリアルタイムでデータを

元記事を表示

TampermonkeyでX(旧Twitter)の画像擬態系スパムURLを消す

# はじめに
10月くらい？にTwitter/Xの仕様変更により、URLを含むポスト(ツイート)のURLのテキストが表示されなくなり、代わりにサムネイル画像にリンクが貼られる形になりました。これにより画像に見せかけた誘導リンクを仕掛ける輩が出没しております。
本当の画像ポストとは違って左下にURLが記載されているので注意していれば目視で回避できますが、とうとう本日踏んでしまったため抜本的な対策を取ることと相成りました。

リンク自体は短縮URLで作られてるためかミュートワードに追加しても消えなかったので、Tampermonkeyを使って非表示にします。

↓こういうスパムリンク付きのポスト(ツイート)を表示させないようにします。
![spamimic.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570689/07d5d579-7774-bfed-a765-94965843560a.png)

# 実際のスクリプト
Tampermonkeyに書いたスクリプトです。
“`JavaScript
//

元記事を表示

受け取ったnumber型を文字列に変換する

# タイトル
受け取ったnumber型を文字列に変換する

## 目次
1. [開発環境](#開発環境)
2. [何故この記事を書こうと思ったのか](#何故この記事を書こうと思ったのか)
3. [まずはnumberを引き渡して文字列を返す関数](#まずはnumberを引き渡して文字列を返す関数)
4. [numberの配列を受け取って、文字列の配列で返したい場合](#numberの配列を受け取って、文字列の配列で返したい場合)
5. [+αなお話](#+αなお話)
6. [結果](#結果)
7. [感想](#感想)

## 開発環境
“react”: “^18.2.0”,
“typescript”: “^4.9.5”,

## 何故この記事を書こうと思ったのか
SESフロントエンドエンジニアとしてReactを使用した業務を開始。
TSでの型指定なんかもまだまだ知見が足りないなぁと感じつつ、
まずはJSにおける配列に対する理解っていうのも乏しいので忘備録として記述しています。
APIを初めて使用される方なんかで、もし設計書に書かれている受け取るデータがnumber[]で困

元記事を表示

日時の値について。どの型を使用するか? ISO 8601? Timestamp?

# 目的

– 日時の値について、以下どちら (または他) を使うかを決めたい。
– `ISO 8601 Date and time string` (e.g. `2023-11-18T08:43:53+09:00`)
– `UNIX Timestamp` (e.g. `1700264648`)

## 結論

Timestampを使用する。
理由は、パフォーマンスが ISO 8601 に比べて3倍ほど早いので

## ISO 8601

### Pros

– ログやデバッガで見る時、人間が読みやすい

### Cons

– Timestamp より遅い
– タイムゾーン情報を扱わねばならず、欠落せぬよう実装に注意が必要

## Timestamp

### Pros

– ISO 8601 より速い
– タイムゾーン情報を扱う必要がなく、バグが起きにくい
– Slack や Chatwork の API は Timestamp を採用している
– ref.
– https://api.slack.com/methods/conversations.

元記事を表示

HTML上に画像があるか探す

開いたページから画像が存在するか探す方法のメモ。
HTML上に画像があるか探します。
下のコードは多少変えていますが、[MDN](https://developer.mozilla.org/ja/docs/Web/API/Document/images)のコードです。

“`js
const imageList = document.images;

for (let i = 0; i < imageList.length; i++) { if (imageList[i].src == "apple.jpg") { // 画像が存在した時の処理 } } ``` 上記コードで処理できるそうですが、私の環境ですと、うまく画像を探すことができませんでした。 いろいろ試したところ、絶対パスを指定することで動作でしました。 ```js if (imageList[i].src == '指定のURL/img/apple.jpg') ``` ただ上記の書き方ですと、使用できる場面が限定的になるので、実装上では`indexOf`を使用するのがベターかなと思いました。 ```j

元記事を表示

【JavaScript】??と||の違い

## `??`

`??`は左辺が`null`か`undefined`である場合に右の値を返し、それ以外の場合は左の値を返します。

“`js
const foo = null ?? ‘default’
console.log(foo) // ‘default’

const baz = 0 ?? 1
console.log(baz) // 0
“`

## `||`

`||`は左辺の値が`null`や`undefined`の場合に加えて、何らかの偽値であった場合に右の値を返します。

“`js
const foo = null ?? ‘default’
console.log(foo) // ‘default’

const baz = 0 ?? 1
console.log(baz) // 1
“`

偽値には以下のようなものがあります。

リーマンのξ関数を手実装で計算してプロットする – JavaScript

ライブラリを使わずにゼータ(ζ)関数、クシー(ξ)関数を計算する。($0<\Re(s)<1$) $$\xi(s)=\frac{1}{2}s(s-1)\pi^{-\frac{s}{2}}\Gamma\left(\frac{s}{2}\right)\zeta(s)$$ # プログラム $s=c+ki\ \ (0[object object]の対処法（javascrpit）

jsonをコンソールログに出力しようとすると[object object]と表示される

これは、JSONがJavaScript のオブジェクトと認識されているから。
JSON文字列に変換する。

### 対処法①
JSON.stringify

~~~javascript:例
json=”{省略}”;
console.log(“結果:”+JSON.stringify(json));
~~~~

しかしこれだとなぜか、改行されずに表示される
すごく見ずらい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2780454/3d466a88-346b-e053-fdff-232f96a4541d.png)

### 対処法②
なぜかわからないが、console.logの()内を変数だけしか書かなかったら、オブジェクトにならない。

~~~javascript:例
json=”{省略}”;
console.log(json);
~~~~

こっちだときれいに表示される。
めちゃ見やすくな

【Chrome拡張機能】N予備校の回答チェッカーを作った話

# すごく雑なきっかけ

私は普段からN予備校を利用している人間です。
もちろんN予備校のことは気に入っています。
ですが、私には一つだけ不満がありました。

> 10問ある問題を解いて解答したときに、もし1問でも間違っていたら、
> 10問とも全てやり直しになってしまう。

この仕様がとにかく嫌で嫌でしょうがなかったんです。

10問とも全て解き直すのも勉強のうちとか言われそうですが、
このままだとN予備校自体に嫌気が差すレベルで嫌だったので…

そして、この問題を解決すべく考えたのが、
答え合わせボタンを押すと**誤答がないか確認してくれるコード**でした。

当初は問題を開くたびにコンソールに打とうと思っていたのですが、
それだと面倒なので拡張機能化してみようと思いました。

そうして出来上がったのが↓です。

# 作ったもの

N予備校の問題型教材を開いているときに、「答え合わせ」ボタンを押すだけで間違っている問題一覧が出てくる、N予備校の生徒の味方となっている拡張機能です。

![スクリーンショット 2023-10-26 9.29.44.png](

【React】【useEffect】useEffectを複数使う場合は、処理順に注意

# はじめに
あるコンポーネントで複数のuseEffectフックで、色々と処理を行おうとすると思わぬバグに出会うことがあります。

そこで今回は
– 副作用について
– useEffectについて
– 僕が出会ったバグ

の順番で、useEffectの理解を深めると共に、useEffectを複数書くことでバグが生じた例を紹介したいと思います。
## 環境
– Node.js v18.16.1
– react v18.2.0
– react-dom v18.2.0
– react-scripts v5.0.1

# 副作用とは
まずはuseEffectを理解するために、関数、および副作用について理解をしておきましょう。

Reactのコンポーネントは**関数**です。
プログラミングでの意味の関数ではなく、数学的な意味で、「引数が同じなら戻り値も常に同じ」という特性のことです。
y = 2xという関数は、xに3を与えたら必ず6が返ってきますね。

一方で、stateの更新や外部サーバへの接続といった処理は**副作用**と呼ばれることが多いです。
これらの処理は、引数が同じであっても、戻り

paizaのスキルチェック(JavaScript)でよく使う技

paizaのスキルチェック(JavaScript)でよく使う技

最近、Paizaのスキルチェックをよく解いているのでD-C-Bランクでよく使った技をメモしていたので投稿。

# 分割

“`shell
const str = “abc\ndef”
const [a, b] = str.split(“\n”)
“`

# 先頭だけ取り出す

“`shell
const [head, …tail] = lines
“`

# 連番生成

“`shell
[…Array(5)].map((_, i) => i)
“`

# 文字列を配列に

“`shell
> Array.from(“abc”)
[‘a’, ‘b’, ‘c’]
“`

# 配列の末尾を取得

“`shell
array.slice(-1)[0]
“`

# 配列の先頭を取得

“`shell
array.slice(0,1)[0]
“`

# 配列を分割

“`shell
array.slice(n, m)
> [1, 2, 3, 4, 5, 6]
x.slice(0,3)
> x.sl

JavaScript 第3回 addEventListenerでボタン押下動作

# はじめに
JavaScript＋Microsoft Edgeを使用したスクリプト開発ということで、Webサービスを使用したスクリプトで必要そうな機能を試していこうと思います。
第2回では、onclick属性を使用してボタンを押してスクリプトを実行することを試しました。
今回は、addEventListenerメソッドで同じことをやろうと思います。

# 今回実施する内容
HTMLのボタンにaddEventListenerメソッドを付加し、クリックしたときに関数を実行します。
もう少し具体的には、「入力」のInputフィールドに入力して、「実行」ボタンを押すと、「結果」に、入力した値を表示します。
![screenshot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405480/314e4f00-67b8-fbec-a7e7-d770d66d7fa9.png)

# ソースコード(Git Hub)
https://github.com/Build-Mount/JS_03_addEventListe

フロントからWebスクレイピング ( react, express 連携 )

フロントからWebスクレイピンを行おうとするとCORSのエラーでだいたいはまる．．．
相手側の設定次第では回避できる時もあるがフロントのみだと解決できない．．．
そこで express で簡易にバックエンドのサーバ作って対応してみる
スクレイピングには jsdom 使ってます

フロントのみで CORS のエラー解消する方法あったら教えてください！！

# 実施環境
– Windows11
– node (v18.17.1) ※インストール済
– react@18.2.0
– express@4.18.2

# 手順

## react プロジェクト作成・移動 (create-react-app)
create-react-app を使ってプロジェクトを作成
プロジェクト名は任意でOK！
– プロジェクト作成
“`powershell
npx create-react-app project-name
“`
– プロジェクト移動
“`powershell
cd project-name
“`

## express インストール（バックエンドサーバ）
express のインスト

CLIだけでCode EngineWebアプリの作成をしてみるメモ

GitHub Codespaces上でCode Engineを使って開発をしてみます。

いつも手順忘れる..

## 1. CLIツールの準備

### IBM CloudのCLIをインストール

通常のGitHub CodespacesだとLinux指定になります。

“`bash
$ curl -fsSL https://clis.cloud.ibm.com/install/linux | sh
“`

これでOKです。

### Code Engineのプラグインインストール

“`bash
$ ibmcloud plugin install code-engine
“`

確認してみます。

“`bash
$ ibmcloud plugin list

ibmcloud plugin list
Listing installed plug-ins…

Plugin Name Version Status Private endpoints supported
code-engine[ce] 1.48.0 true

Google Chromeのブックマークレットを使って、画面の全チェックボックスをON / OFFする

# 前置き
はじめまして、M333 Studioと申します。(エムササミスタジオと読みます)
システムエンジニアをやっています。
最近参画したプロジェクトで基本設計書を作成するはずが、基盤が全く固まっておらず、なぜかワイヤーフレームを作成しています。(元々Web出身だと自己紹介した結果、デザイナーをすることに)
ちまちました機能や備忘録を投稿していきたいと思ってます。
では、どうぞよしなに。

# ブックマークレットの登録方法
前提：Google Chromeを使用。ブックマークバーは表示済み
1. ブックマークバーを右クリックし、「ページを追加…」をクリック
1. ブックマークに好きな名前を付け、URLに下記のコードをコピー&ペーストする

“`
javascript:(function(){if(jQuery){var checkboxes = jQuery(‘:checkbox’);if(checkboxes.length > 0){var allChecked = checkboxes.is(‘:checked’);checkboxes.prop(‘checked’, !

[JavaScript]Date.parseの挙動の違いをブラウザ毎に調べてみた

## 概要
JavaScriptで開発をしている時に、2023年2月31日など暦上存在しない日付に対して`Date.parse`を実行する機会がありました。そうしたら、MDNの説明と異なる動きが起きたため、`Date.parse`の挙動はブラウザによって異なることを知りました。そこで今回はブラウザ毎の`Date.parse`の挙動の違いを調査しました。

## 結論
– ブラウザのJSエンジン毎に`Date.parse`の挙動が一部異なります。
– 異なる点として、Chromeは2023年2月31日を2023年3月3日と繰り上げた日付を返却するのに対し、SafariとFirefoxは`NaN`を返却します。

## 動作が異なる原因
ブラウザ上でのJavaScriptの挙動は[JSエンジン](https://developer.mozilla.org/en-US/docs/Web/JavaScript/JavaScript_technologies_overview)によって決定されます。
ChromeやSafariではそれぞれ違うJSエンジンが使われています。JSエンジンが

M1 Macで Create React App の環境構築 (Homebrew, Nodebrew, Node)

M1 Macで Create React App の環境構築をしました。
M1 Macの仕様でかなり苦戦しました、、

## Homebrew をインストール
“`

% cd /opt
% sudo mkdir homebrew
% sudo chown $USER homebrew
% curl -L https://github.com/Homebrew/brew/tarball/master | tar xz –strip 1 -C homebrew

“`

## PATHを通す

“`
# PATHを通す
% cd
% vim .zshrc

export PATH=/opt/homebrew/bin:/usr/local/bin:$PATH

% source .zshrc
% which brew
/opt/homebrew/bin/brew

“`

## Xcodeのライセンス

“`

% sudo xcodebuild -license accept

sudo softwareupdate –install-rosetta

“`

## Ho

Googleカレンダーを読み書きするAPIをGASで作ってGPTsのCustom Actionsから呼び出してみる

## はじめに
こんにちは、ほたるです。

Google Apps ScriptでAPIをつくり、GPTsから呼び出す方法について投稿しました。

https://qiita.com/iconss/items/3db0761bb4cfe1422a6e

この記事では、さらに複雑な処理にトライします。

– Googleカレンダーに予定を追加
– Googleカレンダーから1日分の予約を取得
– 上記の２つの処理を一つのGPTsで会話文から判断して呼び分ける

今回は趣向を変えて、GoogleスプレッドシートではなくGoogleカレンダーを扱ってみました。

### この記事の対象者
– GPTsのCustom ActionsのAPIを自作したい方
– Google Apps Scriptで簡単なスクリプトを作ったことがある方
– Zapierの連携よりも複雑な処理を求めている方

## APIの概要
二つのGoogle Apps Scriptを用意します。
– カレンダーに予定を追加するスクリプト
– カレンダーから1日分の予定を取得するスクリプト

![スクリーンショット 2023

現在いるセルのURLを叩いてレスポンスを右側に格納する[GAS/Google Apps Script]書いた

## はじめに

いい感じのスクリプト書いたので忘れないように投稿しておく。

## イメージ

![スクリーンショット 2023-11-16 22.21.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112929/4f428b4c-89fe-b9b9-d9a3-27ad54d356dd.png)

## コード

fetchするURLは `https://httpbin.org/get`

gasのコードはこんな感じ

“`javascript
function fetchApi() {
const ss = SpreadsheetApp.getActiveSpreadsheet();
const sheet = ss.getActiveSheet();
const cell = sheet.getCurrentCell();
const [col, row, url] = [cell.getColumn(), cell.getRow(), cell.getValue()

[備忘録] 設計入門を20ページほど読んで早速アウトプットしてみた

# 経緯
– オブジェクト指向は知ってはいるものの、これまで関数ベース設計しかしてこなかったなと反省。
– 来年の春から社会人になるわけだしそろそろクラスベース設計ができるようにならなきゃと思い[良いコード-悪いコードで学ぶ設計入門](https://www.amazon.co.jp/良いコード-悪いコードで学ぶ設計入門-―保守しやすい-成長し続けるコードの書き方-仙塲/dp/4297127830)を読み始めた。
– まだ20ページくらいしか読んでいないがいきなりアウトプットしてみる！

# やったこと
– 直近で書いた短いコード（言語はGAS。文法はJSと同じ）を対象に関数ベースからクラスベースにして before afterを比較してみた。
– ちなみにコードの内容はGASでスプレッドシートのメニューバーを作成するもの

## before
“`javascript
function onOpen() {
const ui = SpreadsheetApp.getUi()
const menu = ui.createMenu(‘シート操作’);
const

OTHERカテゴリの最新記事

値 型 説明