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

if文でもin演算子が使える JavaScript

if文でもin演算子が使用できます。
プロパティがオブジェクトにある場合にtrueを返します。

“`javascript
if (‘property’ in obj) {
// 処理
}
“`

例

“`javascript
const card = { type: ‘mtg’, color: ‘white’ };
console.log(‘type’ in card); // 出力:true

delete card.color;
if (‘color’ in card === false) {
card.color = ‘black’;
}
console.log(card.color); // 出力:black
“`

PlantUMLからmermeidへの変換器を作ってみた

## モチベーション
最近GitHubが対応したことで一気に熱を帯びているmermeidだが、
PlantUMLからmermeidへの変換器が意外と落ちていなかった。
そこで、今回はPlantUMLからmermeidへの変換器を自作してみることにした。
（こちらの内容は[自分のブログ](https://prostep.link/articles/txfflju6_q)でも公開していますのでぜひご覧下さい。変換器はこちらでリリース予定です。）

## 言葉の説明

### PlantUML
コードベースで作画ができるツール。古くから使われていて慣れ親しんでいる人も多いはず。
ER図、シーケンス図など, 様々な図の作成ができる。
[PlantUML](https://plantuml.com/ja/)

### mermeid
mermeidはpumlと同様、テキストベースで作図ができるライブラリである。
表現力はPlantUMLに比べ少し劣る印象ではあるものの、
javascript製のライブラリであるため、PlantUMLに比べ環境構築が容易で、web系のツールと親和性も良さそう。
（

Azure Functions – 共通コード管理（JavaScript）

# フォルダー構成

[フォルダー構成](https://docs.microsoft.com/ja-jp/azure/azure-functions/functions-reference-node?tabs=v2#folder-structure)を参考に以下構成で実施

“`
FunctionsProject
│
├─ HttpTrigger1/
│ ├─ function.json
│ ├─ index.js
│ └─ sample.dat
│
├─ SharedCode/
│ └─ util.js
│
├─ node_modules/
├─ .funcignore
├─ .gitignore
├─ host.json
├─ local.settings.json
├─ package.json
└─ package-lock.json
“`

# 共通コードの実装

“`javascript:SharedCode/util.js
module.exports = {
testFuncti

【Google Apps Script】FileIteratorとFolderIteratorをiterableにして使いやすくする

# 結論
最初に結論を言います。

これを

“`js
const getGoogleFiles = () => {
const files = DriveApp.getFiles();

const result = [];
while (files.hasNext()) {
const file = files.next();
const fileName = file.getName().toLowerCase();
if (fileName.includes(‘google’)) result.push(file.getUrl());
}

Logger.log(result);
};

“`

wrapper関数を1つ噛ませてこう書く方が好きという話です。

“`js
const getGoogleFiles = () => {
const result = gasUtils.toIterable(
DriveApp.getFiles(),
{
mapFn: (file) => file.get

three.jsのGLTFLoader.jsのimportに失敗したときの解決備忘録

# 概要

2022年2月22日時点の現象

https://threejs.org/

こちらの[Download](https://github.com/mrdoob/three.js/archive/master.zip)からZipダウンロードしたファイル群を下のように展開

ディレクトリ構造

“`
root
└ index.html
└ index.js
└ three.js-master/three.js-master
└ build/three.module.js
└ examples/jsm/loaders/GLTFLoader.js
“`

GLTFLoader.jsをimport

“`js:index.js
import * as THREE from ‘./three.js-master/three.js-master/build/three.module.js’
import {GLTFLoader} from ‘./three.js-master/three.js-master/examples/jsm/loaders/GLTFLoader.j

PNG(8ビットカラーパレット形式)を使ってJavaScriptでパレットアニメーションさせてみた

# はじめに

昔、絵本型のカートリッジの幼児向けゲームを作るお仕事をしているときに、パレットを操作してアニメーションなんかをさせてました。
主に点滅させたり、フェードアウトさせたりなんですが・・・
それをWebでできないかなー？あわよくばゲームで使えないかなー？というのがきっかけです。

とりあえず動画のようにパレットの操作ができたので書いておきます。

# やってることの概要
やってることはそんなに難しくありませんが、ちょっと面倒です。

1. PNGをバイナリとして読み込み保持します。
2

JavaScript の関数即時呼び出しでは関数文を関数式と解釈させる

# 勘違いしていたこと

JavaScript で関数を即時呼び出しするときに、以下の (A) だと SyntaxError になるので (B) のように括弧で囲みます。

“`javascript
// (A) SyntaxError: Function statements require a function name
function() {
…
}()

// (B) OK
(function() {
…
})()
“`

この「構文エラーになるので括弧で囲む」の理由を勘違いしていました。

# 関数文を関数式にするために括弧で囲む

結合順を制御するために括弧で囲むのだと思い込んでいたのですが、正しくは、関数文（function declaration / function statement）ではなく関数式（function expression）だと解釈させるためでした。

:::note alert
誤った理解
function(){…}() は function() と {…}() だと解釈されるため SyntaxError にな

【JavaScript関数ドリル】Lodash関数の実装【勉強用】_.slice関数

#【JavaScript関数ドリル】初級編の_.lastIndexOf関数の実装のアウトプット

“`javascript:_.lastIndexOf関数の挙動
_.lastIndexOf([1, 2, 1, 2], 2);
// => 3

// Search from the `fromIndex`.
_.lastIndexOf([1, 2, 1, 2], 2, 2);
// => 1
“`
配列から第2引数の値を末尾から検索し、最初の値のインデックス番号を返す。
第3引数がある場合は、第3引数の値のインデックス番号の位置から先頭に向かって検索する。
##_.lastIndexOf関数の課題内容

##_.lastIndexOf関数に取り組む前の状態
– 配列をarray.length-1からデクリメントし、第2引数と一致するもののインデックス番号を返せばよさそうだ

##_.lastIndexOf関数に取り組んだ後の状態
– 初めて解答とほぼ同じコードを実装できた
– 一致するものがなければ-1を返す

Tailwind CSSを半年使い込んで分かった便利な点 + 最新動向

## 概要

– Tailwind CSSを半年使い込んで分かった便利な点/注意点を説明する
– 最新v3.0のアップデート内容を紹介する

## はじめに

本記事では非常に便利なCSSフレームワークであるTailwind CSSについて説明します。

https://tailwindcss.com/

筆者はフロントエンドエンジニアとして仕事/趣味でこの半年いくつかのサービスやツールを実装しましたが、そのいずれでもTailwind CSSを利用しました。その中では素のCSSを書くことはほとんどありませんでした。例えば最近リリースされたDockpit liteというツールでもTailwind CSSをフル活用しています。

https://chrome.google.com/webstore/detail/dockpit-lite/mjbgnnaedaplnoahfejcifokefbhmalg

以下ではこうした経験の中で見えてきたTailwind CSSの特徴、便利なポイント、注意点をご紹介していきます。

また最後に最新のv3.0のアップデート内容を紹介します。

## Tai

jsで指定した割合で・確率・重み付けしたうえで抽選する

# コード
“`
const array = [];
const patterns = {
“1st”: 10,
“2nd”: 30,
“3rd”: 60,
};
for (var i = 0; i < 10000; i++) { const rand = Math.floor(Math.random() * 100); let result = ""; let rate = 0; for (const name in patterns) { rate += patterns[name]; if (rand <= rate) { result = name; break; } } array.push(result); } for (const name in patterns) { console.log(name, array.filter((n) => n === name).length);
}
“`

#　console.log 例
“`
> 1st 1095
> 2nd 3060

光一剛判定ゲーム作った #obniz

#KANZAI BOYAでミスるヲタク

光一剛判定機作りました。判定機というかほぼゲーム。光一氏歌唱なら右スイッチ→赤点灯、剛氏歌唱なら左スイッチ→青点灯、2人ならただ押す→赤青点灯。曲選間違えてむずくなった。手元に必死感出てる。量産して図書委員同士でやったらおもろいと思う。#KinKi #図書委員 #obniz #iotlt #protoout pic.twitter.com/4PUOxBgTzd

— ぜらちん (@kk_puruzera) February 4, 2022

#何これ
KinKiKidsの曲を聞きながら、
「今歌っているのは光一か、剛か」
を判断してLEDを光らせるゲームです。
図書委員（KinKiKidsファンのこと）ならば、歌割を完璧に聞き分けたいですよね。（諸説あり）
心の中で「今のは光一、今のは剛、今のは光一上ハモ剛メロディー」
と判定してニチャニチャしてもいいですが、せっかくならと思い光らせてゲームっぽくしてみました。
楽しいです。

#作り方
複数用意して図書委員同士で遊ぶとなお楽しいと思うので作り方を載せておきます。
簡単ですのでぜひ。

##(1)必要なものをそろえる
以下のリンク先はすべて秋月電子通商の商品ページになっています。
・[obniz](https://akizukidenshi.com/catalog/g/gM-14930/)
・[LED赤](https://akizukidenshi.com/

onclick属性で困った件

# onclick属性で困った件
以前、INPUTタグの**onclick**属性に指定したスクリプトが動かなくて原因をつかむまでに少し時間がかかったので、その時の備忘録です。

## 概要
下記のHTML/JavaScriptのようにSubmitされる前に**onclick**で何かしら処理を行いたい場合、function名を属性名と同じ**onclick**にしていると、正常に動作しません。

“`onclick_test_failure.html

入力欄

Chrome デベロッパーツール 徹底入門【動画一覧】プログラミング初学者 / Webデザイナー向け

# Chromeデベロッパーツール【ほとんどの機能を解説】

もともと動画をYoutubeにアップしてたのですが、見つけにくいと話があったので、
一覧の記事を用意することにしました。

**今後も講義動画増えたら、こちらを更新していきます**

:::note info
ChromeのコアChromiumは「Microsoft Edge」も採用してるため、
Edgeブラウザでも同じデベロッパーツールを使用可能です！
:::

### 自己紹介
ジーズアカデミー学校長（デジタルハリウッドでも教鞭をとる）山崎と申します。
[ジーズアカデミー](https://gsacademy.jp/mentor/)は開校6年目のデジタルハリウッドが運営する「起業家エンジニア養成スクール（卒業生が6年で69社起業し総資金調達額80億5,620万円と卒業生が頑張っている学校）」です。
今回、私の授業（初級者向け）でのサポート動画でYoutube配信したものをまとめました。
全国のプログラミング初学者・初級者の皆さんの底上げになればと思い公開させていただきます。

—–

## ◆「Chrome

『Nuxt.jsを使ってTodoリストを作ってみる』をやってみる

## はじめに

– タイトル通り[こちら](https://www.boel.co.jp/tips/vol107/)のチュートリアルをやってみる。というやつです。
– チュートリアルをやっていて『これ、直感に反するな..』とか、『なにそれ？どういう意味??』みたいに感じたところを補完していきます。
– 加えて、SPAとしてGithub Pagesにデプロイ、一部リファクタリングも行っています。
– とりあえず、nuxtを使ってtodoアプリを作りたい人、チュートリアルをこれからやるという人、チュートリアル中に頭がごちゃごちゃしてしまった人、同チュートリアルが終了済みでデプロイもしてみたいという人に参照してもらえるとうれしいです。

## 環境

– ubuntu

## node.jsのインストール

– ここは解説がされていませんでした。
– 最新安定板を入れるには次の記事がいまだに使えます。https://qiita.com/seibe/items/36cef7df85fe2cefa3ea
– LTS版が準備できました

“`
$ node -v
v16.14.0
“

【PlayCanvas】Meta Questのブラウザで動くWebXRのシーンを作成してみる（準備〜実機で確認まで）

### PlayCanvasでMeta Questのブラウザで動くVRのシーンを作ってみよう
WebGLベースのゲームエンジンPlayCanvasで[WebXR Device API](https://developer.mozilla.org/ja/docs/Web/API/WebXR_Device_API)を利用したVRのシーンを作る方法を紹介します。今回作るプロジェクトが動作する端末は2022年2月22日現在はAndroidのスマートフォンでの3DoFおよびQuestブラウザ / Steam VR上での6DoFの動作を確認しています。

### 完成シーン

この記事で作成プロジェクトはこちらからアクセスできます。
※WebXR Device APIに対応していない場合は利用できません。
https://playcanv.as/p/jDg3BAic/

※PCで確認する場合にはChromeにヘッドマウントディスプレイのエミュレーターの[拡張機能](https://qiita.com/yushimatenjin/items/924d7ef515b1065487d4)を入れてご確

JavaSprictのreduceについて

# JavaSprictのreduceについて

## reduceについて
`reduce()`メソッドは、配列のそれぞれの要素に対して、順番通りに、ユーザーが提供した「縮小」コールバック関数(ある関数を呼び出す時に、引数に指定する別の関数のこと)を呼び出しました。その際、直前の要素における計算結果の返り値を渡します。配列の全ての要素に対して縮小関数を実行した結果が単一の値が最終結果になります。

## reduce()メソッドの基本的な使い方

reduceメソッドの引数は主に二つあります。一つはコールバック関数、二つ目は初期値になります。コールバック関数の役割は、配列に格納されている要素に対して適用する処理を定義します。初期値はコールバック関数の初回呼び出し時に設定する値です。

コールバックの初回実行時には「直前の計算の返り値」は存在しません。初期値が与えられた場合は、代わりに使用されることがあります。そうでない場合は、配列の要素0が初期値として使用され、次の要素（０の位置ではなく1の位置）から反復処理が開始されます。

“`js
const foods = [1, 2,

TinyMCE5で画像にクラス付与、親要素(figureタグなど)をつける方法

# デモ

See the Pen
Wrap img by figure tag by tinyMCE 5 by qwe001 (@qwe001)
on CodePen.

React + TypeScript: Recoil公式チュートリアルのTodoリストをつくる 04 ー 状態を直接exportしないようにする

* 「**[React + TypeScript: Recoil公式チュートリアルのTodoリストをつくる 01 ー atomを使った項目操作](https://qiita.com/FumioNonaka/items/3ed6b562a20f6d4abb2b)**」
* 「**[React + TypeScript: Recoil公式チュートリアルのTodoリストをつくる 02 ー selectorによるフィルタリングと集計](https://qiita.com/FumioNonaka/items/d1bf46eb5437813f10e1)**」
* 「**[React + TypeScript: Recoil公式チュートリアルのTodoリストをつくる 03 ー 構成とロジックを整える](https://qiita.com/FumioNonaka/items/dd0c988bae47ab82e012)**」

前回は、Recoilの状態をコンポーネントから直に書き替えないようにしました。運用としては、これでもよいかもしれません。けれど、あえてRecoilの設定のフック(たとえば`us

塊を生成するVueコンポーネント

[Blobsアプリ](https://blobs.app/)で生成される塊をVue3コンポーネントとして使えるようにしました。

—
# Vueバージョン
+ Vue3

# インストール
npmで[塊生成パッケージ](https://github.com/lokesh-coder/blobshape)をインストールします。
`npm i blobshape`

# コード
“`html

“`
+ 色を付ける場合はcssのcolorプロパティで指定してください。
+ 幅と高さはi-blobsの親要素に従います。
+ sizeは指定しなくても良いです(任意プロパティ)

—

“`html