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

フロントエンド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 } = myProfile
// 呼び出す際には、myProfileは記述不要
const message = `名前は$

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 ap

? 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 ap

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

2.`amplify push`コマンドで作成したRest APIをAWSにデプロイし、
　AWSの`Lambda`と`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名
*

Dartを使った大規模なアプリ開発

こんにちは、Quireです。

[Quire](https://quire.io)は、Dartで開発された初めてのWebアプリケーションではありませんが、クライアントとサーバーの両方でDartをふんだんに使ったものとしては、初めてかもしれません。


動作の軽い、徹底して階層構造のタスク管理ツールです。このプロジェクトはDartコードで合計53992行、1620 KB。コミュニティーからのオープンソース ライブラリも使っています。

# 私たちについて
このプロジェクトを開始するまで、私たちはRikuloというDartファンの集まりでした。Rikuloはこれまで、UIフレームワークやUIライブラリ、Webサーバー、メッセージサーバー、DBクライアントなどのDartライブラリをリリースしています。
Dartが2011年に初めてリリースされたとき、すぐに将来性を感じ、さっそく小規模のプロジェクトに着手。その後、ほとんどDartで書かれ

Vueでバリデーション処理をCompoment化 メモ

##Vueでのバリデーション実装要件 ##

**「Vue バリデーション」**で検索をかけるとライブラリを使用する方法が多くヒットしますが、現場の方針でライブラリは極力使わないことになっているので、BootstrapとJSで実装しました。

##①バリデーション用のJSファイルを作成

入力値がnullの時には**null**を返し、
チェック結果は**bool**型でreturnします。

**export function**で定義した関数名を**export default**でも定義してあげないと外部から呼び出せないので注意してください。
（JS不慣れな私は書き忘れててエラーで続けてて２時間くらい困りました(笑)馬鹿です(笑)）

“`js:validate.js

export default
{
validPostal,
validText,
validKana,
validTel,
validEmail,
validPref,
validNumber,
validURL
}

export functio

【Node.js、Javascript】Seleniumで要素のXPathを一気に取得する。

# はじまり
一般的にDOMから要素のXPathを取得する方法は、ブラウザの開発者ツールからとされています。
しかし、Seleniumで要素にアクセスするためにいちいちDOMを右クリックしてXPathを取得するのも面倒だと思います。僕の場合は、300回右クリックしてXPathをメモするのは嫌だったので、一気にXPathを取得する方法を探しました。
今回は、そのときのソースを掲載します。

# ソース
今回の方法では、2つファイルを作り実現しました。
作るファイルは、ブラウザで実行させるスクリプトが入ったファイルと、普通にseleniumを実行するファイルです。
Chromeで実行し、対象のCSSクラス名は`checkbox`でした。

まず、ブラウザ側のファイルとなります。
最後の方は文法としては変ですが、配列のインデックスをスクリプトに載せるために`”scriptSeparator”`と記述しています。

“`javascript:ブラウザ側のファイル.js
function getXpathByElement (element) {
var NODE_TYPE_ELEME

【Node.js、Javascript】SeleniumでOffice365にログインする

# はじまり

はじめてSeleniumを使って悪戦苦闘した熱が冷めない内に、成果を上げておきます。
Seleniumで、Office365から立ち上げるアプリの直リンクへアクセスした際に、Office365へのログインが求められた際に切り抜けたソースを貼っておきます。
ブラウザはChromeで行いました。

# ソース

コメントアウトしているところはなくても動きますが、Seleniumのコードの動作確認ではあったほうがより役立ったという感覚がありました。
画面遷移の度に10秒くらいは余裕を持っていたほうが良いと思います。driver.waitは試していませんが、他のソースにも転用するために`driver`に依存しないものにしました。
`waitTimeToDisplay`は、各々のアプリによって時間を設定していただければと思います。

“`javascript
const { Builder, By } = require(‘selenium-webdriver’);
const { it } = require(‘mocha’);

const sleep = waitTime

【Node.js、Javascript】Seleniumで疑似要素の属性値を取得する

# はじまり

今回、Seleniumで疑似要素の`content`属性の値を取得するコードを作成しましたので掲載します。

本ソースは、OutSystemsで作られたシステムにおいて、チェックボックスのチェックの有無を判断するために使用したので、同様にOutSystemsを使っている方も利用できるのではないでしょうか。

動かしたブラウザは、Chromeです。

# ソース

“`javascript
const { Builder } = require(‘selenium-webdriver’);

const getPseudoElementsContentsByClassName = async(driver, className, isAfter=true) => {
const funcName = ‘getPseudoElementsContentsByClassName’;
let afterOrBefore;
if(isAfter === true){
afterOrBefore = ‘:after’;
}else{

[JS]基礎的な文法(変数定義)

アウトプットとして

Rubyの学習をしてJSのコードを見ると、ごちゃごちゃしてるように見えてどうしても苦手意識が拭えない…
一つ一つ分解するとそんなに難しくないはずだとは思っているが…
というわけで、苦手意識克服するために超基礎的なところから！！

## JSの変数定義の仕方
JavaScriptの変数定義の様式は、var、const、letと３つ存在する

### var
varの特徴として、`再代入、再定義ともに可能`

“`javascript
var sample = “こんにちは”

sample = “こんにちは”
// 再代入OK

var sample = “こんにちは”
// 再定義OK
“`

### const
後から書き換えることができない変数を定義する書き方
constの特徴として、`再代入、再定義ともに不可`

“`javascript
const sample = “こんにちは”

sample = “こんにちは”
// 再代入NG →エラーが起こる

const sample = “こんにちは”
// 再定義NG →エラーが起こる
“`

※c

AmplifyでのAuthUtilを作成する

#前提
1.`amplify add auth`コマンドで認証サービスを作成する

“`
amplify add auth

? Do you want to use the default authentication and security configuration? Default configuration
? How do you want users to be able to sign in? Username
? Do you want to configure advanced settings? No, I am done.
“`

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

“`
amplify push
“`

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

“`
amplify console
“`

#実装
“`authUtil.js
import Amplify, { Auth } from ‘aws-ampli

VSCode Beautifyがnull合体演算子とオプショナルチェーンを殺しに来るとき

元々Prettierを使ってましたが、HTMLの謎の改行に嫌気が差し、設定でも上書きできなかったのでBeautifyに乗り換えました。
ただ、Beautify は長らくアップデートが止まっており、JSのアップデートに追いついていません。
特に、VSCode上からインストールしただけだとオプショナルチェーンとnull合体演算子に含まれる `?` の両側に勝手にスペースを開けられます。

“`js
// before
a ?? b;
array[0]?.func();

// after（構文エラーになる）
a ? ? b;
array[0] ? .func();
“`

流石におかしいだろうと思い、issueを見に行ったら有りました。
[Breaks optional chaining (?.) and Nullish coalescing operator (??) · Issue #401 · HookyQR/VSCodeBeautify](https://github.com/HookyQR/VSCodeBeautify/issues/401)
[Update to actu

Chrome拡張機能 manifest.json Ver.3の書き方

# はじめに

現在のChrome拡張機能のマニフェストのバージョンはV2とV3がありますが、[こちら](https://developer.chrome.com/docs/extensions/mv3/mv2-sunset/) によると、
– 2022/1/17 でmanifest v2で新規公開はできなくなる
– **2022/6でmanifest v2で非公開でも新規登録はできなくなる**
– 2023/1で例外を除き,既存のmanifestV2の機能は動かなくなる
– **2023/6でmanifestV2は例外なく動かなくなる**
とのことなのでよっぽどの理由がない限りV3を今後は使うことになります。

V2で書かれた情報の記事はいっぱいあったのですが, V3の記事はあまりなかったので自分用メモも兼ねて整理しようと思います。

# manifest.jsonの基本設定

## manifest_version
拡張機能自体のバージョンではなく、マニフェストのバージョンです。
ここはとにかく 2 ではなく 3 にしておきましょう！

“`jsx:manifest.j

NFTをUnityで表示する

#NFTをUnity上で表示してみたい

最近（2022年1月現在）、NFTとかメタバース とかめちゃ盛り上がってますね。

メタバースの開発プラットフォームとしてよく採用されるUnityを用いて、WebGL上でethereumネットワークに接続してNFTの画像を取得&表示するプログラムをコーディングしたので忘備録としてまとめます。

なお、Unityの基本的な部分（ボタンの配置とかのレベル）は省略します。例外処理等も実装していません。Javascript未経験から１〜２週間ほどで作ったのでコードが拙いところもありますが多めにみてください…笑

最終的な完成形は以下。
左のテキストボックスにNFTのコントラクトアドレスとトークンIDを入力すると、右にNFTが表示されます。

[75億円で落札されたアート](https://onlineonly.christies.com/s/beeple-first-5000-days/beeple-b-1981-1/112924)
contractaddress : 0x2a46f2ffd99e19a89476e2f62270e0a35bbf0

UTF-8文字列を1文字単位に分割

## tl;dr
split(”) ではUTF-8の4バイト文字を分割できません。
すべての文字を分割するには `spred operetor` 等を使用します。

## split(”)を使用した場合

“`Javascript
console.log(‘3バイト文字は分割できる’.split(”));

// output: [ ‘3’, ‘バ’, ‘イ’, ‘ト’, ‘文’, ‘字’, ‘は’, ‘分’, ‘割’, ‘で’, ‘き’, ‘る’ ]

console.log(‘4バイト文字（?）の場合’.split(”));

// output: [ ‘4’, ‘バ’, ‘イ’, ‘ト’, ‘文’, ‘字’, ‘（’, ‘�’, ‘�’, ‘）’, ‘の’, ‘場’, ‘合’ ]

“`
4バイト文字である `?` が正しく分割されていません。

## 正しい方法

### spread operator を使う
“`Javascript
console.log([…’4バイト文字（?）の場合’]);

// output: [ ‘4’, ‘バ’,

iframeにPOSTでデータを送る

URL指定してiframe開くとき／開いたあととかに、POST形式でデータを送る方法について試したので、忘れないように書いておく
（GETならsrcのURLにクエリパラメータつけるだけで済むが、POSTはそうもいかない）

# TL;DR

・iframe作る （ `document.createElement` ）
→このiframeには必ず`name`つけておく
（・iframeにsrcでURLを指定する）
・form要素作る （ `document.createElement` ）
・form要素に`action`で送信対象URLを、`method`でPOSTを、`target`でiframeのnameを、それぞれ指定する
・input要素作る （ `document.createElement` ）
・input要素にて、POSTで送信するデータをkey-value形式でname, valueを指定する
・input要素をform要素の下に配置する（ `appendChild` ）
→複数データを送りたい場合は、このinput要素作成をデータの個数分だけ繰り返す
（・ifram