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

違いがわかっていない

# TypeScript

TypeScript is JavaScript with syntax for types.

https://www.typescriptlang.org/

TypeScript の概要

https://qiita.com/EBIHARA_kenji/items/4de2a1ee6e2a541246f6

【TypeScript】TypeScriptとは何か？

https://qiita.com/t_t238/items/81094608f186e3b0860a

【TypeScript】TypeScriptとは

https://qiita.com/P-man_Brown/items/9eed131bf3f6ceb433e1

【TypeScript】TypeScript の Generics

https://qiita.com/suema0331/items/b9fe241a457fa1a5218f

【TypeScript】TypeScript のインターフェース

https://qiita.com/suema0331/items/1

今ChatGPTで話題のOpenAiのDALL-E APIを使ってAIでイメージを生成するアプリを作ったら結果が非道かった

## OpenAiのDALL-E APIを使ってアプリを作る
今ChatGPTで話題、イーロンマスクも出資して設立に関わっている[Openai](https://openai.com/)ですが、チャットだけではなく、色々なAPIを公開しています。
イメージで言うと、彼らの作り上げた巨大な電脳の脳味噌に、APIを通じて接続し、色々なデーターを取得できると言うものです。
で、今回Traversy Mediaを見ていると、言葉でこんな画像ちょうだいって言うと、Aiがそれを生成して送り返してくれると言う暗黒アプリが簡単に作れそうだったので、作ってみる事にしました。Node.jsにて、製作時間１時間ほど。で、出来たのがこれ


欲しいイメージを入力するインプットと、画像の枚数を入れるインプットの２箇所だけの超シンプルなUIで

Nuxt3でStripeを利用したサブスクリプション申し込みフォームを作成する

この記事は、[Vue Advent Calendar 2022](https://qiita.com/advent-calendar/2022/vue) 12日目の記事です。

Stripeを利用してサブスクリプションやオンライン決済を処理するには、フロントエンドアプリだけでなくサーバーサイドの処理も必要です。

Vueの場合、Nuxtを利用することで、フロントエンド・サーバーサイドのアプリを１つにまとめて構築・運用できます。

今回は、2022年11月にローンチされたばかりの、Nuxt3を利用してサブスクリプションの申し込みフォームを用意する方法を紹介します。

https://nuxt.com/v3

## ViteでNuxt3プロジェクトをセットアップする

今回プロジェクトのセットアップには、Viteを利用しました。

“`bash
$ yarn create vite
“`

プロジェクト名を指定した後、「利用するフレームワーク」と「アプリの設定（JS / TS / create-vueをカスタマイズ / nuxt）」を選べますので、`Vue`と`Nuxt`を選びましょう

IndexedDBの概念がわかりづらい件について

IndexedDBの概念がわかりづらいので、まとめてみた。

– オブジェクトストア
– インデックス
– キー
– 値

# オブジェクトストア
RDBでいうとこのテーブルに相当する。実態はただのオブジェクト
ややこしいのは、オブジェクトストア＝なんらかのオブジェクトという概念なので、
一概にテーブルと同じ。とは言い切れないところ。

オブジェクトストアを作成するサンプルは以下のとおり

“`javascript
var store = db.createObjectStore(‘user’, {
keyPath: “name”,
autoIncrement: false
});
“`

# インデックス
オブジェクトストアを作るとき、構成定義は行わず、自由にキー・ペア形式でデータを挿入できてしまう。そのため、インデックスを作って、キーの制約設定をしたり、検索するときにインデックスで設定したキーで検索ができるようにする。

インデックスは、オブジェクトのキーではなく保存されたオブジェクトのプロパティの値を使用して、オブジェクトストア内に保存された値を検索する

【React/JavaScirpt】これを知っておけば大丈夫？JavaScriptの基礎

## 背景
今月に入りReact/Next.jsを業務で使用するようになりましたがあまりにも自分がJavaScriptのことを知らなさすぎて危機感を感じたので、実際にコードを書いていく中でよく目にするものを抜粋して学んだのでアウトプットしたいと思います。

もし読者の中に、これからReactやVue.jsを触れるけれどもあまりJavaScriptの経験がないという人がいればぜひこの記事の範囲を学んでおけば慌てることはないのかなと思います。

## 変数宣言
JavaScirptで変数宣言をするには`var`,`let`,`const`の３つキーワードがあります。それぞれの違いは以下のとおりです。

再宣言は同じ変数名で再度変数宣言をすることで、再代入は同じ変数に値を再度設定し直すことです。

### const
constant(定数)という意味から再宣言、再代入ができないキーワードで、変数への再代入はバグの原因になりかねないという理由から変数に再代入をする必要がない場合はconstを使用するように推奨されています。

“`javascript
const name = ‘taro’

【toio 2022-2】#toio のユーザコミュニティ（ #toiotomo ）が立ち上がってから出展した各地でのメーカーフェアを振り返ってみる

この記事は、「[toio Advent Calendar 2022](https://qiita.com/advent-calendar/2022/toiotomo)」の 10日目が空いていたので、後追いで書いてみた記事です。

今年の toio のカレンダーは以下の投稿済みの 1つのみのつもりでいたのですが、空きがあったようなので後追いで記事を書いてみました（昨年やそれ以前も、同じ動きをした覚えがありますがｗ）。

●【toio 2022】100円ショップのアイテムと toio を組み合わせて手軽に作れる作品【マスコットキーホルダーなどを走らせる】 – Qiita
　https://qiita.com/youtoy/items/b6fa97425a158d7dde26

## toio のユーザコミュニティについて
toio のユーザコミュニティというのは、「[toio で作ってみた！友の会（非公式）](https://www.facebook.com/groups/1072357599632186)」という名前のコミュニティで、3人で立ち上げました。Facebookグループと co

javascript Uncaught ReferenceError: require is not defined

## 環境
Mac(M1, 2020)
vscode５

# [概要]
素のjavascriptでtodoアプリを作成中
入力した値をローカルホストに保存するためにまずは
document.querySelector(“li”)で取得しようとしたところエラーが発生した
“`
const { Save } = require(“@material-ui/icons”);

const form = document.getElementById(“form”);
const input = document.getElementById(“input”);
const ul = document.getElementById(“ul”);

form.addEventListener(“submit”, function (event) {
event.preventDefault();
add();
});

function add() {
let todoText = input.value;
if (todoText) {
const li = document

SSS Extensionを使って、SymbolブロックチェーンのWebウォレットを作ってみた

皆さん　SSS Extension 使ってますか？

Symboler の皆さんなら、一度は触った事ありますよね？

これホント便利なので、もっと多くの人に使って欲しいと思っています☺️

開発者の[いなたつさん](https://twitter.com/_inatatsu_csg_)に感謝?✨

https://zenn.dev/inatatsu/articles/51c1d8de76d335

https://qiita.com/inatatsu_csg/items/40ddd7cb5d566a7d8ae9?utm_campaign=post_article&utm_medium=twitter&utm_source=twitter_share

# SSS Extensionと安全性について

SSS Extensionを用いることで、 **Webアプリケーションに秘密鍵を持たせないことにより、Webアプリケーションから秘密鍵が漏洩することがなくなります。** しかし、SSSを信用する必要があります。SSSはChrome Web Storeに掲載するためにGoogleに

[Windows対応]直接ブラウザをインストールしなくてもSafari・Chrome・FireFoxでテストする方法

## はじめに

[Playwright](https://playwright.dev/)というライブラリを使用して、各種ブラウザの起動ができるようになるまでを記載しています。
特に、windowsでsafariが(webkitですが)起動できるようになるのはうれしいです。
Playwright自体はNode.jsのE2Eテストライブラリですが、ブラウザを起動するだけならNode.jsのプロジェクトでなくても大丈夫そうです。

## 前提

サーバーはNuxt3を動かしていますが、適宜ご自身のアプリケーションに置き換えていただければと思います。
WEBアプリケーションでローカルのURLがわかれば大丈夫です。

## インストール方法

https://playwright.dev/docs/intro#installing-playwright
を参考にしながらインストールしていきます。

“`
yarn create playwright
“`
“`
// E2Eテストのディレクトリ。デフォルトのe2eでいいと思います。
Where to put your end-to-en

embotをブラウザからLチカ

タカラトミーから発売されている embot は
スクラッチにも似たGUIでプログラミングして
LEDの点灯消灯やブザー鳴らし、サーボの回転ができる製品です。

https://www.takaratomy.co.jp/products/omnibot/embot/

embot の中心である embotコア は BLE で通信可能のようなので
今回はブラウザの WebBluetooth でLチカしてみたいと思います。
本記事でブラウザは Win11 の Microsoft Edge 108 を使用しました。

下記のように index.html と index.js を作成し
index.html を Edge に読み込みます。
※エラー処理は省略しています。

“`index.html







開始する

ポップアップ駆動のストーリーマップ（MapLibre GL JS）

# ストーリーマップとは
ストーリーマップとは、文章（ストーリー）などのコンテンツと連動して地図が動くタイプのウェブマップです。通常のウェブマップは地図自体を自分で動かしますが、ストーリーマップは文章などの場面に応じて地図が自動で動くように制御します。

# ストーリーマップの事例
例としては[「地理院地図Vector（仮称）のベクトルタイルを使って地図語りを試した（UNVTとMapLibreを利用）」](https://qiita.com/T-ubu/items/b970339a49d8f584acf6)
や[そのデモ（外部リンク）](https://ubukawa.github.io/storymapGSI/storytelling_GSI_V.html)、あとArcGISのESRIが力を入れています。（[事例集のサイト](https://www.esrij.com/gis-guide/web-gis/story-map/)）。また、地図ライブラリ[MapLibreの公式サイト（外部リンク）](https://maplibre.org/maplibre-gl-js-docs/exa

KintoneをJavascriptでカスタマイズするための開発環境構築

## はじめに
本記事は[エムスリーキャリア FY22 AdventCalendar](https://qiita.com/advent-calendar/2022/m3c)の12日目の記事です。

## やりたいこと
Kintoneを使うと簡単な業務アプリをノーコードで作成することができます。
ただ、開発要望が増えると、ノーコードで対応できないものが出てくると思います。

KintoneではJavascriptを使って機能を追加することができるので、複雑な処理にも対応することが可能です。
ただ、
1. Javascriptで処理を書く
2. Kintoneにアップロードする
3. 動作確認する
4. 動かなかったら1.に戻って修正する

を繰り返すのは時間がかかるので、少しだけこのサイクルを簡単にしたいと思います。

## 環境
主な利用ツール

* Docker
* mkcert（自己証明書）
* Vue.js 3（今回はVue.jsを利用するが、React等でも可能）

## 構築方法
以下の手順で構築し、Kintoneの画面に「Welcome to Your Vue.js A

JavaScriptの便利な構文 -分割代入とスプレット構文

# はじめに

JavaScriptには便利な記法が多く、
使いこなすことでシンプルなコードを書くことが可能になりますが、
フロントエンド開発をしているなかで、あまり意識できずにたらたらと長いコードを書きがちです。

便利な構文をまとめました。

## 分割代入

“`javascript
const [a, b] = [‘hoge’, ‘fuga’];
console.log(a, b); // hoge fuga
“`

“`javascript
const profile = { id: 1, name: ‘田中’, age: 28 };
const { id, name } = profile;
console.log(id, name); // 1 ‘田中’
“`

“`javascript
const [, , a, , b] = [1, 2, 3, 4];
console.log(a, b); // 3 undefined
“`

活用してみると、

“`typescript
const data = {
users: [
{
id:

DIY トークテーマスロット

## 概要
– 部内の雑談で使用する目的でトークテーマ生成ツールを作成
– お題にバリエーションを持たせるために、スロット形式を採用
– スロットアニメーションのイージングを工夫
– 本稿では、スロットの動作説明、イージングについて解説

## できたもの
### 実装した機能
– スロットのスライドアニメーション
– 「GO」ボタンを押すたびに、予め用意した文字列の配列から、スロットのリールを生成
– リールの順番をランダム化

## はじめに

### 自己紹介
私は今年(2022年)の9月、ニジボックスに、フロントエンドエンジニアとして入社いたしました。
Web業界は、ほぼ未経験です。
現在は、HTML(pug), SCSS, Vanilla JavaScriptを業務で使用しています。

### 作成経緯
私が所属しているチームで

[Day12] プロトタイプ, 継承

本記事は一人アドベントカレンダー企画の一つです。
[30代未経験エンジニアが25日後にJavaScriptをマスターするカレンダー](https://qiita.com/advent-calendar/2022)

[JAVASCRIPT.INFO](https://ja.javascript.info/)を元にJavaScriptを勉強していき、そこで学んだ知識をアウトプットしていきます。
２５日でJAVASCRIPT.INFOをやりきり、未経験エンジニアがJavaScriptをマスターする過程を投稿していきます。

## ８.1 プロトタイプ継承
### 知らない単語
– リテラルとは
– 定数の事

### 学んだこと
プロトタイプ継承は
元のオブジェクトを僅かに変更した新しいオブジェクトを作った時、メソッドのコピーや再実装ではなく、その上に新しいオブジェクトを作成することで、元のオブジェクトが持っているものを再利用するので、それを補助する事

JavaScriptのオブジェクトはPrototypeプロパティを持っており、それは別のオブジェクトかnullである

P

datalistの挙動が気に入らなかったのでそれっぽいの作ってみた

## はじめに
本記事は[Progaku Advent Calendar 2022](https://qiita.com/advent-calendar/2022/progaku)の12日目の記事です。

## 作ったきっかけ
最初はselect使ってセレクトボックスだったんだけれど、雇い主が｢テキストボックスに入力できるようにして、あいまい検索にしてほしい。けどライブラリは管理面倒だから使わないでくれ。｣って言ってて、でもdatalistは挙動いまいちだしなぁ。って思って、それっぽいの作ってみた。

ここにのせるのは実際に作ったやつの機能縮小版･簡易版という感じ。

いろいろな動作の確認とかはしてないので、そのままコピペとかは多分無理。

## サンプル

テスト用のmockデータをフロントで手軽に作成

# はじめに
この記事はHRBrain Advent Calendar 2022カレンダー2の12日目の記事です。

https://qiita.com/advent-calendar/2022/hrbrain

フロントエンドエンジニアの川口です。

本記事ではJestでのユニットテストやStorybookでのStory作成時に必要となるmockデータを、フロントのみで手軽に作成する方法を紹介します。

# mockデータの作成手法
まずmockデータの作成手法としては、ざっくり以下の2つの手法が考えられるかと思います。

### OpenAPI等のスキーマ情報を元に作成する手法
以下で弊社のフロントエンドエンジニアの村崎さんが紹介しているように、OpenAPI等のスキーマ情報からmockデータを作成する手法です。

https://times.hrbrain.co.jp/entry/2021/12/13/open-api-mock

APIから取得したデータをコード内でそのまま利用している場合は、同一のデータを手軽に取得できるためとても有用な手法です。

ただし、フロントのコード内

【L】let, const(, var)の違い

色んな人から何百回も言われてきたことな気がするが……

個人的にはvar派です。大規模なものを書くことが少ないので許してくれ。

## 主な違い

| | let | const | var |
|:——:|:——:|:——:|:——:|
| 再宣言 | × | × | ○ |
| 再代入 | ○ | × | ○ |
| ES5以前 | × | × | ○ |

初心者向けだからスコープとかの話はしないぞ！

## 使い分け

### ES5以前の場合

**全部var**

めっちゃ再宣言に気をつけながら変数を使う

### ES6以降の場合

**定数はconst, 変数はlet**

letとconstの違いは”再代入ができるか”なので、再代入されてほしくない定数はconstで。
varは再宣言の心配があるのでなるべく使わないほうがいい。

—

## ところで

– 本業だったり大規模だったりするならともかく、趣味で小規模なものを作るくらいならvarでもいいと思うんだ
– letやconstだと宣言前参照はRefe

Array.fromの活用術

JavaScriptで、配列を作るのに使える`Array.from`というメソッドがありますが、これにはいろんな使い方があります。

## 引数に指定できるオブジェクト

`Array.from(obj)`とできるオブジェクトには、大きく分けて2種類あります。

* iterable
* 配列のようなオブジェクト

### iterable

最初の`iterable`とは、`[Symbol.iterator]`メソッドを持つものです（`for-of`に使えるもの、と言っても同じです）。配列そのものや`Map`、`Set`といったデータ構造、`document.querySelectorAll()`で得られる`NodeList`、さらには文字列も`iterable`なので、`Array.from`に投げ込むことができます。

配列を`Array.from`で処理した場合、配列がコピーされる効果以外に、疎な配列を`undefined`で埋める、という動作も行います。`Array(10)`で長さだけ決めた配列は、要素が空となって`forEach`が1回も回らない、みたいなことになりますが、

collaboflow.補完計画

この記事は [コラボフロー Advent Calendar 2022](https://qiita.com/advent-calendar/2022/collaboflow) の12日目の記事です。

https://qiita.com/advent-calendar/2022/collaboflow

アカウント名は、[好きなドラマ](https://ja.wikipedia.org/wiki/%E3%83%A1%E3%83%B3%E3%82%BF%E3%83%AA%E3%82%B9%E3%83%88_(%E3%83%86%E3%83%AC%E3%83%93%E3%83%89%E3%83%A9%E3%83%9E))のシリアルキラーから拝借しました。
よかったら冬休みにでも、見てみてくださいね?

## ?‍♂️補完から「逃げちゃダメだ！」

コラボフローでは ***[コラボフロー JavaScript API](https://collaboflow.zendesk.com/hc/ja/sections/360000040276)*** を利用することで、
申請書の入力や操作を補