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

wikipediaのワードを使った連想ゲームアプリを作ってみた【Node.js+express】

このアプリはいたってシンプルで、**wikipediaからランダムに取得したワードに関連した言葉を３つ入力するアプリ**です。
（めちゃくちゃ簡単なアプリです。ご承知おきください。）

# 実装環境
ubuntu：18.04.5 LTS
node.js ：v10.14.2
express : 4.16.0

+ github：https://github.com/Sparrow42/associate-app

#アプリの使い方
こちらがトップ画面です。「岐阜中警察署」と出ています。思いついたものなんでもいいので、３つ入力します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403809/8381095e-bb69-09fc-9f90-babd

tableタグをJavascriptで操作する。HTMLTableElementについて

HTMLtableElementというインターフェースを使うことで、**tableタグをJavaScriptで操作できる**ことが判明。

HTMLTableElementの概要とは何か？と使い方のまとめ。

##HTMLTableElementとは？

HTML5から実装された機能で、tableタグをオブジェクトに変換し**行列の状態を取得したり、行列を追加したりなどの操作ができる**。

HTMLElementであるタグ（要素）をAPIで操作する形となる。


これを使うと、例えばtableタグ内のtrタグは、`rowsプロパティ`で表される。

列を追加したい場合は`insertRow()`メソッドを使うことで、trタグを追加できる。

###・HTMLTableElement関連のAPI
HTMLTableElement

ArmにあるというJavaScript専用命令とは何か、あるいは浮動小数点数を整数に変換する方法について

Armv8.3の `FJCVTZS` 命令を解説します。

# 浮動小数点数から整数へのキャスト

予備知識として、いくつかのプログラミング言語における浮動小数点数から整数へのキャストの仕様を解説します。

## C言語

基本的に0方向への丸め（切り捨て）で計算されます。

“`c
(int32_t)(-2.8); // -> -2
(int32_t)3.9999; // -> 3
“`

元の値の絶対値が大きすぎる場合や、無限大、NaNの場合は、

* 6.3.1.4: 表現できない場合はundefined behavior。
* Annex F.4: 表現できない場合はinvalid例外が発生して、値はunspecified。

とされています。

これ以外の浮動小数点数→整数型の変換方法には `(l)lrint` や `(l)lround` 関数などがあります。

## Java

基本的に0方向への丸め（切り捨て）で計算されますが、コーナーケースについても言語仕様で定めています。

* NaN：0を返す
* 結果が表現できないもしくは無限大の場合：符号に応じて最大値または

[Javascript] Javascript Pattern要約 – DOMとブラウザパターン

## DOMアクセス

DOMアクセス

・DOMアクセスは最小化する。
・ループ内でのDOMアクセスは避ける。

“` javascript
// アンチパターン
for (var i = 0; i < 100; i += 1) { document.getElementById("result").innerHTML += i + ", "; } // 変数を利用した改善 var i, content = ""; for (var i = 0; i < 100; i += 1) { content += i + ", "; } document.getElementById("result").innerHTML += content; ``` ・DOM参照を変数に割り当てて使用する。 ``` javascript // アンチパターン var padding = document.getElementById("result").style.padding, margin = document.getElementById("result").style.m

[Javascript] Javascript Pattern要約 – オブジェクト生成パターン

## ネームスペース·パターン

ネームスペース·パターン

・容易に実装できるパターンであり、全域変数の個数を減らし、変数名が不要に長くなることを防止する。
・全域ネームスペースオブジェクトはよく大文字で宣言する。

“` javascript
// アンチパターン
function Parent() {
}
function Child() {
}
var some_var = 1;
var module1 = {};
var module2 = {};

// 改善案
var MYAPP = {};
MYAPP.Parent = function() {

};
MYAPP.Child = function() {

};
MYAPP.some_var = 1;

MYAPP.modules = {};
MYAPP.modules.module1.data = {a:1, b:2};
MYAPP.modules.module2 = {};
“`
・このパターンの短所は次のようである。
１. すべての変数と関数に接頭語をつけるため、全体コード量が長くなりダウンロードファイルのサ

[Javascript] Javascript Pattern要約 – デザインパターン

## シングルトン·パターン

シングルトン·パターン

・シングルトンパターンは特定クラスのオブジェクトを一つだけ維持するパターンだ。
・JavaScriptでは既にオブジェクトリテラルを利用したオブジェクト生成方法がシングルトンパターンと同じである。

“` javascript
var obj = {
myprop : “my value”
};

var obj2 = {
myprop : “my value”
};
obj === obj2; // false
obj == obj2; // false
“`

## ファクトリー·パターン

ファクトリー·パターン

・似たオブジェクトを工場で印刷するように繰り返し生成できるパターン。
・コンパイルの時点で具体的なタイプ(クラス)がわからなくてもオブジェクト生成ができる。
・ファクトリーパターンの最も多い事例は、Object()を利用したオブジェクト生成の際、与えられる値のタイプによってString、Boolean、Numberなどでオブジェクトが生成されることである。

“` javascript
fun

JavaScript 基礎文法

変数定義について
—

JavaScriptには、var,const,letと3つ存在します。

var
—

varは再定義、再代入可能な**古い書き方**です。
varの特徴 →　再代入、再定義ともに可能です。

“`csharp

var sample = “おはよう”

sample = “おはよう”
//再代入ok

var sample = “おはよう”
//再定義ok
“`

const
—

constは、後から書き換えることができない変数を定義する書き方です。
constの特徴 →　**再代入、再定義ともに不可**という制約があります。

“`csharp
const sample = “おはよう”

sample = “おはよう”
//再代入NG → エラーが起きる

const sample = “おはよう”
//再定義NG → エラーが起きる

const fruits = “banana”

console.log(fruits)
// => bananaと出力られます
“`

**constで最代入できないことを確認**

cons

[Vue.js] 子コンポーネント内の DOM の参照を取得する

## はじめに

たとえば以下のようなコンポーネントがあったとします。

“`InputComponent.vue

“`

今回はこのコンポーネントを利用する親コンポーネントから、コンポーネント内部の `input` タグへの参照を取得することを目指します。
親からフォーカスを当てたい時などに使えると思います。
**Vue** のバージョンは３系を前提とし、 **Composition API** を利用します。

## 親コンポーネント

まず親からどうやって使うかを考えてみます。
単純に子コンポーネントを `ref` で参照すると、残念ながらDOMではなくコンポーネントインスタンスへの参照になってしまいます。

“`ParentComponent.vue