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

React + TypeScript: Recoil公式チュートリアルのTodoリストをつくる 03 ー 構成とロジックを整える

Recoil公式チュートリアルの解説は前回で終えました。この第3回はスピンオフです。とくに動きは変えることなく、モジュールの構成とロジックを整理します。せっかくモジュール分けもしましたので、もう少し実践に近づけようという試みです。

#### React + TypeScript: Recoil tutorial example 03

# ディレクトリをコンポーネントと状態で分ける
簡単な作例ながら、それなりにモジュール数も増えました。そこで、コンポーネント(`components/`)と状態(`state/`)を、つぎのようにディレクトリ分けすることにします。

* `src/components/`
* `App.tsx`
* `TodoItem.tsx`
* `TodoItemCreator.tsx`
* `TodoList.tsx`

【JavaScript】reduce()で配列から指定した値の近似値を取得する

海外のブログで、配列から指定した値の近似値を取得する方法が紹介されていたのでメモ。いったん配列をソートしてから近似値を求めるより、reduce() を使った方が早いらしい。

参考: [JFind the closest number in an array JavaScript](https://www.gavsblog.com/blog/find-closest-number-in-array-javascript)

#配列内で “8” に一番近い値を取得する

“`javascript:
const needle = 8;

const closest = [1, 10, 7, 2, 4, 9].reduce((a, b) => {
return Math.abs(b – needle) < Math.abs(a - needle) ? b : a; }); console.log(closest); // 出力値: 7 ``` この方法だと結果は "7" になる。配列に "9" があったとしても、先に比較された "7" が最近似値となる。 これだと問題となる

Webフロントエンドパフォーマンスチューニング55選

こんにちは、ぬこすけです。

近年、**Webフロントエンドではサイトのパフォーマンスの重要性が高まっています**。

例えば、GoogleはCore Web Vitalというパフォーマンスに指標を検索結果のランキング要因に組み込みました。
また、近年の某企業が「パフォーマンスの改善に取り組んだ結果、セッション数〇％アップ、CVR〇％アップ…」などの事例は枚挙にいとまがないでしょう。

https://web.dev/why-speed-matters/

パフォーマンスチューニングするためには、定量的に計測してボトルネックを探すようなトップダウンなアプローチもあります。

しかしながら、時には**千本ノック的にハウツーを片っ端から試していくボトムアップなアプローチも有効**になることもあったり、**日々のコーディングでパフォーマンスを意識したコードを書くことは大切**でしょう。

この記事では**パフォーマンス最適化のハウツー**を紹介します。
**パフォーマンス改善の施策が思い浮かばない時やフロントエンドのスキルを磨きたい時に辞書的な役割を果たせれば良い**かなーと思っています

【個人開発】Twitterで映える！ファンレターを交換・シェアして楽しめるサービス『ご縁箱』をリリースしました✧˖°。

# はじめに…

### ▼ Twitterを使う上で このように感じたことはありませんか？
『 今あるご縁を大切にしたい 』
『 フォロワーさんと感謝の気持ちを伝えたり、交流を深めたい！ 』
『 あの人に話しかけてみたい！ 』

けどきっかけがない..ちょっと億劫かも…

こういった問題も楽しみながら解決出来る『 ご縁箱 』というサービスを開発しました。
### ▼ ご縁箱を使うとどうなる？
##### 実際に使ってみて…
– まだ話したことがなかったフォロワーさんと話すきっかけになった
– 色んなメッセージを頂いてほっこりした気分になった
– 自分の率直な気持ちをレターを送って伝えることで喜んでもらえた
– ご飯の約束ができた（全部焼き肉）

仲良しユーザーとの交流も深めることも出来ますが、まだ交流が出来ていないユーザーともコミュニケーションを取るきっかけにすることも出来るサービスです。
![TOP_TITLE.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1191858/b4c03

[JS]レスポンスの処理

学習したことのアウトプット
#まず
ブラウザでイベント発火
↓
JavaScript
↓
ルーティング
↓
コントローラー
↓レスポンス
JavaScript
↓
ブラウザ

`レスポンス`部分の処理の書き方の理解を少しでも深められたらと
#XMLHttpRequestオブジェクト
JavaScriptを用いてサーバーとHTTP通信を行うときに利用するオブジェクト。
XMLHttpRequestのメソッドやプロパティを利用して実装を進めます。

“`javascript:記述例
const XHR = new XMLHttpRequest();
“`
`new XMLHttpRequest`と記述することで、新しくオブジェクトを生成できます。
そして、新たに生成したXMLHttpRequestオブジェクトを`変数XHR`に格納しています。

変数名のXHRはXMLHttpRequestの略です。
##onloadプロパティ
リクエストの送信が成功したときに呼び出されるプロパティで`XMLHttpRequestオブジェクトのプロパティ

骨までしゃぶりつくす「ぷよぷよプログラミング」(1/X)

#背景

　世の中には情報システムを構築するための教材があふれていて、何から手を付ければいいかわからない人も多いと思います。筆者もそのような一人で、何を題材にし、自分のエンジニアリングの核を形成しようかと常に悩んでいます。ちなみにプログラミングの力量を示す一つの指標としてコンテストサイトの実力がありますが、筆者はAtCoderでは茶色であり、アルゴリズム的な観点でみれば駆け出しエンジニアと言っても差し支えないレベルです。全くの素人ではないものの、様々な分野で中途半端な力量だなと感じることが多く再勉強を試みてはその度に焦燥感を感じています。
　そんな中、目を付けたたのが「[ぷよぷよプログラミング](https://puyo.sega.jp/program_2020)」です。詳細な説明はオフィシャルに譲りますが、「小さなころから慣れ親しんだゲームであるぷよぷよを作れる！」というモチベーションを刺激されました。この教材の概要はjavascript と html を用いてブラウザで上で動作するゲームを実装するというものであり、インフラではなくWebフロント寄りの学習教材です。一方で私のキャリア

ViteでビルドしたOpenLayersで地理院地図を表示する

フロントエンドビルドツールの[Vite](https://vitejs.dev/)を使用してビルドした[OpenLayers](https://openlayers.org/)で[国土地理院地図](https://maps.gsi.go.jp/development/ichiran.html)を表示します。

[Vite](https://vitejs.dev/)は高速で起動、更新ができるJavaScriptビルドツールで
TypeScriptやVue.js/React等のライブラリが設定なしですぐに使えます。
ホットリロードに標準対応しているので、ファイルを変更すると自動的にブラウザをリロードしてくれて開発が非常に楽です。

[OpenLayers](https://openlayers.org/)のバージョンは`v6.12.0`を使用します。

※gitとnode ver.12以上のインストールは省略。

## プロジェクトとViteのセットアップ

ViteでOpenLayersの公式HPの[チュートリアル](https://openlayers.org/en/latest/do

対戦型ポケモンWordle「VS Pokémon Wordle」を作ってみた

# はじめに

最近話題の5文字の英単語を当てるゲーム「[Wordle](https://www.nytimes.com/games/wordle/index.html)」。
それをポケモンの名前で遊べるようにアレンジした「[ポケモンWordle](https://wordle.mega-yadoran.jp/)」。

シンプルだけど意外と奥が深いこのゲームですが、「リアルタイムに友達と対戦できる機能があったらもっと面白そう」ということで作ってみました！

**完成品はこちら**

https://www.vs-pokemon-wordle.com/


ソースの全容は以下のリンクから確認できます。

https://github.com/Yotty0404/VS_Pokemon_Wordle

# プロローグ
先日、兄から「ポ

MicrosoftのWeb開発教材を使ってみた ⑥スペースシューティングゲーム 【ゲーム開発の基礎/Pub-Sub/Canvas/衝突検出】

# はじめに

**「Web Development For Beginners」**というMicrosoftがGithubに公開している教材についての記事です。

教材の紹介・選んだ理由など

### この教材を選んだ理由

https://github.com/microsoft/Web-Dev-For-Beginners

– HTML/CSS/JavaScriptを触れるいい感じの教材が欲しかった
– そこそこのボリュームがあり、作りながら学べるタイプの教材
– 基礎的なトピックが一通り網羅されている
– 質が高そう
– なにせあのMicrosoftなので、きっと良いものでしょう。
– 題材が**面白そう**
– 軽く調べた感じだとチュートリアルでよくある題材として「TODOアプリ」「クイズアプリ」などがあるみたいですが、どれもどう実装するのか想像がついてしまって、余り興味がわきませんでした。
– しかしこの教材は「テラリウム」「タイピングゲーム」「ブラウザ拡張機能」「

Webhook GitHub→*GAS*→Discord GASでGitHubの任意のファイルの監視がしたい

# 動機
DiscordのGitHub向けデフォWebhookが使い物にならなかったのでどうにかしたかった
具体的には特定のファイルを含んだコミットを検出したかった

# Webhook is 何
初めて触るのでざっと調べた

正体はただのPOSTリクエスト
JSON等のファイルをPOSTで送るだけ
普段ｵﾗｯﾃﾞｰﾀﾖｺｾｯ!っていうところで急にチョコを送り付けるような雰囲気
チョコのことは一般的にpayloadと呼ぶらしい

POSTリクエストを受け付けられて送りつけることができる鯖が欲しい

……それGASでよくね？

# つくる
## Discord
チャンネルの設定画面からWebhookを受けるURLを作る
ここにJSONでPOSTリクエストを投げるとチャンネルにメッセージが流れる
## GitHub
リポジトリ→Setting→Webhook
から新しくWebhookを作る

Discordと繋げる場合通常ならコピーしたURL末尾に`/github`を付け加えて送信形式をJSONにする
一度試してみるのもあり
今回はGASを挟むので送信先のURLはあとでGASのものに書き換

JavaScriptのメソッド(forEach,map,filter)の違い

# 挨拶
Webエンジニアへの就職に向けて学習をしております、ひろやすと申します。
今回の記事は、私がUdemyでReact.jsの講座を受講しており、JavaScriptのメソッド(forEach,map,filter)について復習したため、学習のアウトプットとして記載させて頂きます。

※**Udemy**とは、動画コンテンツで学習するオンライン学習プラットフォームのこと。

## forEach
forEachメソッドは、配列の要素を一つずつ取り出して処理を行いたい場合に使います。
“`javascript
const array = [1, 2, 3];

array.forEach((num) => {
return num * 2;
};

// console.log(array);
// [2, 4, 6]
“`

## map
mapメソッドは、forEach文と同じく、配列の要素を一つずつ取り出して処理を行いたい場合に使います。

“`javascript
const array = [1, 2, 3];

array.map((num) => {
r

React の useReducer にて reducer が 2回 dispatch される

# 問題

React の Reducer がなぜか 2回 Dispatch される。
同じ処理が　2回 実行されるため、予期しない結果となる。

# 原因

Reducer が純粋関数でないため。

正直、この原因を知ったところで根本解決は難しい。
以下に回避策をまとめる。

# 回避策

以下の3つがある模様。

1. Strict Mode を解除する
1. reducer を `useCallback` で囲む
1. reducer をメイン関数の外に出す？

今回は個人開発ということもあり、内容を確認した上で 1 を選択しました

### ① Strict Mode の解除

Strict Mode の解除に関しては、内容を理解した上で自己責任で行いましょう。
特に会社のプロダクトの場合は本当に問題ないか、要検討です。
詳細は [Strict Mode](https://reactjs.org/docs/strict-mode.html) に書いてあります。

やることは `` を削除するだけです。

#### 修正後

“`react:

Firebase JavaScript SDK v9 + Authentication で認証を実装する

Firebase JavaScript SDK が、Version9で大きく変わりました。 バージョンアップに伴い、Authenticationの実装の仕方もかなり変わったため、メモを残しておきます。

## Firebase JavaScript SDK v9 の仕様

v9では、SDKの中から必要なモジュールだけを読み込んで利用する「Tree Shaking」という手法を採用しています。WebPackなどで採用されている手法だそうです。

https://firebase.googleblog.com/2021/08/the-new-firebase-js-sdk-now-ga.html

## JavaScript SDK v9 を利用した認証の実装

今回の変更を踏まえて、Firebase Authenticationの認証を実装してみました。

### ディレクトリ構成

今回のサンプルはこんな構成で作成しました。

“`bash
├── dist
│   ├── bundle.js
│   └── index.html
├── firebase.json
├── nod

Webの勉強はじめてみた その30 〜GitHub認証とテスティングフレームワーク〜

N予備校「プログラミング入門Webアプリ」を受講しています。
今回は第4章4〜6節です。

## GitHub認証
GitHub上のログインの認証機能を、自分が開発するアプリケーションに利用する。

### OAuth の利用
その前に認可と認証について

:::note
アプリケーションの利用者が第三者のアプリケーションに権限を与えることで、 そのアプリケーションの機能や認証を第三者のアプリケーションでも利用できるようにする仕組み
:::

`OAuth2.0`は認証済みユーザーに対して権限を与える、認可のためのプロトコル。

“`
user => github => website => user
認証 認可 ログイン
“`

なんとなくこんな感じだろうか。

### ストラテジーモジュール
必要なものだけをインストールできるように部品に分けたモジュール。
今回はGitHubなので、`passport`の他に、`passport-github`, `express`内でログイン情報をセッション管理するための、`express-session`ラ

四国八十八箇所　巡り　支援プログラムを組むには

四国八十八箇所　巡り　を　８年後に計画している。

必要な資料をWebから自動収集し、自動的に計画を立てる「四国八十八箇所　巡り　支援プログラム」を組もうと思った。

<この項は書きかけです。順次追記します。>

# 費用

全周　順打ち！　四国八十八ヶ所お遍路の旅　９日間

https://www.hankyu-travel.com/tour/detail_d.php?p_course_id=8JJ888&p_hei=20

一人30万払えば、全部手配してくれるらしい。

目標金額を30万未満で実現する方法を検討する。
ただし、徒歩の場合は、宿泊数が増える可能性があり、30万円の上限の対象外とする。

# 移動手段

## 徒歩

## バス

## 公共交通機関重視

## 自動車（キャンピングカー）

レンタカーを想定。購入予定はない。

## 自動車（キャンピングカー以外）

自家用車、レンタカーの両方を想定。
レンタカーの場合は、最初の目的地付近で借りることを想定。

# 宿泊場所

四国に、宿泊できる親戚は、今のところ思い当たっていない。
泊まりに行ける知人も現在はいない。

PHPでお問い合わせフォームを作成する②

PHPを使用してお問い合わせフォームを作成する方法を解説します。バリデーションなどの一部機能はJavaScriptで実装します。
本稿は2部構成となっております。第2部ではフォームのバリデーション構築と、完了画面から確認画面へのブラウザバック禁止を設定します。
第1部を未読の方はこちらからお読みください。

https://qiita.com/Michi1090/items/a575375e3db3fc6a2a90

# バリデーション

## バリデーションとは
バリデーションとは、**「入力内容や記述内容が要件を満たしているか、妥当性を確認すること」**を言います。簡単に言えば、**「入力チェック機能」**のことですね。
例えば、せっかくフォームからメッセージを送ってもらっても、メールアドレスが入力されていなけれな返信できませんよね？そのようなことが起こらないように、バリデーション機能を作成して入力内容をチェックし、内容に不備があるものは最初から送信できないようにしてしまいます。

## 実装

“`validation.js
// エラーメッセージの表示機能
function

jQueryをES Modules形式でインポートするには (Rollup)

最近、モダンなフロントエンドの現場では、ReactやVue.jsといった技術が使用されることが増えました。
しかし今でも、ちょっとしたDOM操作をしたいときに、jQueryを使用すると便利な場面がたまにあります。

jQueryを使いたいけど、せめて、jQueryのインポートにはモダンな技術を使いたい。

というわけで、最近、jQueryをES Modules形式でインポートしようとしたのですが、
なかなかうまくいかず、苦戦しましたので、備忘録もかねて、解決策を解説させていただきます。

## この記事で書かないこと

– Rollup の使い方
– ES Modulesについての説明

上記はこの記事では解説しません。適宜ご自身でお調べください。

## （前提条件）Rollupの設定

前提条件として、今回は、Rollupでビルド・バンドルする場合の手順を解説いたします。
Rollupの設定は下記のとおりです（今回の解説に必要な最低限の構成にしています）。

“`rollup.config.js
import resolve from ‘rollup-plugin-node-re

jsonpとは

corsを回避するためにscriptタグを用いてajaxのようなことを実現する技術。

ブラウザ上でクロスドメインな通信には制限があり、いくつか制限をすり抜ける方法があり、それがJSONP

ただ、CORSの方が細かい制御ができて安全なのでそちらを使ったほうが良い

Unicode による国旗表

:::note info
国旗の表示はブラウザの対応次第です
:::

# 英二文字の国名コードを使った Unicode 国旗表

二文字の英大文字アルファベット（’A’〜’Z’）を、二つの Unicode （U+1F1E6 〜 U+1F1FF）に変換した、単純な 26×26 の表です。

## セル内がアルファベット順の表

| |A
B
C|D
E
F|G
H
I|J
K
L|M
N
O|P
Q
R|S
T
U|V
W
X|Y
Z
 |
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|A|??
??
??|??
??
??|??
??
??|??
??
??|??
??
??|??
??
??|??
??
??|??
??
??|??
??

オープンデータ Web API検索・生成サイト作りました

SPARQLと呼ばれるRDFデータ用のクエリを発行して検索できる Web API、SPARQLエンドポイントが現在多数公開されており、それをまとめた記事を以前 Qiita に投稿していました。

**利用可能なSPARQLエンドポイントリスト(2021年7月版)**
https://qiita.com/uedayou/items/9e4c6029a2cb6b76de9f

以前からこれらのAPIを検索できるサイトが欲しいなと思っていましたが、今回自分で作ってみました。

**Linked Data API Navi**
https://uedayou.net/ldapinavi/

[](https://uedayou.net/ldapinavi/)

この [**Linked Data API Navi**](https:/