常連

回答者

拍手喝采

情報収集家

お世話になっております。
下記知見のある方がいらっしゃいましたら、ご教示お願いいたします。

#起きている問題
```
WebSocket connection to 'ws://localhost:8080/' failed:
```
websocketでブラウザを動かしたいのですが、
上記エラーが発生し、正常に稼働しません。

#試したこと
```
https://www.fixes.pub/program/388275.html
```
上記のサイトを参考に、`wss://localhost:8080/`(index.html:112)に修正し実行しましたが、
結果は変わりませんでした。

#実行ファイル

```
#index.html

<!DOCTYPE html>
<html lang="ja">
<meta charset="utf-8">
<title>Chat</title>
<style>
    .container {
        width: 600px;
    }
    
    .box {
        overflow: hidden;
    }
    
    .left {
        background-color: #D3D3D3;
        padding: 20px;
        margin: 5px;
        width: 300px;
        float: left;
    }
    
    .right {
        background-color: #ADFF2F;
        padding: 20px;
        margin: 5px;
        width: 300px;
        float: right;
    }
</style>
<script src="http://code.jquery.com/jquery-2.2.4.js"></script>
<script>
    (function($) {
        var settings = {};

        var methods = {
            init: function(options) {
                settings = $.extend({
                    'uri': 'ws://localhost:8080',
                    'conn': null,
                    'message': '#message',
                    'display': '#display'
                }, options);
                $(settings['message']).keypress(methods['checkEvent']);
                $(this).chat('connect');
            },

            checkEvent: function(event) {
                if (event && event.which == 13) {
                    var message = $(settings['message']).val();
                    if (message && settings['conn']) {
                        settings['conn'].send(message + '');
                        $(this).chat('drawText', message, 'right');
                        $(settings['message']).val('');
                    }
                }
            },

            connect: function() {
                if (settings['conn'] == null) {
                    settings['conn'] = new WebSocket(settings['uri']);
                    settings['conn'].onopen = methods['onOpen'];
                    settings['conn'].onmessage = methods['onMessage'];
                    settings['conn'].onclose = methods['onClose'];
                    settings['conn'].onerror = methods['onError'];
                }
            },

            onOpen: function(event) {
                $(this).chat('drawText', 'サーバに接続', 'left');
            },

            onMessage: function(event) {
                if (event && event.data) {
                    $(this).chat('drawText', event.data, 'left');
                }
            },

            onError: function(event) {
                $(this).chat('drawText', 'エラー発生!', 'left');
            },

            onClose: function(event) {
                $(this).chat('drawText', 'サーバと切断', 'left');
                settings['conn'] = null;
                setTimeout(methods['connect'], 1000);
            },

            drawText: function(message, align = 'left') {
                if (align === 'left') {
                    var inner = $('<div class="left"></div>').text(message);
                } else {
                    var inner = $('<div class="right"></div>').text(message);
                }
                var box = $('<div class="box"></div>').html(inner);
                $('#chat').prepend(box);
            },
        }; // end of methods

        $.fn.chat = function(method) {
                if (methods[method]) {
                    return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
                } else if (typeof method === 'object' || !method) {
                    return methods.init.apply(this, arguments);
                } else {
                    $.error('Method ' + method + ' does not exist');
                }
            } // end of function
    })(jQuery);

    $(function() {
        $(this).chat({
            'uri': 'ws://localhost:8080',
            'message': '#message',
            'display': '#chat'
        });
    });
</script>
</head>

<body>
    <input type="text" id="message" size="50" />
    <div id="chat" class="container"></div>
</body>

</html>
```

```
#chat-server.php

<?php

namespace htdocs;

use Ratchet\MessageComponentInterface;
use Ratchet\ConnectionInterface;

class Chat implements MessageComponentInterface
{
    protected $clients;

    public function __construct()
    {
        $this->clients = new \SplObjectStorage();
    }

    public function onOpen(ConnectionInterface $conn)
    {
        // Store the new connection to send messages to later
        $this->clients->attach($conn);
        echo "New connection! ({$conn->resourceId})\n";
    }

    public function onMessage(ConnectionInterface $from, $msg)
    {
        $numRecv = count($this->clients) - 1;
        echo sprintf('Connection %d sending message "%s" to %d other connection%s' . "\n", $from->resourceId, $msg, $numRecv, $numRecv == 1 ? '' : 's');

        foreach ($this->clients as $client) {
            if ($from !== $client) {
                // The sender is not the receiver, send to each client connected
                $client->send($msg);
            }
        }
    }
    public function onClose(ConnectionInterface $conn)
    {
        // The connection is closed, remove it, as we can no longer send it messages
        $this->clients->detach($conn);

        echo "Connection {$conn->resourceId} has disconnected\n";
    }
    public function onError(ConnectionInterface $conn, \Exception $e)
    {
        echo "An error has occurred: {$e->getMessage()}\n";

        $conn->close();
    }
}
```

```
#Chat.php

<?php

namespace htdocs;

use Ratchet\MessageComponentInterface;
use Ratchet\ConnectionInterface;

class Chat implements MessageComponentInterface
{
    protected $clients;

    public function __construct()
    {
        $this->clients = new \SplObjectStorage();
    }

    public function onOpen(ConnectionInterface $conn)
    {
        // Store the new connection to send messages to later
        $this->clients->attach($conn);
        echo "New connection! ({$conn->resourceId})\n";
    }

    public function onMessage(ConnectionInterface $from, $msg)
    {
        $numRecv = count($this->clients) - 1;
        echo sprintf('Connection %d sending message "%s" to %d other connection%s' . "\n", $from->resourceId, $msg, $numRecv, $numRecv == 1 ? '' : 's');

        foreach ($this->clients as $client) {
            if ($from !== $client) {
                // The sender is not the receiver, send to each client connected
                $client->send($msg);
            }
        }
    }
    public function onClose(ConnectionInterface $conn)
    {
        // The connection is closed, remove it, as we can no longer send it messages
        $this->clients->detach($conn);

        echo "Connection {$conn->resourceId} has disconnected\n";
    }
    public function onError(ConnectionInterface $conn, \Exception $e)
    {
        echo "An error has occurred: {$e->getMessage()}\n";

        $conn->close();
    }
}
```

#GitHub
```
https://github.com/karirin/chat_app
```

#参考
```
http://challenge.no1s.biz/programming/php/158
```

【Websocketエラー】WebSocket connection to 'ws:～

### 前提・実現したいこと
JavascriptのIntersection Observer APIでの画像の遅延読み込みについて調べています。
対象の画像がビューポートの100px手前に来たときに画像の取得を開始したいと思っています。
具体的には以下の様にrootMarginの上下を100pxに設定しています。

```rootMarginの設定
const options = {
    // 上下100pxで発火
    rootMaring: "100px 0"
};
```

※以下の記事を参考に実装を行っています。
参考記事
[https://qiita.com/ryo_hisano/items/42f5980720bc832e6e09](https://qiita.com/ryo_hisano/items/42f5980720bc832e6e09)

参考デモ
[https://andus.heteml.jp/intersection_observer/1.html](https://andus.heteml.jp/intersection_observer/1.html)

### 今回の質問内容
実際に参考デモで動作確認を行ったところ、画像がViewportの100px手前に来たときではなく、Viewportと画像が交差したとき（画像が画面内に入ってきたとき）に発火しているように見受けられます。

**他の記事も色々みて調べてみましたが、やはりrootMarginでの制御で良さそうなのですが、
どこか使い方が間違っているのでしょうか？それとも私の確認方法が間違っているのでしょうか？**

何かご存知の方いらっしゃいましたら、何卒よろしくお願い致します。

### 確認方法

![イメージ説明](41b97d3e876ce319f5fd17600c0d8ba4.png)
この画像はゆっくりスクロールした際に100px手前に差し掛かったときにブレークポイントで処理が止まるかを確認しています。（ブレークポイントは交差判定がtrueの時に止まるように置かれています。）表示されている画面のすぐ下には次の画像があるため、ブレイクポイントで止まる想定なのですが、実際には**次の画像とViewportが交わるまで交差していない判定になっており、コンソール上のブレイクポイントで止まりません。**

（実際、もう少しスクロールを行い、次の画像の上辺がViewportに差し掛かった当りでコンソール上のブレイクポイントで処理が停止します。

また、ChromeのDevToolのNetworkパネルでも確認を行いましたが、画像の100px手前ではなく、画像がViewportと交差したときに画像の取得が行われていることを確認しました。



### 試したこと
rootMarginを500pxにしてみましたが、変わりませんでした。
また、交差の判定条件をintersectionRatioにもしてみましたが、変わりませんでした。
```ここに言語を入力
if (entry.intersectionRatio > 0)
```

### 補足情報（FW/ツールのバージョンなど）
polyfillは使っていません。
Chromeで確認を行いました。


### 該当のソースコード

```js
(function() {
	"use strict";

	// ターゲット指定
	const targets = Array.from(document.querySelectorAll("img[data-src]"));

	// 実際の画像パス
	const img_path = "data-src";

	// オプション
	const options = {
		// 上下100px手前で発火
		rootMaring: "100px 0"
	};

	// 初期化
	const observer = new IntersectionObserver(callback, options);

	targets.forEach(function(img) {
		// 監視の開始
		observer.observe(img);
	});

	// コールバック
	function callback(entries, object) {
		entries.forEach(function(entry) {

			// 交差していない
			if (!entry.isIntersecting) return;

			// ターゲット要素
			const img = entry.target;

			// 遅延ロード実行
			loading(img);

			// 監視の解除
			object.unobserve(img);
		});
	};

	// 遅延ロード
	function loading(img) {
		// data-srcの値を取得
		const src_val = img.getAttribute(img_path);
		if (src_val) {
			// 画像パスを設定
			img.src = src_val;
			img.onload = function() {
				// data-src属性を削除
				this.removeAttribute(img_path);
			};
		}
	};
})();
```

```html
	<ul>
		<li><img src="data:image/gif;base64,R0lGODlhAQABAGAAACH5BAEKAP8ALAAAAAABAAEAAAgEAP8FBAA7" data-src="./img/alexander-possingham-209285.jpg" alt="" width="500" height="333"></li>
        ...
	</ul>

```

Intersection Observer APIのrootMarginが効かない

IntersectionObserverを使い要素の考査の監視をおこなっています
コード1だとページ読み込み時にa1がyellowになりますが
コード2だとyellowになりません
それはなぜでしょうか
コード2でページ読み込み時にa1をyellowにしない方法はありますでしょうか？


```ここに言語を入力
コード1

<style>
body,html{
height:100%;
}
</style>

<div id="aaa" style="height:100%;overflow:scroll">
<div id="a1" class="a" style="height:20%;background:red"></div>
<div id="a2" class="a" style="height:20%;background:red"></div>
<div id="a3" class="a" style="height:20%;background:red"></div>
<div id="a4" class="a" style="height:20%;background:red"></div>
<div id="a5" class="a" style="height:20%;background:red"></div>
<div id="a6" class="a" style="height:20%;background:red"></div>
<div id="a7" class="a" style="height:20%;background:red"></div>
<div id="a8" class="a" style="height:20%;background:red"></div>
<div id="a9" class="a" style="height:20%;background:red"></div>
<div id="a10" class="a" style="height:20%;background:red"></div>

</div>



<script>
window.onload=function(){


 let options = {
        root: document.querySelector("#aaa"),
rootMargin: '0px 0px 0px 0px',
        threshold: 1
      }

      const observer = new IntersectionObserver((entries) => {
tid=entries[0].target.id;
        if (entries[0].intersectionRatio != 1) {
}else{
document.getElementById(tid).style.background="yellow";
}
      }, options);


      s = document.querySelectorAll('.a');
      sl = s.length;
      for (i = 0; i < sl; i++) {
        observer.observe(s[i]);
      }
}
</script>
```


```ここに言語を入力
コード2

<style>
body,html{
height:100%;
}
</style>

<div id="aaa" style="height:100%;overflow:scroll">
<div id="a1" class="a" style="height:20%;background:red"></div>
<div id="a2" class="a" style="height:20%;background:red"></div>
<div id="a3" class="a" style="height:20%;background:red"></div>
<div id="a4" class="a" style="height:20%;background:red"></div>
<div id="a5" class="a" style="height:20%;background:red"></div>
<div id="a6" class="a" style="height:20%;background:red"></div>
<div id="a7" class="a" style="height:20%;background:red"></div>
<div id="a8" class="a" style="height:20%;background:red"></div>
<div id="a9" class="a" style="height:20%;background:red"></div>
<div id="a10" class="a" style="height:20%;background:red"></div>

</div>



<script>
window.onload=function(){


 let options = {
        root: document.querySelector("#aaa"),
rootMargin: '0px 0px 0px 0px',
        threshold: 1
      }

      const observer = new IntersectionObserver((entries) => {
tid=entries[0].target.id;
        if (entries[0].intersectionRatio != 1) {
document.getElementById(tid).style.background="yellow";
}
      }, options);


      s = document.querySelectorAll('.a');
      sl = s.length;
      for (i = 0; i < sl; i++) {
        observer.observe(s[i]);
      }
}
</script>
```

JS IntersectionObserver

・詰まっている箇所
タイトルの行数が変わった場合
横並びの要素の高さを揃えることができないです
・聞きたいこと
横並びのボックスの中身の行数が増えると高さがバラバラになります。
一方の行数が増えた場合、隣の要素の中身の高さも同じ様な高さにするCSSの記述方法があればご教示お願いいたいします。
・実装したい画面
https://gyazo.com/aabcf203162dd1d0993ee05996d82f6f
・現在の画面
https://gyazo.com/128198453a045b3cc3f414e4641bbf33
・ソースコード
```HTML
     <div class="section wrap">
        <div class="section__item">
          <div class="section__icon"><img src="assets/images/common/img-dummy-2.png" alt=""></div>
          <dl class="explanation">
            <dt class="explanation__heading">2x3カラム</dt>
            <dd class="explanation__text">2x3カラムテキスト<br>2x3カラムテキスト2x3カラムテキスト<br>2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト<br>2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト<br>2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト</dd>
          </dl>
        </div>
        <div class="section__item">
          <div class="section__icon"><img src="assets/images/common/img-dummy-2.png" alt=""></div>
          <dl class="explanation">
            <dt class="explanation__heading">2x3カラム2x3カラム</dt>
            <dd class="explanation__text">2x3カラムテキスト<br>2x3カラムテキスト2x3カラムテキスト<br>2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト<br>2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト<br>2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト<br>2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト<br>2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト</dd>
          </dl>
        </div>
        <div class="section__item">
          <div class="section__icon"><img src="assets/images/common/img-dummy-2.png" alt=""></div>
          <dl class="explanation">
            <dt class="explanation__heading">2x3カラム2x3カラム2x3カラム</dt>
            <dd class="explanation__text">2x3カラムテキスト<br>2x3カラムテキスト2x3カラムテキスト</dd>
          </dl>
        </div>
        <div class="section__item">
          <div class="section__icon"><img src="assets/images/common/img-dummy-2.png" alt=""></div>
          <dl class="explanation">
            <dt class="explanation__heading">2x3カラム2x3カラム2x3カラム</dt>
            <dd class="explanation__text">2x3カラムテキスト<br>2x3カラムテキスト2x3カラムテキスト</dd>
          </dl>
        </div>
        <div class="section__item">
          <div class="section__icon"><img src="assets/images/common/img-dummy-2.png" alt=""></div>
          <dl class="explanation">
            <dt class="explanation__heading">2x3カラム2x3カラム2x3カラム</dt>
            <dd class="explanation__text">2x3カラムテキスト<br>2x3カラムテキスト2x3カラムテキスト<br>2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト<br>2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト<br>2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト<br>2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト<br>2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト</dd>
          </dl>
        </div>
        <div class="section__item">
          <div class="section__icon"><img src="assets/images/common/img-dummy-2.png" alt=""></div>
          <dl class="explanation">
            <dt class="explanation__heading">2x3カラム2x3カラム2x3カラム</dt>
            <dd class="explanation__text">2x3カラムテキスト<br>2x3カラムテキスト2x3カラムテキスト<br>2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト<br>2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト<br>2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト</dd>
          </dl>
        </div>
      </div>
```
```css
  .wrap {
    margin-top: 40px;
    padding: 0 45px 30px 45px;
    border-bottom: solid 1px rgb(0, 0, 0);
  }

  .explanation__heading {
    margin-top: 20px;
    font-size: 33px;
  }
  .explanation__text {
    margin-top: 20px;
    font-size: 14.5px;
  }
  .content {
    display: flex;
    justify-content: center;
    padding-top: 35px;
    margin: 0px auto;
    padding-bottom: 30px;
    border-bottom: solid 1px rgb(0, 0, 0);
  }
  .content__wrap {
    width: 35%;
    margin-left: 35px;
  }
  .content__wrap:first-child {
    margin-left: 0;
  }
  .article {
    display: flex;
  }
  .article__item {
    width: 100%;
    margin-left: 35px;
  }
  .article__item:first-child {
    margin-left: 0;
  }
  .article__item:first-child {
    margin-left: 0;
  }
  .section {
    display: flex;
    flex-wrap: wrap;
  }
  .section__item {
    width: 30%;
    margin-left: 35px;
  }
  .section__item:nth-child(3n + 1) {
    margin-left: 0;
  }
  .section__item:nth-child(n + 4) {
    margin-top: 30px;
  }
```
・問題解決するために試したこと
section__itemに display: flex;　flex-direction: column; を使用して縦並びにし、子要素にflexプロパティーで余白の調整（explanationは削除してました）
上記と同じ様にexplanationの中身を縦並びにし子要素の調整をしました
display:tableの使用
よろしくお願いいたします (edited)

横並びの要素の高さを揃える

WordPressとNext.jsでJamstackなブログサイトを構築してるものです。
今回の問題ですが、ページネーションを記事一覧ページに実装したいのですが、個別の一覧ページをどのように実装したらいいのか、アイデアが浮かばないためご教授お願いできますでしょうか？

一応ページネーション自体は下記のソースでできたのですが、一覧ページの各ページの実装はどのように実装したらいいかで詰まってしまっています。
例えば今回の場合だと
http://localhost/pages
で全投稿の一覧は表示できますが、
http://localhost/pages/1
http://localhost/pages/2
みたいな感じで、各一覧ページを作成したいです
```jsx
import Router from 'next/router';
import Link from 'next/link';

export const Pagination = ({ totalCount }) => {
  const PER_PAGE = 1;

  const range = (start, end) =>
    [...Array(end - start + 1)].map((_, i) => start + i)
  console.log(totalCount);
  return (
    <ul>
      {range(1, Math.ceil(totalCount / PER_PAGE)).map((number, index) => (
        <li key={index}>
          <Link href={`/works/page/${number}`}>
            <a>{number}</a>
          </Link>
        </li>
      ))}
    </ul>
  );
};
```

WordPressのREST APIと連携してNext.jsで記事一覧にページネーションを実装したい。

ReactでTodoリストを作成しています。

todoリストのラジオボタンの『全て』『作業中』『完了』をクリックすると追加したタスクのボタンに合わせて、
表示・非表示になるようにしたいです。

**以前、このサイトで質問をした際、エラーが出るのは、
『TypeScriptのソースコードを入力したのが原因』とこのサイトで教えて頂きました。**
**再度、reactの関数コンポーネントのサンプルを探し、
改めてソースコードを入力したが、
ラジオボタンをクリックしても、追加したタスクが表示/非表示にならず、
期待する動作をしない状況で、詰まっています。
何方かアドバイスをお願いします。**

**期待する動作**
① タスクの状態によって表示/非表示を切り替えできる
② 選択されたラジオボタンに応じて、タスクの表示を切り替える

**現在の状況**
ソースコードを入力したが、ラジオボタンをクリックしても、追加したタスクが表示/非表示にならない。
検証ツールで、エラー表示が出ないので、何処に問題があるのかわからない。

**問題解決の為に行ったこと**
① 検証ツールを見ても、エラーの表示はなかった。
② ソースコードの書き間違いがないか確認した。

```App.js

import React, { useState } from "react";

//入力用 todos
//未完了のTodo用 comment

function App() {
  const [todos, setTodos] = useState([]);
  const [comment, setComment] = useState("");
  const [radio, setRadio] = useState("all");

const addTodo = () => {
    if (comment === "") return;

    const todo = {
      id: todos.length + 1,
      comment,
      status: "incomplete",
    };
    setTodos([...todos, todo]);
    setComment("");
  };
  const onClickDelete = (index) => {
    const newTodos = [...todos];
    newTodos.splice(index, 1);
    setTodos(newTodos);
    setTodos(newTodos.map((e, i) => ({ ...e, id: i + 1 })));
  };
  const toggle = (todoId) => {
    setTodos(
      todos.map((todo, i) =>
        todoId === todo.id
          ? {
              ...todo,
              status: todo.status === "incomplete" ? "completed" : "incomplete", // completed は「完了」を表す
            }
          : todo
      )
    );
  };

  const switchTodos = () => {
    if (radio === "complete") {
      return todos.filter((todo) => todo.complete);
    }
    if (radio === "incomplete") {
      return todos.filter((todo) => !todo.complete);
    }
    return todos;
  };

  return (
    <div className="App-header">
      <h1>TODOリスト</h1>

      <form>
        <label>
          <input type="radio" value="all" onChange={(e) => setRadio(e.target.value)} checked={radio === "all"} />
          全て
        </label>
        <label>
          <input
            type="radio"
            value="incomplete"
            onChange={(e) => setRadio(e.target.value)}
            checked={radio === "incomplete"}
          />
          作業中
        </label>
        <label>
          <input
            type="radio"
            value="completed"
            onChange={(e) => setRadio(e.target.value)}
            checked={radio === "completed"}
          />
          完了
        </label>
      </form>

      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>コメント</th>
            <th>状態</th>
          </tr>
        </thead>
        <tbody>
          {switchTodos().map((todo, index) => {
            return (
              <tr key={todo.id}>
                <td>{todo.id}</td>
                <td>{todo.comment}</td>
                <td>
                  <button onClick={() => toggle(todo.id)}>{todo.status === "incomplete" ? "作業中" : "完了"}</button>
                  <button onClick={() => onClickDelete(index)}>削除</button>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>

      <div>
        <h2>新規タスクの追加</h2>

        <input placeholder="Enter a new TODO" value={comment} onChange={(e) => setComment(e.target.value)} />
        <button onClick={addTodo}>追加</button>
      </div>
    </div>
  );
}

export default App;
```
```index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.querySelector("#root"));
```

【react】Todoリストの追加したタスクの表示・非表示を切り替えたい。

Next.js×Electronで開発をしている方がいますが、なぜNext.jsを使うのでしょうか。

Next.jsでは、SSR,SSG,ISRといったサーバー側でページを作成する機能があるのが特徴だと思っています。

Electron等のデスクトップアプリでは、最初からソースコードがPC内にあるため、SSRやSSG等をする必要がないまたはそのようなコードのせいでエラーが発生するのではないでしょうか。
そのためReact×Electronとできることは変わらないのではないでしょうか。

React×Electronでの開発と、Next.js×Electronの違いはあるのでしょうか。

どこか勘違いしているためこのような考えに至っていると思うですが、どなたかご教授いただければ幸いです。
よろしくお願いいたします。

Next.jsとElectronで開発するメリットがわからない

## 質問
rustでプログラミングするのに当たってこれはわかってた方が良いみたいな知識やその身に着け方を教えてください。
TeraTailで質問をしていて、回答者の言ってることが理解できません

## 背景
いろんなサイトでrustの入門のものをいくら読んでも何がわかって何がわかってないかわからないのでpythonのdiscord.pyで作ってたdiscordのbotをrustのserenityで作り直したり、行列計算をrustで実装したりしているのですが、その時にどうしてもわからないことがあって質問してもそれに対する回答があまり理解できないことがある。

## 現状の理解度
C言語をある程度できて、所有権やライフタイムもそこそこ理解できてResultやOptionも慣れてきたかなという具合です。非同期に関してはさっぱりわかってない

## 持っている本
『実践RUSTプログラミング入門』(難しすぎました)

## 余談(?)
モダンな言語すぎて変化が速く、2017年とかの個人ブログ等に書いてあることが今でも通用してふさわしいのか判断することが難しくて辛い

Rustで身に着けるべき前提知識がわからない

**WordPressで、一般ユーザーへ自動的に送られるメールは、どのようなものがあるでしょうか。**

どの権限に送られるのか不明ですが、私がすぐ思いつく物だけでも、

- ユーザー登録時、
- パスワード変更時
- WordPressの更新やアップデート
- 技術的な問題が発生しています

のメールが自動で送られると思います。

これ以外のメールも含めて、**メールは管理者だけである私だけに送信されるようにしたい**と思っています。

WordPressで自動的に送られるメール

### 前提・実現したいこと
検索ボタンを押すとセレクトメニューの一番上の項目に戻ってしまうのですが、
画面が遷移してもセレクトメニューの選択状態を維持したままにするには
どの部分を修正すればよろしいでしょうか？

もし、ご存知の方がいらっしゃったら教えていただけないでしょうか？
お手数をおかけしますがよろしくお願い致します。


### 該当のソースコード

【入力ページ】
```ここに言語名を入力
            <form role="search" method="get" action="<?php echo esc_url(home_url('/')); ?>">
              <p class="p-aside_text">イベントを検索する</p>
              <dl class="p-aside__selectList">
                <dt class="p-aside__listTitle">種目</dt>
                <dd class="p-aside__selectWrap">
                  <select class="p-aside__select" name="sports[]">
                    <option value="">選択してください</option>
                    <?php
                      $terms = get_terms('sports');
                      foreach ( $terms as $term ) :
                    ?>
                    <option value="<?php echo $term->slug; ?>" name="<?php echo $term->slug; ?>"><?php echo $term->name; ?></option>
                    <?php endforeach; ?> 
                  </select>
                </dd>
                <dt class="p-aside__listTitle">都道府県</dt>
                <dd class="p-aside__selectWrap">
                  <select class="p-aside__select" name="prefectures">
                    <option value="">選択してください</option>
                    <?php
                      $terms = get_terms('prefectures');
                      foreach ( $terms as $term ) :
                    ?>
                    <option value="<?php echo $term->slug; ?>" name="<?php echo $term->slug; ?>"><?php echo $term->name; ?></option>
                    <?php endforeach; ?> 
                  </select>
                </dd>
              </dl>
              <input type="hidden" name="s" value="<?php the_search_query(); ?>">     
              <p class="p-aside__buttonWrap"><input type="submit" class="p-aside__button c-button" value="検索"></input></p>
            </form>
```

【検索結果ページ】
```
          <form role="search" method="get" action="<?php echo esc_url(home_url('/')); ?>">
            <p class="p-aside_text">イベントを検索する</p>
            <dl class="p-aside__selectList">
              <dt class="p-aside__listTitle">種目</dt>
              <dd class="p-aside__selectWrap">
                <select class="p-aside__select" name="sports[]">
                  <option value="">選択してください</option>
                  <?php
                    $terms = get_terms('sports');
                    foreach ( $terms as $term ) :
                  ?>
                  <option value="<?php echo $term->slug; ?>" name="<?php echo $term->slug; ?>"><?php echo $term->name; ?></option>
                  <?php endforeach; ?> 
                </select>
              </dd>
              <dt class="p-aside__listTitle">都道府県</dt>
              <dd class="p-aside__selectWrap">
                <select class="p-aside__select" name="prefectures[]">
                  <option value="">選択してください</option>
                  <?php
                    $terms = get_terms('prefectures');
                    foreach ( $terms as $term ) :
                  ?>
                  <option value="<?php echo $term->slug; ?>" name="<?php echo $term->slug; ?>"><?php echo $term->name; ?></option>
                  <?php endforeach; ?> 
                </select>
              </dd>
            </dl>
            <input type="hidden" name="s" value="<?php the_search_query(); ?>">
            <p class="p-aside__buttonWrap"><input type="submit" class="p-aside__button c-button" value="検索"></input></p>
          </form>
```

### 試したこと

シンプルにselectedを当ててみたのですが、
検索結果ページで最後の項目が選択されてる状態となっていました。

wp 画面遷移してもセレクトメニューの選択状態を維持したい

Wordpressで、ユーザーエージェントごとのスタイルの切り分けをしたくて、bodyタグにclassを付与しようと思いましたがうまくいきません。
メディアクエリでブレイクポイントを決めてスタイル変更はできるのですが、iPadはPCと同じ表示になります。
ただ、そこを、iPad(iOS)だけ表示を操作したい部分があるので、bodyにclassを付与したいのです。
もしくは、任意の要素部分(id)にclassを追加したりできるとそれもありがたいです。
以下のように記載しましたが、javascriptに疎く、、。
詳しい方ご教示いただければ幸いです。
よろしくお願いいたします。

```
<script>
if (/android|ipod|ipad|iphone|macintosh/.test(ua) && 'ontouchend' in document) {
	document.getElementsByTagName("body")[0].setAttribute("class","ipad");
}
	else {
  document.getElementsByTagName("body")[0].setAttribute("class","pc");
}
</script>

```



参考にしたのはこちらです。
▼iPad SafariのuserAgentはiPadでないことに気づいていない人が多い
[https://iwb.jp/ipad-safari-javascript-useragent-is-not-ipad/](https://iwb.jp/ipad-safari-javascript-useragent-is-not-ipad/)

Wordpressでユーザーエージェントごと（特にiOS(iPad)）にbodyタグにclass名を付与したい

### 概要
カスタム投稿（news）にある記事を、投稿（post）へ移管したいです。
その際に、カスタム投稿（news）を削除して、投稿のスラッグを（news）としたいです。

記事自体の移管方法は分かっていて、ディレクトリの部分でつまっています。

### 症状
投稿（news）のアーカイブページは表示されるが、記事ページがエラーで見れない
（404ではなく「このサイトで重大なエラーが発生しました。」の文言）


### 試したこと
function.php にて、

―――――

① カスタム投稿（news）を削除し、新しく投稿の名前を（news）と指定　→　✖
② カスタム投稿（news）を削除し、新しく投稿の名前を試しに（blog）と指定　→　✖

③ カスタム投稿（news）を試しに（past）に名前変更し削除せぬまま、新しく投稿の名前を（news）と指定　→　✖
④ カスタム投稿（news）を試しに（past）に名前変更し削除せぬまま、新しく投稿の名前を試しに（blog）と指定　→　✖

⑤ カスタム投稿（news）を残したまま、新しく投稿の名前を試しに（blog）と指定　→　●

―――――

⑤はうまく記事ページも表示されましたが、そもそも同じディレクトリ名にしたいので没となります。

### function.phpのコード内容
・投稿（post）のアーカイブページを有効にするコード
・投稿（post）の名前を変更するコード
・カスタム投稿（news）を追加するコード
･･･などです。

### 原因（推測）
パーマリンクが関係しているのかと勝手に思っています。

現在の設定は「カスタム構造」にて、
http://hoge.com「/blog/post-%post_id%」としています。

※ 本当は「/blog」なり「/news」なり直に記載したくないですが、記事ページのURLを指定したいのでそのようにしております。
※ ちなみに色々パーマリンクを試しましたが記事ページは表示されないままでした･･･。

### お聞きしたいこと
なぜカスタム投稿（news）を削除、もしくは名前を変更すると、
新しく名前変更した投稿（post）の記事ページが見れなくなるのでしょうか？

Wordpressの予約語などが関係したりしているのでしょうか？（違うと思いますが･･･）
または、パーマリンクの関係でしょうか？（これが濃厚でしょうか･･･）

思い当たる節がございましたら、ご教示いただけますと幸いです。
よろしくお願いいたします。

ディレクトリを維持したまま、カスタム投稿の記事を「投稿」へ移管したい

お世話になります。下記エラー状況の解消に向けて、アドバイスをいただければ幸いです。

**【現状と解消したいエラー】**
現在WordPressサイトで「SimpleMembership」プラグインを利用して有料会員サイトを運営しております。
いままでPayPal決済のみで対応していたのですが、決済方法にStripeも導入しようと、
本番WordPressサイト（現在運用している本番ドメイン。仮に「Xサーバー上のhttps://A.com」と呼びます。）
と同一サーバー上のテスト環境（仮に「Xサーバー上のhttps://B.com」と呼びます。現在は運用していない別ドメインを使っています。）で以下の状況下で動作テストをしました。
結果、「Xサーバー上のhttps://B.com」では正常に動きました。

・同一テーマ（TCD AVANT)
・同一プラグイン（設定も同じ）
・同一サーバー（Xサーバー）

ところが、いざ本番の「Xサーバー上のhttps://A.com」に実装しようと
非公開ページに同一設定で決済ボタンを設置したところ、
「購入する」ボタンを押すと、以下のエラー画面に遷移してしまいます。

> Error occurred: No API key provided. (HINT: set your API key using "Stripe::setApiKey(<API-KEY>)". You can generate API keys from the Stripe web interface. See https://stripe.com/api for details, or email support@stripe.com if you have any questions.

> エラーが発生しました：APIキーが提供されていません。 （ヒント：「Stripe :: setApiKey（<API-KEY>）」を使用してAPIキーを設定します。StripeWebインターフェイスからAPIキーを生成できます。詳細についてはhttps://stripe.com/apiを参照するか、support @に電子メールを送信してください。ご不明な点がございましたら、stripe.comをご覧ください。

ちなみに、Stripeのサポートセンターにも問い合わせましたが、Stripe側には問題はなく、WordPress側は調べられないため解決できませんでした。
また、今回WordPressサイトとの接続を確認したStripe環境は「テストモードのみ」です。（Live環境では試していません）

**【現在確認できている状況（プラグインから出力されるはずのStripe('')の値が取得できていない）】**

まず、凡ミスを疑ってAPIキーは何度もテスト環境と同一だということを確認しました。
よって、入力ミスなどAPIキー設定が間違っているということではありませんでした。
そこで、
エラーが出てしまうサイトの決済ボタン配置ページのHTMLを確認したところ、以下の部分が空欄になってしまっていることが確認できました。
```html
コード
<div class="swpm-payment-button">
<div class="swpm-button-wrapper swpm-stripe-buy-now-wrapper">
 <form id='swpm-stripe-payment-form-12345' action='http://test.local/?swpm_process_stripe_sca_subscription=1&ref_id=swpm_7xxxxxxx' METHOD='POST'> 
<div style='display: none !important'>
<script src="https://js.stripe.com/v3/"></script>
<link rel='stylesheet' href='https://checkout.stripe.com/v3/checkout/button.css' type='text/css' media='all' /><script>
//該当部分　本来　var stripe = Stripe('pk_test_xxxxxxxx')とStripeキーが入るべき場所が空欄
		var stripe = Stripe('');
//該当部分ここまで
		jQuery('#swpm-stripe-payment-form-12345').on('submit',function(e) {
			e.preventDefault();
			var btn = jQuery(this).find('button').attr('disabled', true);
```


また、GoogleDeveloperToolのConsoleでは当然のように
> Uncaught IntegrationError: Please call Stripe() with your publishable key. You used an empty string.

と文字列が空だとしてエラーが出ています。

変数　stripe の中身を「console.log = stripe;」とConsoleに入力して確認してみましたが
>
undefined　

と返ってきてしまいます。
正常に動作しているサイトでは

> e {_listenerRegistry: {…}, retrieveSource: ƒ, …}
verifyMicrodepositsForSetup: ƒ (r,a)
  _apiKey: "pk_test_xxxxxxxx"

と返ってきます。

**【試したこと】**
（以下大幅に追記と変更をしました）
■ややこしくなるので今の検証環境の表記を整理しておきます。
１）Xサーバー上のhttps://A.com　※本番環境
２）Xサーバー上のhttps://B.com　※テスト環境
３）Local A　※ローカル環境上にhttps://A.comをコピーしたもの
４）Local B　※ローカル環境上にhttps://B.comをコピーしたもの
Xサーバー設定が原因なのか？WordPressが原因なのか？を切り分けたく、上記４種を用意しました。

■Stripe購入ボタンの状況
いずれも、SimpleMembershipのStripeボタン設定は
・Stripe管理画面で「テストモードを表示」をON
・プラグインの支払ボタン新規作成で「Stripe SCA Subscription」を選択
・Test用入力欄にTestキーを入力
・Live用入力欄は空欄
（※「Use Global API Keys Settings」のチェックははずしています。）
で設定しています。

0. WPテスト環境「Xサーバー上のhttps://B.com」を作成してボタンを設置　：WPテスト環境ではStripeテスト環境が正常に動作することを確認
　　・同一テーマ（TCD AVANT)
　　・同一プラグイン（設定も同じ）
　　・同一サーバー（Xサーバー）
　の状態で設置してみました。

0. ローカル環境「Local A　※https://A.comをコピーしたもの」を作成してボタンを設置　：エラーが出ることを確認
0. ローカル環境「Local B　※https://B.comをコピーしたもの」を作成してボタンを設置　：正常に動作することを確認
　　よって、Xサーバーの設定ではないと考え、意向はローカル環境でテストしました。

0. 正常に動作するLocal Bへ、エラーがでるLocal Aのテーマとプラグインをコピー　：正常に動作することを確認

　All in One Migrationを使って、エラーが出るWP本番環境のデータベース以外の部分をコピーしてみましたが、正常に決済画面に進めました。
　また、エラーが出ているサイトのプラグインをSimpleMembership以外すべてOFFにしましたが解決しませんでした。
　よってプラグインやテーマの問題ではないと思っております。

0. 正常に動作するLocal Bへ、エラーがでるLocal Aデータベースをコピー：テスト環境では正常に動作することを確認
　試しにデータベースもコピーしてみました。ただし、MySQL　の　wp_options　以外です。

上記のように、正常に動作するWPサイトとエラーが出る本番サイトの違いを比較しようと色々と検証したのですが、原因が特定できませんでした。

**【お聞きしたいこと】**
上記エラー内容をご覧いただいた上で、考えられる原因はわかりますでしょうか？

また、他に原因特定に役立つ検証方法などあればご教授いただけると嬉しいです。
上記の試した内容を踏まえて、使用テーマ・プラグイン・Sripeの購入ボタン設定の入力ミスが原因ではないとは思いますが、もし漏らしている検証方法などありましたらお教えいただければ幸いです。
また、Stripeサポート以外で、他に質問する適切な場があればお教えいただければ助かります。

何卒よろしくお願い致します。

【追記】
検証したサイトがわかりづらくなってしまっているようなので、表記を統一して変更しました。

SimpleMembershipでStripe決済ボタンを設置しようとすると本番環境でエラーが出る

gulp-sourcemapsをインストールし、gulpfile.jsにも記述をしているのですが、
検証画面にてscssの行数が表示されず困っています。
下記URLの最後の部分を参考にgulpfile.jsを作成したのですが記述箇所がおかしいのでしょうか、、？
.pipe()で繋がるように記述したのですが、、
わかる方、ご教示いただけると幸いです。
https://ics.media/entry/3290/

```JS
// gulpプラグインを読み込みます
const { src, dest, watch } = require("gulp");
// Sassをコンパイルするプラグインを読み込みます
const sass = require("gulp-sass");
const sourcemaps = require('gulp-sourcemaps');

/**
 * Sassをコンパイルするタスクです
 */
const compileSass = () =>
  // style.scssファイルを取得
  src("dev/sass/style.scss")
    // Sassのコンパイルを実行
    .pipe(sourcemaps.init()) //gulp.srcの直後に指定
    .pipe(
      // コンパイル後のCSSを展開
      sass({
        outputStyle: "expanded"
      })
    )
    .pipe(sourcemaps.write())  // gulp.destの直前に指定
    // cssフォルダー以下に保存
    .pipe(dest("dev/css"));

/**
 * Sassファイルを監視し、変更があったらSassを変換します
 */
const watchSassFiles = () => watch("dev/sass/style.scss", compileSass);

// npx gulpというコマンドを実行した時、watchSassFilesが実行されるようにします
exports.default = watchSassFiles;
```

検証画面にてscssの行数が表示されない

youtubeで全画面ボタンを押すとvideoが全画面で表示されますが、このような機能はどういった仕組みで動作してますか？

ブラウザに内蔵されてる特集なな機能でしょうか？
それともcssですべて具現できたりしますか？

関連する内容で勉強できるキーワードなどありましたら教えていただきたいです。

よろしくおねがいします

youtubeの全画面機能について

![イメージ説明](6ea58a74fd444ce09898a72c1f61d726.png)
![イメージ説明](bdf86297744d8e93b84deb78a652fe81.png)

添付画像のように、cssでmarginなどを当て込んでいないにも関わらず
子要素が親要素より下にずれて表示されるのですが、なにか原因ごご存知でしょうか？
### 前提・実現したいこと



### 発生している問題・エラーメッセージ

```
エラーメッセージ
```

### 該当のソースコード

```php
問題に対して直接は関係ない箇所は省略しております。

<div class="calendar-area">
<table>
<tbody>
<tr class="day0fweek">
				 
					 
echo "\t<th style=\"color:".$style."\">".$weekday[$i]."</th>\n";
 $i ++;
}
				 
?>
			  
</tr>
				
			
				
			    
<?php
$i = 0;//カウンターリセット
					
while( $i != $fir_weekday ){ //１日の曜日まで空白（&nbsp;）で埋める
echo "\t<td>&nbsp;</td>\n";
$i ++;
}
for( $day=1; checkdate( $now_month, $day, $now_year); $day++){
					
if( $i > 6){
$i = 0;
echo "</tr>\n";
echo "<tr>\n";
echo "\t<td style=\"color:".$style.";\">";
 echo $day ;
  
    echo '</ul>' ;
    echo '</div>' ;
    echo '</div>' ;
		
		
}	
		
		
		
echo"</td>\n";
					
$i++;
}
					
while( $i < 7 ){
echo "\t<td>&nbsp;</td>\n";
$i++;
	}							
	?>
</tbody>
</table>
</div>
```

```css
.wrapper{
    max-width: 600px;
    margin: 0 auto;
    color: #666;
	display: inline-block;
	vertical-align: top;
}

/*カレンダー*/

table {
    border-collapse: collapse;
    width: 100%;
}
th {
    color: #000;
}
th, td {
    border: 1px solid #ddd;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
}
```
### 試したこと

ここに問題に対して試したことを記載してください。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

余白設定をしていないにも関わらず、子要素が親要素より下にずれる理由

JavaScriptです。

投げ上げた物体が自由落下して床面で弾む
様子をシミュレーションするスクリプトを作成したいです。．
three.jsでしてます。

### 発生している問題・エラーメッセージ

球を投げ上げてからそのまま落下してしまいます。
投げ上げ→落下→弾みにしたいです。
今は投げ上げ→落下のままなので弾みを加えたいです。

x＿ｋ（ｙ座標）がもし負になるようだったら速度を反転する
的なものを追加すると思うのですが…
```JavaScript
．<!DOCTYPE html>

<html>

<head>
    <title>Sample5_3</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/three@0.101.1/examples/js/controls/OrbitControls.js"></script>
    <script src="myMatrix.js"></script>
    <style>
        body {
            /* set margin to 0 and overflow to hidden, to go fullscreen */
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

<div id="Stats-output">
</div>

<div id="WebGL-output">
</div>


<script type="text/javascript">

    // once everything is loaded, we run our Three.js stuff.
    function init() {

        var  dt = 1/60, //サンプリングタイム
            x_k = [[0], [10]]; //xの初期値

        var stats = initStats();

        // create a scene, that will hold all our elements such as objects, cameras and lights.
        var scene = new THREE.Scene();

        // create a camera, which defines where we're looking at.
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

        const controls = new THREE.OrbitControls(camera);

        // create a render and set the size
        var renderer = new THREE.WebGLRenderer();

        renderer.setClearColor(new THREE.Color(0xEEEEEE));
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMap.enabled = true;

        // create the ground plane
        var planeGeometry = new THREE.PlaneGeometry(2, 2, 1, 1);
        var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff, side: THREE.DoubleSide});
        var plane = new THREE.Mesh(planeGeometry, planeMaterial);
        plane.receiveShadow = true;

        // rotate and position the plane
        plane.rotation.x = -0.5 * Math.PI;
        plane.position.x = 0;
        plane.position.y = 0;
        plane.position.z = 0;

        // add the plane to the scene
        scene.add(plane);

        // create the sphere
        var sphereGeometry = new THREE.SphereGeometry(0.1, 20, 20);
        var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x777777});
        var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

        // position the sphere
        sphere.position.x = 0;
        sphere.position.y = 0;
        sphere.position.z = 0;
        sphere.castShadow = true;

        scene.add(sphere);

        // position and point the camera to the center of the scene
        camera.position.x = -6;
        camera.position.y = 3;
        camera.position.z = 6;
        camera.lookAt(scene.position);

        // add subtle ambient lighting
        var ambientLight = new THREE.AmbientLight(0x0c0c0c);
        scene.add(ambientLight);

        // add spotlight for the shadows
        var spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(-2, 3, -0.5);
        spotLight.castShadow = true;
        scene.add(spotLight);

        // add the output of the renderer to the html element
        document.getElementById("WebGL-output").appendChild(renderer.domElement);

        // call the render function
        renderScene();

      function renderScene() {
          stats.update();

          sphere.position.y = x_k[0][0]+ 0.1/2;

          x_k = runge_kutta(x_k);
          

          


          // render using requestAnimationFrame
          requestAnimationFrame(renderScene);
          renderer.render(scene, camera);
        }

        function initStats() {
          var stats = new Stats();
          stats.setMode(0); // 0: fps, 1: ms
          // Align top-left
          stats.domElement.style.position = 'absolute';
          stats.domElement.style.left = '0px';
          stats.domElement.style.top = '0px';
          document.getElementById("Stats-output").appendChild(stats.domElement);
          return stats;
        }

       function runge_kutta(x_k) {
          var k1  = scalar_matrix(dt, func(x_k));
          var k2  = scalar_matrix(dt, func(add_matrix(x_k, scalar_matrix(1/2, k1))));
          var k3  = scalar_matrix(dt, func(add_matrix(x_k, scalar_matrix(1/2, k2))));
          var k4  = scalar_matrix(dt, func(add_matrix(x_k, k3)));
          var x_k1 = add_matrix(x_k, scalar_matrix(1/6, add_matrix(add_matrix(k1, scalar_matrix(2, k2)), add_matrix(scalar_matrix(2, k3), k4))));
          return x_k1;
        }

        //導関数
        function func(x) {
          var M = 0.5,
          C = 0.2,
          f = [[0], [0]];
          f[0][0] = x[1][0];
          f[1][0] = -9.8 - C/M*x[1][0];
          return f;
        }

    }
    window.onload = init;
</script>
</body>
</html>
```


   


### 補足情報（FW/ツールのバージョンなど）





ここにより詳細な情報を記載してください。

JavaScript投げ上げたボールの反射

LINEログイン機能を以下のサイトを参考に作っています。

⇒ [WebアプリにLINEログイン機能を組み込む](https://xp-cloud.jp/blog/2019/11/27/6116/)

⇒ [LINEログイン（LINE Developers公式サイト）](https://developers.line.biz/ja/docs/line-login/)

LINEのロゴをクリックすると、認証画面への切り替え、その後リダイレクトされた画面でユーザー情報が表示される、というものです。

しかしながら、認証画面への切り替えと、その後のリダイレクトがなされず、全く動かない状態です。

以下のようなエラーが出ています・・・が対処の仕方がわかりません。。。
> undefined	ERROR	Uncaught Exception 	
{
    "errorType": "Runtime.HandlerNotFound",
    "errorMessage": "index.handler is undefined or not exported",
    "stack": [
        "Runtime.HandlerNotFound: index.handler is undefined or not exported",
        "    at Object.module.exports.load (/var/runtime/UserFunction.js:144:11)",
        "    at Object.<anonymous> (/var/runtime/index.js:43:30)",
        "    at Module._compile (internal/modules/cjs/loader.js:1063:30)",
        "    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)",
        "    at Module.load (internal/modules/cjs/loader.js:928:32)",
        "    at Function.Module._load (internal/modules/cjs/loader.js:769:14)",
        "    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)",
        "    at internal/main/run_main_module.js:17:47"
    ]
}

記事が2019年11月と少し古いことと、私自身プログラミング初心者ということもあり、そもそも実装できないのか、それとも単純に間違えているだけなのかの判断が出来ずにいます。

アドバイスいただけませんでしょうか。どうぞよろしくお願い致します。


**----機能実装の流れ----**

１．ログインボタンを作る　
２．LINEにチャネルを作る　
３．認証後のページを作成
４．Lambda関数を作成
５．HTMLのログインボタンのリンク　
６．LINE認証ページからLINE認証後のページへのURLを設定　

**----気になっている点----**
エラーの内容から考えて、以下の記事と関係ありそうですが、何をどうすれば良いのかわかりません。　⇒　[ハンドラが見つからず、index.jsを実行できない](https://teratail.com/questions/289341)


**----Lambda関数（index.jsファイル）----**
　
```JavaScript
var request = require('request');
exports.handler = async(event) => {
  var token = await postRequest(
    'https://api.line.me/oauth2/v2.1/token',
    {
      'grant_type': 'authorization_code',
      'code': event.queryStringParameters.code,
      'redirect_uri': 'https://iemkbzsbl6.execute-api.ap-northeast-1.amazonaws.com/default/20210518linetest',
      'client_id': 'ここにチャネルIDを入れています',
      'client_secret': 'ここにチャネルシークレットを入れています'
    }
  );
  var tokenBody = JSON.parse(token.httpResponse.body);
  const response = {
    statusCode: 200,
    headers: {'content-type': 'text/html; charset=utf-8'},
    body: `<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Login</title>
  </head>
  <body>
    <h3>json</h3>
    <textarea>${JSON.stringify({event: event, token: token, tokenBody: tokenBody})}</textarea>
  </body>
</html>
`
  };
  return response;
};
 
var postRequest = (url, form) => {
  return new Promise((resolve) => {
    request.post(
      {url: url, form: form},
      (err, httpResponse, body) => {
        resolve({
          err: err,
          httpResponse: httpResponse,
          body: body
        });
      }
    );
  });
};
```

**----login.htmlファイル----**
実際に書いたコードです。
```html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>Login</title>
    </head>
    <body>
        <a href="https://access.line.me/oauth2/v2.1/authorize?response_type=code&client_id=チャネルIDを入れています
&redirect_uri=https%3A%2F%2Fiemkbzsbl6.execute-api.ap-northeast-1.amazonaws.com%2Fdefault%2F20210518linetest&scope=profile%20openid"><img src="LineLoginButtonImage/images/DeskTop/2x/44dp/btn_login_base.png"/></a>
    </body>
</html>
```

LINEログイン機能の実装

何故か調べても出てこなかったので質問させてください。
多次元連想配列という呼び方が正しいのかはわかりませんが、以下のような連想配列から特定の要素を排除したいです。

例えば以下のような配列があるとします
```ここに言語を入力
var array = [{id:1, name:'太郎'},{id:2, name:'次郎'},{id:3, name:'三郎'}]
```
例えばこの配列のidが2の要素を削除したい(idを持っているブロックを削除したい)場合、javascriptでどのように処理を書けば良いのでしょうか。
つまり形としては
```ここに言語を入力
var array = [{id:1, name:'太郎'},{id:3, name:'三郎'}]
```
という形で`id:2, name:太郎`が消えた配列を作成したいです。
お手数をおかけしますがよろしくお願いします。

javascriptで配列の中の連想配列から特定の要素を削除する方法について

はてなブログを使用しています。
デザインのテンプレートによって異なるのかもしれませんが、子ページにおいてはブログ名と記事タイトルの２つにh1がつきます。

理想的なヘッダーの構造というのは、記事タイトルにh1、ブログ名はdivだと考えていました。
子ページにおいて最重要なのはブログ名ではなく記事タイトルなので、ブログ名にもh1というのはどうなのでしょう。

この辺の答えがあれば教えていただけますか？

# 目的
h1が重複することを気にしているのはSEOが目的だからです。

# 子ページの補足画像
![イメージ説明](3bb61add37800479e360b1f601220dd2.jpeg)