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

JavaScript配列の扱い

## はじめに
JavaScriptの勉強を進めています。今は配列のところを勉強しており習ったことをまとめます。
他の言語の勉強も少ししたことがあるのですが、JavaScrptの配列って便利ですね！
自分用のまとめなので間違いなどあるかもしれないのでご了承お願いします

## 　配列の定義
“`
const　scores　 = [10, 20, 30, 40];
“`
今回は配列名をscoresとして記事を書いていきます。[]を使って定義します。中身は「,」で区切ります。

上記では横並びに記述していますが、以下のように縦並びで記述することも可能です。
この記述の場合最後の要素の後に「,」を付けることが可能です(多分)
こっちの記述の方が後から要素を追加する時やりやすいですよね。
“`
const scores =[
10,
20,
30,
];
“`

## 配列の要素の数を取得する
“`
const score_len = scores.length;
“`
配列の要素の数が取得できます。for文にも組み込めるので便利です。
便利です

javascript 動画上のマウス操作のみ検出させる

# はじめに
モーダルで動画を表示するサービスの開発をしています。
画面上のどこで操作しても再生している動画内に停止ボタンが表示されてしまう現象が発生していました。
これを動画上での操作のみを検出してその時だけ停止ボタンが表示されるように修正しました。
その対応方法を記載しております。

# 修正前のソース

document全体に対してEventListenerを追加しているため、どこでマウスを動かしても表示している動画コンテンツの再生ボタンに影響してしまいます。

“`javascript

function fadeInOutControl() {

document.addEventListener(‘mousemove’, () => {
// マウス操作で再生停止ボタンを表示・非表示処理など
});
}
“`

↓

# 修正後のソース

修正後のソースではvideoを表示しているコンテンツに対してのみEventListenerを追加しました。
それによって動画を表示しているコンテンツ上でのみmousemoveが反応するようになりました。

ReactなしでJSXを使う / JSX without React

# JSXをReactなしで使ってみた

いろいろ実験したレポジトリはこちら

https://github.com/ykhirao/qiita/tree/master/jsx-without-react

## シンプルなページ

できたバンドルはこちら

https://ykhirao.github.io/qiita/jsx-without-react/jsx/build/


“`html

認定 JavaScript デベロッパー資格の更新

## Summer’23更新したポイント

– html: `lwc:if`、`lwc:else`と`lwc:ref`

:::note warn
重要 従来の `if:true` と `if:false` ディレクティブは、今後廃止され削除される予定のため、現在は推奨されません。
コードが今後の変更に対応できるように、新しい条件付きディレクティブを代わりに使用することをお勧めします。
:::
– js: `this.refs.定義した名前`
::: note
例：
“`html

“`
“`js
// 従来 document.querySelector(‘c-component’);
const domElement = this.refs.component;

“`
:::

## 実際資格更新のソース
– childコンポーネント

“`child.html