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

【完走賞ゲット-10】gamecontroller.js を使って DualShock 4 を JavaScript で扱う

## はじめに
こちらは、[完走賞ゲットのため小ネタを毎日投稿しようとチャレンジする Advent Calendar 2022](https://qiita.com/advent-calendar/2022/youtoy) の 10日目の記事です。

12月に試していくつか記事を書いてみたりもした「[WebHID](https://developer.mozilla.org/ja/docs/Web/API/WebHID_API)」関連の調べものをしていて、そこからたどり着いた [Gamepad API](https://developer.mozilla.org/ja/docs/Web/API/Gamepad_API/Using_the_Gamepad_API)関連のライブラリ「[gamecontroller.js](https://github.com/alvaromontoro/gamecontroller.js/)」に関する話です。

これを、以下の記事でも扱っていた「DualShock 4」で試します。

●【完走賞ゲット-6】「WebHID DualShock 4 Demo」

Pleasanterのサイト情報を一括更新する

本記事は、[OSSのノーコード・ローコード開発ツール「プリザンター」 Advent Calendar 2022](https://qiita.com/advent-calendar/2022/pleasanter) の10日目の記事です。

# 前置き
[こちら](https://qiita.com/m-isik/items/3f558fd8e0e0298dee3e)の記事で、サイト情報を再帰的に取得する方法を投稿しています。今回はこの仕組みを応用して、フォルダ配下のサイト設定を一括更新する仕組みを作ります。

# 作成するサイト
サイト設定の更新といっても、設定内容は山ほどあるので、今回は一覧画面・編集画面のガイドを一括更新する仕組みを作ります。
サイトID欄に一括更新したいサイト（フォルダ）のIDを指定、説明欄・一覧ガイド／編集ガイドに更新し

JavaScriptのsortメソッドを使って、永遠にただ1人のボカロPの曲をおすすめし続けるサイトを作った

この記事は、[クソアプリ Advent Calendar 2022](https://qiita.com/advent-calendar/2022/kuso-app)のシリーズ3の10日目の記事です。

僕、この前、コロナにかかったんですよ、（唐突）そして現在絶賛療養中でして、することと言ったらQiitaとTwitterとニコ動とにらめっこするくらいしかなく、暇でして。
そこで、アドベントカレンダーのネタなにかないかと考えていたら、コロナになる前に書いてたとあるコードがあったので、それを題材として、JavaScriptのsortメソッドについて勉強して書きなおして投稿しようかと思います。

まだまだ初心者の初心者ですので、拙い部分、色々あるかと思いますが、というか拙い部分だらけだと思いますが、優しい目で見ていただけるとありがたいです。いいねとかくださると今後の勉強の励みになります。

あと，なんか間違いがあったらコメントで指摘していただけるとありがたいです．

あとあと，布団の中でスマホで書いた記事を，コード修正の時にWindowsで編集して…とかやってるんで，IM

[Day10] 関数の高度な機能 part2

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

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

## 6.6 関数オブジェクト, NFE
### 知らない単語
– レキシカル環境とは
– 環境レコードと、外側のレキシカル環境への参照がセットされたオブジェクトの事

### 学んだこと
関数は型ではなくオブジェクト
オブジェクトの中でメソッドも関数も持てる

– nameプロパティ

関数名は “name” プロパティとしてアクセス可能
“`javascript
function sayHi() {
alert(“Hi”);
}
alert(say

【J】「JavaScriptとJavaは別物」は全人類の共通認識ではない

全人類の認識になれと100億年前から言ってる

## 正しい認識

– JavaもJavaScriptも「プログラミング言語の名前」
– この2つは**別のプログラミング言語**
– **JavaScriptは「JavaのScript」ではない**

## Javaとは？

– 汎用プログラミング言語。
– “Javaが動く仮想マシン”で動作する仕組みなのでいろんな機械で共通のプログラムを動かせる
– 例えば、Windows実行ファイルの.exeはMacでは基本的に動かないが、JavaのプログラムはWindowsで動くJavaの仮想マシン・Macで動くJavaの仮想マシンの両方で動くのでWindowsでもMacでも動くと言える
– なんならカーナビとかでも動いた覚えがあるぞ？

## JavaScriptとは？

– webサイトでよく動いてるプログラミング言語。
– ブラウザ上で処理されるのでまあ「いろんな機械で共通のプログラムを動かせる」という共通点があるかもしれない。

## なんでJavaScriptに”Java”がついているの？

**Javaの勢いに乗じよう

【Rails】現在地を取得し、緯度経度をもとに現在地から近い店舗を検索

こんにちは

今回は、Googlemapを用い、
①現在地の緯度経度を取得し、
②上記をもとに、現在地からテーブルに保存済みの店舗までの距離を計算し、
③距離が近い順番に店舗を表示する

という機能を実装していこうと思います

“`Ruby:実装環境
Ruby 3.0.4
Rails 6.1.5
Bootstrap　4.3
“`

⓪まずは下準備

・APIを用いてgooglemapが投稿できる状態にしておく

Googleマップの投稿機能の作成　➤　[参考記事](https://qiita.com/MandoNarin/items/aa91ffae373a8cfc85d2)
（※後程用いるので、geolocation API も有効可しておくとよい）

・jQueryを導入しておく
※今回はajaxモジュールを用いているので、jQueryは通常使われるslimではなく、uncompressedを用いてください
slimやuncompressedについてはこちら　➤　[参考記事](https://netrandum.com/jquery-slim-build/1

初めてchromeの拡張機能を作ってみた話

光栄なことにAdvent Calenderをやるから書かないかと誘っていただいたはいいものの、ネタに困っていた新卒が初めてchrome拡張機能を作る記事です
内容はとても薄いです

# このchrome拡張機能をつくってみた背景

昔はよく顔文字に使われていたキリル文字ですが、最近はホモグラフ攻撃[^1]に使用されているそうです(ﾟДﾟ)
上記の画像はまったく同じURLに見えますが片方にはキリル文字の”і”が含まれています
これを肉眼で見分けられる人はいないと思います

そしてそのようなサイトがGoogleの広告枠を購入することで検索結果の上位に表示されてしまいクリックしてしまうということです
詳しくはこちらの記事を参考にしてください [link](https://gigazine.net/news/20221101-google-

node js で JWT をエンコード・デコードしてみる

# コード例

“`js
const jwt = require(‘jsonwebtoken’)

const payload = {
id: 333,
name: “Alice”,
email: “example@example.com”
}

const token = jwt.sign(payload,’secret_signature’)
console.log(token)

var decoded = jwt.verify(token, ‘secret_signature’);
console.log(decoded)
“`

# 結果例

実行するたびにトークンは変わる(ドットで区切られた最後のゾーンが変わる)がデコード内容は同一になる。
ただしiatの値も毎回違う。

“`
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MzMzLCJuYW1lIjoiQWxpY2UiLCJlbWFpbCI6ImV4YW1wbGVAZXhhbXBsZS5jb20iLCJpYXQiOjE2NzA1OTk2NjB9.uC438ol

全国の人流オープンデータをLeafletで可視化してみる

# オープンデータ

[全国の人流オープンデータ](https://www.geospatial.jp/ckan/dataset/mlit-1km-fromto/resource/1ee9aa41-2980-4801-a218-08acba4737d4)をWebページで可視化する．2019年，2020年，2021年に調査された「1kmメッシュ別の滞在人口データ」と「市区町村単位発生別の滞在人口データ」が提供されている．**滞在人口** とは1ヶ月における1日あたりの人口の平均値を表している．愛知県の2021年の1月～12月のデータはCSV形式のファイルとして公開されている．

– [2021年1月 愛知県 monthly_mdp_mesh1km_1.csv](https://mukai-lab.info/classes/graduation_preperation_1/jinryuu/aichi_2021/monthly_mdp_mesh1km_1.csv)
– [2021年2月 愛知県 monthly_mdp_mesh1km_2.csv](https://mukai-lab.info

【完走賞ゲット-9】Awesome WebHID というページを見かけて気になった話

## はじめに
こちらは、[完走賞ゲットのため小ネタを毎日投稿しようとチャレンジする Advent Calendar 2022](https://qiita.com/advent-calendar/2022/youtoy) の 9日目の記事です。

この 12月のアドベントカレンダー用に公開した記事でも何度か登場している HID に関する話です。その中でも、ブラウザで HID を扱う「WebHID」が絡む話になります。

## 今回の内容
WebHID周りの調べものをしていたところ、以下の「Awesome WebHID」というページを見かけました。

●robatwilliams/awesome-webhid: Curated list of resources relating to the WebHID (Human Interface Device) API
　https://github.com/robatwilliams/awesome-webhid
![Awesome WebHID](https://qiita-image-store.s3.ap-northeast-1.a

カルーセルUIライブラリの有力な選択肢 Embla Carousel

ラクスパートナーズのWebエンジニアの安井です。
普段は主にフロントエンドの開発を行なっています。

この記事は[ラクス Advent Calendar 2022](https://qiita.com/advent-calendar/2022/rakus)の9日目です。
Qiita初投稿 & 初Advent Calenderです。よろしくお願いします。

過去に後輩エンジニアからカルーセルUIで用いるライブラリの選定について聞かれたことがあったのですが、自分のこれまで導入を検討したライブラリはネックに感じる部分もあり、なかなかすっきりとした提案ができなかったことがありました。

そんな思いを抱えていたところ「これならおすすめできる！」と感じたライブラリを見つけたのでご紹介したいと思います。

## 忙しい人のために先に結論
[Embla Carousel](https://www.embla-carousel.com/) をおすすめしたい

## カルーセルUIライブラリの選定の観点
どのライブラリを採用するかの決め手はプロジェクトによってさまざまだと思いますが、自分はこれまで主に次の

Alpine.jsで非表示の要素（モーダルなど）が読み込み時に一瞬表示されてしまう時の対処法

# この記事で解決できること
### 例えばこういう場面
x-dataで{ open:false }をデフォルトで設定しといて、ボタンをクリックしたら{ open: true }にして表示させよう！
“`html

やっほー

“`

↑ボタンクリックしたら「やっほー」が表示されるコード

上手くいってそうですがこのコードだとブラウザで読み込み時に一瞬だけ「やっほー」が表示されてしまいます。

::: note
これは“Blip”と呼ばれる現象です。
HTMLがAlpine.jsより先に読み込まれることにより、x-showの要素が表示されてしまう現象です。
:::

### 要はこういうこと
![image.png](https://qiita-image-store.s3.ap-northeast-1.a

マウスでクリックしてる間だけ切り替わるおみくじ

⇒動作ページはこちら

もっと良い書き方、ゲーム的に面白くなるやり方があったら教えてくださいm(_ _)m

“`html