# ６月２日もくもく会

**指定事項等**
もくもくタイム　集合したらはじめる〜〜
共有タイム　　もくもくタイムから３０分経過後

## 共有フリースペース

**もくもくフリースペース**

## **JSとRubyの根本的な違い**

JS・・・ブラウザで動く(Node.jsなど、サーバで動くものもある)。

Ruby・・・サーバサイドで動く。

### **JSとRubyの役割**

JS・・・DOMをいじって画面を装飾する(ブラウザが全てを担当)

Ruby・・・ブラウザなどクライアントからのリクエストをもとに、クライアントが求めている情報を提供する(サーバが全てを担当)。

## [DOMについて（Document Object Model）](https://www.w3schools.com/js/js_htmldom.asp)

> HTML DOM を使用すると、JavaScript は HTML ドキュメントのすべての要素にアクセスして見出しやリンクのテキストを変更できます。

document.addEventListener('DOMContentLoaded', () => {
console.log("DOMContentLoaded")

// 削除ボタンのDOMを取得
const buttonDelete = document.getElementById("button-delete")
// 更新ボタンのDOMを取得
const buttonUpdate = document.getElementById("button-update")
// 削除ボタンにクリックイベントを仕掛ける
buttonDelete.addEventListener('click', () => {
// クリックされた時に動く処理
alert("削除！")
})
// 更新ボタンにクリックイベントを仕掛ける
buttonUpdate.addEventListener('click', () => {
// クリックされた時に動く処理
alert("更新！")
})
});

> document.addEventListener('DOMContentLoaded', () => {})
> 上記は一種のイベント設定処理
> **この記述がないとどうなる？**
この記述がないとDOMの解析が終わる前に削除ボタンのDOMを取得をしようとしたりしてうまく動かないことがあります。

JSができること

・イベントをセットする
・DOMを操作する

**getElementByIdメソッドとは？**
任意のHTMLタグで指定したIDにマッチするドキュメント要素を取得するメソッドです。
同じID名が複数存在する場合には最初の要素のみを取得します。

引数としてIDであるStringオブジェクトを要し、戻り値は取得した要素です。任意の要素を抽出し、その内容を変更したい場合など、様々なシチュエーションで活躍する関数です。

**addEventListener()の基本的な使い方**

## DOMは「WEBページとプログラミング言語を繋ぐ役割を持つ」

DOMを操作するにはidやclassが必要
DOMに沿った記述を行ったHTMLファイルをJavaScriptから操作する

Stringオブジェクトの生成
Stringクラスは文字列を表す参照型の型である。

文字列は、”Hello”のようにダブルクォーテーション(“)で囲むことで表せる。

“123”のように数値を記述していてもダブルクォーテーションで囲まれていれば文字列ということになる。

・DOMとは
https://eng-entrance.com/what-is-dom

・Node.jsとは
https://www.webstaff.jp/guide/trend/nodejs%E3%81%AE%E7%89%B9%E5%BE%B4/

・let const メソッド
https://tcd-theme.com/2021/04/javascript-let-const.html?gclid=CjwKCAjwtdeFBhBAEiwAKOIy5-45vQ9kdu-hUrJF_WhZVsxTugWXr450oLt9dh70Mvapt4UP7HhA1RoCp24QAvD_BwE

**定数を宣言するconstとは？**
constとは値書き換えを禁止した変数を宣言する方法です
変数を定める

> letとconstどちらを使うべきか？
> 基本的にはconstを使うことをおすすめします。再代入や再宣言ができず制約が多いからこそ、意図しない挙動を防ぐことができるからです。
>
> constでは実装できない変数の再代入が必要なときはletを使用しましょう。以下は、letを使うべき場合の具体例です。

https://uxmilk.jp/47194
第３引数は、キャプチャリングフェーズもしくはバブリングフェーズのどちらで実行するかを真偽値で指定します。初期値は false で、バブリングフェーズで実行されます。省略した場合は、falseと見なされます。

https://developer.mozilla.org/ja/docs/Web/API/Window/DOMContentLoaded_event
DOMContentLoaded イベントは、最初の HTML 文書の読み込みと解析が完了したとき、スタイルシート、画像、サブフレームの読み込みが完了するのを待たずに発生します。
この記述がないとDOMの解析が終わる前に削除ボタンのDOMを取得をしようとしたりしてうまく動かないことがあります。