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

JavaScript 高階関数

# 高階関数とは
高階関数とは
**「関数を、引数や戻り値に持つ関数」**
のことです。

# 例
“`javascript
function arrayWalk (array, f) {
for (var key in array) {
f(array[key]);
}
}

function showData (value) {
console.log(value);
}

var ary = [“Hi!”,”My Name is Tom!”,”Nice to meet you!”];
arrayWalk(ary,showData);

“`
“`
Hi!
My Name is Tom!
Nice to meet you!
“`

この場合、arrayWalkは引数に関数を持っていて実行しているため、高階関数になります。
また、呼び出される関数のことを**コールバック関数**と言います。

# 使いどころ
丸投げになってしまいますがこちらの記事がとても分かりやすかったです。
— [高階関数を書いたら、中級者になれた気がした。を批判

【図解】ReactのuseRefとuseStateの違いを理解する

## はじめに
業務でuseRefをさわる機会があったのですが、useStateとの違いをイマイチ把握できなかったので、整理しました。

## useRefとuseStateの違いまとめ

値更新時のレンダリング有無がポイントのようです。

| 項目 | 値の保持 | 値更新時のレンダリング |
| ——– | ——– | ———————- |
| useRef | できる | されない |
| useState | できる | される |

## 具体例

### サンプルソースコード

“`app.js
import “./styles.css”;

import * as React from “react”;

export default function App() {
const [count, setCount] = React.useState(0);
const countRef = React.useRef(0);

ブラウザの開発者ツールのコンソールで JavaScript を実行してページ内の情報の一部を一括取得： connpass のページを例に

タイトルの通りで、何らかの Webサイトを開いた状態で、ブラウザの開発者ツールのコンソールに JavaScript のプログラムを書いて実行し、その Webサイトの情報をプログラムの処理で得るようなことをやる話です。

自分が上記の処理をやろうとしたのは、とある閉じたネットワーク内のサイトで情報の一括取得をプログラムでやると良さそうな状況があったためでした。（そのサイトを扱う PCの 環境的な事情で、ブラウザの自動操作系の外部プログラムとか、ブラウザ拡張機能は使えない状況でもあったり…）。
その閉じたネットワーク内でやった話の一部を、将来の自分のメモも兼ねて記事にしておきたかったのですが、そのサイトを扱う話は直接記事にはできないので、イベント主催・参加関連でお世話になっている connpass のサイト（※　以下の URLで見られる、自分自身のダッシュボードのページ）を題材にして、話を進めていくことにしました。

●ダッシュボード – connpass
　https://connpass.com/dashboard/

## 今回やること
ひとまず、 connpass のダッシュボ

bfcacheには気を付けよう

##### ある日の弊社
営業さん「ブラウザバックした時クリックが反応しなくなっちゃったってお客さんから連絡来てるんですけど」
　　ぼく「！？」

##### 何が起こったか
そもそも上記問題が起こる直前に、クリック連打した時連続で遷移のメソッドが起動してしまってただでさえクソ重いDBに負荷をかけられる、というクソみたいなコードを書いてやがったので、loadイベントで初期化したフラグのオンオフを見て、オンだったら起動しない、みたいな処理を書きました。こんなの
“`JavaScript
$(window).on(‘load’, function(){
hogeObject.flag = false;
});
$(“.hogeButton”).on(‘click’, function(){
if(!hogeObject.flag){
hogeObject.flag = true;
pageShow(this);
}
});
“`
が、ブラウザバックした時にloadイベントで初期化すべきフラグが初期化されず、hogeButtonクラスのボタンをクリックしても遷

三項演算子についての備忘録

# 三項演算子なるもの

## 三項演算子とは
・JavaScriptにおいて3つのオペランドを持つ演算子

式は以下
**条件式** ? **条件式がtrueの時に返す値** : **条件式がfalseの時に返す値**

#### 記述例
“`
let test = “hoge”;
console.log((test = “hoge”) ? “yes” : “no”);
“`

#### 記述例解説
1行目　test に 文字列 “hoge” を代入。
2行目　console.log();関数で三項演算子の結果をコンソールに表示

三項演算子では
(test = “hoge”)? →　testが”hoge”であるかを true か false　で判断
true の場合　→　”yes”　がコンソールに表示される
false の場合　→　”no” がコンソールに表示される

## 所感
if文を簡的に記述できるようにしたようなものと思っている。
現段階だと、if文内で複数処理をするようなことがなければ三項演算子で事足りそうだと思っている。

## 終わりに
備忘録のため参考までに。

JavaScriptのDate.toLocaleStringで日付をフォーマットして表示する方法

“`js
// 現在のlocaleを確認する
console.log(Intl.NumberFormat().resolvedOptions().locale);
> ja-JP

// timeZoneも含めて表示する
console.log(new Date().toLocaleString(‘ja-JP’, {timeZone: ‘Asia/Tokyo’}));
> 2022/5/13 15:14:09

// 【Node.jsの場合】timeZoneは環境変数で指定して、localのみ指定する（ここだけ、コマンドです。）
env TZ=Asia/Tokyo node -e ‘console.log(new Date().toLocaleString(“ja-JP”));’
> 2022/5/13 15:14:09

// 和暦で出してみる
console.log(new Date().toLocaleString(‘ja-JP-u-ca-japanese’));
> R4/5/13 15:00:57
“`

JavaScriptには、日付をフォーマットする関数が標準ライブ

Codestepで学ぶHTML、CSSの模写コーディング （アコーディオンデザイン)

# 模写サイト

https://code-step.com/extra2-menu/

– [模写コーディングしたサイト](http://abc18717397.html.xdomain.jp/accordion.html)

### 参考サイト

https://www.mitsue.co.jp/knowledge/blog/frontend/201912/14_0000.html

https://fromkato.com/webdev/css/properties/visibility

https://qiita.com/FJHoshi/items/0ed4b628acdab696be62

– 変更点
– jQuery 禁止

# DOCTYPEの作成
“`html:

【sessionStorage】1億万回煎じの「JSON文字列⇔オブジェクト」変換

# JSON文字列とオブジェクト
JavaScriptのオブジェクト（Pythonではdictionary型）とは以下のようにkeyとvalueを持たせたデータ形式で、同じkey名で別の変数として扱うことができる。
各valueには、**文字列**、**数値**、**null**、**bool値**、**オブジェクト**、**配列**を入れることができる。
“`
json1 = {
name: hoge,
email: hoge@mail,
}
json2 = {
name: hige,
email: hige@mail,
}
“`
JSON文字列は上記を文字列にしたもの（valueの型は全て**文字列**になる）で、sessionStorageなどに格納するときなどに使用する。

# オブジェクト→JSON文字列
早速。
“`
let json_data = JSON.parse(sessionStorage.getItem(“KeyName”));
“`
# JSON文字列→オブジェクト
いよっ！
“`
const jsonString = JSON.st

Webプラットフォームの最新についていけていない人はこの動画を見よう

https://io.google/2022/program/3c60e411-5340-4c54-a037-3aceb2825b16/

Google I/O 2022 Keynoteの1つの、「What’s new for the web platform」の紹介です。

パフォーマンス、セキュリティ、プライバシー、JavaScript、CSSなど、この1年で新たにできるようになった機能や、Interopが改善された機能などが30分で網羅的に紹介されています。

Interopの取り組みや、実験的な機能も含めて紹介されているので、今後にワクワクできます。

Youtubeの方のDescriptionに記載されていますが、詳しく知りたい方は参考資料がありますのでこちらで学べます。

## [UI](https://youtu.be/5b4YcLB4DVI&t=51s)

– [CSS accent-color](https://goo.gle/399xjOz)
– [CSS color-scheme](https://goo.gle/3N1kpRe)
– [dialog](https

if文使いたくない２４時間表記の時間の計算

### if文書きたくないんじゃー

“`sample.js
let startTime = ’22:30′
let elapsedTime = ’01:40′
let [sh, sm] = startTime.split(‘:’)
let [eh, em] = elapsedTime.split(‘:’)

let hh = Number(sh) + Number(eh)
let mm = Number(sm) + Number(em)

hh = (hh + Math.floor(mm / 60)) % 24
mm = mm % 60

let rh = (‘0’ + hh).slice(-2)
let rm = (‘0’ + mm).slice(-2)

console.log(rh + ‘:’ + rm) // “00:10”
“`

％て割れない数字だとそのまま返してくれるのね。（今更）

【JavaScript】演算子

# 概要
JavaScriptを学習、理解を深めるため「[JavaScript Primer 迷わないための入門書](https://jsprimer.net/)」を読み、
理解した内容等を記載していく。

[JavaScript入門一覧](https://qiita.com/andota05/items/22fae452225b785fd405)に他の記事をまとめています。

※下記「動作環境情報」を参考にし、開発者コンソールで結果を確認してください

動作環境情報はコチラ

**【環境】**
PC：Mac
エディタ：Visual Studio Code
プラグイン：`Live Server`というVisual Studio Codeのプラグインを使用し、サーバ環境を用意。
開発者コンソール：GoogleChrome

**【登場ファイル】**
datatype.js：検証用ファイル
index.html：「enzan.js」を使用、および開発者コンソールで確認する際に開くファイル

**【★ポイント】**
index.

FirebaseのonChildAddedの動き方（Firebaseウェブバージョン9）

この記事では、Firebase Realtime Databaseウェブバージョン9（さらに正確にはバージョン9.8.1）で用いられている”onChildAdded”という関数について説明します。

Firebaseでブラウザで動くチャットアプリを作るサンプル教材を学習した際に出てきて、その際にはあまりonChildAddedの意味をわかっていなかったのですが、どうにかこうにか理解しました。

それにしても、検索エンジンで検索をかけても、Firebaseバージョン8時代の古い情報ばかりがヒットしてしまうのなかなか辛いですね。。。

# 前提情報の整理～作ろうとしていたFirebaseウェブアプリの共有～

まずは前提をそろえるためにどのようなチャットアプリを作ろうとしていたかを共有します。

このように、画面に名前と文章を打ち込んだらチャットがで

forEachについて完全に理解した()

javascriptを触ってはや１年ほど経つが、先日callback関数について見直した後に、forEachを見直したら世界が変わった
というか、今までなんとなくのイメージで書いていたことがようやく完全に理解できた()。

# 従来のイメージ
今までforEachってなんとなく、配列の要素を１つずつ取り出して、要素を使って処理をするものってイメージだった。
例えば、配列の中身をすべて２倍にするみたい感じ↓
“`sample.js
const arry = [1, 2, 3, 4, 5];

arry.forEach((ary) => {
console.log(ary * 2);
});
“`
実行結果
“`
2
4
6
8
10
“`
ここでいうaryの中にarryの要素が順番に入ってくるから、その処理を以降で書いてる。なんでarryの要素が入ってくるのかは魔法。そんなイメージだった。

# 現在のイメージ
forEachは引数として、callback関数を取る。
callback関数については[先日の記事](https://qiita.com/TakehiroKATO/

Progate:js 7day 学習日記 メモ

**コールバック関数**：引数に渡される関数のこと


**コールバック関数の渡し方**


**関数の呼び出し方と渡し方**：関数は、関数名の後ろに()をつけると呼び出され、()をつけなければ関数そのものを指す！

![スクリーンショット 2022-05-12 21.40.28.png](https://s3-us-we

#WebAssembly #WASM の開発環境作成(サンプル動作含む。 #AssemblyScript ( #TypeScript 風)版。)

本内容を利用した場合の一切の責任を私は負いません。

公式( https://www.assemblyscript.org/getting-started.html#setting-up-a-new-project )にガイドがあるが、自分がアホなのかうまくいかなかった。
開拓したらできたので載せておきます。

# バージョン
– OS
OS 名: Microsoft Windows 10 Home
OS バージョン: 10.0.19043 N/A ビルド 19043
システムの種類: x64-based PC
– node.js
node-v16.15.0-win-x64.zip
– AssemblyScript
v0.20.6
– Chrome
バージョン: 101.0.4951.54（Official Build） （64 ビット）

# 準備
node.jsをダウンロード・展開し、PATH(node.exeの場所を追加)とNODE_PATH(node.exeの場所の下のnode_modulesのパス

地球号ダーツの旅?（世界のどこかへ飛ぶブクマ）

## 動機
– 気軽に心だけ旅をしたい
– ランダムを楽しみたい

## 3種類 + ストビュー
1. 地球ダーツ
1. 日本ダーツ
1. 関東・東海ダーツ
1. ストリートビュー表示（相互）

:::note info
ズームレベルは2z（1目盛:2,000km） から 21z（1目盛:5m）
:::

## コード

##### 1. 地球ダーツ

– 南極率が高すぎたので南緯55~85は出ないよう設定
– 緯度85~90の極付近は南北とも提供なし
– PC用にズームアップ分岐を入れたがスマホでは必要なかった
– 陸地に当たる確率は半分以下※約7割が海

1a. スマホ用＠移動のみ（世界）

“`javascript:
javascript:(()=>{if(!confirm(‘Jump?’))return;const base=10**7;const ido=Math.floor((Math.random()*170-85)*base)/base;const keido=Math.floor((Math.random()*360-180)*base)/base;const u

Reactで条件分岐

## やること
ボタンをクリック → ローディング画面 → 結果

## 前提
以前作成した下記記事の環境からスタート

https://qiita.com/sh19982580/items/5f71856c7949c494d769

## 必要な材料
①　ボタン
app.tsxのreturn内に`ボタン`を追加する

② ローディング画面
以前、作成した下記記事を参考に作成します。

https://qiita.com/sh19982580/items/70a6fcdb29826513bea2

③ 結果画面
こちらも以前、作成した下記記事を参考に作成します。

https://qiita.com/sh19982580/items/eaa599f8b8c74bb4d87e

## ここまでで確認
必要な材料を全て統合した結果
app.tsx

import React, { FC, useEffect, useState } from “react”;
import { Reset } from “styled-reset”;

進化についていくのは大変

プログラム言語ってたくさんあって
私がやってきたのはjava、C#、swift、javascriptあたりがメインなんですが
ずーーっと思っているのが『進化しすぎてません？』

『
　Struts便利だなー
　⇒DIっていうのが次来るらしい
　⇒seaser便利
　⇒えっseaser古いの？世界的にはspringなの？
　⇒spring便利
　⇒えっspringbootが簡単？
　⇒springboot便利
』
こんな感じで、
とにかくいろんな技術が次から次へと出てきては進化が続いてて
java⇒kotlin
javascript⇒typescript
みたいに派生していった言語もあるし。

各言語のフレームワークも山盛りあって、
例えば画面周りはいつの間にか
「え？jspでゴリゴリ動的に作る時代終わったの？」
「SPA？？react？vue？Angular？javascriptでゴリゴリ書くのが主流なの？」
「え！javascriptじゃない！？typescriptで書くの！？」
「tsをコンパイルしてjsにしてnodeで実行！？」

5年前までバリバリコーディングしてたけど昇進し

参考にしたいアプリ

https://acha0203.github.io/Clicker_Empire_Game/

https://github.com/moritanuki/recursion-clicker-empire

https://clicker-empire-game-soysan.vercel.app/main

https://recursionist.io/share/sokahiri/lessoncode/566/htmlRunner3

Markdoc入門: Vite + @markdoc/markdocを使って、Markdownで書かれた記事を表示しよう

Markdocは、Stripeのドキュメントサイトで利用している、マークダウンのオーサリングツールです。

https://markdoc.io/

Today we’re open-sourcing Markdoc, the content-authoring system that powers the Stripe docs.

You can now freely build documentation, static pages, or tooling with the same tools we use: https://t.co/YPrlspQ3Ye. ✍️ pic.twitter.com/JbfflVMaUZ

— Stripe (@stripe) May 11, 2022

この記事では、JavaScriptと`@markwodn/markdoc`ライブラリを利用して、Markdownで書かれたコンテンツをサイトに表示させる方法を紹介します。

## セットアップ

Markdocライブラリは、`npm install`して利用します。

今回はコードのビルドに、Viteを利用します。

https://vitejs.dev/

フレームワークには`vanilla`を選びましょう。
`variant`でTypeScriptも選べますが、今回は使用しません。

“`bash
$ npm init vite
✔ Project name: … vite-markdoc
✔ Select a framework: › vanilla
✔ Select a variant: › vanilla

Scaff