Vue3でsetIntervalで定期的にAPI連携する際のTips

# はじめに
全国1億2623万人のGARNET CROWファンの皆さん、こんにちは
@garnetddolphin です。
先日Vue3で定期的にAPIからデータを取得し、更新するというコードを書きました。
SPAでページを移動した際にclearIntervalが設定されておらず、setIntervalが残り続けてハマったのでTipsとして公開します。

# 実装
“`hoge.vue

【海外イベント紹介】 Jamstack Conf 2021 Security is the “s” in Jamstack by Maricris Bonzo

今回は、「Jamstackカンファレンス 2021」で行われたプレゼンテーションから、「Security is the “s” in Jamstack」の内容をご紹介します:loudspeaker:

10年以上の歴史を持つ「Jamstackカンファレンス」は、Jamstackの生みの親であるクラウドコンピューティング企業「Netlify」が主催。世界中の開発者が集い、Jamstackをコンセプトとした最新のWebサイトの設計、開発などについて話し合います。プレゼンテーションの言語は英語ですが、本ブログでは日本語でご紹介します。

>目次
>セキュリティにまつわる問題
>認証方法の種類
>1. Centralized Authentication
>2. Decentralized Authentication
>４つのアプローチ
>アプローチ1 集権型認証を自作する
>アプローチ2 分散型認証を自作する
>アプローチ3 集権型認証をアウトソースする
>アプローチ4 分散型認証をアウトソースする
>アプローチの比較
>まとめ

今回の講演者はMagicという企業に所属するエンジニアMa

【自分なりの解釈】クロージャーを理解する

# まえがき
クロージャーを実装するのになんでこんなくそめんどくさい式を書かなくては
いけないのか
僕は式を暗記することを頑張りましたが、如何せん面白くないので、色々な実験をして
頑張って覚えることにしました
# クロージャについて
## クロージャーの目的
1.プライベートなスコープ
2.動的な関数
→つまり、変数の中身を確保しつつ、かつ関数を呼び出すだけで中身を追加したい時
## 覚えておくべきこと
1.クロージャーによって変数の中身は保持できる
2.関数自体をreturnすると関数の式自体が返ってくる
3.変更後の値を保持する必要がある
## 一般的な書き方
```javascript
function incrementFactory(){
let num = 0;
function increment(){
num = num + 1;
console.log(num)
}
return increment;
}
increment();
increment();
increment();
```
## 実験
#

StripeのElements / Checkout / Invoicingを利用せずに、銀行振込の決済を処理する方法

システムやデザインの要件によっては、Stripeが提供する決済フォームを利用できないケースも存在します。

その場合に、銀行振込での決済を受け付ける方法を、JavaScriptで簡単に紹介します。

## Step1: 銀行振込に対応したPayment Intentを作成する

Stripeで1回きりの決済を受け付ける場合、Payment Intentをサーバー側の処理で作成します。

この際に、「**Stripeが発行する振込先口座情報を紐づけるための顧客データ**」など、銀行振込での決済に必要な情報を設定しましょう。

```js
const createBankTransferPaymentIntent = async (email, amount) => {
const customer = await stripe.customers.create({
email,
});
const intent = await stripe.paymentIntents.create({
amount,
currency: 'j

Python,Ruby,PHP,Java,JavaScript,Perlのスコープの比較

Qiita > プログラミング言語の比較

Python,Ruby,PHP,Java,JavaScript,Perlのスコープの比較

# Python

https://qiita.com/msssgur/items/12992fc816e6adf32cff

# Ruby

https://qiita.com/EZ_Denta/items/6489039212e21d4fc49f

# PHP

https://qiita.com/hikaru_/items/4cc7b616aa61868cdcdd

# Java

https://qiita.com/gatchan03/items/e8eecf468b7dab960198

# JavaScript

https://qiita.com/higa02/items/a7a0a1d96d1d67a7c88b

# Perl

https://perlzemi.com/blog/2011012

Laravel＋Angular連携

## 初めに
前回「[Angularの導入](https://qiita.com/HITOSUKE/items/5efd1761cb6106cd9074)」ついての投稿よりAngularの導入方法を説明しております。
今回は、Laravel＋Angular連携についてご紹介したいと思います。

### apache、PHP、MySQLのインストールは省略
firewall、SELinuxの設定も忘れずにしましょう。
ブラウザで見れない可能性があります。

# Laravel＋Angular連携

Laravelに必要なものをインストールしていきます。

### [Step1]Composerインストール
①composerダウンロード
　wgetコマンドからcomposerをダウンロードしていきます。

▽コマンド
```
wget https://getcomposer.org/installer -O composer-installer.php
```
▽実行結果例
```
[root@localhost ~]# wget https://getcomposer.org/inst

新しいSNSを作りました。

新しいSNS「Avis」（エイビス）のβ版をローンチします。

新しいSNS「Avis」（エイビス）のβ版をローンチします。

https://avis.city/

AvisとはどういうSNSなのか

• 利用は無料です。
• ログインするけど書き込みは匿名で行われる「半匿名性」のSNSです。
• SNS内の独自信用通貨（AvisCoin）で“言葉の市場”を生み出します。

![phone_3.PNG

Live2D忘備録 ~素のJavaScriptでLive2D使う

バニラJavaScriptでLive2Dを扱う方法です。

サンプルページ
-------

github
---------
https://github.com/shizusouth/Live2DSample

以下解説しますが使いたい人は
gitからダウンロードしてローカルサーバーで起動して下さい。
サーバー使わないとクロスオリジンポリシーで弾かれます。
サンプルページでコードと動作を見れます。

以下のようなLive2DデータHiyoriを使いました。
下記URLから桃山ひよりプロ版をダウンロードします。runtimeフォルダの名前をrumtime->Hiyoriにしています。
https://www.live2d.com/download/sample-data/

![Screenshot 2022-09-22 004836.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1364047/b54a112a

Reactのコーディング時に使う基本的な技術

# useState

### 概要
変数の状態を変更すると、再描画する仕組みが可能

### サンプル

ボタンを押すたびにdataの値がインクリメントされ、描画されるサンプル

```js
import { useState } from "react";

export default function Home() {
const [data, setData] = useState(0);
return setData(data + 1)}>{data};
}
```


解説

useStateは[変数, セッター関数]といった二つの戻り値を取る。
dataには初期値0が入り、dataの値変更と

EmailJSを使ってクライアント側で完結するフォームを実装する

## 始めに
Reactの勉強がてら、バックエンド処理が不要なお手軽フォームを作ってみたので備忘録として軽くまとめておきます。

## 言語、フレームワーク、ライブラリ
・React
・EmailJS

## EmailJSについて
公式サイト：https://www.emailjs.com/
クライアント側からメールを送信できるようにするライブラリです。単にメールを送信するだけでなく、例えば問い合わせ窓口に対するメールと、問い合わせ投稿者に対する確認メールの2通を同時に送れる機能などもあります。月に200通までの送信は無料で、それ以上は段階的な課金が必要となります。ただ、月1000通までは$4/月なので、料金は比較的易しめです。

## メール送信の流れ
1. EmailJSの登録
1. EmailJSのダッシュボードでメールテンプレート作成
1. Javascript側からAPI呼び出し
#### 1. EmailJSの登録
まずはEmailJSのサービスに登録する必要があります。ここでは主に、API KeysとserviceIDの発行と、受信するメールサーバの登録を行います。AP

jsPanel4にてウィンドウリサイズに追従させたい

# jsPanel4 使ってますか？
　相変わらずバニラJS書きしている昨今ですが、ウィンドウ内にフローティングパネルを表示するのに、[jsPanel](https://jspanel.de/)ばかり使っているんです。

https://jspanel.de/

　その上で、なんの工夫もないとウィンドウのリサイズ（最大化も含めて）時に、せっかく表示しているパネルが元の位置に放置されてしまって少し残念でした。
　リサイズ時にオフセット量を踏まえて表示位置を追従させたいと思い、コードを工夫しました。

# 工夫あれこれ

## 自作クラスでのプロパティにpositionを持たせる

```JavaScript
this._position = { my:'right-top', at:'right-top', offsetX: -4, offsetY: 4 };
```

　こんな感じにpositionを持たせて、ドラッグ操作後にoffsetXとoffsetYを計算して上書きすることを考えます。
　ただ、jspanelのイベント処理がdocumentに対するグローバルなものになるため、あら

WordPress【WooCommerce】セット販売商品の商品画像を表示させるjQuery

①「商品データ」を「グループ化された商品」にする

②「関連商品」の「セット販売商品」「アップセル」に同じ商品を入力

③javascript記述。

＜js概要＞
アップセル商品画像が商品ページの下部に表示されるので、そのa要素をコピーして、セット販売商品にも画像を表示させる

④CSSで整えて完了！

```javascript
$(function(){

//商品画像横の「セット商品」のIDを取得
let grouped_product_id_nums = [];

$('.woocommerce-grouped-product-list > tbody > tr').each(function(){

//ID名（.ex）"product-1111"を、"post-1111"に変えて配列に追加する

grouped_product_id_nums.push( "post-" + $(this).attr("id").slice(8));
});

//先ほど取得した「セット商品」のID番号と一致するclass名"post-11

【JavaScript】if文の中でgotoしたい

こういうコードがあったとする。
これをスッキリとさせたい。（今はa, b, cしかないが、後々d, e, f…などと追加されたとき面倒だから）

```javascript
if (a.isHoge111) {
a.hoge111();
}
else if (b.isHoge111) {
b.hoge111();
}
else if (c.isHoge111) {
c.hoge111();
}
else if (a.isHoge222) {
a.hoge222();
}
else if (b.isHoge222) {
b.hoge222();
}
else if (c.isHoge222) {
c.hoge222();
}

if (a.isHoge333) {
a.hoge333();
}
else if (b.isHoge333) {
b.hoge333();
}
else if (c.isHoge333) {
c.hoge333();
}
else if (a.isHoge444) {
a.hoge444();
}
else if (b.isHoge444)

[JavaScript]連想配列備忘録(hash in array, object in array, map in array)

## この記事ついて
主に`[{}, {}, {}]`のような構造についての操作の備忘録です。主はいつも忘れてしまうので、手早く探せるように作ります。

## indexを探す
普通探す時は`indexOf`を使うのだが、`[{}, {}]`のような構造な時はfindIndexを使うのが一番手早い。

```js
// hash in arrayなのでhiaで略称させていだだく
const hia = [
{id: 1, value: "a"},
{id: 2, value: "b"},
{id: 3, value: "c"},
]

hia.findIndex(elem => elem.id === 2) // output: 1
```
具体的な違いについてはmdn公式ページへどうぞ

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex

https://developer.mozilla.org/ja/docs/Web/J

地理院地図Vector から地図データを取得する方法

## はじめに

地理院地図Vector のベクトルデータを手軽に GeoJSON としてダウンロードできると、地理院地図を含めた、GIS ソフトなどでちょっとした地図作りに役立つと考えました。

Node.js 等で pbf を GeoJSON へ 1 対 1 で変換してもよいのですが、あくまで環境を選ばず手軽にということで、ブラウザ上で行います。

この記事では、ベクトルタイルを利用できる主なライブラリである Mapbox GL JS を用いて、ブラウザ上で取得する方法を整理してみます。

※以下は、ブラウザで取得した地理院地図Vector のデータを QGIS へ取り込んだ例です。

![スクリーンショット 2022-09-20 223959.png](https://qiita-image-s

JavaScriptによるカンマ区切りプログラム（配列の挿入を使う方法）

JavaScriptによるカンマ区切りのプログラムです。
今回はカンマ区切りの関数(Number(value).toLocaleString)は使用禁止として作成しました。

```JavaScript

process.stdin.resume();
process.stdin.setEncoding('utf8');

var lines = [];
var reader = require('readline').createInterface({
input: process.stdin,
output: process.stdout
});
reader.on('line', (line) => {
lines.push(line);
});
reader.on('close', () => {
//数字変数
var num = lines[0];
//数値を配列にする
var num1 = num.split('');
//配列の長さ
const leng = num1.length;
//挿入する配列の位置の変数定義
var