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

Firefoxアドオン(拡張機能)で、Content scriptsのエラーが何故かコンソールに表示されない問題

また5周遅れ位の話ですが、とある事からFirefoxのAdd-onを作ろうとした際、Content scripts(content.js)が例外を出して止まっているっぽいのにコンソールにはエラーメッセージが表示されない事で対応に時間を食われた件について。

# 解決法

***方法1. `CTRL+SHIFT+J`、又はメニューで「ブラウザーコンソール」を開く。***
FirefoxではContent scriptsのエラーはこの**ブラウザーコンソール**ウインドウにのみ表示されます。普通のコンソールでは見れません。

***方法2. 全部try…catchで囲む***
content.js全体をtry…catchで囲めばcatchブロック内からエラーメッセージをconsole.logで出力する事ができます。

***方法3. デバッガの「例外で停止」にチェック***
デバッガの「ブレークポイント」以下にある「例外で停止」チェックボックスを有効にすれば、Content scriptsの例外にも反応します。

>参照:
[Console doesn’t log js er

BLob を使ってブラウザからバイナリデータをダウンロードするときの罠 (javascript)

ダウンロードすると、データがすべて文字列化テキスト化）されてしまう現象に悩まされたのでメモ。

## 問題

“`hoge.js
data = [0,1,2,3,4];
const blob = new Blob(data, { “type” : “application/octet-stream” });
const downloadURL = window.URL.createObjectURL(blob);
“`

こうすると、ダウンロードしたデータは下記のようにテキストデータになってしまうようです。

“`hoge.bin
01234
“`

# 解決方法

“`hoge.js
data = [0,1,2,3,4];
const blob = new Blob([data], { “type” : “application/octet-stream” });
const downloadURL = window.URL.createObjectURL(blob);
“`

これで、ダウンロードしたデータはバイナリになってくれます。

data を `[]` で a

複雑なことを考えなくてもjavascriptでsleep関数が使える記事

テキストを入力するだけでメッセージ動画が作れるサービス[Teloppy](https://teloppy.com “Teloppy”)を運営しております！
## sleepとは？
phpの例で言うと
“`php
sleep(1);
echo “１秒経過”
sleep(1);
echo “2秒経過”
“`
こんな感じでsleepで指定した秒数待った後に処理ができるようになるという便利な関数で様々な言語で使われています。javascriptにも似たような関数でsetTimeoutがありますが、setTimeoutは非同期関数なので上の処理を実現させるためには
“`js
setTimeout(() => {
console.log(“1秒経過”);
setTimeout(() => {
console.log(“２秒経過”);
}, 1000);
}, 1000);
“`
このような記述になり、見ずらくて何してるかあまり分からないコードになります。俗に言うコールバック地獄ですね。
Javascriptでは同期処理を実現させるためのawait/async、Promiseが存在

IEが終了したので、webpackやbabelは不要？

IE終了により、webpackやbabelを使う必要がなくなるのか、フロントエンドからビルドステップを完全に消し去ることはできるのか。

# そもそもなぜフロントエンドを「ビルド」していたのか

そもそもなぜwebpackやbabelを使ってJavaScriptをバンドル（1ファイルにまとめる）していたのか

### 1. HTTP/1.1とモジュールシステムの相性の悪さ

ブラウザにはES Moduleというモジュールシステムが導入されています。これは`import`文で他のファイルを読み込むことができるシステムです。
HTTP/1.1については、ブラウザ側で同時接続数制限があります。これは、ファイルを多数読み込む必要があるES Modulesには不向きでした。

### 2. ブラウザのES Module対応率の低さ

ES ModulesはIE非対応です。開発するWebサイトがIEをターゲットにしたい場合、ES Moduleを使うことはできません。
また、JavaScriptフレームワークもシェアを獲得するにはIE対応しなければならず、これらを使っている限りブラウザ上でES Mo

クレジットカードの取引データ、実はとてもシンプル。けど難解なのでデコードツール作りました (EMV Tag Decoder)

# なんの話か
クレジットカード決済で決済端末からブランドネットワークを介してブランド(VisaとかMastercardとかAmerican ExpressとかJCBとか)に送る取引データのデコーダー作ったという話です。

:::note warn
先に免責としまして、記載している内容はすべて、Githubで公開しているソースコード含めて、一般に広く入手できる公開情報をもとにしており、特定のブランド、イシュア、アクワイアラ、決済センター、決済サービスプロバイダー等の非公開情報を一切含んでおりません。また本記事記載のソースコードやデモを用いて発生したいかなる事象や不具合、不利益や損害についても一切の責任を負いません。
:::

# 作ったもの
ソースコード：
https://github.com/taukuma/emv-tag-decoder

デモ：
https://taukuma.github.io/emv-tag-decoder/
※ブラウザ上で動作します(JSだけです)。入力したデータはどこにも送られませんので、安全です。

クレジットカード決済をしたときに、ブランド（イシュア）

JavaScriptでページ内リンクにスクロールする方法

ページ内リンクへの移動をjavascriptでやる方法が通常のaタグで行うのとは違う感じだったので、関数を作ってさっくりできるようにしてみました。

ついでに移動先を微調整できるようにしました。idの位置よりちょっと上にしたりできるのでヘッダーなどを固定していてもずらして表示できます。
“`javascript
function scrollToID(id, margin){
const elm = document.getElementById(id);
if(!elm){
console.error(“idが見つかりません”);
return;
}
if(!margin) margin = 0;
window.scrollTo({
top: elm.offsetTop + margin,
behavior: ‘smooth’
});
}
“`
引数に移動先のidを入れてください。marginはidよりちょっと上に移動したい場合にマイナスの値を入れてください。marginは省略可能です。

使うときは要素にonclic

【AppleScript】【JavaScript for Automation(JXA)】QuickTime Playerの画面収録を時間指定で実行するスクリプトについて

# 概要
MacのQuickTime Playerでは画面収録機能を使うことで画面上の動作を記録し、動画ファイルとして保存することができます。本記事では画面収録を時間指定で実行するスクリプトを紹介します。

# スクリプトについて
スクリプトはMacのスクリプトエディタ使用して、AppleScript、および、JavaScript for Automation(JXA)のscptファイルを作成して実行します。
使い方はソースコード先頭のコメントを参照してください。

# 注意点
スクリプトではSystem Eventsを使用します。System Eventsを実行するためにはスクリプトエディタに対してセキュリティ設定を許可してください。
「システム環境設定」の「セキュリティーとプライバシー」＞「プライバシー」＞「アクセシビリティ」＞ 「スクリプトエディタ」のコンピューター制御を許可する。

# ソースコード
ソースコードはGitHubにもコミットしています。
また、本記事とは別にQuickTime Playerで起動した動画ファイル対して時間指定で画面収録するスクリプトをコミットしてい

【Angularアプリケーション開発 #7】選択したデータの詳細を表示する。

今回やること
・リストから選択したデータの詳細を表示する。

– onSelectメソッドを作成します。
引数はMember型です。memberを受け取りselectedMemberへ設定します。

“`typescript:members.component.ts
import { Component, OnInit } from ‘@angular/core’;
import { Member } from ‘../member’;
import { MEMBER } from ‘../mock-member’;

@Component({
selector: ‘app-members’,
templateUrl: ‘./members.component.html’,
styleUrls: [‘./members.component.css’]
})
export class MembersComponent implements OnInit {

members = MEMBER;

member:Member = {
id:’1′,name:’

JavaScript 用途から逆引き 配列操作メソッドまとめ forEach, map, filter…

JavaScript について、少し他の言語に浮気するとすぐに配列操作方法を忘れてしまうので、自分が見直しやすいようにシチュエーション別にまとめました。~~いちいち思い出すのは辞めました。~~

あくまでも一例であり網羅しているわけではありませんので、全部見る系男子及び女子並びにその他のあらゆる人類は [MDN Web Docs](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array) を参照してください。

:::note warn
シチュエーション別なので、メソッドは重複していることがあります。
:::

## 目次

### 真偽で判定
* [特定の要素が配列に含まれているかをtrue/falseで判定したい](#特定の要素が含まれているかをtruefalseで判定したい)
* [要素が任意の条件を満たしているかをture/falseで判定したい](#要素が任意の条件を満たしているかをturefalseで判定したい)

### 要素を抽出
* [任意の条件を満たす要素

Next.js学習まとめ

# Next.jsの学習まとめ

### Create Next App
“`zsh
npx create-next-app nextjs-sample
“`

### ルート管理
ReactRouterではそれぞれのコンポーネントでルートを管理していたが、
Pages内のフォルダディレクトリで管理できるようになるメリットがある。
PagesフォルダはNextCreateApp時に追加されるので、これを使用する。
また、ルーティング管理のために特別な名称があり、
index.** というファイル名は”/”を表しており、
_**.**というようにアンダーバーから始まる場合はルーティングされず
ルーティング不要なファイルに使用されている。(_app.jsなど)
[**].**とした場合はパラメータを表し、
[…**].**とした場合は複数のパラメータを受け取る。

|階層1|階層2|階層3|
|—-|—-|—-|
|Pages|_app.js|
||index.js|
||main|index.js|
|||content.js|
|||[articleId].js|

【ReactNative】FlatList自体のタップを判別する

# 目次
[1.やりたいこと](#1-やりたいこと)
[2.起きていた問題](#2-起きていた問題)
[3.原因](#3-原因)
[4.解決策](#4-解決策)
[5.まとめ](#5-まとめ)

# 1. やりたいこと
赤枠内の青の部分を「タップした時だけ」イベントを発火させたい
スクロールされた場合はタップと判定したくない
青部分をタップしたときにキーボードを非表示にするという処理をしたい。

# 2. 起きていた問題
FlatListのonPressやonTouchEndやonTouchStartを使用して、
普通にタップのイベントを拾い処理を行おうとしたが、
単純に上記イベントを契機とするとスクロールした際にもイベントが発火してしまう問題が発生していました。

# 3. 原因
おそらくFlatList自体をタップした際

相対パスで読み込まれたjsファイルの相対パスを修正する

# 何？？
例えば/docs/index.htmlから/img/atlas.pngを読み込みたいとき

絶対パスで書くと
“`html:/docs/index.html

“`

相対パスで書くと
“`html:/docs/index.html

“`

これを他の場所でも使いまわせるようにjsファイルに移すと
“`html:/docs/index.html
…

…
“`
“`js:/src/util.js
const src=’../img/atlas.png’;
addEventListener(‘DOMContentloaded’,()=>document.body.append(Object.assign(new Image(),{src})));
“`
→読めないじゃん
これは単に/src/util.jsからの相対パスにしているからだが
/docs/index.htm

DOM操作が苦手なJavaScript初学者が保留機能付きメモアプリを作ってみた

DOM操作の情報が多すぎて何か最善かわからないまま、
つぎはぎの知識で何とか完成しました。

もう少し勉強したらReactを学びたいと思います。

至らぬところが多いので、ご意見や改善案をいただけますと幸いです。
何かいい教材がありましたら教えてください。

“`horyuMemo.html

追加

メモ

【JavaScript 関数ドリル】中級編のdifferenceBy関数の実装アウトプット

## differenceBy関数の課題内容

\_.differenceBy関数を自分で実装する課題。
https://lodash.com/docs/4.17.15#differenceBy

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。

【上級】differenceBy関数の実装

## 課題に取り組む前の状態

– 解答を見なくてもできそうだと思った。

## 課題に取り組んだ後の状態

– 解答例とは異なるが、サンプル通りの実行結果が出るように実装できた。

## differenceBy関数の実装コード（答えを見る前）

“`javascript

function differenceBy(array, values, iteratee) {
const copiedArray = […array];

for (let i = 0; i < values.length; i++) { console.log(`values[i] : ${va

動的型付け言語、静的型付け言語とは

「動的型付け言語」「静的型付け言語」について学んだためメモ。
## ２つの違い
変数・定数を宣言しデータをあつかう際、データの**型**を宣言するかどうかが異なる。
## 「型」とは
扱うデータの種類のこと。

*最新の ECMAScript 標準では、以下の8つのデータ型が定義されています。*
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Grammar_and_types
## なぜ動的型付けと静的型付けというものがあるのか
## 動的型付け言語
プログラムを書くときに、型を指定せずインタプリタやコンパイラが実行時にしてくれること。
## 静的型付け言語
プログラムを書くときに、値の型を指定すること。

[javascript,cssアニメーション]大量のエラーメッセージを出すアニメーション

テキストを入力するだけでメッセージ動画が作れるサービス[Teloppy](https://teloppy.com “Teloppy”)を運営しております！
その中で用いたアニメーションのコードを一部紹介したいと思います！


[実際のテロッピーでの動作](https://teloppy.com/telops/97ig97be/?message=U2FsdGVkX1%2ByuZsxuZkRk6E1lhD63V5mzDQ4KsdqoUuFtVT5SGsUrSObgc3PKIy59YwjYOeWDPurTVeXp78Yj5H5m9LGOq%2FLpJc3PWBpllU%3D)(teloppy版の方では都合上解像度によってアニメーションの仕様が異なります)

コードの完成形がこちらです

【JavaScript】クイズアプリを作ってみよう（基礎編）

JavaScript学習中の者です。
備忘録として学んだことを書いておきます。
今回は基礎編ということで、クイズを1問だけ解くだけのアプリにします。
次回応用編を書きますが、そちらは4問解き続ける仕様で作る予定です。

# 1. HTMLファイルの編集

HTMLファイルを用意するには、こちらのサイトが便利です。
トップページのダウンロードボタンを押して、ダウンロードしたデータのうち「index.html」だけ使用します。
（公式サイト「[HTML5 Boilerplate](https://html5boilerplate.com/)」より）

また、以下を貼り付ければBootstrapを簡単に利用することができます。

“` 【新規事業】SkyWayで1：1通信を作ってみたよ【プロト開発】

# はじめに
株式会社マイスター・ギルド新規事業部のウサギーです。
弊社新規事業部では、新規サービスの立ち上げを目指して
日々、アイディアの検証やプロトタイプの作成を行っています！

今回は、考えていたサービス案についてプロトタイプを作成するため、
オンライン通信の機能を用意したくて、SkyWayの1：1通信を試してみました。

# なぜSkyWay？
今回の目的は、新規事業部で使う実験用のプロトタイプです。
製品そのものを作るわけではないので

**○ とにかく早く**
**○ カスタマイズ性は高く**

むしろ
**△（保守性や拡張性を気にして）実験開始が遅れる**

そのため
**○ ベストやベターな技術選定でなくてもよい**

と考えています。
極論を言うとWebアプリでなくてもよかったのですが、
弊社としてはWebアプリにするのが一番早いと思われたのでWebアプリを採用しました。

そうした事情から社内で調査実績がある**SkyWay**をチョイス。
以前の調査記事はこちら。弊社エンジニア619さんの執筆です。

https://qiita.com/Meister619/it

reduceの使い方まとめ(Javascript、配列の合計など)

はじめに

reduce()関数の使い方をまとめたいなと思い作成しました。

引数

引数 `callbackFn` `initialValue`

callbackFn

4 つの引数を取る「縮小」関数になります。

引数 `previousValue` `currentValue` `currentIndex` `array`

• `previousValue`
  配列の値を格納できたりして(大体何でも入る)、ループ終了後に`previousValue`の結果を返却します。初期値は`initialValue`で設定できます。
  設定しない場合は`array[0]`番目が初期値になります。

• `currentValue`
  `array[0]`または`array[1]`から`array[array.length – 1]`(配列末尾)まで値を呼び出します。
  初回の呼び出しでは `initalValue`が指定された場合は `array[0]` の値で

InDesign JavaScript XML 要素を追加

要素を追加するスクリプトは、これで良いのかな・・・？

~~~JavaScript
/*
このスクリプトを利用して起こった不具合の責任は取れません。
ご了承下さい。

更新 2022/06/15
*/

// アプリ指定
#target “indesign”;

// スクリプト名
var scriptName = “要素を追加”;

//スクリプトの動作指定（一つのアンドゥ履歴にする、及び、アンドゥ名）
app.doScript(function(){

// ダイアログ
var dialogueFlg = confirm(“選択された要素を基準にして要素を追加します。”
, “”, scriptName);

// Ｎｏの場合
if(dialogueFlg == false){

// スクリプトを終了
exit();
}

// ここから————————————————–
// 設定ダイアログ
var dial