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

javascriptでスタックとキューを書く

#最初に
まずはじめにスタックとキューについて説明します。
スタックというものは後にいれたものを先に取り出すことです。
キューは先にいれたものを先に取り出すことです。
##スタックとキューのやり方
**スタック**

“`javascript:main.js
let arr = [];
arr.push(1);
arr.push(2);
arr.push(3);
arr.push(4);

//[1,2,3,4]

console.log(arr.pop()); //4
console.log(arr.pop()); //3
console.log(arr.pop()); //2
console.log(arr.pop()); //1
“`
スタックではpushメソッドとpopメソッドを使います。
push()は配列の最後に引数に入ってるものを格納するメソッドで,popメソッドは配列の最後にある物を取り出すメソッドです。

まず最初に変数arrのところで配列を宣言します。
そのあとにpush()で引数に入っている数字を格納していっています。
次にpopメソッドで最後のほうから取り出

【決定版？！】モダンブラウザでIME入力検知：MutationObserver

## モチベーション

**MutationObserver とMutationRecord でDOMの変更を監視。変更前の状態も取得できるので、IMEの入力制御に使えそう！**

さて、モダンブラウザとElectronで動くMarkdownエディタを作っています。ユーザーのキー入力を監視して、自前でDOM操作したいわけですが、IMEだけはどうしても苦労しています。これまで、CompositionEventの監視による試行錯誤の結果を何度か投稿しましたが、今回は別の手段としてMutationObserver を試したのでまた情報共有の投稿です。

– 過去記事1: [モダンブラウザにおけるIME入力検知](https://qiita.com/pochman/items/5b69ebedf4465f93c2f1)
– 過去記事2: [モダンブラウザにおけるキー入力のキャンセル](https://qiita.com/pochman/items/b99c835bf598810d3c18)

## MutationObserverのメリット

そのMutationObserverですが、Co

オーガナイズドなCSSとミニマルなJSで実装する三枚綴りページ

####テーマ
　「DHTMLを極める為にJSを極める」という考え方はもう古いという事に最近気がついた。時代のニーズのトレンドは「周到なCSSを如何に練り上げ、JSやPHPにどれだけしょうもないことをさせるか」ではないか。例えば↓↓↓こんな風に。

####やりたいこと
html1ページに3枚のページを重ねて表示する。
1枚目を中央に配置し、2枚目を右下、3枚目を左上にずらす。
2枚目をクリックすると2枚目が一番上にめくり上がり、3枚目をクリックすると3枚目が一番上にめくり上がる。
1→2→３→1→2や、1→3→2→1→3の切り替えは無限に可能。

####手順1
htmlタグはとてもシンプル。大雑把に言えば、一つのulに5つのliを入れているだけ。
ulは可動域を示し、liはページx3と切替

JavaScriptでフォントが存在するか確認する方法

指定したフォントが存在するか真偽値を返す関数。

“`js
function font_exists(fontName){
const canvas = document.createElement(‘canvas’).getContext(‘2d’)
const text = ‘abcdefghijklmnopqrstuvwxyz0123456789’

canvas.font = `72px monospace`
const size1 = canvas.measureText(text).width

canvas.font = `72px ${fontName}, monospace`
const size2 = canvas.measureText(text).width

return size1 !== size2
}
“`

nuxtでDOMException: Failed to execute ‘appendChild’ on ‘Node’エラー

#Failed to execute ‘appendChild’ on ‘Node’
`nuxt` でこんな感じのエラーが出る
因みに`dev` では出ない。

“`
DOMException: Failed to execute ‘appendChild’ on ‘Node’: This node type does not support this method.
at Object.appendChild
“`

#原因
`