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

MathJaxを動的に処理した

# 初めに
どうも、最近 `Ruby on Rails` 初めた人です。~~（記事と全く関係ない）~~

今回の記事は。
MathJaxというライブラリを使って数学のwebアプリを作っていたとき、**動的に**処理できなくて困ったので記事にまとめます。

# MathJaxってなに？
> MathJax はMathML、LaTeX、ASCIIMathMLで記述された数式をウェブブラウザ上で表示するクロスブラウザのJavaScriptライブラリである。MathJaxはApache Licenseのもとでオープンソースソフトウェアとしてリリースされている。
> [MathJax – Wikipedia](https://ja.wikipedia.org/wiki/MathJax MathJaxのwiki)

まぁ、要するに「カッコいい数式を表示できる機能」ってこと

## 例

“`math
二次方程式　[x=ax^2+bx+c]　の解は \\
x = {-b \pm \sqrt{b^2-4ac} \over 2a}
“

【JavaScript】変数と参照の振り返り⑥　参照とコピーについて

#はじめに

Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。

前回の記事

https://qiita.com/nao0725/items/485a45b65f7b4bc3b358

#目的

* 変数についての理解を深める

#本題
###1.プリミティブ型とオブジェクト

####用語の説明

データ型：文字列、数値などの異なる値の型　→　８種類

このデータ型は２種類に分けることができる。

プリミティブ型

* 変数には**値**が格納される。
* 一度作成するとその値を変更することはできない。

オブジェクト

* プリミティブ型以外の型を指す。
* 変数には**参照**が保持される。
* 値を変更することができる。
* 名前（プロパティ）付きの**参照**を管理する入れ物

###2.参照とコピー

プリミティブ型とオブジェクトで値をコピーした場合には挙動が変わる。

####例

#####プリミティブ値のコピー

これからReact始めたい人のための今日だけでできるTODO#21 useContext② コンポーネントの分割

## 分割したコンポーネントでuseContextを使ってみる
以下のような構成でコンポーネントを作成し`App`を`Provider`でラップして`ThirdChild`に`Context`を使って値を渡したいと思います。

– App
– FirstChild
– SecondChild
– ThirdChild

## コンポーネントの作成
作成するファイルは4つです（`App.js`はすでにある想定です）
– Provider.js
– FirstChild.js
– SecondChild.js
– ThirdChild.js

### Provider.js
`Provider.js`のコードは以下の通りになります。

“`js:Provider.js
import React, { createContext } from ‘react’;

// 他のファイルでContextを参照できるようにexport
export const Context = createContext();

const text = ‘Providerから受

microCMSのコンテンツをmarkdownファイルで取得する方法

microCMSのAPIでコンテンツを取得して、それぞれエンドポイントごとに個別のファイルを作成する必要ことがあった。取得したファイルを編集するため、HTMLではなく、markdownファイルで取得する必要があった。その時の記録を残しておく。
なお、npmは使わず、CDNのみを利用するため、Nodeやwebpackがわからない人もこの方法で取得できる。
## microCMS
まずは、microCMSのAPI取得である。公式ドキュメントにもあるように、`serviceDomain` と `apiKey` を利用して取得できる。このapiKeyには2種類でもある。X-API-KEYとX-GLOBAL-DRAFT-KEYである。
GETによる取得は前者のX-API-KEYを利用し、下書きコンテンツも含めて取得する場合はX-GLOBAL-DRAFT-KEYを利用する。

https://document.microcms.io/content-api/get-list-contents

今回はX-API-KEYを利用する。
まずは、htmlのCDNでmicroCMSを読み込み、jsファイル

Nuxt3のpublic beta版がついに公開されたので、さっそく導入してみた

# はじめに

Vue3に対応したフレームワークであるNuxt3のPublic beta版が
2021/10/13についに公開されました。

まずは公式ドキュメントの内容を紹介しつつ、
プロジェクトの作成を試してみたいと思います。

※詳細は個人ブログこちらから御覧ください。

https://gonkunblog.com/nuxt3-public-beta/1033/

デブ活必需品!?　お菓子の虜LINE bot

## とにかく甘いお菓子が好き?
　おしゃれなスイーツも、手作りケーキもおいしいけれど、私は断固「お菓子」推し!!
　なんと数百円で楽園へひとっとび…わかる人にはわかりますよね・・・？
　

　https://twitter.com/okinakamasayos1/status/1447864486598103041
　https://twitter.com/okinakamasayos1/status/1423594038947500036
## 私の神サイト[「お菓子の虜」](https://sysbird.jp/toriko/)?
　メーカーが書いた記事じゃなく、実際に食べ歩いたレビューがなんと2,600種類以上!
　お菓子好きにはたまらない「新商品」「期間限定商品」を重点的に紹介してくれます。
　短くも美しく、想像力を掻き立てるレビューは必見

JavaScriptのEvent Propagationとは？

#初めに
今回はイベントリスナーを設定した時のイベントの伝播方法について、詳しく見ていきます。突然ですが、下記のようなHTMLがあったとします。

“`html

button

“`

onclickイベントを設定しているのは親のdiv要素ですが、ボタンをクリックしてもイベントが発火して「clicked!」が表示されました。考えてみれば不思議ですよね。なぜ実際のクリックがボタンに対してなされてもdiv上のハンドラが実行されるのでしょうか。それは、イベン

GSAPでサイドバーを固定しながらスクロール追従

GSAPのScrollTriggerのピン留め機能を使用したら簡単に実装できました。

## デモ

See the Pen
GSAPでサイドバーを固定しながらスクロール追従 by miyakezaka (@miyakezaka)

jsでobjectのキーの順序を変更する

https://teratail.com/questions/106913

“`js
{
address:”,
age:”,
client_name:”,
customer_id:”,
first_visit_date:”,
prefecture:”,
}
“`

jsのobjectのキーを自分の指定した、順序に並び替える方法。

“`js
//json並び替え key_orderの順番に並び替える
let key_order = [‘address’,’client_name’,’first_visit_date’,’prefecture’,’customer_id’,’age’]
let hash = {}
let items_data = key_order.map(function(x){
return json.items[0][x]
})

for (let [i,j] of zip(key_order,items_data)){
hash[i] = j
}
json.items[

js drag&dropとinput fileに情報を入れ込む

drag & dropしたら、画像情報がinputに入る仕組みを作成。
調査していると、input fileの中身はいじることができないような記事が出てきたがなんとか実現。

“`html

“`

“`js
$(“#upload”).on(“drop”, function(e){
e.preventDefault();
document.getElementById(“upload”).files = e.originalEvent.dataTransfer.files;
});
“`

dropした時に、イベントが発火する形にします。
id = “upload”を指定して、取得。

filesオブジェクトを取得し、そこへ`e.originalEvent.dataTransfer.files`を挿入。
すると、inputに

【Vue.js】条件分岐 v-show について

#はじめに

こんにちは！　松本　佑大（まつもと　ゆうだい）と申します！
今回はv-showについてアウトプットしていきます！

#v-show　とは
要素の表示/非表示を切り替えることができます。
v-ifと違うポイントとしてはp要素そのものが削除されるのではなく**cssのdisplay プロパティをon/off**されるで表示/非表示が繰り返されます。

#書き方
“`HTML:HTML

Good night!

“`

“`Vue.js
var app = new Vue({
el:’#app’,
data:{
toggle:true
}
“`


※細かい書

【JavaScript】非同期処理について

#はじめに
こんにちは。
こちらの記事では、非同期処理を行う`Promise` / `async` / `await`についてアウトプットしていきます！
誤っている点がございましたらコメントいただけると幸いです。

##非同期処理とは
>一つのタスクを実行中であっても他のタスクを実行できる実行方式をいいます。非同期処理をうまく実装することで、ユーザーはアプリケーションの処理待ちを気にすることなくアクセスすることができるため、ユーザビリティを考えるうえで重要な要素になります。

> 参照：https://www.rworks.jp/system/system-column/sys-entry/21730/

ここでは非同期処理の`Promise` / `async` / `await`について深掘りしていきます。

##Promise
コールバック関数でも非同期処理は記述できるが、ネストが深くて見づらくなるという欠点があるため`Promise`が使用されるようになった。

“`javascript:JavaScript
const hoge = new Promise(f

(JS)変数・定数・ブーリアン・プリミティブ型・オブジェクト

## はじめに
初学者です。
基本は備忘録
間違っていたら教えてくださると助かります。

## 変数の違い
タイプ|再宣言|再代入|スコープ|初期化(ホイスティング)
-|-|-|-|-
let|x|○|ブロック|x|
const|x|x|ブロック|x|
var|○|○|関数|undefined|

## 暗黙的な型変換
状況によって型が自動で変更される

*動的型付け言語* →自動で型が変更される
*静的片付け言語* →宣言時に型を指定する

厳格な等価性 a === b 型が一致しているかまで比較する

抽象的な等価性 a == b 型はあっている必要がない
抽象的な等価性では比較時にどちらかの型に合わせる

“`javascript
console.log(true == 1)//処理結果 true
//1がtrueに変換されて比較
“`
## falsyとtruthy
falsy

“`javascript
false
0
0n
”
null
undefined //変数を代入なしで宣言した等
Nan //期待->数値 数値として処理できなかった時
“`
tru

fetchとかで取ってきた生HTMLからDOMを作ってqueryselector()をしたい。

ブラウザのJavaScriptでただの文字列状態のHTMLを、DOM（ツリー、NODE）に変換して色々操作したいって場合を調べたくて検索をかけると
`div = document.createElement(‘div’); div.innerHTML = textHtml;` って感じにして取り出す感じの記事しか見つからなくて、モヤモヤするのでメモ。

そもそもこの手法だと `` とか入っていると変換もできない。
しかも、imgタグとか不必要なコンテンツも読み込んでしまう。

手法としては `DOMParser` を使う。

“`javascript
function convert(textHtml) {
const parser = new DOMParser();
const $document = parser.parseFromString(textHtml, ‘text/html’);
return $document;
}
“`

これだけ。
以上。

【javascript】スプレット構文の使い方基礎

jsのスプレット構文うろ覚えすぎて一瞬なにそれ？となった（やばい）ので改めて調べて手を動かして覚えよう！ということでその備忘録です。
間違いや認識違いなどなにかあったらコメントいただけると嬉しいです〜

#スプレット構文とは

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax

MDN先生によると
>スプレッド構文 (…) を使うと、配列式や文字列などの反復可能オブジェクトを、0 個以上の引数 (関数呼び出しの場合) や要素 (配列リテラルの場合) を期待された場所で展開したり、オブジェクト式を、0 個以上のキーと値の組 (オブジェクトリテラルの場合) を期待された場所で展開したりすることができます。

そのまんまですね。要素を展開してくれるので、配列の[ ]やオブジェクトの{ }を外すことができるし、変更などで使う事もできる。

#使い方
##展開

シンプルな配列の場合`[]`をはずして展開されます。
`array`という箱から１つづつポイポイ出してくれた

基礎の「き」。Typescriptで学ぶ「クラス」

#はじめに

最近、プログラミング初学者の天敵(？)である「クラス」をようやく退治する気になりました。
という訳で、本記事ではTypescriptにおける「クラス」について基礎から探っていきます。

※執筆者である私は、プログラミング初学者です。そのため扱うレベルが低く、内容に誤りが含まれている可能性もありますが、ご容赦下さい。

##クラスとは？

JavascriptやTypescriptにおいて、オブジェクトを生成する方法は２つあります。
①オブジェクトリテラル
②クラス

①のオブジェクトリテラルは、直接オブジェクトを生成する方法です。

“`typescript
//こんな感じ
const point = {
x: 1,
y: 2
}
“`

一方、クラスとはオブジェクトの設計図のようなものです。
設計図を用意しておき、必要な場面でオブジェクトを生成します。
同じようなオブジェクトが複数必要な場合は、クラスを用いると便利です。

##クラスの定義
一例ですが、クラスは下記のように定義されます。

“`typescript
class Point {
x

ブラウザのテキスト読み上げに合わせてバーが伸び縮みするアニメーション

# ブラウザのテキスト読み上げに合わせてバーが伸び縮みするアニメーション

TEXTAREA に入力したテキストを読み上げます。
ページ下部のソースをローカルに保存してご利用ください。

Windows 10 上の Google Chrome、Microsoft Edge、Firefox で動作を確認しています。
Microsoft Edge は、音声で日本語を選択しないと読み上げてくれませんでした。

パソコンのスピーカーから出た音声をマイクで拾って可視化しているので、ヘッドホンなどで音声出力がふさがっていると、バーの表示は何も起きません。
ブラウザが読み上げた台詞だけでなく、ユーザが読み上げた台詞にも反応しますが、気にしてはいけません。

「それは失敗じゃない。”大失敗”だ。」

[Canvasで赤いLEDが残光を曳くアニメーション](https://qiita.com/stonee/items/dd4ea4ca2cafe57037a7) が必要な方は過去の投稿をどうぞ。

# 使い方

TEXTAREA にお好みの名台詞／迷台詞を入力して「話す」ボタンを押すと、マイクの使用許可を

[JavaScript] Promiseオブジェクトを順次実行するサンプル

Promise ではまったことがあったので、サンプルを動かしつつ学びなおしました。

## 参考

配列のPromiseを直列で実行する方法
https://zenn.dev/wintyo/articles/2973f15a265581

こちらの実装を元にして応用させていただきました。ありがとうございます。

## 動作確認

下記環境で行いました。

> node -v
v16.5.0

> deno -V
deno 1.9.0

## コード

“`js
const waitTimes = [300, 100, 200, 500, 400];

function wait(waitTime, name) {
return new Promise((resolve) => {
setTimeout(() => {
console.log(`${name} ${waitTime}ms waited.`);
resolve();
}, waitTime);
});
}

(async () => {

console.

【Gmail】特定のメールへの直リンクを取得する方法

# はじめに

2022年の改正電子帳簿保存法にNotionで対応するために、Gmail内のメールを紐付けられるURLを取得したかったのですが、直リンク発行が機能として提供されていないようでした。

GASや何かを使う方法は目にしましたが、よりシンプルな方法で実現できたので共有します。

# 直リンク取得方法

下記のスクリプトをブックマークレットとして登録して、Gmailメール本文上で実行します。
( `my_email` をあなたのGmailアドレスに置き換えます。)

“`javascript:ブックマークレット
javascript: (function () {
async function copyPermalink() {
try {
my_email = “example@gmail.com”;
search_url = “https://mail.google.com/mail/u/” + my_email + “/#search/msgid%3A”;
message_id = document
.qu

kintoneでエラーメッセージを表示したり消したりする方法

kintoneでは、フィールドにエラーメッセージを表示したり、レコード自体にエラーメッセージを表示したりすることができます。

**?フィールドのエラーメッセージ**
フィールドの下に表示されます。

**?レコードのエラーメッセージ**
中央上側に表示されます。

今回はフィールドやレコードに自由に（？）エラーメッセージを表示させてみましょう?✨✨

# アプリの準備

| フィールドの種類 | フィールドコード| 備考 |
|:-:|:-:|:-:|
|数値 | 偶数 | |
| 文字列(