JavaScript関連のことを調べてみた2023年01月06日

[本の紹介][JavaScript]Colaboratoryでやさしく学ぶJavaScript入門

# [Colaboratoryでやさしく学ぶJavaScript入門](https://book.mynavi.jp/ec/products/detail/id=128345)が目から鱗
ColaboratoryでJavaScriptが実行できるのはありがたい。
ある意味、CodePenより使いやすいのではないだろうか。
サンプルもキレイで内容もとても分かりやすかった。　
一読の価値があると思います。

[Colaboratoryのページ](https://colab.research.google.com/drive/1OzlbKiDHoO8P6nISgR7lVRsmAnwOvvxO?usp=sharing)

【Babylon.js】物理エンジンを使ってみた

`Kick soccer ball`ボタンを押すとサッカーボールが飛びます。

https://codesandbox.io/embed/divine-cherry-wiwgdz?fontsize=14&hidenavigation=1&theme=dark&view=preview

# はじめに

ARIの土井です。前回[【Babylon.js】Reactを使って3Dモデルを表示する](https://qiita.com/yuki_doi/private/3d15aa76567cdc9be1d5)という記事を書きました。今回は物理エンジンを使って実際にサッカーボールを蹴ってみたいと思います。

# 物理エンジンとは

物理エンジンを使用すると、Scene内に重力を発生させたり、メッシュに質量や反発係数、摩擦係数を設定したりすることができます。詳細は以下のドキュメントを参照してください。

https://doc.babylonjs.com/features/featuresDeepDive/physics/usingPhysicsEngine

# 手順

## 物理エンジンの有効

Elixirから覚えるJavaScript シリーズ

僕は普段はElixirを使ってます
必要になったのでJavaScriptの勉強をはじめました
題名はElixirから覚えるJavaScriptですが、逆もできるかも？

というシリーズを作りたいと思います

https://qiita.com/t-yamanashi/items/237377588d675829c2e9

https://qiita.com/t-yamanashi/items/850bb03afd811264ecd5

https://qiita.com/t-yamanashi/items/693319825f7c7b3cfb53

https://qiita.com/t-yamanashi/items/bc783e89b20d74c90f43

https://qiita.com/t-yamanashi/items/1cc9ebcffaa660900c87

https://qiita.com/t-yamanashi/items/2f778f445fd169b9cc76

Elixirから覚えるJavaScript 〜every〜

僕は普段はElixirを使ってます
必要になったのでJavaScriptの勉強をはじめました
題名はElixirから覚えるJavaScriptですが、逆もできるかも？

今日はeveryを見てみたいと思います

お題
[1, 2, 3, 4, 5]の内容がすべて0より大きかったらtrue

# Elixir

“`elixir
x = [1, 2, 3, 4, 5]
y = Enum.all?(x, fn x -> x > 0 end)
IO.inspect(x)
IO.inspect(y)
“`

“`elixir:実行結果
[1, 2, 3, 4, 5]
true
“`

# JavaScript

“`javascript
x = [1, 2, 3, 4, 5]
y = x.every((x) => x > 0)
console.log(x)
console.log(y)
“`

“`javascript:実行結果
[ 1, 2, 3, 4, 5 ]
true
“`

無事に同じ結果になりました

https://qi

VSCode で動く Teams Toolkit での F5 デバッグをカスタマイズしよう

早いもので 2023 年になりました。みなさまあけましておめでとうございます?

さて昨年 Teams Toolkit は、前提条件チェッカーとデバッグ設定のカスタマイズなど、デバッグ体験を向上させるいくつかの新機能を追加しました。v.4.1.0 以降の最新 Toolkit では、さらにデバッグ体験をカスタマイズできるようになりましたので今回それらを紹介していきたいと思います。

Teams Toolkit を初めてお使いになる方は、まずこちらのチュートリアルをご覧ください。
– [Beginners’ crash course to build apps for Teams using Teams Toolkit for Visual Studio Code]

【Firebase】TSyringeを使ってFirebase FunctionsにDIを導入した時のまとめ

# Firebase FunctionsにDIを導入しようと思ったきっかけ

最近、私がサーバーサイドを開発するとき、Kotlinを選択することが増えました。
以前、私はTypeScriptを使って、NestJSやExpressを駆使しながらアプリケーションを開発していました。
しかし、Android開発や、Kotlinの素晴らしさに触れたことで、KotlinとKtorフレームワークを使って開発することに喜びを感じるようになりました。

Ktorを使うとき、Koinライブラリを使ってDIを行います。クリーンアーキテクチャを意識しながら開発を進めていきます。このスタイルに慣れるにつれ、DIを使うことはコード管理のしやすさに繋がると、改めて思うようになりました。

サーバーサイドのプロジェクトでは全てKotlinとKtorを使って開発したいです。

ところが、Firebase FunctionsではNode.jsを使った開発が推奨されています。
Firebase CLIでも選択できるのは**JavaScript**と**TypeScript**だけです。

そのため、公式にKotlinが採

YubinBangoライブラリで住所を自動入力

# 住所の自動入力ライブラリ「YubinBango」

TypeScriptで作成された「YubinBango」ライブラリ（ajaxzip3の後継のもののようです）を使って、郵便番号を入力したら、その下にある住所入力欄に都道府県や市区町村の文字列を自動入力させます。
この記事では「郵便番号入力欄が1つ、住所の自動入力欄が2つVer.」を作ります。

この入力フォームはcssで見た目をいい感じにしています。レスポンシブ対応もなんとなくいい感じにしていますので、基本的には手順通りにHTML、CSS、JSを設置すると、見た目ごと設置可能と思います。

## 動作の様子

## 実際の動作サンプル（郵便番号を入力してみよう！）

Video.js完全マニュアル part8 〜Playerを操作する関数紹介〜

# はじめに
Video.js完全マニュアルとしてVideo.jsの解説をしていくシリーズのpart2です。
Video.jsの公式のガイドである[Video.js Guides](https://videojs.com/guides)を翻訳ツールを使いながら解説していきます。

これまではずっとPlayerを作成するために必要な初期化周りの設定や、初期化時に渡すオプションの紹介をしてきました。
今回は初期化してPlayer生成後の操作について一連の操作を紹介していきます

前回
[Video.js完全マニュアル part7 〜公式FAQ集〜](https://qiita.com/manzoku_bukuro/items/da806c380aa9989d904a)

part1から読む人は[こちら](https://qiita.com/manzoku_bukuro/items/10137f64810f0dc40543)

# この記事の対象者
– Video.jsを利用する人
– 動画プレイヤーのUI操作をしたい人
– 動画再生関連のサービスを作りたい人

# この記事の解説する章
[

JavaScriptで平仮名(ひらがな)を判定する

正規表現を使い、文字列が平仮名か否かを判定します。
以下のように判定できることを目指します。
“`javascript
regex = /*ここに何らかの正規表現*/;
regex.test(“あいうえお”); // -> true
regex.test(“あぁ”); // -> true
regex.test(“aiueo”); // -> false
regex.test(“あいueo”); // -> false
regex.text(“あい うえお”); // -> false
“`
3つの方法を紹介します。
1. **[Unicodeプロパティを使う](#1-unicodeプロパティを使う)**
1. **[Unicodeエスケープシーケンスを使う](#2-unicodeエスケープシーケンスを使う)**
1. **[平仮名を使う](#3-平仮名を使う)**

# 1. Unicodeプロパティを使う
これが最もスマートです。
現在では殆どの環境でUnicodeプロパティをサポートしているので、気にせず使えます。ええ時代や。
“`javascript

プロフェッショナルなReactプロジェクトの立ち上げ方(和訳)

### Professional React Development
1. [2022年に最も普及するReactの技術スタック](https://qiita.com/mwkiyo/items/70601c04142b12bc93f9)
1. [Screaming Architecture – Reactのディレクトリ構成を進化させる](https://qiita.com/mwkiyo/items/9549207680e71833a654)
1. **プロフェッショナルなReactプロジェクトの立ち上げ方**
1. [React開発者のためのGitワークフローとGitHubセットアップ](https://qiita.com/mwkiyo/items/9c6d1bd6df89e94f2a98)
* * *

([こちらの記事](https://dev.to/profydev/how-to-set-up-a-professional-react-project-including-screencast-180f)の和訳です)

新しいReactアプリを始めるとき、プロフェッショナルな方法でセ

2022年に最も普及するReactの技術スタック(和訳)

### Professional React Development
1. **2022年に最も普及するReactの技術スタック**
1. [Screaming Architecture – Reactのディレクトリ構成を進化させる](https://qiita.com/mwkiyo/items/9549207680e71833a654)
1. [プロフェッショナルなReactプロジェクトの立ち上げ方](https://qiita.com/mwkiyo/items/c81c5ba5c4f02fdd29ec)
1. [React開発者のためのGitワークフローとGitHubセットアップ](https://qiita.com/mwkiyo/items/9c6d1bd6df89e94f2a98)
* * *

([こちらの記事](https://dev.to/profydev/which-react-tech-stack-to-learn-in-2022-n84#styledcomponents-or-mui-as-most-popular-react-ui-library)の和訳です)

「配列破壊」の視点からJavaScriptの配列メソッドを完全まとめ

## はじめに

+ 元の配列：`arr`
+ return：`a`

## 一，破壊的なメソッド

#### 1、shift

– 操作：配列の**最初**の要素を削除する
– return：削除した要素

“`js
let arr = [1, 2, 3, 4, 5, 6];
let a = arr.shift();
console.log(a); // 1
console.log(arr); // [2,3,4,5,6]
“`

#### 2、unshift

– 操作：配列の**最初**に要素を追加する
– return：新しい配列の長さ

“`js
let arr = [1, 2, 3, 4, 5, 6];
let a = arr.unshift(0);
console.log(a); // 7
console.log(arr); // [0,1,2,3,4,5,6]
“`

#### 3、pop

– 操作：配列の**最後**の要素を削除する
– return：削除した要素

“`js
let arr = [1, 2, 3, 4, 5, 6];
let a =

keycloak-js Content Security Policyにはまった話

# はじめに

認証サーバーとして`keycloak`を使おうと思い、
`docker`でkeycloakを起動し、
アプリケーションを`Vite`で構築し、
「さあ認証だ！」というところで

Refused to frame ‘http://localhost:8080/’ because an ancestor violates the following Content Security Policy directive: “frame-ancestors ‘self'”.


に悩まされた話です。

# 開発環境構築

## keycloak docker

1. docker-compose.ymlに以下を記入

“`yaml:docker-compose.yml
v

【JavaScript】ふわっと画像を表示させる

前回より時間が少し空きましたが、
今回はJavaScriptでスクロールすると、
ふわっと画像が表示されるというアニメーションを作りました。

まず制作したもの↓

See the Pen
Untitled by ri-tama (@ri-tama

【Babylon.js】Reactを使って3Dモデルを表示する

こんな感じでサッカーボールを表示してみました。

https://codesandbox.io/embed/smoosh-silence-rj26ot?fontsize=14&hidenavigation=1&theme=dark&view=preview

# はじめに

ARIの土井です。前回[【Babylon.js】Playgroundで遊んでみよう](https://qiita.com/yuki_doi/items/ac201cac8220d613d819)という記事を書きました。今回はReactを使って実際にWebページに3Dモデルを表示してみたいと思います。
※ Reactの実行環境は、Web上で利用できる統合開発環境の[CodeSandbox](https://codesandbox.io/s/)を使用しました。

# 準備

まず、https://codesandbox.io/s/ にアクセスして`Satrt from a template`から`React`をクリックします。
![画像1.png](https://qiita-image-store.s3.ap-nor

ネストしたObjectをflatにする

参考にした記事
– [JavaScriptでネストされたオブジェクトをフラットにする関数](https://note.com/digiholic_life/n/n583c9356c502)
– [Flatten JavaScript objects into a single-depth Object](https://www.geeksforgeeks.org/flatten-javascript-objects-into-a-single-depth-object/)

## 結果１（自作 冗長）
~~~

export const makeFlatObject = (
preobj: Record,
parentProperty?: string
):Record => {
const initialObject = {};

const makeObject: Record = Object.entries(preobj).reduce(
(previ

Elixirから覚えるJavaScript　〜filter関数〜

僕は普段はElixirを使ってます
必要になったのでJavaScriptの勉強をはじめました
題名はElixirから覚えるJavaScriptですが、逆もできるかも？

今日はfilterを見てみたいと思います

お題
[1, 2, 3, 4, 5]の中から[3, 4, 5]を抽出

# Elixir

“`elixir
x = [1, 2, 3, 4, 5]
y = Enum.filter(x, fn x -> x > 2 end)
IO.inspect(x)
IO.inspect(y)
“`

“`elixir:実行結果
[1, 2, 3, 4, 5]
[3, 4, 5]
“`

# JavaScript

“`javascript
x = [1, 2, 3, 4, 5]
y = x.filter((x) => x > 2)
console.log(x)
console.log(y)
“`

“`javascript:実行結果
[ 1, 2, 3, 4, 5 ]
[ 3, 4, 5 ]
“`

無事に同じ結果になりました

https://qiita.com/t-

配列の重複した要素を取り除く（JavaScript)

JavaScriptで配列の重複した要素を取り除くサンプルコードです

“`JavaScript
const array1 = [10,10,40,20,20,30,50,40,70,60,90,70];
// 重複した値を取り除くSetオブジェクトを呼び出す
let array2 = new Set(array1);
// array2を配列に変換し、array3にする
array3 = Array.from(array2);
array3.forEach((data) => {
document.write(`

${data}

`);
});

“`

Setオブジェクトに引数としてarray1配列を指定し、Array.from関数で配列に変換します。

Yarnは2022年においてきた！！yarnをやめるまでの軌跡

みなさん、JavaScriptのパッケージマネージャーは何を使っていますか？

私は以前は仕事でも個人開発でもyarnをメインで使っていたのですが、2022年5月に転職してから仕事ではnpmを使うようになりました。

それでも個人開発はわざわざnpmに移行するほどでもないと思っていたのでyarnを使い続けていました。
しかし、2022年にyarnがらみのエラーに数回遭遇し、2022年末についにyarnを卒業しました。

ちなみに個人開発ではyarn v1とv2+を使っていましたが、主にv2+で色々ハマりました。

https://yarnpkg.com/

# dependabotが使えない
yarn v2+で[Zero-Installs](https://yarnpkg.com/features/zero-installs/#gatsby-focus-wrapper)を使っていたのでcacheもコミットしていたのですが、GitHubのdependabotがcacheを更新してくれないのでdependabotが使えなりました。

その時のツイート

https://twitter.c

Javascript 関係のツールまとめ(?)

# はじめに

最近趣味で少し ReactJS を触って時があるのですが、その際に Javascript 関係のツールがよくわからなかったのでざっとまとめてみた、というメモです。 もっと分かりやすくて正確な良い記事が他にも色々あると思いますが、自分用のメモということで。

# Javascript 関係のツールたち

– node.js … Javascript ランタイム。ブラウザから独立して動作するので、サーバーサイドや CLI ツールの実行などに使われていると思う、たぶん。
– nvm … node version manager, node.js のバージョン管理ツール。
– npm … A javascript package manager, Javascript のパッケージマネージャー
– npx … パッケージを実行するツール。npm と違うのはパッケージをローカルにインストールしなくてもパッケージを実行できること、らしい。 (参考記事: