f@ctor

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

JavaScript関連のことを調べてみた2022年09月01日
目次

jsの連想配列の順番が勝手に変わる

# 連想配列の順番が変わる
開発している時に連想配列の順番が勝手に変わることに気が付き、どういった場合に変わってしまうのかをまとめていきます。
結論として、jsではオブジェクトの並び順は保証されていないので、並び順を保持したい場合は配列で管理する必要があります。

以下の結果はchromeで流した結果です。
## 要素の追加
“`js
let aa = {2: 2, 6: 6}
aa[3] = 3
aa[“a”] = “a”
console.log(“要素の追加”, aa)
// => 要素の追加 {2: 2, 3: 3, 6: 6, a: ‘a’}
“`

## valuesまたはkeysを取得
“`js
let bb = {3: 3, 5: 5, 1: 1}
console.log(“bb”, bb)
console.log(‘bbのvaluesを取得’, Object.values(bb))
console.log(‘bbのkeysを取得’, Object.keys(bb))
// => bb {1: 1, 3: 3, 5: 5}
// => bbのvaluesを取得 [1

元記事を表示

javascriptで、HTMLに要素を追加しよう

## はじめに
この記事は、「なんとなく理解できた」を目的としているため、正確性、具体性に欠ける表現がございます。

精度の高い情報を求めている方には向かないので、ご理解ください。

## 完成図

“`
var first = document.createElement(‘div’);
first.setAttribute(‘id’,’first’);
first.innerHTML = ‘

要素を追加

‘;
practice.insertBefore(first, null);
“`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1782859/ecacbd49-3236-7d6b-b312-2851c134697b.png)

## 解説

var first = document.createElement(‘div’);
空のDIV要素が入っている変数firstを作成。
現時点での中身は、こんな感じ。
“`

“`

first.se

元記事を表示

javascript styleについて

## はじめに
この記事は、「なんとなく理解できた」を目的としているため、正確性、具体性に欠ける表現がございます。

精度の高い情報を求めている方には向かないので、ご理解ください。

## style

style : innerのCSS版。JS側から、CSSを使うことが出来るようになる。

“`
変更したい要素名.style.CSSの処理
“`
といった感じ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1782859/52a68ce7-2713-f5fd-1046-58736f048538.png)

今回の場合は、colorだが、fontsizeなどの別の要素に変更することもできる。

## おわり
最後まで見ていただき、ありがとうございます。
気になった点や、感想などをいただけると、嬉しいです。

元記事を表示

querySelectorについて

## はじめに
この記事は、「なんとなく理解できた」を目的としているため、正確性、具体性に欠ける表現がございます。

精度の高い情報を求めている方には向かないので、ご理解ください。

## querySelector

querySelector : Classを指定するgetelementbyuid

複数を選択したい場合は、querySelectorAllを使う。

innerHTMLで、値を変えようとしたけど複数選択されているときはきのうしなかった。

querySelectorAllというよりは、inner側が複数運用できないように設定されているという説が有力です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1782859/a101f406-053c-7822-12a4-c5cbce54caa5.png)

## おわり
最後まで見ていただき、ありがとうございます。
気になった点や、感想などをいただけると、嬉しいです。

元記事を表示

getElementByIdと、Innerについて

## はじめに
この記事は、「なんとなく理解できた」を目的としているため、正確性、具体性に欠ける表現がございます。

精度の高い情報を求めている方には向かないので、ご理解ください。

## getElementByIdと、Inner

getElementByIdは、HTML要素の、部分を取得する事が出来る。

その後、変数などに結果を格納することが可能。

そして、Innerで変数をかけることで、指定したIDの中身を変えることが出来る。

“`
var practice = document.getElementById(‘practice’);
practice.innerHTML = ‘

れんしゅう

‘;
“`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1782859/5703378b-3262-34ac-8168-8f32d53c0dd6.png)

## おわり
最後まで見ていただき、ありがとうございます。
気になった点や、感想などをいただけると、

元記事を表示

オブジェクト・プロパティ・メソッドについてあれこれ何文字までいけるんだああああああおあああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

## はじめに
この記事は、「なんとなく理解できた」を目的としているため、正確性、具体性に欠ける表現がございます。

精度の高い情報を求めている方には向かないので、ご理解ください。

## オブジェクト

オブジェクト: プログラムの機能をすべてまとめたもの。

プロパティ: オブジェクトの中にあるデータの総称

メソッド: オブジェクトの中の操作に関する部分を記述した関数

## おわり
最後まで見ていただき、ありがとうございます。
気になった点や、感想などをいただけると、嬉しいです。

元記事を表示

人事のおじさんプログラミングを学ぶ Day10「算術演算子～FuzzBuzzのファンクション」

書籍『確かな力が身につくJavaScript「超」入門 第2版』に沿って、
算術演算子を使ってFuzzBuzzのfunctionを書いてみた。
![2022-08-30 (8).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2783084/79b42c33-dc71-4628-3022-cb2a0ea2f2a7.png)
![2022-08-30 (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2783084/003e5257-c181-5197-be91-eac4f98221a1.png)

元記事を表示

Python,Ruby,PHP,Java,JavaScript,Perlの関数定義の比較 (メソッド定義・サブルーチン定義なども)

Qiita > プログラミング言語の比較

Python,Ruby,PHP,Java,JavaScript,Perlの関数定義の比較 (メソッド定義・サブルーチン定義なども)

# Python

https://qiita.com/simonritchie/items/0f7b3768031dda834907

# Ruby

https://qiita.com/shizen-shin/items/dd41d1f0176a5e764f9f

# PHP

https://qiita.com/miriwo/items/a33688165a5f36ea8e76

# Java

https://qiita.com/takahirocook/items/5bfe43576d87a2a4006c

# JavaScript

https://qiita.com/tomcky/items/988fc5f56d019e9dc097

# Perl

ht

元記事を表示

parseInt とは？

## はじめに
この記事は、「なんとなく理解できた」を目的としているため、正確性、具体性に欠ける表現がございます。

精度の高い情報を求めている方には向かないので、ご理解ください。

##

parseInt : 文字列を整数に変換すること

第2引数で、進数の指定をすることが出来る。

“`
hum = parseInt(hum, 10);
“`

## おわり
最後まで見ていただき、ありがとうございます。
気になった点や、感想などをいただけると、嬉しいです。

元記事を表示

三項演算子　returnできない時の対処法

実務でTSを書いている時に、「三項演算子使お！」と思って書いてみたのですが、初歩的なミスをしてしまい、
少し忘れたら嫌なので、メモとして残します！
（対処法だけ見たい方は最後のセクションをみましょう！）

# 流れ
1. 三項演算子とは
1. returnできないエラー
1. 対処法

# 1. 三項演算子とは
簡単に言うと、if文をかなり省略した**式**です。
実際に通常のif文と三項演算子を比較してみるとわかりやすいと思います。

React(ts)内で記述した三項演算子
“`typescript:index.tsx
let style
style = disabled ? { backgroundColor: ‘gray’ } : {}
“`

通常のif文
“`typescript:index.tsx
let style
if(disabled) style = { backgroundColor: ‘gray’ }
else style = {}
“`
（このコードは、ReactのStyleの指定方法を用いて、背景色の設定をオブジェクトで返します。）
若干行数が増

元記事を表示

JavaScriptのNumberについて

# 初めに
ソートの仕組みを書いて以来Numberのことがあまり触れてない気がします。今回はNumberの基本知識、一部の関連メソッドをまとめてみました。

参考文章は以下です。

https://javascript.info/number

https://es6.ruanyifeng.com/#docs/number

# Memo
– 数字の間にあるアンダースコア`_`はJavaScriptエンジンに無視されるので、区切りしてより読みやすくなる。
– `e`は10の指数の表しです。`e6`⇒`* 1000000`。`-6e`は` * 0.000001`。
– 2進数（Binary）prefix⇒`0b`(0B)、digits⇒`0`, `1`。
– 8進数（Octal）prefix⇒`0o`(0O)、digits⇒`0…7`。
– 16進数（Hex）prefix⇒`0x`(0X)、digits⇒`0…9`, `A…F`。
– `Number.MAX_SAFE_INTEGER`⇒`9007199254740991`(2^53 – 1)。
– `Number.MIN_S

元記事を表示

Reactでinputとbuttonのイベント

## button
関数コンポーネント内にclickHandler を定義し、buttonタグのonClickにclickHandler を指定。
“`jsx:Button.js
const Button = () => {
const clickHandler = () => alert(‘Hello’)
return (
<>


)
}

export default Button
“`
onClick内にclickHandler()と記述すると描画時に発火するので注意。

## input
useStateを呼び出す。
“`jsx:Input.js
import { useState } from “react”;
const Input = () => {
let [val, setFunc] = useState()
return (
<>

元記事を表示

関数コンポーネントでJavaScriptを使う

関数コンポーネントでJavaScriptを使うことが可能。下記のように記述する。
“`jsx
import ‘./Expression.css’
const Expression = () => {
const title = “Expression”;
const array = [‘item1’, ‘item2’, ‘item3’];
const hello = (arg) => `${arg} function`
return (

Hello {title}

{array}

{array}

{hello(‘Hello’)}

)
}

export default Expression
“`

関数内でJSを定義し、HTMLタグに使用できる。引数に外部からの値を渡すことが可能。
“`jsx:Express.js
import ‘./E

元記事を表示

JavaScriptでUSBカメラを使って撮影してみた

# はじめに
PCに接続されているUSBカメラを起動し、JavaScriptでキャプチャしたものをキャンバス上に描画する処理を書いてみました。
次のhtmlコードをブラウザ上で動作させたら、最初にカメラの許可を求めてくるので、許可してください。

# コード
“`index.html




カメラ制御



```
Vue.js同様にappのidを定義し、そのDOM要素にコンポーネントが挿入される。(appにreact要素をマウントする。)
コンポーネントの関数名は必ず大文字でなければならない。上の例で行くと、babelがコンポーネントではなくexampleという要素として認識するらしい。
なおこち

元記事を表示

ホームページのバナーはバニラのjsよりslick.jsを使った方が早いかつ品質が良い話（2）

前回はこちらにご参照ください。
https://qiita.com/u9908028/items/e666237c854e15a84103
目標は、既存のバナーをカドカワ様の公式ページのようなバナーに改造することです。

バナーの特性と目標

見た目は似てきたものの、マウス動作による反応、バナーの最後尾から最初の画像に移動する際のニメーションなどは自作のバニラjavascriptバナーでは作れませんでした。

カドカワ様のバナーは下記の幾つの特性があります。

  1. 定期的に画像を左に移動する（以下、定期的移動と呼称します）
  2. マウスが画像の上にいるとき、定期的移動が停止
  3. マウスが「点」を押したら、対応する画像に移動した後、定期的に移動しない
  4. 左右の矢印を
元記事を表示

TypeScript(JavaScript)における数値チェック(isNaN)をeslintを使ってより安全に使う

# はじめに
以前に「[TypeScriptにおけるnullとundefinedそしてfalsy値](https://qiita.com/yoshitama/items/643a86f2cae744f43658)」という記事を書いた際に、
NaN === NaNがfalseになるという仕様を教えていただきました。
熟練者であれば当然の仕様かと思いますが、改めてまとめていきたいと思います。

# 結論
### TypeScript(JavaScript)で数値チェックをするときは`Number.isNaN()`を使いましょう。
```ts
const hoge = なにか;
if (Number.isNaN(hoge)) { console.log('数値ではありません'); }
```

### eslintでisNaN()を使えないように設定しよう
```eslintrc.yml
rules: {
no-restricted-globals: [
"error",
{
"name": "isNaN",
"message": "Use Num

元記事を表示

Canvasについて

Canvasの扱い方。

⓪canvasタグを使いオブジェクトを生成
``````

①getElementByIdでキャンバスオブジェクトを取得
```const canvas = document.getElementById("myCanvas");```

②キャンバスのプロパティを操作できるように設定
```const ctx = canvas.getContext('2d');```

③ctx.〇〇 = ** でプロパティの値を編集
```
ctx.fillStyle = 'rgb(200, 0, 0)';
ctx.fillRect(10, 10, 50, 50);
ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
ctx.fillRect(30, 30, 50, 50);
```
オブジェクト生成
↓
オブジェクト取得
↓
オブジェクトのプロパティ設定
↓
オブジェクトのプロパティ操作

元記事を表示

OTHERカテゴリの最新記事