JavaScript関連のことを調べてみた2021年12月16日

正規表現にマッチする文字列を渡してもRegExp.testがtrueにならない

基本的なことですが、少しはまったので備忘のため記します。

##やりたかったこと

文字列がURLかどうかを正規表現で判定したい

##試したこと 起きたこと
“`
const str = ‘https://google.com’;
const reg = new RegExp(‘https?://[\w/:%#\$&\?\(\)~\.=\+\-]+’);
reg.test(str); //結果:false
“`
正規表現は合っているはずなのに、マッチする文字列を渡してもfalseが返ってくる…。:thinking_face::thinking_face::thinking_face:

##解決方法
コンストラクター構文では正規表現を文字列として指定しているため「\」のエスケープが必要でした。

“`
const reg = new RegExp(‘https?://[\\w/:%#\\$&\\?\\(\\)~\\.=\\+\\-]+’);
“`

正規表現リテラルを使用する場合

“`
const reg = /https?:\/\/[\w\/:%#\$&\?\(\)~\

Stripe Billingでの定期課金への消費税設定方法とStripe Taxを使った効率化

Stripe Billingを利用することで、SaaSや会員制サービス・頒布会などの定期課金・継続課金を比較的簡単に実現させることができます。

そして2021/12/14に日本での提供が開始されたStripe Taxを組み合わせることで、税金の計算や徴収・申告についても効率化することができます。

https://qiita.com/hideokamoto/items/e92b6ae22065b0d134cd

この記事では、すでにStripe Billingを利用されている方向けに、Stripe Taxをお勧めしたいケースについて紹介します。

# 対象の読者
– Stripe Billingで定期課金を行なっている方
– 消費税の申告・納付が必要な方
– [Optional] 将来的に海外展開も検討されている方
– [Optional] 税率の変更があった場合に、追加作業をおこないたくない方

# アジェンダ

– Stripe Billing単体での消費税徴収方法
– Stripe Taxのメリット・デメリット
– 運用中のBillingにStripe Taxを設定する

#

客注リマインドシステム②入力部分の作成

以前作成したこちらの記事の続きです。

https://qiita.com/watanabe-tsubasa/items/d5532466a72d1b63fba4

　スプレッドシート上に記入してあるお客さまからのご予約を、LINE Botに通知することで、客注の失念を防ぐというシステムを作成しました。
今回作成したのはスプレッドシート上への記入を行うためのUIとなります。

　UIとして明確化することで、**お名前・御連絡先・受取時間等必要情報の確認漏れを防ぐ**という効果もあるかと思います。

#全体概要

　[CodePen](https://codepen.io/)でUIを作成、[Stein](https://github.com/SteinHQ)で入力内容をGoogle

javascriptでRPG＃３

###こんにちは
今回は、キャンバスの位置設定と、マップの大きさを変更していきます。
では、まずキャンバスの位置設定です。
こちらをどうぞ

“`index.html





“`

ここに「position」tagを追加して、中心に寄せるということをしました。
できているか心配の方は「background-color」を「#000」(黒)にして確かめてください。
では、次に行きます。
次はマップの大きさです。

“`map.js
const mapdate = [
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,

コピペで動くSymbolリスナー(WebSocket)【Vue.js編 初心者編】

はじめに
===

この記事ではVue.jsでSymbolのブロック生成を監視するWEBプログラミングを作成します。
また、ある程度はプログラミングが出来る人を前提に話を進めます。（Vue.jsの詳しい解説はしません）
このプログラムはWEBブラウザでファイルを開くだけで実行出来るのでVue.jsはわからないけどちょっと試してみたい、と思っている人も是非やってみてください。

この記事ではすべて **Symbolテストネット** で行っています。XYMを送信される場合などに間違えないように気をつけてください。

必要なもの
===

* PC
* インターネット接続環境
* テキストエディタ（VSCodeを推奨）
* Google Chromeブラウザ
* めげない心

いきなりソースコード全文いきます。（後で解説します）
まずは、下記のコードをwebsocket_test.htmlと名前を付けてPCのデスクトップに保存してください。

“`html

JavaScriptでグラフを作る

# 何をするのか
このようなイメージのページを作ります。

今回の記事の題材にしたのは家計簿です。
１ヶ月間の支払いを10項目に分けて集計したグラフなどを、ページに載せました。

# どうやるのか
Chart.jsを使います。

https://www.chartjs.org/

HTMLで、idを付けたcanvas要素を配置します。
JavaScriptで、このcanvas要素をグラフにするための、様々な設定をします。

# グラフの実装手順

## ライブラリ読み込み
#### npmの場合
“`

Next2D Framework [config設定]

初期構築が終わると、`src/config`配下に下記の`stage.json`、`config.json`、`routing.json`が書き出されます。今日は`stage.json`、`config.json`の解説を書きたいと思います。

# stage.json
stage.jsonの設定値は[Next2D Player入門](https://qiita.com/ienaga/items/6089b96e62d18e3250c0)で記載した設定項目と同一のものとなります。

“`json:stage.json
{
“width”: 240,
“height”: 240,
“fps”: 12,
“options”: {
“base”: “.”,
“fullScreen”: true
}
}
“`

名前|型|デフォルト値|説明
—|—|—|—
width|number|240|表示領域(Stage)の幅を設定します。
height|number|240|表示領域(Stage)の高さを設定します。
fps|number|12|

期間限定でCSSを切り替える ~社内で大不評の【誰得？】シリーズ~

[パーソンリンク アドベントカレンダー](https://qiita.com/advent-calendar/2021/personlink)16日目です！?

# 内容
“`

もともとDenoにはバージョン0時代にJSONインポートが実装されていました（[#1065](https://github.com/denoland/deno/pull/1065)）。当時の構文は`import json from "./foo.json"`という単純なものでした。
しかし、JSONインポートがECMAScript仕様に入るにあたり`assert { type: "json" }`という構文（**Import Assertions**）への対応が必要になったため、バージョン1.0.0リリース時にJSONインポートは削除されていました（[#5037](https://github.com/denoland/deno/pull/5037)）。
先日TypeScript4.5がリリースされたことで、Import Assertionsへの対応が全て完了したため、再びDenoにJSONインポートが導入さ

【React】fetchを使ってapiからjsonデータを取得する（GETメソッド）

今回は簡単にReactでfetchを使って、apiからjsonデータを取得する方法を教える。つまり、GETメソッドの方法。

## 手順
1\.　React appを作成

2\.　Fetch.jsにコード入力

3\.　App.jsにコード入力

4\.　結果

## React appを作成
```
$ npx create-react-app my-app
＄ cd my-app
＄ yarn build
$ yarn start
```
* もし、npmの場合は

```
$ npx create-react-app my-app
＄ cd my-app
＄ npm run build
$ npm start
```
これで簡単にReact appが成功できた。

## Fetch.jsにコード入力
次はsrcの中のFetch.jsフ

Chrome拡張のUnchecked runtime.lastError: Could not establish connection. Receiving end does not exist.というエラーを解決する。。。終点

• 事の発端

Chrome拡張機能を開発している時に、拡張機能が実行されたら開いているページの
URLを取得してそれに対して非同期処理実行する必要がありました。

URLの取得自体は、popup.jsの中にchrome.tabs.queryで取得できるのですが、
非同期処理はbackground.jsに宣言したため
background.jsとpopup.jsで通信する必要がありました。

しかし、popup.jsでchrome.runtime.sendMessageを使って
background.jsに送信し、
background.jsでchrome.runtime.onMessage.addListener
を使って受信し、
sendResponseで送り返しているはずなのですが、時々
Unchecked runtime.lastError: Could not establish connection. Receiving end does not ex

p5.jsの関数まとめ part.11 push(), pop()

この記事は Qiita p5js アドベントカレンダー16日目の記事です。

## これはなに
p5.jsが用意している関数について理解を深める記事です。
今回はpush()とpop()について。

## pushとpop
shapeなどの設定を保存するために`push`を利用し、`pop`で元に戻す。
そんな使い方をします。

### リファレンスより

> push()関数は、現在の描画スタイル設定と変換を保存し、pop()関数はこれらの設定を復元する。これらの関数は常に一緒に使用されることに注意してください。これらの関数により、スタイルと変換の設定を変更し、後で元の設定に戻すことができます。push()で新しい状態が開始されると、現在のスタイルとトランスフォームの情報を基に構築されます。push()とpop()関数を埋め込むことで、より多くの制御を行うことができます。(デモは2番目の例を参照してください)。
>
> push() には、現在の変形状態や、以下の関数で制御されるスタイル設定に関する情報を格納する。fill(), noFill(), noStroke(), str

javascriptでRPG＃２

###こんにちは
今回は、画像の表示をしていこうと思います。
では、その前にこれを見てください。

```main.js
"use strict";
const ctx_font = "48px monospace"//キャンバスに使う文字のフォント
//メインループ
function main_loop() {
//ここに処理を書いていきます
}
//ブラウザ起動時の処理
window.onload=function(){
const canvas = document.getElementById("canvas");//キャンバスの取得
const ctx = canvas.getContext("2d");//2Dコンテキスト取得
ctx.font = ctx_font;//フォントを設定
setInterval(function() {main_loop()},20);//「main_loop」を20mm秒ごとに呼び出し
}
```

これは、前回の記事にあった「hello!」文字を書き込むというのを消し、
javascriptのゲーム開発に大抵使う「use strict」を

1年で使える言語が3つも増えた話

QiitaAdventureCalender初参加のCercilといいます。正直そんなにQiitaに詳しくないので、お見苦しい点などがあっても許してください。
#1　お前誰？
・情報系学生の末端（高専4年生）
・C言語アンチ
・JavaScriptアンチ
・プログラミングよわよわな人
・頭良くない

こんな感じにQiitaのカレンダーに書き込むことすら恥ずかしい低スペック学生だと思ってもらえばいいです。

#2　なんで使える言語が増えたのか
実は3年生のころまでC言語とJava（学校の授業で使うだけ）しか書けませんでした....。まわりのPythonとかC++、C#をゴリゴリに書いている友達が僕にとっては **異次元の人** にしか思えなかったです。

####Ruby
4年生になるとうちの学校のI先生がWebアプリケーションを作る講義を始めました。使用言語はRuby、HTMLやJavaScriptといった今までほぼほぼ触れてこなかった言語を授業で触ることになります。慣れない言語ばかりを使う授業についていけなくなった僕は、焦りに焦っていました。
そこで、こんなことを思いついたんです。

高専の単位を数えるためのWebページを作る

この記事は [木更津高専 Advent Calender 2021](https://qiita.com/advent-calendar/2021/nit_kisarazu) 16 日目の記事です。

前の記事は @Yuu-taremayu さんの [秘密分散を拡大体上で作ってみよう！](https://qiita.com/Yuu-taremayu/items/659a2659a7fa5349a677)
次の記事は rime_math さんの
です。

# 動機
5年生になって

`あと何単位必要なんだ！！`
`わからん！！学生便覧とにらめっこだ！！`
`見づらい！！多い！！計算ミス！！`

ということが多発したので、作っていく?

# とりあえず成果
https://imaimai17468.github.io/Products/CreditsCounterforKNCT/

### 使い方
* 学科を選ぶ
* 取った科目にチェック
* `合計単位数を計算する`ボタンを押す*
* 合計単位数が出てくる！！

# 制作の手順
1. 教科名・一般or専門・必修or選択 などをまとめたデー

ECMAScript モジュールファイルが import された際に、そのファイルの上から下まで処理が走ることを確認

# はじめに
ECMAScript モジュールファイルが import された際に、そのファイルの上から下まで処理が走ることを確認してみました。
※ 動的インポートではなく、標準のインポート

以下の記事を参考に自分でも実践したみた記事になります(suin様に感謝)

https://qiita.com/suin/items/a106289e2d1d8d9c1490

import の仕様:
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import

# ファイルの用意

ここに置きました。
https://github.com/nnashiki/esmodule-load-sandbox

```
$ tree
.
├── 1.mjs
├── 2.mjs
├── esm.mjs
└── main.mjs

```

``` esm.mjs
console.log("esm.js 1")

export const fnc_mjs = () => {return "this i

mapbox メモ

地図の生成

まず初めにする

```
mapboxgl.accessToken = "yourtoken";
const map = new mapboxgl.Map({
container: "map",
style: "mapbox://styles/mapbox/light-v10",
center: [139.7671, 35.6812], // 東京の場合
zoom: 4
});
```

カスタムマーカー

ピンなど地図にマーカーをつける場合

```
map.on("load", () => {
// カスタムマーカーとして使用する画像を追加する
map.loadImage(
"画像のurl",
(error, image) => {
if (error) throw error;
map.addImage("custom-marker", image);
// geojsonを追加する
ma