多重ループからの脱出（continueとbreakの違い）

# はじめに
ネストされたfor文の中でcontinueとbreakの挙動の違いを整理しました。
JavaScriptで記載していますが、Javaでも同様に記載できます。

# 目次
[1. サンプル](#1-サンプル)
[2. continue](#2-continue)
[3. break](#3-break)
[4. さらに深いループ](#4-さらに深いループ)
[5. ラベルを使用したcontinue](#5-ラベルを使用したcontinue)
[6. ラベルを使用したbreak](#6-ラベルを使用したbreak)
[7. まとめ](#7-まとめ)

# 1. サンプル
次のような簡単な配列の多重ループを例にします。
“`js
const loopA = [1, 2];
const loopB = [1, 2, 3];

for (const i of loopA) {
for (const j of loopB) {
console.log(`${i}-${j}`);
}
}

// 出力結果↓↓
// 1-1
// 1-2
// 1-3

Mapbox GL JS スタイル変更後にレイヤーを再セットする

各種レイヤーを追加後にスタイルを変更すると、レイヤーが消えてしまいます
そこで、

“`
function onstyledatafunc(){
map.off(‘styledata’, onstyledatafunc); // ‘styledata’イベント削除
Foo(); // すべてのレイヤーを削除,再セットする
}

document.getElementById(‘iSelStyle’).onchange=function(){ // ドロップダウンリストを変更したらレイヤー変更

RxJS7のsortedオペレータを自作する

# はじめに
RxJavaのObservableにはsortedメソッドが入っているのに、RxJSにはsort関係のオペレータがありません。そのため自作することにしました。対象はrxjs7です。

以下は、RxJava3のObservableのjavadocのマーブル図を引用です。


# 実装
“`js
import {from, toArray, map, mergeMap, of} from ‘rxjs’

function sorted(f){
return x => x.pipe(
toArray(),
map(x => […x].sort(f)),
mergeMap(x => from(x)),
)
}
“`

利用例
“`js
from([5, 3, 1, 4, 2])
.pipe(
sorted((a, b) => a

TypedArrayをmapしようとしたら

普通の配列と同じ感覚で`TypedArray`を使っていたら、思わぬ形で引っかかってしまいました。

## `TypedArray`とは

JavaScriptが進化するに連れて、通信・画像・音声など巨大なバイナリデータを扱う場面も増えてきたので、そういったもののハンドリングに便利な、型やサイズを固定した`Uint8Array`、`Float32Array`などの配列オブジェクトが作れるようになっています。

なお、`TypedArray`はこれらの総称、あるいは仕様書上ほかの内部的な名称で、ソースコードに直接`TypedArray`と書くことは通常ありません。

## 実装されているメソッド

`TypedArray`は固定長である以上、破壊的に長さを変更するような`.push`や`.splice`は存在しませんが、それ以外は`.forEach`や`.reduce`、`.join`など、通常の配列にあるメソッドもだいたい揃っています。

### `.map`の罠

その中に`.map`も存在するのですが、`map`した結果は **同じ型の`TypedArray`** でなければならな

えっ!? デプロイされた状態のコンパイル済 JavaScript にも Source Map を適用する方法があるんですか!?

イマドキのフロントエンド開発だと、TypeScript からのトランスパイルや圧縮をかけられた「コンパイル済」の JavaScript が成果物となっている場合が多いのではないでしょうか。著名なフレームワークが TypeScript をサポートするようになったり、デフォルトのビルド設定で圧縮が適用されていたりするからです。

一方、[webpack-dev-server](https://webpack.js.org/configuration/dev-server/) などの開発用サーバを利用していると、ブラウザの開発者ツールがコンパイル前の状態（ソースコード・フォルダ構成）を認識していることに気が付きます。これは、開発用サーバが [Source Map](https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit#) を自動生成し、ブラウザに参照させているためです。

プロダクションビルドの場合、意識的に設定しなければ Source Map を生成しない状態になっていると思

JavaScript Code Tips

##### 目録：
– 正規表現の例
—

##### 正規表現の例
/^[0-9]*$/：０から９までの数字の列、数字の数は制限なし。
参考：https://c.runoob.com/front-end/854/

【新規事業】SkyWayでモザイク加工したカメラ映像を送ってみるよ（完結編）【プロト開発】


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

先日記事を書きました。

https://qiita.com/Shinkijigyo_no_Usagi/private/31332c1033d564e34c96

https://qiita.com/Shinkijigyo_no_Usagi/private/ce057ed8bea6bdd6867e

そう、オリジナルで加工した映像が送れるようになったのです！
ウキウキしていたウサギーですが・・・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/913784/41bab

【Next.js】getServerSideProps内でリファラを参照してリダイレクトさせる方法

# この記事について
ユーザーが何らかの情報を入力したあとの確認ページ等、URLでの直接アクセスを防ぎたい（リダイレクトさせたい）ケースがあると思います。

Next.js ✗ TypeScriptの環境下において、getServerSideProps内でリファラを参照してリダイレクトさせる処理についてまとめましたので、参考になれば幸いです。
# 1.リファラの取得
“`typescript:pages/buy/confirm.tsx
import { GetServerSideProps } from ‘next’;

export const getServerSideProps: GetServerSideProps = async (ctx) => {

// ctx の中に遷移元の情報がある
const referer = context.req.headers.referer // https://ドメイン/…
};
“`
# 2.リダイレクト処理
“`typescript:pages/buy/confirm.tsx
import { Ge

FileMaker Web ビューア

https://qiita.com/YKInoMT/items/f64893568b90158ad030

基本的には URL を指定するが、下記の様な感じで HTML 自体を書くことも可能。

“`
“data:text/html,

・
・
・
・
”
“`

全体を　`”` （ダブルクォーテーション）で囲う必要があるので、html 内で `”` は使えないので、`’`（シングルクオーテーション）で置き換えるなどの対応が必要。

要は、データ URI スキームなので、メモ帳とかも埋め込める。

“`
“data:text/html, ”
“`

なので、画像もいけるっぽい。

“`
“data:image/png;base64,エンコードした文字列”
“`

# Java Script
Java Script も動くが、script タグの中の改行が除去されてしまうので、 `//` を使ってコメントアウトしようとすると意図しない挙動になるので注意。

例えば、下記の様なソースを指定したとすると、 `

Error: You must provide the URL of lib/mappings.wasmエラーが出た場合の対応

jestでテストを実行したら、下記のエラーが。

“`
Error: You must provide the URL of lib/mappings.wasm by calling SourceMapConsumer.initialize({ ‘lib/mappings.wasm’: … }) before using SourceMapConsumer
“`

[You must provide the URL of lib/mappings.wasm by calling \`SourceMapConsumer.initialize\` · Issue #35607 · gatsbyjs/gatsby](https://github.com/gatsbyjs/gatsby/issues/35607)によればNode.jsのバージョンに起因する問題のようです。ちなみエラーが出た時にはv18.7.0を使っていました。

ということでv16にすると正常に終了します。

“`
% npm run test

> blastengine@1.2.3 test

JavaScript: クロージャで 双方向リストを使って両端キューを作ってみた

[クロージャ](https://ja.wikipedia.org/wiki/クロージャ)
[双方向リスト](https://ja.wikipedia.org/wiki/連結リスト#双方向リスト)
[両端キュー](https://ja.wikipedia.org/wiki/両端キュー)

速度出るかなーと思って作ってみたんだけど、自分の使い方ではそんなでもありませんでした。
せっかく作ったのでここに残しときます。

こんな風に使えます。

“`js:
// 使用例：
//両端キューを作成
const q = deque()

//右から追加し、全体を表示
for(let i = 0; i < 4; i++){ q.pushR(i) console.log(q.peekAll()) } //左から追加し、全体を表示 for(let i = 0; i < 4; i++){ q.pushL(-i) console.log(q.peekAll()) } //左端、右端、長さを表示 console.log("peekL():", q.peekL()) cons

Bunについて

# はじめに
新しいJavaScriptランタイムが注目を集めているので、少し試してみました。
（肉まんかわいい）


# Bunとは

Bunは、2021年9月にリリースしたJavaScriptランタイムです。
2022/8/9時点で、Githubのスター数は、約30,000あり、フロント界隈では注目されているのではないでしょうか？

## Bunについて
公式サイトによると、`Bun is a fast a

UNKO ENCODER?をつくった(UNCODE)

# 概要
ちーすTrimsCashだよ～
文字列をエンコードし”うんこ”と”うんち”にする簡単なウェブサイトをつくったんで共有．

https://trimscash.github.io/unchiEncoder/

# コード
## html
“`html:index.html

【JavaScript】クラス関連の用語

・オブジェクトとは
　→複数の値をプロパティという名前をつけて管理できるもの
　(例)const user = {name: “シンチ”, age:24};
　　　この{}の部分のこと

・書いてて思ったけどやっていくうちに覚えていく気がするから、
さくさく勉強進めちゃおう。

【JS / TS】スプレッド構文は、オブジェクトや配列を展開するだけじゃない

# 1.はじめに

スプレッド構文って、オブジェクトや配列を簡単に一括で表示する程度の認識しか持っていませんでした。

@uhyo さんの「プロを目指す人のための TypeScript 入門」を元にキャッチアップしました。

スプレッド構文について、知らなかったことがあったので、アウトプットします。

少し長い記事ですが、スプレッド構文についてまとめるとこのボリュームになりました。
気になるところだけでも見て頂ければなと思います。

間違って解釈している所ありましたら、ご指摘いただけますと幸いです。

# 2.目次
[1. はじめに](#1はじめに)
[2. 目次](#2目次)
[3. この記事でわかること](#3この記事でわかること)
[4. 環境](#4環境)
[5. スプレッド構文とは](#5スプレッド構文とは)
　[5.1. スプレッド構文とは](#51スプレッド構文とは)
　[5.2. スプレッド構文の使いかた](#52スプレッド構文の使いかた)
　[5.3. 別のオブジェクトや配列からコピー](#53別のオブジェクトや配列からコピー)

FAQ形式リッチリザルト用の構造化データジェネレータを作りました

FAQ形式リッチリザルト用の構造化データジェネレータを作りました。
　→FAQリッチリザルトジェネレータ

FAQリッチリザルトジェネレータの概要

各テキストボックスに入力すると、FAQ形式の構造化データがプレビュー、出力されます。


FAQリッチリザルトジェネレータの使い方

各テキストボックスに入力してください。
出力されたマークアップ（JSON-LD）をHTMLへコピペしてお使いください。
詳細については、以下で確認してみてください。

　→Next.js Tutorialをやってみた所感など

# Next.js Tutorialをやってみた所感など

Next.jsを勉強してみることにしました。

・HTML/CSS
・JavaScriptはjQueryは分かる、Vue.jsをかじった程度
・React、Next.jsはほぼ分からない

## Next.jsチュートリアル（英語）
https://nextjs.org/learn/foundations/about-nextjs

## 所要時間

コードはコピペではなく、全て手で写経、
エラーも極力ぐぐって解決、という感じでやって

8〜10時間くらいかな？

About Next.js　〜　How Next.js Works
は基本読み物だが、読みやすいです。

## 学べたこと

プリレンダリング
①サーバーサイドレンダリング（SSR）

React: 連続した状態変更をキューに加えて処理する

本稿執筆時現在、「React Docs」(BETA)の公開が進んでいます。その中の記事のひとつ「[Queueing a Series of State Updates](https://beta.reactjs.org/learn/queueing-a-series-of-state-updates)」は、Reactの状態がどのように更新されるかに関するていねいな解説です。初心者にとってはもちろん、中級者以上にとっても役立つでしょう。本稿は基本的に記事の情報は網羅しているものの、邦訳ではありません。足りない部分は補ったり、説明の仕方を改めたり、不要と思われる記述は削除しました。コード例の一部は、CodeSandboxに公開しましたので、興味があれば実際にお試しください。

状態変数を設定すると、レンダリングはキューに入ります。けれど、つぎのレンダリングがキューに加えられる前に、変数値に複数の操作を行いたい場合もあるでしょう。そのためには、Reactが状態の更新をどうバッチ処理するのかを理解しておくと役立ちます。

# Reactによる状態更新のバッチ処理
たとえば、つぎのコードで[+

誤解されがちなSEO対策 7選

## 前提
* この記事で紹介する内容は、Googleの検索エンジンを対象としています。
* SEOにおいて効果が期待できなくても、Googleによるページ内容理解の為であったり、アクセシビリティやユーザビリティなど他の面で意味があることもあります。なので可能な限り正しいマークアップを心がけましょう。
* 記事内で何度も登場するジョン・ミューラー氏はGoogleの中の人で、SEO関連の情報発信を行なっている方です。Twitterなどでたくさんの技術者からの質問や疑問に答えたりもしていて、SEOに携わる人達はこぞって彼の発言をチェックしています。

## 1. h1タグは1ページに1つでなければならない
SEOコンサルタントであるサイラス・シェパード氏がTwitterで以下のクイズを投げかけていました。

> GoogleはSEOのためにページの中で`

`を1つだけ使用することを推奨しているか？

Quiz: Does Google recommend using a

macOSで現在の仮想デスクトップ番号と仮想デスクトップの総数をデスクトップ間を移動したときに通知させるJXAスクリプト

# TL;DR
現在の仮想デスクトップの番号と開いている仮想デスクトップの総数を、デスクトップを跨いだときに、OSの通知欄に通知するアプリをJavascript for Automation (JXA)で作成した。


右上に注目すると、確かにデスクトップが切り替わるタイミングで通知のところが変わっている。

# Motivation
OS X(macOS)では、仮想デスクトップ（これは正確にはWindowsでの呼び方？で、OS Xでは[Spa