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

Mathjax retryと出て，数式が表示されない．

# バグの内容
“`
Mathjax retry
“`

# 解決策

拡張機能をロードするのは非同期処理で行われるので，
`MathJax.typeset()`ではなく`MathJax.typesetPromise()`を使う．

javascript で全角英数記号を半角にする

１２３４５６ -> 123456 みたいな変換をしたい場合のコード。
`style=”ime-mode: off”` を書いてもchromeだとシカとされる。
そんな場合に `input type=”tel”` を使おう、なんて言う記事も多いけど tel でもないのに tel を使うの気持ち悪いので focus out時とかにフィルター通して正規化しよう、って魂胆。

“`javascript
var filters = filters || (function () {
const FullWidthStart = 0xff00
const FullWidthEnd = 0xff7e;
const HalfWidthStart = 0x20;
// ascii 文字はそのまま通す
const AsciiEnd = 0x7f;

return {
toNarrow: function(s){
let result = ”;
for(let i = 0; i < s.

githubのスター数の一覧を取得するスクリプト

# 背景
githubのリポジトリのスター数を色々比較して見たかったので出力できるスクリプトを作ってみた。

# 実行方法
## 事前準備
– inファイルを用意しておく
– 対象リポジトリ名一覧を記述
– .envファイルを用意しておく
– GITHUB_TOKENを定義
## 実行
“`console
$ yarn add ygor @octokit/core fs readline dotenv
$ node task.js output_star
“`

# コード
https://gist.github.com/tashua314/3ecdfb83b5aa4a924c1209471c00ef42
“`javascript:task.js
/**
* `https://github.com/{owner}/{repo}` のownerとrepoの情報をまとめたファイルを読み込み、
* スター数一覧を追記したファイルを出力する。
*
* # 実行例
* node task.js output_star
*
* # inファイル例
* “`

JavaScriptの”writable”,”enumerable”,”configurable”

# はじめに

JavaScriptのオブジェクトには各プロパティに属性があり、以下の関数で確認できます。

“`javascript
const person = { name: “太郎” };
const descriptor = Object.getOwnPropertyDescriptor(person, “name”);
console.table(descriptor);
“`
実行結果

本記事では3つのプロパティ属性について、まとめたいと思います。
* writable
* enumerable
* configurable

# writable（書込可能）
対象のプロパティに値の書き込みが可能であるか or 不可であるかを示しています。
trueの場合に書き込みが可能です。

プロパティ属性の値を変更する

クレジットカードの取引データはシンプル、ただ難解【JavaScript – EMV Tag Decoder】

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

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

# EMV Tag Decoder
ソースコード：
https://github.com/taukuma/emv-tag-decoder

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

Stripe Elementsで要素が表示されるまでの間ローディング画面を表示させる方法

Stripe Elementsの`PaymentElement`では、カード決済以外にもコンビニ決済やWeChatPayなど、さまざまな決済方法を自動で表示できます。

ですが、PaymentIntentの`client_secret`を要素に渡してから、フォームが完全に表示されるまでに少しタイムラグが発生することがあります。

## `loader`属性を利用して、ローディング画面を表示する

Elementsには`loader`オプションが用意されています。

この値を`auto`または`always`に設定すると、Stripeが用意したローディング画面を表示できます。

**@stripe/react-stripe-jsの場合**
“`jsx

create next appでカレントディレクトリに展開する方法

# はじめに

## create next appでカレントディレクトリにファイルを展開する方法

誰かが作った空のブランチとか、すでに存在するディレクトリ内とかにソースコードを展開する時だったり、“`create next app“`でrootディレクトリを作成せずにファイルを展開したい場合があると思います。そういう場合に“`create next app“`する方法をメモします。

# どうやるか

## “`.“`を使うとできる

直接カレントディレクトリを指定、もしくはディレクトリ名指定せずに実行してプロジェクト名の入力時に“`.“`を指定
“`
npx create-next-app .

//もしくは
npx create-next-app
✔ What is your

TypeScriptでsvgファイルのインポート時の型エラーを解消する

# はじめに

## TypeScriptでSVGファイルをimportした時に型エラーが出てしまう
以下のようにsvgファイルをインポートしようとしたところ、“`cannot find module ‘asset/star.svg’“`と型エラーが出てしまっています
TypeScript公式にも同様の記述がありますが、SVGファイルの型を作成することで。TypeScriptファイル以外も正常に処理するようにコンパイラーへ伝えます。

https://webpack.js.org/guides/typescript/#importing-other-assets

# どうやるか

## TS以外の型を定義する、“`custom.d.ts“`ファイルを作成
以下のように“`custom.d.

ポリヤの問題解決技法

今回は、昔読んだ問題解決に関する本についてお話したいと思います！問題解決は誰にとっても重要なスキルですが、開発者やエンジニアにとっては特に重要なスキルです。


1945年にジョージ・ポリアは「How To Solve It」という本を出版し、100万部以上売れたそうです。私はレジュメを作成し、彼の本からいくつかのコンテンツを再利用するつもりです、したがって、私はここですべてを要約しようと思います

ポリアは問題解決のための**4つの基本原則**を明らかにしました。

## 第一の原則：問題を理解する

まず、自分自身に問うべき簡単なことは、「質問・問題の意味を理解しているか」ということです。

– 問題を説明するときに使われる言葉をすべて理解しているか？
– 何を見つけるか、何を示すかを問われていますか？
– 問題を自分の言葉で言い直すことができますか？
– 問題を理解するのに役立つような絵や図が思

Gatsby.jsのgatsby-starter-blogをDockerで動かす

# はじめに

Gatsby.js を Docker で動かすことは簡単に以前できました。
しかし、`gatsby-starter-blog`スターターを導入して`npm install`したときにエラーが頻出してしまいました。
諸々インストールが必要だったので`docker-compose.yml`と`Dockerfile`をメモレベルではありますが記載します。

## 前提条件

– `Docker version 20.10.0`
– `docker-compose version 1.27.4`

# docker-compose.yml

格納先は`~/workspace/homepage/`直下だとします。

“`yml:docker-compose.yml
version: ‘3’
services:
gatsby:
build: ./docker/gatsby
volumes:
– ./gatsby:/usr/src/app
ports:
– “8000:8000”
– “9000:9000”
t

【Nuxt.js】axiosをインストール

# axiosとは
HTTP通信を簡単に行うことができる JavaScriptライブラリ。

以下でインストールしてください。
個人的にはyarnを推奨しております。

yarn
“`
yarn add @nuxtjs/axios
“`

npm
“`
npm install –save @nuxtjs/axios
“`

## nuxt.config.js の 「modules」 に追記
“`javascript:nuxt.config.js
export default {

==略==

// Modules: https://go.nuxtjs.dev/config-modules
modules: [
// https://go.nuxtjs.dev/axios
‘@nuxtjs/axios’,
],

==略==

}
“`

こちらでaxiosを使える準備は完了です！

実験的なJavascriptの仕様であるECMAScript throw expressionsを利用してみた　ESLintの設定も

## 以下の記事を参照して頂ければと思います

https://note.com/shift_tech/n/n2a3b9bab4c50

## 補足
ソースコード全体は以下。

https://github.com/yuta-katayama-23/node-express/commit/64bae9571175e44eaf3a63d7805d50e09cade55c

以前、[ところでwebapckでESLintが動くというけどタイミングは？](https://qiita.com/yuta-katayama-23/items/5d73bbe79c19301551df#%E3%81%A8%E3%81%93%E3%82%8D%E3%81%A7webapck%E3%81%A7eslint%E3%81%8C%E5%8B%95%E3%81%8F%E3%81%A8%E3%81%84%E3%81%86%E3%81%91%E3%81%A9%E3%82%BF%E3%82%A4%E3%83%9F%E3%83%B3%E3%82%B0%E3%81%AF)において、ESLintが実行されるコードがトランスパイ

GeolocationAPIが止まらなくて困った話

# やりたかったこと
Vue.jsでGeolocationAPIを使って現在地を取得したい。
## 実行環境
Laravel：7.20.0
Vue.js：3.2.37
docker:3
# 初期のコード
“`vuejs:LocationSerach.vue

のように書いて、あとは[]の中を要素の数分だけ指定して繰り返していくなんてめんどくさすぎる！
そう考えていた、そこのあなた(私)にこの記事を捧げます。

## ２．解決案

vanilla JSでタイピングしてる風なアニメーション


タイピングしてる感じをJSで表現しました。

ひらがなからローマ字への変換に
https://github.com/WaniKani/WanaKana
を使っています。

kuromoji.jsあたりを使えば分かち書きや読み推定できるでしょうが、
辞書のダウンロードが重くなりがちなので、今回は定型文のみ対応しています。

元々はSvelte + TypeScriptで実装してましたが、
需要がなさそうなのでvanilla JSで書き直しました。

```html:index.html