f@ctor

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

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

JavaScriptで集合演算

「和集合」と「共通部分」と「部分集合か判定」するメソッドです。

“`js
// 和集合
function union(a, b) {
return a.concat(b).filter((e, i, r) => r.indexOf(e) === i);
}

// 共通部分
function intersection(a, b) {
return a.filter(e => b.includes(e));
}

// 部分集合か判定 (a⊂b なら true を返す)
function isSubset(a, b) {
return a.every(e => b.includes(e));
}
“`

元記事を表示

javascriptでRPG＃９

###こんにちは
今回は、家の中の作成をしていきます。
では、まず、入るための前置きから作っていきます。

“`talk.js
//下の会話文
const talk = {
“1”:”ここは…？”,
“2”:”矢印キーで移動してみよう！”,
“3”:”家の中に入ってみよう！”
}
“`

これで、会話文を作成し、読み込んでいきます。
`key_down`関数をこのように変更してください

“`main.js
…(中略)
//キーが押されたとき
function key_down(e) {
if(talk_number>1){
if(e.which==38){
//上キーが押されたとき
pl_g_up=true;
if(talk_number==2)talk_number++;
}
if(e.which==37){
//左キーが押されたとき
pl_g_left=true;
if(talk_number==2)talk_number++;
}
if(e.which==40){
//下キーが押されたとき
pl_g_down=true;
if(talk_number==2)tal

元記事を表示

てきとうにテトリスを作ったら長棒の幅が少し太かった。ついカッとなってやった、反省しています

# 記事を読むまでもなく全てが予想出来るタイトル

完全に出オチなのに、タイトルでネタばれしております。
お察しの通り、**クソアプリ**です。

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

# 早速、証拠の品をご覧いただこうっ！

以下のURLから、犯人が作成した「**てきとりす**」なる、
テトリスに**非常によく似たゲーム**を**実際に遊べます**。

https://sage-momentum-211505.web.app/

**PWA**で作成されているため、スマホからもボタンタップ操作で遊べますが、
**てきとうな作り**で操作性が悪いため、PCのキーボード操作でのプレイ推奨です。

# プレイの様子が録画されております

![Tekitris1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193512/efbd5be0-c185-8b3d-

元記事を表示

今日のお月様を表示したい！

　今日は満月ですからっ（≧▽≦）
　（ちなみに「今日」とは、この記事がアドベントカレンダーで公開される予定の、`2021/12/19`のコトです）
　なお、これは天文学的にガチなお月様ではありません～。カレンダーに表示する的なヤツです。

# APIから月齢を取得します

　こちらのAPIを利用します☆

https://mgpn.org/api/moon/

　必須のパラメーターは、

– **lat** (緯度)
– **lon** (経度)

それから、省略可能ですが

– **time** (yyyy-mm-ddTHH:MM)

　timeは省略すればサーバーの現在時刻で計算されるようですが、「今日」の月齢と言った場合にはたいがい`12:00`のを表示するんだよね。
　こんな感じです。

“`
https://mgpn.org/api/moon/v2position.cgi?time=2021-12-19T12:00&lat=35.00&lon=135.00
“`

　これへ[`GET送信`](https://nadesi.com/v3/doc/index.php?plu

元記事を表示

Next2D Framework routing設定[NoCode Toolの連携編]

今日は`Next2D Framework`と`NoCode Tool`の連携手法を紹介したいと思います。

# Framework側の処理

## routing.json
`type`に`content`を設定します。

“`json:routing.json
{
“top”: {
“requests”: [
{
“type”: “content”,
“path”: “{{ content.endPoint }}content/sample.json”,
“name”: “MainContent”,
“cache”: true
}
]
}
}
“`

プロパティ|値
—|—
type|content
path|{{ content.endPoint }}content/sample.json
name|MainContent
cache|true

### path
NoCode Toolで書き出したJSONデータが保管されているURLを追記します。

###

元記事を表示

JSでポケモン英語クイズを作ってみた

#はじめに
　私はプログラミングの勉強をしている学生で、趣味の１つがポケモンのゲームで遊ぶことなのですが、ある日、YouTubeを見ていたら、ある動画を見つけました。
[ある動画](https://www.youtube.com/watch?v=FRk50X5fa0A)
　　
　動画の内容はポケモンの技や特性などを英語にしたクイズを、ポケモンバトル系のゲーム実況者でポケモンの知識は優れているが英語の知識は人並みの[ライバロリ](https://www.youtube.com/channel/UCSdExItCszcnIp-roT7b0kw)さんと、東大の医学部出身で英語の知識は優れているが、ポケモンは初心者の[河野玄斗](https://www.youtube.com/c/Stardy)さんが協力して、答えていくというものです。

　自分が好きなポケモンを通じて英語の勉強もできる神動画でした！それで、この動画のようなクイズのサイトがないかググってみたのですが、見つかりま

Pleasanterのレコード情報をPDFにして出力してみた

# はじめに
Pleasanterのレコード情報をPDFにして確認したい、PDFにする必要がある、そんな方々向けの記事です。

## 使用するライブラリ
今回は「pdfmake」と呼ばれるJavaScriptのライブラリを使用してPDFを生成します。

http://pdfmake.org/#/

## 準備
### pdfmake
GitHubからクローンします。
https://github.com/bpampuch/pdfmake

buildディレクトリ配下にある
・pdfmake.min.js
・vfs_fonts.js
を使用します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481749/1d269ae0-f2f0-6e4a-2c08-3e0d4c624263.png)

#### カスタムフォント
デフォルトフォントがRobotoのため、日本語対応しておりません。
日本語を使用したい場合は別途フォント（○○.ttf）の準備が必要です。
example/fontディレ

p5.jsの関数まとめ part.14 bezierVertex()

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

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

## bezierVertex()
ベジェ曲線を描くための関数です。
さて、ベジェ曲線がわからないので調べてみました。
[こちらの記事](https://ferret-plus.com/1953)によると、
> ベジェ曲線とは、フランスの自動車メーカー「シトロエン社」のド・カステリョ氏と「ルノー社」のピエール・ベジェ氏が設計した、曲線を描く数式のことを指します。

おおなるほど。
ドローイングを行えるソフトなどで曲線を書く際はこのベジェ曲線で表現されるみたいです。

このベジェ曲線に従って、曲線を描画できる…という関数なのですね。

### リファレンスより
> Bezier曲線の頂点座標を指定する。bezierVertex()を呼び出すたびに、ベジェ曲線の2つの制御点と1つのアンカーポイントの位置が定義され、線や図形に新しいセグメントが追加されます。WebGL モード

推しに貢ぎたいChrome拡張

## はじめに

こんにちは、[@rs_tukki](https://twitter.com/rs_tukki)です。
これは[クソアプリ Advent Calendar 2021](https://qiita.com/advent-calendar/2021/kuso-app)の19日目の記事です。

## ある日思い立った

ぼく「今年はなんかアドベントカレンダー参加してみたいなあ」
ぼく「よしなんか今年(ぼくの中で)流行ったものでひとつ作ってみるか」
ぼく「最近コロナで外出できなくてYouTubeで推しの配信見ることが多かったし、YouTubeの拡張機能作ってみよう」
## 使い方
1. Youtubeの生配信、もしくはプレミア公開中の動画を開く
1. おもむろにコメントを投稿する
1. 2秒ほど待つ
1. 君の書いたコメントがスパチャみたいに見えるよ！ふしぎ！

![superchat.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308803/08932afd-59dc-5aad-d1

ブラウザベースのサービスをChrome機能拡張でカスタマイズする時の工夫ポイント

この記事は[Goodpatch Advent Calendar 2021](https://qiita.com/advent-calendar/2021/goodpatch) 19日目の記事です。

フロントエンドの池澤です。
先日オンラインホワイトボード[Strap](https://product.strap.app/)を[Chrome機能拡張を使ってカスタマイズする](https://goodpatch-tech.hatenablog.com/entry/2021/11/17/150105)という記事を書きました。
簡単に説明するとホワイトボードツール自体はそのままで、別途Chrome機能拡張を使ってタイマー機能や任意ボタンのショートカットキー割り当て機能を追加するものです。

今回は、ホワイトボードツールのようなブラウザベースのSaasサービスをChrome機能拡張でカスタマイズする際に、私が工夫したポイントについてお話したいと思います。

## 目的
毎日のようにSt

WebGLをGISに応用してみる【DEM編】

この記事は、[MIERUNE Advent Calendar 2021](https://qiita.com/advent-calendar/2021/mierune)の19日目の記事です。

![ダウンロード (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73197/f24d8501-3478-9648-ff0a-8f543c89a608.png)

https://kanahiro.github.io/webgl-gis-example/

## はじめに

WebGLをGISに応用…といっても、Mapbox GL JS(MapLibre GL JS)やCesium、Deck.glなど、既に多数のWebGISライブラリでWebGLは標準的に活用されています。しかしGPUの能力を活かした並列処理を可能とするWebGLは、GISの世界でまだまだ活用の可能性があると考えています。

ということで、WebGLのGIS応用について色々書いていきたいと思います。今回はDEM編です。次回のネタ・時期は

パフォーマンス改善をやる前に知りたかった３つのこと

この記事は Ateam Hikkoshi samurai Inc.× Ateam Connect Inc. Advent Calendar 2021 18日目の記事です。

## はじめに

ページパフォーマンスがSEO指標として明示化されて以後、改善に取り組んでいるエンジニアも多いと思います。
自分も半年ほど前に本格的に改善を行い、自社サービスサイトのCore Web Vitalsを改善しました。

Core Web Vitals は「`LCP` / `FID` / `CLS`」の３指標が、「良好・要改善・不良」の３段階で評価されます。
改善前は多くのページが「要改善」、もしくは「不良」になっていましたが、全ページ「良好」にまで持っていくことができました。

ただ当初はこの分野に詳しくなく、道中なかなかに苦労をしました。

今回は自分がその中で「最初に知っておきたかった…」と思ったことを、３つに厳選してお伝えしたいと思います。
具体的には以下の３つ。

1. そもそもなんでやるのか理解しておく
2. 指標の見方と選び方
3. 手段にとらわれない

それでは早速1から。

## 1

Bearer認証付きAPIでCORSエラーとたたかった記録

# CORS 強かった…
Next.js + typescript + prisma + PostgreSQL で Bearer 認証付き API を作って、サーバに Deploy したら、CORS エラーでアプリ側から全然呼べなかった。アプリ側は、React.js で axios を使っていて、build したものが Deploy されている。

“`”Access-Control-Allow-Origin”: “*”“`を header に付けてやれば良いだけでしょと舐めてたが、そんな簡単には解決しなかった。にわか知識では突破できない CORS。強かった。

Preflight Request の理解不足が今回のハマりポイントだった。

## API の概要

– header の “`”Authorization”: “Bearer {access_token}”“` で認証
– Request の “`Content-Type“` は、“`application/json“`
– 認証が必要な API は、Bearer 認証をする “`middleware“

【JavaScript】Fetch で Ajax を実装するサンプル（Promise と async / await）

# はじめに

ネイティブ JavaScript で Ajax を実装するには、[XMLHttpRequest](https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest) よりも、[Fetch](https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch) の方が一般的なようです。
学習がてら、Fetch による Ajax 処理の基本的なところをまとめておきます。

[POSTメソッドの動作確認](#3-post-メソッドフレームワークを使用した例)は、[Rails 6](https://railsguides.jp/6_0_release_notes.html) を使用していますが、どのフレームワークでも基本は変わらないと思います。

# 1. GET メソッド

GET メソッドは、HTML ファイルと Javascript ファイルだけで簡単に動作確認ができます。
サンプルコードはコピペで動くようにしています。

## 1-1. fetch

【Nuxt.js,Firebase】ユーザー登録、ログイン実装

#はじめに
こんにちは！
今回はNuxt.js,Firebaseを使って、ユーザ登録〜ログイン機能実装までをアウトプットしていきます！

#前提
・Nuxt.jsのプロジェクトが立ち上がっている
・Firebaseのアカウントが制作してあり、連携までしてある方。
（していない方、[こちらの記事](https://nuxt.alizlab.com/%e3%80%90nuxt-js%e3%80%91firebase%e5%b0%8e%e5%85%a5%e7%b7%a8rdb%e7%89%88%ef%bc%9a%e3%83%87%e3%83%bc%e3%82%bf%e3%81%ae%e8%bf%bd%e5%8a%a0-%e5%8f%96%e5%be%97%e3%82%92%e3%81%97%e3%82%88%e3%81%86/)参考）

nuxt.jsの立ち上げ、Firebaseのアカウント制作は省きます。

#対象
・ユーザー登録、ログイン機能の実装を行いたい方
・firebaseを使用したい方

##使用環境

|使用技術 |バージョン |
|:-:|:-:|
|nuxt.js

素のJavaScriptでモーダルを爆速実装する

昨今の便利なフレームワークやライブラリを使えばモーダルの一つや二つ簡単に実装できそうなものですが、素のJavaScriptで実装できるようになっていても損はないはずです！
超簡易的な実装令をご紹介しますので、早速やっていきましょう！

（チャンネル登録と高評価も忘れずにお願いしますww）
## 爆速実装

一応codepenにもコードを置いているので、手元で環境作るのが面倒な場合はささっと確認してみてください！

### 実際にできるやつ

デザインは非常にしょっぱいですが、基本的な考え方は分かりますww

![ezgif.com-gif-maker.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/684929/824c9c6c-cde7-c455-6020-44e688829911.gif)

### HTML

“`html

3タップで完了するLINEフォトアルバム #LINE #GAS #GoogleSpreadSheet

## スマホの中の写真 埋もれてない？

スマホがこの世に誕生し、撮られる写真はそれ以前の10倍に。
**世界で1年に撮影される写真は瞬時に1兆枚を突破。
1スマホの中に少なくとも1,000枚以上の写真があるそうです。**

![③.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/48c8fc75-991c-130e-dfab-dd1f1f88a0b1.png)

**せっかく撮影しても、整理できずにいませんか？。**
「子供と仕事の写真ぐちゃぐちゃ・・」「あの思い出はどこ・・？」

思い出が埋もれたり、写真と一緒に消えてしまうのは悲しい。
とはいえ整理はめんどくさい。よくあるフォトアプリも挫折した。

そんな方々、そして誰より私たち夫婦の悩みを解決するために
**日本一簡単操作で作れるフォトアルバムを作ります!**

【jQuery】要素の追加、削除の方法（append,prepend,remove,empty..)

#要素の追加、削除方法
1.追加
・append
・prepend
・after
・before

2.削除
・remove //要素自身を削除
・empty　　　//子要素を削除
・html(“”)　　//要素の内容を削除

##追加
demo:https://jsfiddle.net/boababy/w7d9j5vk/12/

“`javascript

  • 最初のli
元div