JavaScript関連のことを調べてみた2022年01月22日

[JavaScript]aタグのダブルクリック対応したい

# はじめに

– aタグのリンクを押したときにformのsubmitを実行する、というHTMLがあった
– マークアップが先に作られておりこれを担保しつつ、ボタン機能を持たせる必要があった
– 例として以下のようなマークアップで「ログイン」ボタンが作られていたとする

“`html

ログイン

@csrf

“`

処理としては

1, aタグで作られたログインボタン押す
2, `login`の要素を持つformタグ内でsubmit()を実行
3, actionで指定したルートへPOSTする

といった感じで処理が走る状態

## やりたいこと

今回はこのaタグが**ダブルクリッ

【Nuxt.js×Firebase】ログイン状態を永続的に保持させる（リロード対策）

#はじめに
こんにちは！
今回はログイン状態を永続的に保持させる（リロード対策）についてアウトプットしていきます！
※内容的にかなり難しいので、抽象的、間違いの部分があると思いますのでご了承ください。メモ感覚で本記事を執筆しております。

#対象
・ログイン状態を保持させたい方
・firebaseを使用してのユーザー登録、ログイン/ログアウト機能の実装を行いたい方（[こちらの記事](https://qiita.com/Yudai_35_/items/cb6f360863cf2838b7d5)参考）

##使用環境

|使用技術 |バージョン |
|:-:|:-:|
|nuxt.js |2.15.7 |
|firebase |9.6.1 |
|firebase-tools |9.23.3 |
|@nuxtjs/tailwindcss |4.2.0 |

##使用ファイル,概要

|ファイル名 |概要 |
|:-:|:-:|
|middleware/authenticated.js |firebase.jsの情報から処理内容の記述。stateへ再保存。|
|plugins

wsはBlobで受ける

「ws node.js」で検索して出てくるサンプルコードがどれも送信内容次第で失敗する。
テキストからBlobに変えたらうまく行った。根本的原因は不明。

“`javascript:nodeApp.js
const WebSocketServer = require(“ws”).Server
const server = new WebSocketServer({ port: 5001 })
server.on(“connection”, client => {
client.on(‘message’, message => {
server.clients.forEach(v => {
if(v !== client) v.send(message)
})
})
console.log(‘_connections’,server._server._connections)
})
“`
“`javascript:plainWeb.js
$(e=>{
var m = new Messenger.Nodejs().message(e=>{
console.l

【JavaScript】ES2021で使えようになった機能

今更ながら、ES2021で使えるようになった `JavaScript` の新しい機能をさらっと振り返ります。

# Numeric Separators
– 数値セパレータ
– 数値を_で区切れるようになった
– 数値の可読性を上げられる
– あくまで人間がみやすいようにするだけで、実体は `_` が無い状態

“`typescript
10000 === 10_000 // true
100000000 === 100_000_000; // true
“`

# String.prototype.replaceAll
– 文字列全体に対して置き換えを行う
– 今までは正規表現で 「g」オプションでグローバルサーチを行っていたが不要になった

“`typescript:ES2021
‘0120-123-4567’.replaceAll(‘-‘, ”); // 01201234567
“`

“`typescript:2021以前
‘0120-123-4567’.replaceAll(/-/g, ”); // 01201234567
“`

# Promise.any

シンプルなファイルアーカイブフォーマットの設計と実装

こんにちは、久しぶりの投稿となります。

今回は、シンプルな構造で実装が容易なファイルアーカイブフォーマットについて設計と実装を行ったので、その備忘録となります。

# 背景
だいぶ昔、バイナリファイルを扱うウェブアプリを作成したのですが、ちまちま改良していくうちに、ロードした複数のファイルをひとつにまとめたい場面に遭遇しました。

普通であれば、既存の外部ライブラリ ([JSZIP](https://stuk.github.io/jszip) など) を使えば解決なのですが、そのウェブアプリは、小規模ながら暗号ファイルを扱うため、あまり外部ライブラリは使いたくありませんでした。

そこで、コンパクトで全ての処理を把握でき、かつ標準ビルトイン機能のみで完結する、シンプルなアーカイブを実装しよう、と考えたのがきっかけです。

# 参考にしたもの
とは言っても、右も左も分からない状態からスタートだったので、まずは手始めに、巷で有名なファイルアーカイブの構造を調べることにしました。

無難なところで、ファイルアーカイブの大先輩である [tar](http://www.redout.net/d

vue-c3のグラフにデータを追加する方法

# はじめに

Vue.js で作ったアプリにグラフを表示するために vue-C3 というコンポーネントを利用しています。これで描いたグラフに動的にデータを追加したいと思ったのですが、リファレンスを見てもいまいちやり方がわかりませんでした。
いろいろと試すなかでやり方が分かってきたので載せておきます。

# 対象者

– 基本的な JavaScript を書ける方
– Vue.js の利用経験がある方

# 環境

– Vue 2.6
– c3 ( https://github.com/c3js/c3 )
– vue-c3 ( https://github.com/chryb/vue-c3 )

# 前提

Vue と C3 を利用する環境は出来上がっているものとして進めます。
環境が無い方は公式サイトなどを見て準備をしてください。

# データ追加の方法

例えば折れ線グラフがある場合、グラフデータの追加には以下の 2 パターンがあると思います。それぞれのやり方について説明します。

1. 折れ線グラフの本数を増やすパターン
1. 各折れ線グラフの末尾にデータを追加するパターン

結

JavaScriptのページ読み込み関連イベントの発火順序をまとめてみた

## はじめに
JavaScriptを学習していると、Webページを読み込むタイミングで処理を行うことがよくあります。

– loadイベント（window.onload）
– DOMContentLoadedイベント
– defer属性を付与したscript要素

これらはブラウザのWebページ読み込み処理と関係しています。
しかし個別では理解できても、まとめると処理の順序がなかなかイメージできず、一覧にしてまとめた表があったらわかりやすいのに、と思ったので勉強がてら作ってみました。

## 対象者
– ブラウザのページ読み込みとイベントの発火タイミングがイメージできない方
– ページ読み込みに関するJavaScriptのイベント一覧が知りたい方
– ページ読み込みに関する流れが知りたい方

## 前提と結論
前提として、Webページが表示されるまでの大まかな流れは以下のようになっています。

1. HTTPレスポンスによりブラウザがhtmlファイルを受け取る
2. 受け取ったhtmlファイルを元にブラウザがレンダリング処理を行う
3. Webページが表示される

この記事は上記の２

PHPとjs　記法の違い

変数や配列の宣言・追加などの書き方を
PHPとjsで混同してしまうことがあったのでメモ。

※※記事を書いている途中で完璧なサイト様を見つけてしまいました※※
当記事は無視してこちらを参照されたほうが良いと思います↓

【PHP】PHP及びJavaScriptにおける配列と連想配列、オブジェクトの取り扱い【JavaScript】

##変数の宣言

“`php:phpの場合
$変数名 = “hoge”;
“`

“`javascript:jsの場合
let 変数名 = “hoge”;
//定数の場合は const
“`

##配列の宣言・配列への追加

“`php:phpの場合
//宣言方法１
$変数名 = array(‘悟空’,’ピッコロ’,’亀仙人’);

//宣言方法2
$変数名 = [‘悟空’,’ピッコロ’,’亀仙人’];

//追加方法１
array_push($変数名,’クリリン’);

//追加方法2
$変数名[] = ‘クリリン’;
“`

“`javascript:jsの場合
//宣言方法１
let 変数名 = new Array(‘悟空’,’ピッコロ’,’亀仙人’

自分サーバーでWebPushをやってみた。

# WebPushって何？
– Android端末とかChromeブラウザで、「通知を受け取る」にしておくと、サーバーサイドから通知をプッシュできる仕組みです。
– これを使って、自分サーバー上に通知サイトを用意して、サーバーからのいろんな通知をスマホで受け取ろうという実験です。
– （たとえば、サーバー障害発生などでZabbixのアラートが上がったら自分のスマホに知らせてくれる、的なものです）

# さっそく実装
– 続きは GitHub で

https://github.com/iruka-/WebNotifySample

# インストール前提条件
– 自分サーバーはSSL有効でなければなりません。
– Apache + PHP7 が動いているものとします。
– Apacheの設置先ディレクトリは、説明の都合上、 /public/ とします。

# インストール方法
– （１）まず、 上記 GitHubからコードを拾ってください
– （２）PHPのcomposer を使って、minishlink/web-push をインストールします。

$ composer require

Webの勉強はじめてみた その23 〜HTTPサーバー編〜

N予備校「プログラミング入門Webアプリ」を受講しています。
今回は第3章12〜15節です。

HTTPサーバー

`node.js`のモジュールを使ってサーバーを立てる

“`javascript
‘use strict’;
const http = require(‘http’);
const fs = require(‘fs’);

const server = http
.createServer((req, res) => {
const now = new Date();
console.info(`[${now}] Requested by ${req.socket.remoteAddress}`);
res.writeHead(200, {
‘Content-Type’: ‘text/html; charset=utf-8’
});

switch (req.method) {
case ‘GET’:
//res.write(‘GET ‘ + req.u

face-api.jsを使って「トラニナル」

#はじめに
昨年の年末に「うちの会社っぽい年賀状なんかない？」ということで
「”顔”になんやかんやできる年賀状」を作ってみよう！と、face-api.jsを使ってみました

#face-api.jsってなぁに
ブラウザで顔検出と顔認識ができるJavaScript APIです
機械学習用のライブラリTensorFlow.jsが利用されています
[face-api.js](https://justadudewhohacks.github.io/face-api.js/docs/index.html)

* 顔検出：face detection、人の顔を自動的に見つける
* 顔認識：face recognition、個人を識別する

です
今回は「顔検出」の範囲になります

#face-api.jsを使う準備
Getting Startedの記述を参考に作業します

* dist /face-api.jsの最新のスクリプトを含める
または、npm経由でインストール

と記載があったので、前者を選択しました
[GitHub](https://github.com/justadud

AmplifyでのS3を操作する

#前提

1.`amplify add storage`コマンドで、S3を追加する

“`
amplify add storage

? Please select from one of the below mentioned services (Use arrow keys)
❯ Content (Images, audio, video, etc.)
NoSQL Database

“`

2.`amplify push`コマンドで作成したS3をAWSにデプロイし、
　AWSの`S3`サービスへ反映する

“`
amplify push
“`

3.`amplify console`コマンドでデプロイしたサービスを確認する

“`
amplify console
“`

4.`AWS S3`の`CORS`を設定する

“`python
[
{
“AllowedHeaders”: [
“*”
],
“AllowedMethods”: [
“GET”,

フロントエンドLT会 – vol.5　#frontendlt に参加して

## はじめに
先日[フロントエンドLT会 – vol.5　#frontendlt](https://rakus.connpass.com/event/232039/)というオンラインイベントに参加してきました。
発表された方の中から、私が個人的に気になったもの、ためになったものをピックアップしてまとめておきます。

## フロントエンドエンジニアが知っておきたいセキュリティについて
セキュリティというと、一般的にはバックエンドが頑張る仕事と思われがちですが、どれだけ強固なバックエンドを仕組んでもフロントが弱いと破られてしまう場合やそのリスクが高まるのは間違いありません。

>参考資料
[ヒグ！さん](https://connpass.com/user/ShuyaHiguchi/)の発表スライド
[フロントエンドが知っておきたいセキュリティについて](https://speakerdeck.com/higuuu/hurontoendogazhi-tute-okitaisekiyuriteinituite)

### フロントエンドが最も気にすべきセキュリティ
– トークン
– 認証＆

【JavaScript】分割代入とデフォルト値

## はじめに
　本記事は、プログラミング初学者が、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
　そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
　間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。

## 分割代入とデフォルト値

### 分割代入

“`js:オブジェクトの場合
const myProfile = {
name: “田中”;
age: 39;
};

// 分割代入を使用しない場合
const message = `名前は${myProfile.name}です。歳は${myProfile.age}歳です。`;
console.log(message);
// “名前は田中です。歳は39歳です。”

// 上記の記述はmyProfileを何度も書く必要があり冗長であるため、分割代入を利用して以下のように記述

// 分割代入を使用した場合
// 取り出したいプロパティ名を{}のなかに記述。=の後に取り出すオブジェクトを記述
const { name, age } = myProf

javascriptでgame制作＃１６

####こんにちは
今回からRPGからgame制作に名前を変えます
RPG感がなくなってきているからです
では、今回はいろんなバグの修正をしていきます

####石採掘時の装備品表示

`石を採掘しますか`というイベント中
つるはしが表示されていないことがあるのでこれを直していきます

“`main.js
//石のつるはしを装備しているときに表示する
if(system[“current_item”]==1&&map_r==0){
ctx.drawImage(system[“stone_pickel”],0,0,32,32,0,40,114,114);
}
“`
この文章をメインループから探し出してください
そしてこの文章に変更してください

“`main.js
//石のつるはしを装備しているときに表示する
if(system[“current_item”]==1&&map_r!==3){
ctx.drawImage(system[“stone_pickel”],0,0,32,32,0,40,114,114);
}
“`
これでしっかりと表示されます

####石の採掘『はい』

OBS｜シーンのスイッチャー

OBSのブラウザで何でもできるようになってきたけれど、動画や音声はシーンに貼っておく方が今でもキレイで早い。それでも数が増えてくると OBS の UI では足りなくなるため、運用条件少なく、簡単に書けてすぐ書き直せるものが欲しかった。
https://github.com/obsproject/obs-websocket

Macのファイル名がUTFの方言で、webから触る場合は normalize する必要あり

“`javascript:obs.js
$(e=>{
var obs = OBS.Native
obs.getInstance().then(r=>{
$(‘#Scene3’).click(e=>{
obs.scene(‘シーン 3’).switch()//シーンのToggle
})
$(‘#Wabisabi’).click(e=>{
obs.source(‘わびさび.mp4’).scene.show()//素材名指しでシーン変更
})
})
})

var OBS = {}
OBS.obs_websocket = ‘ws://192.

[javscript]ローカルストレージにjson形式でデータを保存し、取得する

# やりたいこと
ローカルストレージに値を入れたいのだが、文字列しか入れられない。
trueやfalse、数値などのbooleanやnumber型は登録できないので、管理しやすいように
json形式でデータを保存し、データを取得しそれを使えるようにする。

## ローカルストレージの基本
まずローカルストレージとはブラウザなどにデータを保持させておく仕組みです。
ローカルストレージは永続化するので、場合によっては削除する処理を入れないといけません。

### ローカルストレージの確認方法(chrome)
開発者ツールを開き、開発者ツール上部の矢印からApplicationを選択します。


Storageという項目の中にLocal Storageという項目があるのでそちらの項目を開き、該当のサイト

Next.js×TypeScript をカスタムサーバー(Express)で起動する

Next.jsでExpressカスタムサーバーを試してみる機会があり、せっかくなので記事にしました。
`tsconfig` などの具体的な説明は省略しています。

## 環境構築

### Next プロジェクトの作成
ひとまず、Next.js × TypeScript の環境を作成します。
`–ts` のオプションを付けることでTypeScript化した状態でNext.jsのプロジェクトを生成してくれます。(便利、、、！！)

“`bassh
npx create-next-app@latest –ts your-app-name
“`

### Expressの導入

必要なパッケージをinstall　
`cross-env` は環境変数設定のためにインストールします。

“`bash
npm i express cross-env
npm i –save-dev @types/express
“`

`tsconfig.server.json` を作成します。

“`json:tsconfig.server.json
{
“extends”: “./tsc

AmplifyでのGraphQL APIをコールする

#前提

1.`amplify add api`コマンドで、GraphQL APIを追加する

“`
amplify add api

? Please select from one of the below mentioned services:
> GraphQL
? Here is the GraphQL API that we will create. Select a setting to edit or continue:
> Continue
? Choose a schema template:
> Single object with fields (e.g., “Todo” with ID, name, description)
? Do you want to edit the schema now?
> Yes
“`
2.`amplify/backend/api/myapi/schema.graphql`を編集する

“`schema.graphql
type Todo @model {
id: ID!
name: String!

AmplifyでのRestApiをコールする

#前提

1.`amplify add api`コマンドで、Rest APIを追加する

“`
amplify add api

? Please select from one of the below mentioned services
GraphQL
❯ REST
“`

2.`amplify push`コマンドで作成したRest APIをAWSにデプロイし、
　AWSの`API Gateway`サービスへ反映する

“`
amplify push
“`

3.`amplify console`コマンドでデプロイしたサービスを確認する

“`
amplify console
“`

#実装

“`restApiUtil.js
import Amplify, { API } from ‘aws-amplify’;
import config from “./aws-exports”;

Amplify.configure(config);

/**
* DELETEメソッド
* @param {string} apiName api名
* @param