JavaScript関連のことを調べてみた

JavaScript関連のことを調べてみた

javascriptにおける計算式(文字列)の計算

## はじめに

会社のシステム開発において文字列で入力した計算式を計算するというものを作成しているのですが、少し思い通りいかなかった部分を備忘録がてら記載しております。

## 内容

例えば、以下の文字列で構成された計算式を計算しようと思うとエラーが発生してしまいます。
“`javascript
var string = “1–1-+1+-1”
var result = Function(‘return (‘+string+’);’)();
console.log(result);
“`
これは、途中で “`–“` を含んでいるため、これを置換すれば計算は通ります。
“`javascript
var string = “1–1-+1+-1”.replace(“–“,”+”);
var result = Function(‘return (‘+string+’);’)();
console.log(string);
console.log(result);
“`
“`
1+1-+1+-1
0
“`
また、()の隣に演算子がない場合にもエラーになります。
“`

元記事を表示

consoleオブジェクトの種類

# はじめに
Javascriptを使ったことがある人はおなじみの`console`オブジェクトがありますね!
よく使うものとしては、↓があると思います。
“`javascript:index.js
console.log()
console.error()
“`

実は、これ以外にもたくさん種類があり、使い方によっては開発効率があがることも…?
それらを紹介していきます!

## console.assert(条件, 出力)
条件の部分にif文で使うような条件を入れることができ、条件が`false`の場合に出力をします。
“`javascript:example.js
const number = 0;
console.assert(number === 1, “numberは1ではありません。”);

//出力:numberは1ではありません。
“`

## console.clear()
単純に、これまでのコンソールをすべて綺麗さっぱり消してしまいます。

## console.count()、 countReset()
コード内で何度実行したかカウントし、出力されま

元記事を表示

コンマ演算子の使い道の話

# これは何?

[return の後ろにカンマ演算子で区切ったステートメントを記述し、最右のステートメントを返すことに有用性があるかどうか知りたいのです。](https://qiita.com/jaque/items/b99ed9dce78cc64fa9d2#comment-9de09aba4fdf4cd35faf) という記述を読み、そこに限定せずに コンマ演算子が役に立つパターンについて考えた。

とはいえ、 `return 式, 式;` が念頭にある。

# そもそも

そもそも、コンマ演算子は C 言語に由来する。
と言いたいところだけど、よく知らない。BCPL には無かったようなので、B言語か C言語なのかな。

いずれにせよ、C言語がきっかけで広まったと思う。

# 可読性の低下に寄与

コンマは演算子以外の用途でも使われるのでコンマ演算子なのかそうじゃないのかを判断するのがめんどくさく、可読性の低下に寄与しやすい。

“`JavaScript:JavaScript
a=(b,c); // コンマ演算子
a=f(b,c); // 引数区切り
a=g((b,c)); //

元記事を表示

JavaScriptで動的に生成したタグの取得法

## 結論

“`tsx
const data = document.getElementsByClassName(‘content’)[0];
“`

`getElementsByClassName`メソッドを利用して取得する。最後に0番目を指定しているのは、帰ってくる形が`HTMLCollection`の形で取得できる。この時に、0番目を指定すれば、要素を取得することができる。また、複数取得した時に`HTMLCollection`の形で帰ってきた場合は、配列に変換すればいいかと思います(もちろん場合による)。

“`tsx
const data = Array.from(document.getElementsByClassName(‘content’));
“`

## ダメなパターン

動的に生成した要素は`querySelector`では取得することはできない。NodeListには静的の概念が存在する。

## 参考記事

[querySelectorAll() は動的に生成・削除された要素をキャッチしない – Qiita](https://qiita.com/n_h

元記事を表示

typed-query-selector について調べてみる

# 1. 背景
querySelector(),querySelectorAll()で型がElement,NodeListOfになって毎回型チェックをするのが手間だなと感じていました。

“`ts
const a = document.querySelectorAll(‘div#app’);
“`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405182/9b28505b-d3df-51c4-bcc8-0b581a0c63d6.png)

以下の記事でtyped-query-selectorというライブラリを知りました。

https://yurika1202.com/post/coding/queryselector-type/#typed-queryselector

# 2. typed-query-selector

https://github.com/g-plane/typed-query-selector

querySelector,query

元記事を表示

HTML: iframeを使った手品

## onload属性内部ではiframe自身を指すobjectを省略可能
“`html