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

【Alpine.js】Collapse Pluginでヌルっと出てくるドロップダウンが作れる

# CollapseはAlpine.jsのプラグインです
https://alpinejs.dev/plugins/collapse

# Collapseでできること
ヌルっと出てくるドロップダウンが作れる
※応用すればアコーディオンメニューも作れそう

# 導入方法
## CDN
HTMLファイルに張り付けるだけです。
ただし以下のようにAlpine.js本体のscriptの前に配置する必要があります。

“`html

“`
## n

web版空間オーディオを利用して仮想空間での位相と距離の調整方法

## はじめに

今回の記事ではagoraの空間オーディオ(spatial audio)がweb版で正式リリースされたので、そちらを使用したサンプルを作成していきます。

以前に投稿した[こちら](https://qiita.com/v-cube/items/457746af29bcb8dba854)の記事では、各ユーザー間の位置の距離に応じてボリュームを変更するサンプルを作成しています。
今回の記事では、こちらの制作物に空間オーディオを導入し、よりパワーアップさせます。

今回空間オーディオとして実装するパラメーターは以下の2点とします。
1, 位相
→自分よりも左のpisitionにいるユーザーの声は左から、右にいるユーザーの声は右から聴こえる
2, 距離
→自他のposition間の距離が遠くなると声が小さくなる

2に関しては、前記事の制作物の段階では setVolume APIを用いて音量を調整していましたが、これを空間オーディオ要素の一種である、距離を指定するパラメーターを使用した実装に置き換えていきます。

完成物は以下になります。
[github](https://gi

エンジニアになって１年、振り返ってみる

# 初めに
未経験からフロントエンド・エンジニアに転職し１年が経ちました。

# 前職
大学を出た後、
– 塾の講師　３年
– 証券会社　１年
経験しました。

基本的にエンジニアとは関係のない仕事をやっていました。
webデザインの学校に半年間、通った後に現在の会社に勤めることができました。

# １カ月目～３カ月目
この時期はとにかく仕事を覚えるのに精一杯でした。
個人制作の時には、必要がなかった知識などがたくさんあり慣れるのに必死でした。
（広告の計測タグがこんなにもたくさんあることを知らなかったです。）
２か月目に納品したデータのレイアウトが崩れる事故を起こしてしまい、めちゃくちゃ凹みました。。。

# ３か月目～６カ月
仕事にも慣れてきて、余裕が出てきました。この時から、自己学習として、React, Vue.jsのフレームワークをはじめました。
また、自分から「こんなアニメーションを付けてみたんですが、どうですか？かっこよくないですか？」と提案することが多くなりました。（残念ながら、提案23個中、通ったのは１案だけでしたが）

# ６カ月目～９カ月目
初めて、社内の注力案件を

Mapbox GL JSを使って地図に多角形を描き、多角形内の人口データを持つポリゴンを取得し、表示する

# 概要説明
今回は、[Mapbox GL JS](https://docs.mapbox.com/jp/mapbox-gl-js/overview/)を使って地図にフリーハンドの多角形を描きサーバーと連携、多角形内の町丁目ポリゴンを取得・表示し、町丁目ポリゴンが持つ人口データを出力してみました。
まず、この記事の関連記事を紹介します。
Mapbox GL JSを使用して地図の表示や町丁目ポリゴンの表示に興味ある方はこちら、

https://qiita.com/Book-Ma/items/2cfc5bc68606bd6e2366

本記事と同じ内容ですが、Google Mapで実現してみたい方はこちらの記事を読んでいただけると理解しやすいかと思います。

https://qiita.com/y-mto/items/5c9e1a18b9442d434375

# ソース構成
最終的なソース構成は以下になります。
“`
.
└─サーバサイド
└─index.php
.
└─フロントサイド
├── index.html
└── index.js
“`

# 完成イメー

mutable immutableとはなんぞや

## 補足
内容が間違っていれば教えていただけると嬉しいです(書き直しました)?‍♂️

## immutable とは
オブジェクトが生成された後は状態を変更できないオブジェクト
文字列や数値が当てはまる

“`javascript=
var str = ‘string’
str = str + ‘string’
“`
1行目のstrと2行目のstrは指しているメモリブロックが違う
2行目のstrが1行目のstrのメモリブロックを指すことはできない(=状態を変更できない?)

## mutable とは
オベジェクトが生成された後に状態を変更することができるオブジェクト
配列やオブジェクトが当てはまる

“`javascript=
var array = [8, 8, 8]
var array_copy = array
array_copy.push(0)
// array -> [8, 8, 8, 0]
// array_copy -> [8, 8, 8, 0]
“`

arrayとarray_copyは同じメモリブロックを指している(=状態を変更できる?)
arrayに破

Vonage API + React(SPA) + Expressで電話番号認証とSMS送信アプリを作る

# 概要
本記事では、VonageAPIの**Verify API**と**SMS API**を用いて、電話番号認証をして認証済み電話番号に対してSMSでメッセージを送信するWebアプリケーションを作成するハンズオン記事になっています。

MFA（多要素認証）は今やアプリケーションのセキュリティを向上させる上で重要な役割を担っています。各個人でMFAのための認証基盤を作成するのはコスト的にも技術的にも大変だと思います。VoyageAPIを使用することで認証方法の1つである電話番号認証が簡単に実装できることがわかりました。
本記事では、まずVonageが提供している Verify APIを用いて SPAによる電話番号認証を作成していきます。

https://developer.vonage.com/verify/overview

（おまけ） セクションで、この電話番号認証をより堅牢にするために **Number Insight API** を用いて電話番号の有効性チェックの導入も行います。

https://developer.vonage.com/number-insight/ov

今年のうちにwebpackについてハンズオンも交えて理解する

# webpackとは何か
JavaScript の モジュールバンドラです。
モジュールバンドラとは、
複数のファイルを１つにまとめて出力してくれるツールのことです。
（複数ファイルをまとめることを「バンドル」と呼びます。）

## なぜ使うのか

* たくさんのjsファイルを１ページで読み込もうとすると、リクエストがその数だけ発生し、時間がかかってしまう→１つのファイルにまとめることで、リクエストも１回だけできる

* 外部モジュールを利用するときにリクエスト数を減らせる

* モジュールに切り分けた開発可能→開発効率アップ

* 依存関係を解決してくれる

“`



“`
上記のような依存関係が増えれば増えるほど依存関係がわからなくなってしまいます。

→webpac

Nuxt3で.envを使用する方法

# はじめに

Nuxt3で.envを使う方法がいろいろな記事に書いてあり、
どれが本当に動くのか分からなくなったため、メモとして残します。

# Nuxt3導入

ここでは省略します。

# .envの反映方法

### 1. .envをルートディレクトリに作成します。

ルートディレクトリとは`package.json`とかがあるディレクトリですね

“`env:.env
TEST=’これはテストです。’
“`

### 2. nuxt.config.tsを修正

`runtimeConfig`を使用する。

“`typescript
export default defineNuxtConfig({
runtimeConfig: {
public: {
test: process.env.TEST
}
}
})
“`

### 3. 呼び出す。

`useRuntimeConfig`を使用すると、`nuxt.config.ts`で設定した変数を呼び出すことができます。

“`vue:index.vue