JavaScript関連のことを調べてみた2021年09月17日

Firebase V9におけるfirebase.apps.lengthの書き方

はじめに

初投稿になります。

自身の備忘録として、また、同症状を抱えている人の手助けになればと思い、ここに記します。

初回は「firebase.apps.length」にまつわるお話です。

(Firebase JavaScript SDK　V9.0.2)

解決策

“`ts:fb.ts
import { getApps } from ‘firebase/app’ // import 要

getApps().length

//使用例(before -> after)

//before: Firebase V8
!firebase.apps.length
//もしくは
firebase.apps.length === 0

//after: Firebase V9
!getApps().length
//もしくは
getApps().length === 0
“`

原因

FirebaseのV9へのバージョンアップに伴う破壊的変更が原因でした。

2021/8/25以降にアップデートorインストールした方は注意です

【技術書まとめ】ハンズオンJavaScript

「長い旅にはカバンより歌のほうがうれしいものだよ」

— トーベ・ヤンソン：『さびしがりやのクニット』

# 読んだまとめ

JSの全体像が見えた気がする。ハンズオンで実際にコードを書くので頭にも入りやすかった。ただ分厚いので時間はかかった。

# 1章 学び始める前に

JavaScriptの基礎的な説明

# 2章 データを学ぶ

JavaScriptの基礎的な説明

# 3章 処理を学ぶ

– アルゴリズムとは「何らかの解を得るための手順」のこと。
– 式は文の一種で値を返すが、文は必ずしも値を返さない
– `let pi = 3.14`
– 文
– ブロック`{}`
– 変数や定数のスコープができる
– そのブロックのみで有効となる

# 4章 オブジェクトを学ぶ

– JSのオブジェクトは単なるキーバリューのペアではなくメソッドも定義できる

# 5章 モジュールを学ぶ

– `true.toString()`はプリミティブなのになぜできるのか
– 対応するオブジェクトに自動変換されるから
– ボッ

【React】コンポーネントのメモ化で怒られる / ESLint: Component definition is missing display name(react/display-name)

# はじめに
コンポーネントのメモ化を試みたところESLintで怒られた、のでその時の対処法。
[メモ化](https://qiita.com/tkmd35/items/065b0ec0d187723ffe14)

“`ts
memo(コンポーネント);
“`

「コンポーネントの定義に表示名がない」と言われている

“`
ESLint: Component definition is missing display name(react/display-name)
“`

開発環境でのデバッグ時に、複数のコンポーネントが存在する場合エラーメッセージからのデバッグが難しくなってしまう。
ということがあってこのように怒られるらしい。

https://stackoverflow.com/questions/41581130/what-is-react-component-displayname-is-used-for

# サンプルコード
怒られる

“`ts
// ESLint: Component definition is missing display name(re

Vueのタグが見えないようにローディング画面を付ける

Vueの規模が大きくなってくると、Vueのロードが完了するまでの間、{{ xxxx }}のようなタグが目立ってくるようになります。
Vueのコンポーネントを使えばうまく回避できるのかもしれませんが、Vueインスタンスと双方向データバインディングだけで満足している私にとっては、少々悩ましいです。
そこで、VueやJavascriptに頼らず、CSSだけでVueのロード前の画面をかぶせるローディング中画面を作ろうかなあと思います。

実際のローディング画面を見たい場合は、以下のWebページを開くと、一瞬だけローディング画面が見れます。

Webページ
　https://poruruba.github.io/utilities/

（参考）GitHub
　https://github.com/poruruba/utilities

#やってること

Flexパネルを画面全体で覆って、CSSアニメーションを表示させ、Vueのロードが完了したら、Flexパネルをフェードアウトさせる、です。

* 画面全体を覆うFlexパネルの定義
* ロード完了したらフェードアウトさせる処理
* フェードアウト

ぼくがかんがえたさいきょうの”定員付きフォーム”

今回は、GASで定員付きのGoogleフォームを作りました。

# 背景
定員付きのGoogleフォームを作成する記事は他にもありますが、どれも回答数が一定のラインに達したらフォームを閉じるだけのもので、「残りの枠数の表示」などの実務で使う上では必要な機能は搭載されていません。

また、そのようなサイトで紹介されているコードは、どんなに小さな変更(定員を変える等)でもコードをいじらなければならないことがほとんどです。これでは保守管理ができる人が限られてしまいます。この点も実務で使う上では不便だと感じました。

# そこで、つくった

実務で差し支えなく使用できるよう、以下のような機能を搭載しました。

– フォームの説明欄に残り人数を表示できる
– 枠が残り少なくなったときにだけ、フォームの説明欄に残り人数を表示するようにできる
– ITに詳しくなくても、GUIで保守・管理ができる

この記事は、開発する上で心がけたことの話が中心となります。導入方法や使い方などの実際に使う上での情報が欲しいという方は、下記のブログをご覧ください。

https://r-40021.github.io

新技術は怖くない、jQuery時代からReact時代へ勇気を出して踏み出した

__自分にとって未知の技術、なんだか怖い。__

いずれ身に付けなければならないとは思いつつも、とても難しいものに思えてなかなか踏み出せなかったです。しかし考え方を変えてみたらあっさりとその壁を乗り越えて次の段階へと自分をステップアップさせることができました。

考え方の面から誰かの助けになればと思い、初投稿します。

# この記事について

JavaScriptについてjQuery全盛期に学習した後、技術的に停滞していた自分がついにReactに触れて個人アプリを作るようにまでなったので、その体験を簡潔に書きます。同じような境遇の人にとって新しい一歩を踏み出せる助けになると嬉しいです。

想定している読者は「ある技術を過去に習得したがレガシーになりつつある人」や「新しい技術を学んだ人が羨ましいが尻込みしてしまっている人」など、新しいことに焦燥感を抱えている人です。

# jQuery時代に取り残された焦燥感

:::note warn
jQueryが悪いという意図はありません
:::

私は社会人となる前の「JavaScriptのライブラリといえばjQuery」という時代にJavaSc

Next.jsで.envが読み込んでるのに動かない

初めまして、嶋芋です。Qiitaには初の投稿になります！

# 背景
FirebaseでGoogle認証を作成していたら、.env.localが読み込めているのにauth/invalid-api-keyが出て躓いたので、記事を書くことにしました。

# 環境

Next.js : 11.0.1

# 問題

Next.jsでFirebaseのGoogle認証を作成していました。
.env.localにAPIキーなどを書いて、Next.jsから読み込み実行しました。
「auth/invalid-api-key」が出たので、APIキーの誤字だと思い何度も間違っていないかを確認しましたが、間違いは見つけられず、周りの人に確認してもらっても間違っていないということになりました。

console.logで出力してみたりといろいろしていると、サーバー側のコンソールではちゃんと読み込まれているのに、ブラウザ側のコンソールで {} になっていることが判明しました。

その時のコードは以下の通りです。

“` javascript
export const firebaseConfig = {
 a

storybook6のcontrolsまとめ

## はじめに
本記事では，UIカタログとして利用されるstorybookについて記述します．
storybookにはcontrolsと呼ばれる便利機能があり，コンポーネントなどに与えるデータやプロパティをstorybook上で簡単に変更することができます．新たに作ったUIコンポーネントのテストはもちろん，すでに作られたコンポーネントの挙動を理解するためにも大いに役立ちます．
storybookのcontrols機能では，前述のように，UIコンポーネントにデータやプロパティを変更できる機能のことです．ここに貼ったgif画像では，bool値であるprimaryの値をスライドボタンで切り替えたり，ボタンのラベルを変更しています．storybookではこのような値の変更方法以外にも，様々な方法が用意されています．本記事はVue.js環境におけるこれ

[初学者]スコープとvarの巻き上げ

#（初学者）javascriptの理解してなかった所
#はじめに
本記事はネット教材でサラッと勉強したけど後に深く理解してなくて、なんだこれ？となって調べたものです。
[参考文献](https://jsprimer.net/intro/) javascript primer

#目次
– javascriptのスコープの性質とはなんですか？
– varの巻き上げってなんですか？
– おわり

#javascriptのスコープの性質とはなんですか？
スコープとは変数や関数の引数をとって来れる範囲です。
そしてもう１つ重要なのが｛　｝で囲っている所をブロックと呼びます。ブロックの外から中は参照出来ません。
＊逆にブロック内のものはブロック外を参照出来ます。
例を下に書くと

“`
const A = 10;　←グローバルスコープで定義されたグローバル変数
{
const B = 20;
{
console.log(A);　 //10　←内から外へ参照を探しに行くスコープチェーン
}
}
console.log(B);　←ブロック内の変数Bを参照出来なかった
//Unc

オブジェクトのデータの持ち方について

javascriptのオブジェクトについて勉強した。(jquery)
工夫したのはデータの持ち方(hobbyオブジェクト)について。

hobbyのbookやらsportsやらをたくさん外部から設定できる。

“`javascript:objectuse.js
$(function(){
let user = {
name: ‘山田’,
age: 27,
address: ‘東京’,
hobby:{
‘book’:{},
‘sports’:{},
},
getbookhobby:function(){
return user.hobby.book;
},
setbookhobby:function($key, $value){
user.hobby.book[$key] = $value;
},
gethobby:function(){
return user.hobby;
},
};
user.setbookhobby(

重力レンズ効果を描画してみた(JavaScript)

# 初めに
　最近p5.jsというものを知りまして、インタラクティブにGUIを操作できるものが簡単に作れるのが楽しくて色々作ってました。それで何かしら物理現象をシミュレーションしようと思い立ちまして、重力によって光が曲がる様子を描画してみることにしました。
　厳密に再現するのは能力的にも計算量的にも難しそうなので今回は位置の補正のみ行います。

# 重力レンズの仕組み
　重力レンズは銀河などの重力によって後方にある星の光などが曲がることで実際とは異なる見え方をする現象です。
　重力によって歪められた光の角度には以下の関係が成り立ちます

“`math
\beta = \theta – \alpha(\theta)
“`

　今回はレンズに使う重力は質点のように一つの点から重力が発生している様子を想定しているので$\alpha$は以下

WebAssembly (Rust) によるブラウザ上の画像処理

# 概要

– ブラウザ上で動画をリアルタイムに画像処理する。
– Rustによって作成したWebAssemblyと、JavaScriptとの処理速度の比較を行う。
– 結果は、Firefox(JS) > Chrome(Rust) > Chrome(JS) > Firefox(Rust) [速い順] となった。
– 画素数1920×1080でのフレームレートは、最速のFirefox(JS)で約10～12fpsとなる。
– この記事で示す処理以外のものが入ったときのフレームレートである。ただここでの処理が他のに比べて大きくボトルネックにはなっている。

# WebAssemblyとは
– WebAssembly[^1]とは、ブラウザ上で動くバイナリコードである。JavaScriptに比べて処理速度が速いという特徴がある。
– JavaScriptからWebAssemblyの関数が呼び出されたり、WebAssemblyからJavaScriptの関数が呼び出されたりする。
– WebAssemblyからHTMLの要素を操作することはできない。
– C/C++, Rust, C#, G

EC-CUBE4.xのオリジナルテンプレートでカスタマイズcss / jsを反映させる方法

## 概要

EC-CUBE4.xでオリジナルテンプレートを使用する際、管理画面から設定できる

– customize.css
– customize.js

が反映されない場合の対処法メモ書きです。

### 開発環境

– EC-CUBE4.x＋Git＋scss
– オリジナルテンプレートを使用

### 参考文献

– [公式ドキュメント：CSSの利用](https://doc4.ec-cube.net/design_css)
– [Qiitaでシンタックスハイライト可能な言語一覧](https://qiita.com/Qiita/items/e84f5aad7757afce82ba)
– [Qiita Markdown 書き方 まとめ](https://qiita.com/shizuma/items/8616bbe3ebe8ab0b6ca1)
– [40言語で「Hello World」をやってみよう！！](https://www.microstone.info/helloworld/)

## 一般的な使い方

通常、管理画面から独自のcss/jsを編集→登録した際は、下

JavaScript初心者のためのエラーガイド

### 1. Uncaught TypeError: Cannot read property ‘b’ of undefined at …
##### 解釋 : Undefinedのbというプロパティーを読めません。
##### 例 :
> a = undefined;
// undefined
a.b
// Uncaught TypeError: Cannot read property ‘b’ of undefined at …

#### *ポイント : bではなく、aがundefinedです。
—
#### *対策1 :
> if (a) {
a.b = …
}
// aがundefinedでは無い時だけ、実行できます。

#### 対策2 : Optional Chaining
> c = a?.b;

—
### 2. Uncaught TypeError: Cannot read property ‘b’ of null at …
##### 例 :
> a = null;
// null
a.b
// Uncaught Type

Leafletでヒートマップを作る

## はじめに
Leafletとは、Web地図サービスで広く使われるオープンソースのJavaScriptライブラリです。
仕事でLeafletを使うことなったので、勉強してみました。
基礎部分は以下にまとめましたので、こちらも参考にしてください。
https://qiita.com/ryou83480820/items/06238ef347062f65435e
今回はヒートマップを作製します。基本的には公式のチュートリアルをやってみたという内容になります。
https://leafletjs.com/examples/geojson/
https://leafletjs.com/examples/choropleth/

##外部ファイルを読み込む
外部ファイルはGeoJson形式で読み込みます。
詳しくはこちら
https://leafletjs.com/examples/geojson/
GeoJsonは以下のようなものです。

“`html
{
“type”: “Feature”,
“properties”: {
“na

コミット前にテストを実行しよう　~husky ver7~

# はじめに
コミットする前にテストを実行させるための設定をします。[husky](https://www.npmjs.com/package/husky)を使うことで簡単に設定ができます。huskyは、ver4から6に上がった際に仕様が大きく変わっているため、改めてインストール手順をまとました。

* [huskyのドキュメント](https://typicode.github.io/husky/#/?id=automatic-recommended)

## 開発環境

* husky : 7.0.2
* node : v14.17.6

## インストール

* jestのコマンドの設定とjestはインストール済みです。[jestのインストール方法](https://qiita.com/YSasago/items/6f23055c971a091f9993)

まずはnpmを使ってhuskyをインストールします。

“`sh
$ npm install –save-dev husky
“`

package.jsonのscriptsにprepareコマンドを追加します。

Chrome Extensions をMV3に移行しなくちゃ、ね。

# はじめに
####MV3で何が変わるの、か？

Chromeオフィシャルサイトによると大まかには以下が変更点という、ことらしい。

> 機能の概要

https://developer.chrome.com/docs/extensions/mv3/intro/mv3-overview/#feature-summary

+ サービスワーカーによるバックグラウンドページの置き換え。
+ ネットワークリクエストの変更は、declarativeNetRequestAPIで処理される。
+ リモートでホストされたコードは許可されず、パッケージに含まれているJavaScriptのみを実行可能。
+ 多くのメソッドにPromiseのサポートを追加。

えーっと、、とりあえずわかったふりをしつつ、、。

# やってみよう

今回MV3に移行するExtensionsでは、バックグラウンド処理としてはコンテキストメニューのみ。ただ、formをDOM生成してPOST送信している。だが、DOMは扱えない、んだ。

####どうするのか？
> 解決策としては2つ。

1. 個人情報は扱ってなく

【メモ】Visual Studio CodeでのJavaScriptのデバッグ

# 毎度忘れるのでメモ

1. 事前に拡張機能の[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)をインストールする。
1. index.htmlとscript.jsのHTML/JavaScriptのニコイチを用意する。
1.
1. script.jsのコードのどこかにF9でブレークポイントを設置
1. index.htmlをF5でデバッグする
1. launch.jsonが起動するので、以下のように設定する。

“`json
{
“version”: “0.2.0”,
“configurations”: [
{
“type”: “chrome”,
“request”: “launch”,
“name”: “Launch Chrome Local Debug”,
“url”: “http://localhost:5500/index

協調性のない非同期処理（async/await）

以前に[非同期処理を会社組織に例えて説明する。](https://qiita.com/Reddest/items/6787a12d93a1edf30ca1)の記事を書きましたが
今回はpromiseを意識せずにasync/awaitについて書いてみたいと思います。
***

どこの社会にもいますね。
協調性がなく、自分の事だけを黙々とやる人。

事務仕事に例えると、コピー機を占有したまま、待っている人の事を考えないとか。

非同期処理とは、そういう人の事です。
（仮に社員Aとしておきましょう）
では、なぜこのAが会社にとって必要なのか？

遠い場所にある荷物をとってきてくれるからなのです。
（たまに失敗もしますが）

それでは、後の人が困ってしまう？
でもAが荷物を取ってこない事には、その部署の仕事が回らないのである。

じゃあ、どうしよう？

「Aは荷物を取ってきたか？失敗したかどうか？必ず報告をする」
（失敗を許さない日本社会を考えたらダメです）

そこで、その部署自体をAを中心に考えたのです。
これがasync（非同期）です。

そしてAの仕事にawait（待つよ！）をつけてやる

スーパーキラキラカラフルクッキリディスプレイも最初と最後の文字さえあっていれば読める説

みなさんはタイポグリセミア(Typoglycemia)というものをご存知でしょうか？

wikiからの引用ですが

> 文章中のいくつかの単語で最初と最後の文字以外の順番が入れ替わっても正しく読めてしまう現象である

https://ja.wikipedia.org/wiki/%E3%82%BF%E3%82%A4%E3%83%9D%E3%82%B0%E3%83%AA%E3%82%BB%E3%83%9F%E3%82%A2

今まさに新作のiPhoneが発表され、「スーパーキラキラカラフルクッキリディスプレイ」という謎の単語がtwitter上で話題になりました。

それをみて**「最初と最後の文字以外の順番が入れ替わっても正しく読めてしまうんじゃね？」**と思い、検証プログラムを書いてみました。

とにかくすぐに確認したかったのでjsで書きました

“`javascript
(str => str.slice(0, 1) + str.slice(1, -1).split(”).sort(() => Math.random() – 0.5).join(”) + str.slice(-