f@ctor

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

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

Google Mapをクリックした地点の人口データの属性を持つ町丁目ポリゴンを取得し、表示する

## 概要説明
今回は、Google Mapをクリックしたときにサーバーと連携し、クリックした地点の人口データの属性を持つ町丁目ポリゴンを取得して表示させてみました。また、表示させた町丁目ポリゴンの削除についてもご紹介します。
この記事は[Maps JavaScript APIを使ってGoogle Mapに町丁目ポリゴンを表示してみる](https://qiita.com/yan_x/items/c069c8fb7c5d2648fe50)を拡張した内容になります。

## 使用したもの
– Google Map
– Maps JavaScript API

https://developers.google.com/maps/documentation/javascript?hl=ja
– JavaScript
– PHP
– 町丁目ポリゴン、令和2年国勢調査（2020年国勢調査）/人口総数
今回使用した町丁目ポリゴンおよび人口総数データは、TerraMap API からレスポンスされたものです。

https://www.mapmarketing.co.jp/terramap-api

元記事を表示

TwilioのLookup APIを利用して、Stripe Elementsの決済画面に電話番号の誤入力を予防する仕組みを追加する

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

ECやサブスクリプションビジネスにおいて、顧客との連絡手段を確保することはとても重要です。

中でも電話番号は、商品の発送時や、本人確認などのSMSを送信する時にも利用することがあります。

Stripeの場合、「リダイレクト型決済」の**Checkout**では、電話番号の情報入力もStripe側に任せることができます。

https://stripe.com/docs/payments/checkout/phone-numbers

ただしElementsでサイトやアプリに埋め込む場合には、フィールドの作成などある程度の開発が必要です。

この記事では、ユーザーの操作ミスで、誤った電話番号が入力されたまま申し込みが完了しないように、TwilioのLookup APIを利用したバリデーションを組み込む方法を紹介します。

https://www.twilio.com/docs/lookup/api

元記事を表示

こどもの百人一首の宿題だけに特化したWebアプリを作ってみてハマったとことか解決策

# はじめに
こどもの小学校の宿題で百人一首の暗記読み上げが毎日あるのですが、問題を出題しなければならずこどもだけでは完結させられないため一緒に行う必要があります。
これが百人一首をまったく覚えていない私としては問題の出題や合っているかのチェックが地味に負荷が高く…

百人一首のランダム読み上げ自体はYouTubeにいくつか動画はあったりするものの宿題の形式に沿ったものがなかったため、宿題の要件にあわせたWebアプリをTTS、STTで実装してみました。

# 完成したアプリ

![image](https://user-images.githubusercontent.com/22117028/207875375-c0d6761f-036c-4c91-b4f3-fccf5267acd7.png)

# 宿題の要件
* 色札ごとに分けられた20の句の中からランダムに問題をだす
* 五色百人一首っていうルールで色分けが決まってるらしいです
* 問題となった句の

元記事を表示

新規事業の開発チームにフロントのテストを導入した際の初期設計

## はじめに

こんにちは。[PharmaX株式会社](https://www.pharma-x.co.jp/)エンジニアの古家です。
この記事はPharmaXアドベントカレンダー2022の16日目の記事になります。

https://qiita.com/advent-calendar/2022/pharma-x

15日目は川端の「深くネストされたObjectをDeep Copyする方法」でした。

今回はPharmaXの新規事業のフロントエンド開発環境にテストを導入した際に検討したことについて書いていきたいと思います。

## テストを導入する際に行ったこと

以下の手順でテストの導入を進めていきました。順番に説明していきます。

– テスト導入前の開発チームの状況整理
– テストを書く目的の明確化
– 一般的なフロントのテスト手法の調査
– 自社としてどのテストを書くかの方針決め
– サンプルコードの実装

## テスト導入前の開発チームの状況整理

サーバーサイドはRails、フロントエンドではNext.js+TypeScriptを利用しているチームで、事業フルコミットのフロ

元記事を表示

メイキング of JSConf JP 2022 LT（アップダウンの軌跡）

# はじめに

この記事は、先日11/26(土)に開催されたオンラインカンファレンス [JSConf JP 2022](https://jsconf.jp/2022/) でLT登壇した際の紆余曲折です。
情報量は無くて、ただの日記のようなものです。

– [セッション情報](https://jsconf.jp/2022/talk/small-tips-to-use-bun-with-websocket-server-and-webassembly-modules)
– [発表資料](https://speakerdeck.com/mganeko/small-tips-to-use-bun-with-websocket-server-and-webassembly-modules)

# モチベーション曲線

応募を考え始めてから、当日発表が終わるままでのモチベーション曲線を描いてみました。
振り返ってみると浮き沈みが大きい2か月でした。

![motibate_graph2.png](https://qiita-image-store.s3.ap-northeast-1.amazona

元記事を表示

ちょっと一息。SvelteKitのエラーページを猫に頼んでみた。

# はじめに

皆さんは`HTTP Cats`というものをご存じでしょうか

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/cb844c21-403f-0b40-e5b2-c45a5b7c7b76.png)

このように`https://http.cat/[status_code]`の`[status_code]`の部分に`200`みたいに入れることで…

![200.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/73ab9253-8ca9-d1cc-9e67-1f0098987ffb.jpeg)

のように猫の画像＋ステータスコードを表示することができます。

`SvelteKit`の`+error.svelte`というエラー時に表示させるページにこの猫ちゃんを登場させて、エラーページを和ませたい。

# 実装

“`vue:+error.svelte

元記事を表示

[Day16] Promise, async/await part1

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

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

## 11.1 前置き: コールバック
### 知らない単語
– 非同期処理とは
　　　　　- ある処理が終了するのを待たずに、別の処理を実行する事

### 学んだこと
– 非同期処理

上記にもある通り、非同期処理は処理が終了するのを待たずに、別の処理を実行するので前の処理が追い抜かしてしまう可能性がある
同期処理は、逆に最初のコードから次のコードへと順次処理されていく事である

同期処理だと、時間がかかる処理が終了するまで次の処理を行えないと効率が悪いので、非

元記事を表示

Puppeteerで表示できない画面を探す

# Puppeteerで表示できない画面を取得しよう
さて問題です。**Puppeteer** とはなんでしょう？
**Puppeteer** とは、以下のようなことができるNode.jsのライブラリーです。

【**Puppeteer** でできること】
・ページのスクリーンショットやPDFの作成
・SPAをクロールしてプレレンダリングコンテンツを生成
・フォーム送信の自動化
などGoogle Chromeのブラウザでできることはほぼできるようです。

上記を駆使して、たとえば「ページ内の大量のデータから取得したいデータのみを抽出する」や「表示できないページを割り出す」などを行うことができ、普段の業務で自分で一つ一つ探して確認してたものを自動で行うことができるようになります。

※ 公式サイトは以下です

https://pptr.dev/

今回はこちらのライブラリーを使って、表示できない画面を探すツールを作りながら、
使用した各メソッドが何ができるメソッドなのかを説明していきたいと思います。

## 今回作ったもの
こちらのGitHubにて作成済みのものを公開しておりますので、よ

元記事を表示

FastAPIを用いてクロマキーAPIをつくろう！

# はじめに
はじめましての方ははじめまして、豊田高専2年情報工学科の[GoRuGoo](https://twitter.com/gorurobo_tech)と申します!「ゴルゴ」と呼んでください！
プログラミング歴も浅く、初めての投稿となります！温かい目で見守ってください…!

# 概要＆制作背景
今回、こうよう祭(文化祭)で2年情報は動物タワーバトルの人間バージョンを展示することになり、来場者の写真の背景を透過する必要がありました。ですが、いちいち画像処理ソフトを使って透過していては時間がかかってしまうのでWeb技術とOpenCVの勉強も兼ねてワンクリックで透過するAPIを作ろう！というノリで作成しました。

# リポジトリ
https://github.com/GoRuGoo/class_exhibition_color_technology

# ディレクトリ構造
クラス化してないのとファイル名が汚いのはご容赦ください、すみません…
uvicornを使ってapp/main.pyを起動してやるとローカルでシステムが立ち上がるようになってます。
app/run.pyではu

元記事を表示

mapbox:右クリックした場所の住所を得る

mapbox の [Reverse geocoding](https://docs.mapbox.com/api/search/geocoding/) を使用すると、緯度経度から住所を得ることができます。

“`
map.on(‘contextmenu’, (e) => {
//let uri = `https://nominatim.openstreetmap.org/reverse?format=json&zoom=18&lat=${e.lngLat.lat}&lon=${e.lngLat.lng}`;
let uri = `https://api.mapbox.com/geocoding/v5/mapbox.places/${e.lngLat.lng},${e.lngLat.lat}.json?language=ja&access_token=${mapboxgl.accessToken}`;

fetchData(uri).then(function(response){ return response.text().then(function(jso

元記事を表示

人を検知して自動的にビデオ通話を開始させてみる – Cisco Desk Pro 編 –

## :star: はじめに

この記事は Cisco Systems Japan の有志による Advent Calendar 2022 の
カレンダー1 の 16 日目として投稿しています:tada:
(カレンダー2 もあります:smile:)

< 過去の記事 >
2017年: https://qiita.com/advent-calendar/2017/cisco
2018年: https://qiita.com/advent-calendar/2018/cisco
2019年: https://qiita.com/advent-calendar/2019/cisco
2020年(1枚目): https://qiita.com/advent-calendar/2020/cisco
2020年(2枚目): https://qiita.com/advent-calendar/2020/cisco2
2021年(1枚目):https://qiita.com/advent-calendar/2021/cisco
2021年(2枚目)https://qiita.com/advent-

元記事を表示

【P】Primitiveな値

## Primitiveとは？

https://developer.mozilla.org/ja/docs/Glossary/Primitive

オブジェクトじゃなくて、メソッドも持たない。
文字列、数値、BigInt、真偽値、undefined(、シンボル)が該当

## 判定方法

typeof演算子を使う。nullは”object”を返すのでそこだけ注意。

“`javascript:isPrimitive.js
const isPrimitive = (i) => {
return i == null || typeof i != “object”;
}
“`

## もっと簡略化した書き方

https://qiita.com/AXT_AyaKoto/items/da1d19008a002bf397b1

そういえばこの記事で中身1行のアロー関数式の短縮をやった覚えがあるな、となったので。

“`javascript:isPrimitive.js
const isPrimitive = i => i == null || typeof i != “objec

元記事を表示

Deno入門[npmモジュールの使用]

この記事は筆者の[ソロ Advent Calendar 2022](https://qiita.com/advent-calendar/2022/panda) 16日目の記事です。

Denoの公式ドキュメントの内容を実際に動かしてみてDenoに入門してみたのでその備忘録の続きです。
今回はDenoでnpmモジュールを使用する方法について試してみたいと思います。

[Deno入門[インストール、環境構築、ファイル実行、標準ライブラリ]](https://qiita.com/JY8752/items/9cd6c05394bf955bdd75)
[Deno入門[CLIコマンド、モジュール、環境変数、Webフレームワーク]](https://qiita.com/JY8752/items/a00866917626a8719ebb)
[Deno入門[npmモジュールの使用]](https://qiita.com/JY8752/private/d177e176a7544b693a34) <- 今ここ Deno入門[prisma + oakで作るAPI] Deno入門[テスト編] # Denoのn

元記事を表示

ReactHooksについてまとめる（Context Hooks）

# 概要
Contextはコンポーネントが親コンポーネントから情報を受け取る際に、それをpropsとして渡さずに済むようにします。
アプリのトップレベルのコンポーネントはネストの数に関係なくその下にある全てのコンポーネントに対してprops経由なしに情報を渡せる。

## useContext
`Contex`tを使用するためには、その値を使用したいツリー全体の親コンポーネントを対応する`Context.Provider`でラップします。
以下の例では`Buttonコンポーネント`内で`theme`としての値を使用したい場合に、`Buttonコンポーネント`の親コンポーネントである`Formコンポーネント`を`ThemeContext.Provider`でラップする。

“`jsx
function MyPage() {
return (



);
}

function Form() {
return (

元記事を表示

脱出速度を超えて宇宙へ進出するクソアプリ

[クソアプリ Advent Calendar 2022](https://qiita.com/advent-calendar/2022/kuso-app) 16日目の記事です。

# 作成したものはこちら

https://cosmic.vercel.app/

# 脱出速度とは

ざっくりまとめると、重力から脱出するために必要な速度のことです。
多用されるものに第一宇宙速度、第二宇宙速度、第三宇宙速度とやらがあるらしく、それぞれ

**第一宇宙速度: 地球の周りを地面に落下せずに飛び続けられる速度**
**第二宇宙速度: 地球の重力を振り払って、地球表面から脱出できる速度**
**第三宇宙速度: 太陽の重力を振り切って、太陽系から脱出できる速度**

らしいです。（細かい箇所誤りあったらすみません）

最近、水●の魔女にハマっている自分としてはワクワクする概念です。

宇宙はロマンの塊ですが、実際に行くのは難しいでしょう。
そこで気分だけでも味わえるWebアプリを作ってみました。

# いざから飛び立とう

内容はこんな感じです。

![cosmic.gif](https://qii

元記事を表示

WebexのAppを自作してみる！

この記事はシスコの有志による Cisco Systems Japan Advent Calendar 2022 （2枚目） の 16日目として投稿しています。

2017年版: https://qiita.com/advent-calendar/2017/cisco
2018年版: https://qiita.com/advent-calendar/2018/cisco
2019年版: https://qiita.com/advent-calendar/2019/cisco
2020年版: https://qiita.com/advent-calendar/2020/cisco
2020年版(2枚目): https://qiita.com/advent-calendar/2020/cisco2
2021年版: https://qiita.com/advent-calendar/2021/cisco
2021年版(2枚目): https://qiita.com/advent-calendar/2021/cisco2
2022年版(1,2枚目): https://qiita.com/a

元記事を表示

event.preventDefault();

# アクションが途中で止まり困っていた。
送信ボタンを押しても何も起こらなかった。
考えた末“`event.preventDefault();“`これでこの先のアクションが動かなかったのではないかと考えた。
“`html



.
.
.

“`

元記事を表示

イベント

# イベント
“`リンクやボタンをクリック“`したり、“`キーボードを操作“`したり、また、“`ページの読み込みが完了した時“`にや“`次のページに行く直前“`など様々なタイミングでブラウザに“`イベントが発生“`します。
“`html



“`
# “`.onsubmit“`
* JavaScriptのonsubmitとは、“`送信ボタンが押された時に起動するイベント“`です。

### 出典
https://magazine.techacademy.jp/magazine/22317#:~:

元記事を表示

フレームワークとライブラリの違い

JavaScript を勉強し始めてしばらく経つのですが、フレームワークとライブラリの違いがいつも分からなくなります。
アドベントカレンダーだし年末のいい機会なので今年こそ理解してすっきり年始を迎えたいと思います！

## フレームワーク

フレームワークは日本語で「枠組み」という意味を持ちます。
**ユーザー（エンジニア）に枠組みとして様々な機能を一度に全て提供し、「じゃああなたはこの枠組みの中で自由にコードを書いてね」とするプログラムがフレームワークと言われます。**

イメージしてみましょう。家の枠組みはもう完成していて組み直すことはできません。ただし塗装や内装はあなた次第です。

外部フレームワークを利用するということは、既に骨組み完成済みの家を買ってくるようなものです。自由度が低いように思うかもしれませんが、

元記事を表示

Webアプリを開発したくて勉強したけど次にやるべきことがわからない

#### Webアプリを開発したくて・・・
Webアプリを開発したいと思い、progateに登録した。
HTMLとCSSに始まり、JavaScriptは初心者向けのおすすめ本を1冊買った。
最初は全くわからないし、エラーが全然解消できなくて辛かった。
勉強している中でCodePenを知り、写経しながらであれば簡単なToDoアプリを作ることができた。

勉強してしばらくすると、なんとなく自分自身で作りたいアプリみたいなイメージができてきた。
それは日記アプリだ。
過去に使った日記アプリはいろんな人が使いやすいアプリではあるが、私自身が使いやすいアプリではなかった。

#### 問題はその次・・・
ここで手が止まってしまった。
HTML、CSS、JavaScriptを勉強したが、次に何をすればいいのかわからない。
progateの画面で作成したようにHTMLやCSSを作成してコードを書いていけばいいんだろうけど
それはどこでやるんだろうか？
PCのCドライブにフォルダ作成したとして、HTMLやCSS、JavaScriptのファイルはどう置けばいいのかさっぱりである

#### プログラ

元記事を表示

OTHERカテゴリの最新記事