常連

回答者

ベストアンサー

拍手喝采

### 前提・実現したいこと
なぜ、このような実行結果になるのでしょうか？
２行目で、入れ替えているようなのですが、よくわかりません。

### 該当のソースコード
```JavaScript
const array = [0, 1, 2];

[array[2], array[0]] = [array[0], array[2]]; // なんで入れ替わるのでしょうか？

console.log(array);	// [2, 1, 0]
```


### 試したこと
```JavaScript
array[0] = array[2]; 
```
上記、みたいな書き方なら、分かります。
２行目のキーワードがわからないので、調べられないです。
どうぞよろしくお願いいたします。

なぜ、配列の内容が入れ替わるのでしょうか？

お世話になります。

現在、Wordpressにて作成したWebサイトを管理しているものです。
1つ質問をさせてください。

それはタイトルにも書いた通りなのですが、先日（先週の木曜日あたり、つまり約1週間前）から、【当方の作成したサイトへのアクセスが定期的に遅くなる現象】に見舞われています。

ずっと遅い訳ではなく、1日に平均して３～４回、不定期に唐突に重たくなります。
一度重くなると30分～3時間ほどで勝手に回復します。
普段の快適な状態で1秒以内で開いていたページが、この現象中は5～8秒ほどかかる感じです。

今まで1年以上サイト運営をしてきて、こんな現象は初めてです。
正直、かなり困っています。


状況の詳細は以下の通りです。

■作成
Wordpress
■使用テーマ
Astra
■メインで使用しているプラグイン
Elementor Pro

■契約Webサーバー
ConoHaサーバー（リザーブド2GBプラン）
■独自ドメイン
お名前ドットコムにて取得


さて、ここからが本題なのですが、この1週間ほぼつきっきりでこの問題に当たっているのですが、いわゆるちまたで言われる

「画像を軽くする」
「CSSやJavaScriptを整理する」
「プラグインを1つづつ外して確認する」
「サーバー環境をアップグレードする」

など、ほぼ全ての対応策について、嫌というほど極端なまでに試してみました。

しかし、いまだに改善されません。

そして最近、もしこのまま遅いままだったことを考えて、やむなく「Preloador」というプラグインにて「ロード画面」を設定することを考えました。
遅くても、できるだけストレスを与えない苦肉の策ですね。

すると、試してみると**妙なことが起きました**。

**このロード画面が表示されるまでに（例の遅延的な）時間がかかり、このロード画面の表示自体は一瞬だった**のです。

普通、サイトに使用している画像が重かったりスクリプトの容量が大きかったら、このロード画面そのものの時間が長くなりませんか？
（つまり、いつまでも読み込みの「ロード中」がクルクルと回っているイメージです）

iPhoneのSafariで見てみても、サイトアクセスの程度を表す青い横線が、最初の1cmあたりの地点で「何かにつまづいたように、引っかかったように」止まり（4～8秒）
↓
そこから一瞬だけロード画面が現れて（一瞬過ぎてロード画面と認識できないほどです）
↓
画面の表示

という感じの流れになります。


・・・これは、何が起きているのか、何が原因なのかわかる方はいらっしゃいますでしょうか？

ConoHaサーバーのサポートにも問い合わせているのですが、何とも頼りない上に現在お盆休みで1週間全サポート休止中などという状態で涙目です。
非常に困っております。

もし何か原因に思い当たる節のいる方がいらっしゃったら、ぜひ助けていただけませんでしょうか。

以上、よろしくお願い致します。
長文を失礼しました。

Wordpressで作成したサイトへのアクセスが不定期に重くなる

突然すみません。
勉強のために下記のサイトのソースコードを分析していて分からないことがあるので質問させていただきます。
[https://snipboard.io/](https://snipboard.io/)

上記のサイトで画像をアップロードして発行されるURLは"~jpg"と画像URLのはずなのですが、アクセスするとその画像のあるページに移動します。
htaccessで拡張子を隠して画像ファイルに見せかけたhtmlページだとしても、下記のJSを利用したコードでページをプレビューすると画像として認識されます（htmlページならプレビューに失敗する）

どういう動作でそうなっているのか見当がつかないので、分かる人がいましたら教えていただけないでしょうか？

```PHP+JS
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<meta charset="UTF-8">
<title>JavaScriptで画像のプレビュー</title>
</head>
<body>

<?php $picture = "対象ページと画像のURL";?>

<p>
Preview:<br>
<a href = <?php echo $picture ;?> ><img id="preview" src= "<?php echo $picture ?>" style="max-width:300px;"></a>
</p>
<script>
function previewImage(obj)
{
	var fileReader = new FileReader();
	fileReader.onload = (function() {
		document.getElementById('preview').src = fileReader.result;
	});
	fileReader.readAsDataURL(obj.files[0]);
}
</script>
</body>
</html>
```

~.画像拡張子なのに通常のページが表示されている動作について質問

### 前提・実現したいこと
利用者が√9+√64のように入力した文字列を計算したいです。


### 該当のソースコード

```JavaScript
const test = "√9+√64"
console.log(test)
```

### 試したこと
`.substring()`や`Math.sqrt()`、`.replace()`などを試しましたが、思うようにいきませんでした。
√と次にくる演算記号の間の数字をとり、それぞれ計算させる方法もあるのかなと思いましたが、その方法もわかりませんでした。
どなたかご教授いただけませんでしょうか。

### 改善コード
```JavaScript
const test = "√9+√64"
const num = []
test.split('+').forEach(e => {
  num.push(Math.sqrt(e.replace('√', '')))
});
const sum = num.reduce(function(a,b){
  return a + b;
})
console.log(sum) //11
```

【JavaScript】test = "√9+√64" のような平方根の文字列を計算する方法はありますか？

### 前提・実現したいこと
入力でyyyy/mm/ddと入力して現在の年齢を求めたいです。
上のように入力しても、年齢が出てこなくて困っています。ネットで調べてもうまくいかなくて心優しい方よろしくお願いいたします。


### 該当のソースコード

```js
var practice = {
	birth : null,
	Age : function(){
		birthday = new Date(practice.birth);
		today = new Date();
       
        
         thisYearBirthday =
            new Date(today.getFullYear(), practice.birth.getMonth(), practice.getDate());  
       
        
         age = today.getFullYear() - practice.birth.getFullYear();
       		
	alert(age);

    }
};
alert('入力例:1995/08/03');
practice.birth = prompt("生年月日を入力してください。");
practice.Age();
```

### 試したこと

ここに問題に対して試したことを記載してください。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

JSで生年月日から年齢の計算

### p5.jsで動体検知センサーのようなものを作っています

WEBカメラを使用して、WEB上で鑑賞できる作品を創っています。

今回は「動体検知センサー」のようなもので
鑑賞者自身の動きに合わせて「音」を出すことを考えています。

鑑賞者が少しでも動くと「ピッ」と音（sample.mp3）を鳴らし
動きを止めると鳴らさないものを作りたい。

ご教授の程、宜しくお願い致します。




### 発生している問題

```
未完成の「動体検知センサー」にある「大きな黒丸」は
鑑賞者の動きに反応しているので問題はないと思います。

問題は「音」です。
ピッ〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜！
という連続音ではなく、「ピッ」「ピッ」「ピッ」と反応させたい。
おそらく、音（ピッ）の再生がループになっているのではないか？
と考え、9日以上いろいろとやっているのですが解決しません。
```

### 該当のソースコード

```html
<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sensor</title>
  <link rel="stylesheet" href="style.css" type="text/css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/p5.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/addons/p5.dom.min.js"></script>
  <script src="https://p5js.jp/assets/js/p5.sound.min.js"></script>
<script src="sketch.js"></script>
</head>

<body>
<div class="canvas-wrapper">

<canvas id="canvas1"></canvas>
<div id="wrapper">
<canvas id="pjs" height="100%"></canvas>
</div>

</div>
</body>
</html>
```

```javascript
let song;

function setup() { 
  createCanvas(windowWidth, windowHeight);
  img = createCapture(VIDEO);
  img.hide();
  img.size(windowWidth, windowHeight);
  song = loadSound('button01a.mp3');
}

function draw() {
	background(0);
	img.loadPixels();
  for (var y=250;y<img.height ;  y+=500){
  for (var x=250;x<img.width; x+=500){
     var  i = y * width + (img.width-x-1);	
     const darkness = (255 - img.pixels[i * 4]) / 255;
     const radius = 500 * darkness;
     song.play();
     fill(255);
     ellipse(x, y, radius, radius);
     }
    }
}
```
### 2021/4/12に追記したソースコード
```css
.canvas-wrapper {
    position: relative;
}
.canvas-wrapper canvas {
    position: absolute;
    bottom: 0;
    left: 0;
}
```

### sample.mp3はこちらの無料効果音を借りています

```sample.mp3
https://taira-komori.jpn.org/sound/game01/button01a.mp3
```

### 試したこと

画面に対して黒丸の数が多いとネット環境が重くなり、PCも重くなりました。
そこで、黒丸の数を減らしてみました（こちから環境では４つ）が、
それでも音は連続しているため、重なって鳴っているのではないということを確認できました。
song.stop();をいろいろな箇所に入れて試しましたが、音がループがされます。

ご教授の程、宜しくお願い致します。


cwi様からのアドバイスで
.play();直下にconsole.log(Date.now());を入れましたが、ひっきりなしに音が再生されています。

ブラウザで使える動体検知センサーをp5.jsで作りたい

### 前提・実現したいこと

1辺だけ色のついた太いボーダーのある角丸のボックスをcssで作りました。

iOSで見たときだけ、ボーダーのない角の丸みに沿って気づくか気づかないくらいかの同色の細い線が出てしまいます。
これを消すことはできるでしょうか？

![左上と左下の角丸部分に緑の線が入る](af4427f83ec488f687d6070ba608250a.jpeg)

### 該当のソースコード

```html
<body>
	<div>テキスト</div>
</body>
```
```css

body{
	background: #f9f9f9;
	padding: 50px;
}
div{
	border-radius: 10px;
	border-right: 20px solid green;
	background: white;
	padding: 20px;
}
```

### 試したこと

その他の辺にborder-color:#fffやborder:0;を指定しても変わりませんでした。
ボーダー部分を疑似要素にしてしまえば解決するのですが、
この角丸とボーダーの出方がiOSの仕様なのかが気になりました。

### ブラウザ

Windows、Androidでは角に線が出ずに理想の表示になっています。
iPhone、iPad、MacのSafari、Chromeにてこの現象が見られます。


### 追記

角丸の細い線を消して、理想の表示（windows・Androidで上記コードを見たときの表示）のデザインを崩さないようにしたいです。

【CSS】一辺だけborderを指定した場合、iOSだけborderを指定していない辺の角丸に沿って線が出てしまう

初心者です。
javascriptでページを遷移させた後に、
イベントを実行させたいのですが(今回の例ではアラートを発動)、
どの様なやり方が正しいのでしょうか。

＊↓下の例ではアラートが発動された後に、2ページ目がきてしまいます。
どなたか教えていただけると大変助かります。

宜しくお願いいたします。

ーーーーーーーー
【index.html】
```html
...
<body>
  
  <button id="btn">次のページへ</button>
 

  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script type="text/javascript" src="test.js"></script>

</body>
</html>
```



【next.html】
```html
...
<body>

    <p>2ページ目です。</p>
    

  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script type="text/javascript" src="test.js"></script>

</body>
</html>
```

【test.js】
```js
$("#btn").click(function(){
    location.href = 'next.html';
    alert("ok");
  });
```

javascript ページ遷移後に実行させたい

今まで、開発環境を構築せずに、ローカルでコーディングしていきなりサーバーにアップするというやり方で無理くりサイトを作ってまして、そのやり方でmysqlも使っていました。
myspqlはmyadminでブラウザから操作してデータを入れていました。

勉強の為に、そのサイトを開発環境を構築して作り直ししようと思ってますが、開発環境化で構築したDBデータってどうやって本番環境に移行しているのでしょうか？

やろうとしているのは、MAMPでlaravel使って、という感じです。
予定ではDBには顧客データの他、商品データが膨大に必要で、この商品データをテスト環境からそのまま本番環境にコピーできると良いのですが。

説明が下手かもしれないのですが、
顧客データ（こちらは最悪移行出来なくてもいい。多分ダミーデータで開発する）
商品データ（膨大なので、せっかく開発環境化でリアルな物を構築したら本番に簡単に移行できたら嬉しい。ダミーデータでの開発はしない）


と、言う事でございます。
やり方教えて頂けると嬉しいです。

開発環境化のDBデータはどうやって本番にコピー（または再現）しているのですか？

### 前提・実現したいこと

オンライン模試などでよく使用される、他のタブを利用しながらの利用を禁止するために、
強制的に**全画面表示**にする方法ってどのように組めばいいのでしょうか。

具体的には、
```
ページを開いた瞬間に全画面表示になる
↓
ユーザーによって全画面表示を解除された場合は
無効化できないポップアップを表示して表示されているページを見れなくする
（あるいはページに対してスクロールなどの操作をできなくする）
```
### 該当のソースコード

```javascript
  document.querySelector("#btn-open").addEventListener("click", ()=>{
    if ( screenfull.enabled ) {
      const element = document.querySelector("#photo");
      screenfull.request(element);
    }
    else{
      alert("フルスクリーン未対応ブラウザです。");
    }
  });
```

### 試したこと

上記のコードでボタンを押す必要がありますが、全画面表示にできることはわかりました。
しかし、これを自動化し、さらに解除されたときにポップアップを表示させるにはどうしたらいいのでしょうか。

### 補足情報
利用環境はChromeを考えていますが、広く一般的に使えるようにしたいです。

全画面表示設定の仕方

おす！　久しぶりだなぁ。みんな元気にしてっか？

あのよぅ、ちょっと聞きてぇ事ができたんだ。

PHP の事なんだけんどもよぅ、

\x41 も \u{41} も使わねぇで A の文字列リテラルの定義って、出来ると思うか？

勿論、ソースコードのエンコードは UTF-8 なんだけんどもな、

なんかいい方法知らねぇか？

コードゴルフみてぇな話だから、気楽になんでも言ってくれよ。

おら、わっくわくしながら回答待ってっからさぁ、頼むよ。

PHPの文字列リテラルの事、教えてくんねぇか？

ざっくりとした質問になってしまうのですが、

メモリ管理やCPUなどのリソースを意識したプログラミングをするようにしたいです。
どういう言語でどういうコードを書けば消費量を抑えられたり、効率的な使い方が出来るのか？というのを学びたいと思ってます。

具体的に言うと、大量のログファイルを扱う場合はメモリ管理が効率的・得意な言語を使ってコード書くとか、
メモリの消費量コードがあったとしてそれは言語によるものだとすれば、C言語で書き直し処理を高速化するなど。
その辺の勘所を付けたいと思ってます。

そういったリソース管理を慎重に行う場面にいないので、どういう考えでどの言語を使おうとか、どういう書き方をしようとか検討があまりつきません。

良い学び方があれば、ヒントでも良いので教えていただきたいです。

プログラミングでメモリとかCPUのリソースを意識できるようにするには？

CSSのみでカルーセルを作成しております。
＜現状＞
chromeでカルーセルは自動でスライドしている。
Safariは自動でスライドしない。

＜解決したいこと＞
Safariでも自動でスライドできるようにしたい。
もしくは違うやり方があれば教えてください。

**※自動スライドイメージ**
![イメージ説明](a77088de2c6db90a6e65429509d4e779.gif)

```html
<body class="new_sp_top">
  <main>
    <section class="carousel" aria-label="Gallery">
      <ol class="carousel__viewport">
        <li id="carousel__slide1"
            tabindex="0"
            class="carousel__slide">
          <div class="carousel__snapper">
            <a href="#carousel__slide4"
               class="carousel__prev">Go to last slide</a>
            <a href="#carousel__slide2"
               class="carousel__next">Go to next slide</a>
          </div>
        </li>
        <li id="carousel__slide2"
            tabindex="0"
            class="carousel__slide">
          <div class="carousel__snapper"></div>
          <a href="#carousel__slide1"
             class="carousel__prev">Go to previous slide</a>
          <a href="#carousel__slide3"
             class="carousel__next">Go to next slide</a>
        </li>
        <li id="carousel__slide3"
            tabindex="0"
            class="carousel__slide">
          <div class="carousel__snapper"></div>
          <a href="#carousel__slide2"
             class="carousel__prev">Go to previous slide</a>
          <a href="#carousel__slide4"
             class="carousel__next">Go to next slide</a>
        </li>
        <li id="carousel__slide4"
            tabindex="0"
            class="carousel__slide">
          <div class="carousel__snapper"></div>
          <a href="#carousel__slide3"
             class="carousel__prev">Go to previous slide</a>
          <a href="#carousel__slide1"
             class="carousel__next">Go to first slide</a>
        </li>
      </ol>
      <aside class="carousel__navigation">
        <ol class="carousel__navigation-list">
          <li class="carousel__navigation-item">
            <a href="#carousel__slide1"
               class="carousel__navigation-button">Go to slide 1</a>
          </li>
          <li class="carousel__navigation-item">
            <a href="#carousel__slide2"
               class="carousel__navigation-button">Go to slide 2</a>
          </li>
          <li class="carousel__navigation-item">
            <a href="#carousel__slide3"
               class="carousel__navigation-button">Go to slide 3</a>
          </li>
          <li class="carousel__navigation-item">
            <a href="#carousel__slide4"
               class="carousel__navigation-button">Go to slide 4</a>
          </li>
        </ol>
      </aside>
    </section>
  </main>
</body>
```

```css
@-webkit-keyframes tonext {
  75% {
    left: 0;
  }
  95% {
    left: 100%;
  }
  98% {
    left: 100%;
  }
  99% {
    left: 0;
  }
}

@keyframes tonext {
  75% {
    left: 0;
  }
  95% {
    left: 100%;
  }
  98% {
    left: 100%;
  }
  99% {
    left: 0;
  }
}

@-webkit-keyframes tostart {
  75% {
    left: 0;
  }
  95% {
    left: -300%;
  }
  98% {
    left: -300%;
  }
  99% {
    left: 0;
  }
}

@keyframes tostart {
  75% {
    left: 0;
  }
  95% {
    left: -300%;
  }
  98% {
    left: -300%;
  }
  99% {
    left: 0;
  }
}

@-webkit-keyframes snap {
  96% {
    scroll-snap-align: center;
  }
  97% {
    scroll-snap-align: none;
  }
  99% {
    scroll-snap-align: none;
  }
  100% {
    scroll-snap-align: center;
  }
}

@keyframes snap {
  96% {
    scroll-snap-align: center;
  }
  97% {
    scroll-snap-align: none;
  }
  99% {
    scroll-snap-align: none;
  }
  100% {
    scroll-snap-align: center;
  }
}

.new_sp_top {
  max-width: 576px;
  margin: 0 auto;
  background-color: #FBFBFB;
}

.new_sp_top * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  scrollbar-color: transparent transparent;
  /* thumb and track color */
  scrollbar-width: 0px;
}

.new_sp_top *::-webkit-scrollbar {
  width: 0;
}

.new_sp_top *::-webkit-scrollbar-track {
  background: transparent;
}

.new_sp_top *::-webkit-scrollbar-thumb {
  background: transparent;
  border: none;
}

.new_sp_top img {
  max-width: 100%;
  height: auto;
}

.new_sp_top ol, .new_sp_top li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.new_sp_top .carousel {
  position: relative;
  padding-top: 75%;
  -webkit-filter: drop-shadow(0 0 10px #0003);
          filter: drop-shadow(0 0 10px #0003);
  -webkit-perspective: 100px;
          perspective: 100px;
}

.new_sp_top .carousel__viewport {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow-x: scroll;
  counter-reset: item;
  scroll-behavior: smooth;
  -ms-scroll-snap-type: x mandatory;
      scroll-snap-type: x mandatory;
}

.new_sp_top .carousel__slide {
  position: relative;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  width: 100%;
  background-color: #f99;
  counter-increment: item;
}

.new_sp_top .carousel__slide:nth-child(even) {
  background-color: #99f;
}

.new_sp_top .carousel__slide:before {
  content: counter(item);
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -40%, 70px);
          transform: translate3d(-50%, -40%, 70px);
  color: #fff;
  font-size: 2em;
}

.new_sp_top .carousel__snapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  scroll-snap-align: center;
}

@media (hover: hover) {
  .new_sp_top .carousel__snapper {
    -webkit-animation-name: tonext, snap;
            animation-name: tonext, snap;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    -webkit-animation-duration: 4s;
            animation-duration: 4s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
  }
  .new_sp_top .carousel__slide:last-child .carousel__snapper {
    -webkit-animation-name: tostart, snap;
            animation-name: tostart, snap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .new_sp_top .carousel__snapper {
    -webkit-animation-name: none;
            animation-name: none;
  }
}

.new_sp_top .carousel:hover .carousel__snapper,
.new_sp_top .carousel:focus-within .carousel__snapper {
  -webkit-animation-name: none;
          animation-name: none;
}

.new_sp_top .carousel__navigation {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
}

.new_sp_top .carousel__navigation-list,
.new_sp_top .carousel__navigation-item {
  display: inline-block;
}

.new_sp_top .carousel__navigation-button {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #333;
  background-clip: content-box;
  border: 0.25rem solid transparent;
  border-radius: 50%;
  font-size: 0;
  -webkit-transition: -webkit-transform 0.1s;
  transition: -webkit-transform 0.1s;
  transition: transform 0.1s;
  transition: transform 0.1s, -webkit-transform 0.1s;
}

.new_sp_top .carousel::before,
.new_sp_top .carousel::after,
.new_sp_top .carousel__prev,
.new_sp_top .carousel__next {
  position: absolute;
  top: 0;
  margin-top: 37.5%;
  width: 4rem;
  height: 4rem;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  border-radius: 50%;
  font-size: 0;
  outline: 0;
}

.new_sp_top .carousel::before,
.new_sp_top .carousel__prev {
  left: -1rem;
}

.new_sp_top .carousel::after,
.new_sp_top .carousel__next {
  right: -1rem;
}

.new_sp_top .carousel::before,
.new_sp_top .carousel::after {
  content: '';
  z-index: 1;
  background-color: #333;
  background-size: 1.5rem 1.5rem;
  background-repeat: no-repeat;
  background-position: center center;
  color: #fff;
  font-size: 2.5rem;
  line-height: 4rem;
  text-align: center;
  pointer-events: none;
}

.new_sp_top .carousel::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 80,100 80,0' fill='%23fff'/%3E%3C/svg%3E");
}

.new_sp_top .carousel::after {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E");
}
```

cssのみでカルーセルを作成したい。

質問させてください。
今とあるサイトのコードを見ていたところ下記のような表現がありました。
```javascript
btn.addEventListener('click', e => {
  const { id: hoge } = e.target;
});
```
クリックした要素の id を取得して変数に入れる処理だと思うのですが、このような書き方は初めて見まして、
以下でも同じようにできるのになぜこの書き方をしているのか疑問に思い質問させていただきました。これには何か違いがあるのでしょうか…
```javascript
btn.addEventListener('click', e => {
  const hoge = e.target.id;
});
```
もし詳しい方がいらっしゃいましたらご教授いただけると助かります。
よろしくお願いいたします。

クリックした要素の id を変数に入れる処理の書き方について

Chrome拡張機能を開発中なのですが、サーバとAPIのやりとりを考えています。
axiosを使いたいのですが、どのようにして使えば良いのでしょうか？

Chrome拡張機能におけるライブラリの使い方

JAVASCRIPTのクイズ結果を別のページに表示したいです。
現状、10問答えると別のページに飛ぶところまではいっています。
ただ、リンク先にとんだあとに正解数はX個です。と表示させたいのですがうまくいきません。リンク先のkekka.htmlのHTML内では

<script>
document.write('あなたの正解数は' + correctNum + "問です！");
</script>

このようにプログラミングしています。実行結果は何も表示されません。どうすればよいのでしょうか？
```JAVASCRIPT
var qa = [
['「テトリス（ゲーム）」を開発したのは、日本人だ。', 2],
['生きている間は、有名な人であっても広辞苑に載ることはない。 ', 1],
['現在、2000円札は製造を停止している。', 1],
['パトカーは、取り締まっている最中であれば、どこでも駐車違反になることはない。', 2],
['昆虫の中には、口で呼吸する昆虫もいる。 ', 2],
['一般的に体の水分は、男性より女性のほうが多く含まれている。', 2],
['たとえ１ｃｍの高さであっても、地震によって起こるのは全て「津波」である。', 1],
['1円玉の直径は、ちょうど１ｃｍになっている。', 2],
['塩はカロリー０である。 ', 1],
['「小中学校は、PTAを作らなければならない」と法律で定められている。', 2]
];

var count = 0;
var correctNum = 0;

window.onload = function() {
// 最初の問題を表示
var question = document.getElementById('question');
question.innerHTML = (count + 1) + '問目：' + qa[count][0];
};

// クリック時の答え判定
function hantei(btnNo) {
if (qa[count][1] == btnNo) {
correctNum++;
}

if (count == 9) {
window.location.href = 'kekka.html'; // 遷移
}


/* アラート表示の場合
if (count == 9) {
alert('あなたの正解数は' + correctNum + '問です！');
location.reload(); //アラート後に最初に戻る
}
*/




// 次の問題表示
count++;
var question = document.getElementById('question');
question.innerHTML = (count + 1) + '問目：' + qa[count][0];
```

JAVASCRIPTのクイズ結果を別のページに表示したい

最初が「summary」で、最後が「_author以外」の場合だけ「isMatch = true」としたいのですが、「reg」をどうしたらいいでしょうか？

```JavaScript
var reg = /\Asummary_[a-z][^_author]*\z/

var name = 'summary_post';
var isMatch = reg.test(name);
console.log('summary_postの結果↓');
console.log(isMatch);

var name = 'summary_post_author';
var isMatch = reg.test(name);
console.log('summary_post_authorの結果↓');
console.log(isMatch);
```
「isMatch = true」としたいのは下記
summary_post, summary_meta

「isMatch = false」としたいのは下記
summary_post_author, summary_meta_author

正規表現でいきなり躓きました

### 前提
FormDataを使ってフォームの値を取得し、確認画面に表示することはできました。

### 質問
チェックボックスの箇所がチェックした数だけ表示されているので、
「Q3: B, C」のように１行で表示したい。

### 追記
ソースコードの問題点は["Q3",["B","C"]]とできていないことです。
そもそも、サブミットしてもQ3しか有効にならず、nameの付け方等の構成の見直しが必要です。


現在の確認画面
Q1: hoge
Q2: A
Q3: B
Q3: C

```HTML
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h3>Document</h3>
    <div id="work">
        <p>入力画面</p>
        <form id="form" name="myForm">
            <p class="text">Q1.TEXT: <input type="text" name="Q1" value="hoge" /></p>
            <p class="radio">Q2.RADIO:
                <input type="radio" name="Q2" value="A" checked />A
                <input type="radio" name="Q2" value="B" />B</p>
            <p class="radio">Q3.CHECKBOX:
                <input type="checkbox" name="Q3" value="A" />A
                <input type="checkbox" name="Q3" value="B" checked />B
                <input type="checkbox" name="Q3" value="C" checked />C</p>
            <input id="button" type="button" value="確認" />
        </form>
    </div>

    <script>
        // 確認ボタンが押されたら確認画面の表示
        document.getElementById("button").addEventListener("click", function () {
            const workArea = document.getElementById("work");
            const myForm = document.getElementById('form');
            const formData = new FormData(myForm);

            let formArray = [];
            for (let item of formData) {
                formArray.push(`<p>${item[0]}: ${item[1]}</p>`);
            }
            const html = formArray.join("");

            workArea.innerHTML = `
                    <p>確認画面</p>
                    ${html}
            `;
        });
    </script>
</body>

</html>
```

JavaScript FormDataでチェックボックスの値をまとめて取得したい

例えば

inputで

1.2345

を入力して、1.23を出力させたい場合どうすればいいでしょうか？
四捨五入ではなく45を表示させない方法を知りたいです。

inputで切り捨てたい

safariでvideoタグの動画をフルスクリーン再生したときのUIとして、
下記の1,2について、JSや、HTMLを用いて変更可能な手段はあるのでしょうか。
（OSのプレイヤーなので、いじれないのかと思っております。）

1. 戻る進むボタンの秒数変更
2. 「音声と字幕」の非表示

![イメージ説明](0c9bf526b6cc09a39ddcec3f8e241da9.jpeg)

試したこと
```javascript
document.getElementById("video").webkitClosedCaptionsVisible = false;
```