常連

### 経緯
- タイトルのどちらも似たような処理になる認識ですが、SIerで開発をしているPGとして
Promiseオブジェクトをハンドリングはどちらの記法で実装することがベストなのか興味を持ち投稿いたしました
- 三項演算子を使うべきかどうかと似たようなケースになると思いますが、ご意見・ご回答をくだされば幸いです

### 前提
- SIerで追加開発・保守運用をするという観点からご意見・ご回答をいただければと思います
- 現場のレベルはJavaがメインで、Node.jsは未経験者がほとんどという想定でお願いします

### ❓質問事項
Node.js Promise オブジェクトのハンドリングとして、以下2種類の書き方があります
どちらの記法がベストな記法なのかを下記の観点よりご教授いただけないでしょうか？
1. async/await を用いたtry-catch構文でのハンドリング
1. then()/catch()を用いたメソッドチェーンでのハンドリング

### 観点
- 可読性
- 視認性
- 保守/メンテナンス性
- 拡張性
- その他 追加開発/保守運用で必要な諸々。。。

### 該当のソースコード
```javascript
import axios from "axios";

// async/await を用いたtry-catch構文でのハンドリング
export const getData = async () => {
  const url = "https://xxxxx";
  try {
    const res = await axios.get(url);
    // handle success
    console.log(`Response : ${res.data}`);
  } catch (error) {
    console.error(`Error : ${error}`);
  }
}

// then()/catch()を用いたメソッドチェーンでのハンドリング
export const getData = () => {
  const url = "https://xxxxx";
  axios
    .get(url)
    .then((res) => {
      // handle success
      console.log(`Response : ${res.data}`);
    })
    .catch((err) => {
      console.error(`Error : ${err}`);
    });
};

```

【Node.js】メソッドチェーン vs try-catch どっちの記法がベスト？

どうもこんにちは。
先にお伝えしますと、この質問は技術的興味から来た質問です。
まず、HTMLのコードで以下の書き方をよく見かけます。
```HTML
<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="http://example.com/">
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<script src="http://example.com/"></script>
</body>
</html> 
```
このコードでscriptタグをbodyタグの下に書いている理由をご教授していただきたいということが今回の質問内容です。
稚拙な質問で恐縮ですが、よろしくおねがいします。

scriptタグはなんで通常bodyに書くのか。

Pythonの関数において、returnを記述しなかった場合Noneが返ってきますが、
[こちらのQiitaの記事](https://qiita.com/_masa_u/items/b623ff04ddf24f77fd2c)に

「戻り値のNoneは使うことが想定されていないため、戻り値を変数に代入するようなことはしてはいけません。」

と書かれていました。
使うことが想定されていないというのはどういうことでしょうか。
詳しい事をご存じな方いらっしゃいますでしょうか。

よろしくお願いします。

returnがない関数から帰ってきたNoneを使ってはいけない詳しい理由について

jQueryでスムーズスクロールを作っています。
ナビゲーションメニューをクリックすると該当する部分にスムーズに移動してくれるコードです。

HTML、CSS、jQueryの各コードは次の通りです。

```HTML
<header id="header">
    <a href="#main">ホームページタイトル</a>
    <nav>
        <ul>
            <li><a href="#features">特徴</a></li>
            <li><a href="#price">価格</a></li>
            <li><a href="#contact">お問い合わせ</a></li>
            <li><a href="#footer">フッター</a></li>
        </ul>
    </nav>
</header>
<div id="main">メイン</div>
<div id="features">特徴</div>
<div id="price">価格</div>
<div id="contact">お問い合わせ</div>
<footer id="footer">フッター</footer>
```
```CSS
#main,#features,#price,#contact,#footer {
    height: 500px;
}
```
```jQuery
$(function () {

    $("a[href^='#']:not([href='#'])").click(function () {
        var target = $($(this).attr("href")).offset().top;
        target -= 80;
        $("html, body").animate({ scrollTop: target }, 500);
        return false;
    });

});
```
実はこのjQueryのコードは問題なく動いてくれます。

そこでこのjQueryコードにもう少し手を加えることにしました。
私の作るサイトではヘッダーの高さが、
大きな画面のときと小さな画面のときと異なります。

そこで大きな画面のときと小さな画面のときとで、スクロール距離を変えようと思い、
jQueryを次のように書き加えました。

```jQuery
$(function () {

    $(window).on('load resize', function () {

        var w = $(window).width();
        var x = 768;

        if (w < x) {
            $("a[href^='#']:not([href='#'])").click(function () {
                var target = $($(this).attr("href")).offset().top;
                target -= 80;
                $("html, body").animate({ scrollTop: target }, 500);
                return false;
            });
        } else {
            $("a[href^='#']:not([href='#'])").click(function () {
                var target = $($(this).attr("href")).offset().top;
                target -= 200;
                $("html, body").animate({ scrollTop: target }, 500);
                return false;
            });
        }

    });

});
```

if関数を使って、768px以上のときと768px未満の場合を分けています。

768px以上のときと768px未満のときとで異なるのは、
target -=80;とtarget -=200;のところだけです。

しかしこのように書くとうまくスクロールしません。

Windowsパソコンで作っているのですが、グーグルクロームはおおむね希望通りの動きをします。
しかしFirefoxだとスムーズスクロールせず、直接該当部分に飛びます。
たまにきちんと動くときもありますが、何度も試しているときちんと動かないことが多いです。

Macパソコンでも、グーグルクロームは希望通りの動きをしますが、
ほかのブラウザはすべて挙動がおかしいです。

どのように直せばスムーズに動くようになるのでしょうか？
よろしくお願いします。

jQueryでスムーズスクロールを作っているが、画面サイズに応じて処理を変更するコードを加えると動きがおかしくなる

お世話になります。

先日ApacheのSSL証明書を更新しました。
手順書に従い、systemctl reload httpd.service と実行し、無事証明書が更新されました。

しかし、後日webなどの情報をみると restartを行うというのが大半でした。
reloadで問題なく動いているように見えますが、restartのほうが良かったのでしょうか。

ApacheのSSL証明書を更新する場合は、restart or reloadどちらが良いのか。

JavaScriptSとPHPを使ってWEBサイトを作成しています。

いままでは
`var is_flag = false;`
`$is_flag = false;`
のように真偽値で実装してきたのですが、
ここにきて、POSTの時は勝手に`true`が`1`になることを知りました！（ウザすぎませんか？ｗ）

そこで疑問で、それならもう一切`true|false`は使わずに、`1|0`でいこうかと思い立ったのですが、これには何か問題があるでしょうか？

自分で思いついた問題は

・「数値がない」という意味での`0`か？
・「`false`」という意味での`0`か？

がわかりにくくなってしまう問題くらいしか思いつかず、なら「数値がない」ときは`null`を使えばいいかな、と思っているのですけども、他に何か問題ってあるでしょうか？

「1|0」でなく「true|false」を使うことに有用性はありますか？

### 前提・実現したいこと

独学でHTML/CSSでwebサイトのフロント部分を書いています。
知識としてはprogate修了レベル+α程度しかありません。


### 発生している問題・エラーメッセージ

```HTML
<div class = "wrapper">
  <div class = "container">
    子要素（中身）
  </div>
</div>
```
のようなコードを書いた際、wrapperやcontainer等のブロック要素の大きさが子要素の大きさに対して
・自動的に広がる場合と
・自分でheightを指定しないと最小の大きさになってしまう場合
の違いが分かりません。
また、解決策としてheightをautoとしoverflowをhiddenで設定すれば良いという事に辿り着きましたが、その仕組みが分かりません。

・親ブロック要素が自動で広がるときと広がらないときの違い
・height:auto overflow:hidden　とした際に自動で広がらないブロック要素問題が解決する理由

をご教授頂けませんでしょうか。

親ブロック要素の自動伸縮とoverflowで解決する理由

https://docs.google.com/spreadsheets/d/1DYYLta7UHgyY0-59rcTQijyd5Ih-Wg8GSNzLz3Hi3Tg/edit?usp=sharing

こちらのスプレッドシートで、Googleplayからアプリ名、Email、社名を抜き出しています。
全部できましたが、C列の社名だけオートフィルをすると埋まっていたところがrefになってしまいます。

> 配列結果は C3 のデータを上書きするため、展開されませんでした。
とのこと。

しかし、みたところ上書きするようなものは特になく。。。

以下のC2の関数をオートフィルすると表示されていたものが#REFになってしまいます。
```
=IMPORTXML(D2,"//a[contains(@href,'https://play.google.com/store/apps/developer?id')]")
```
![イメージ説明](83eb35bc7bf09877a4e869a25fdbc3cf.png)


ちなみにC3とC4を消すと戻るときもあれば、全部消して初めて戻る時もあります。

このエラーはどうやったら直せますでしょうか？

ImportXMLをオートフィルすると下がrefになる

【実現したいこと】
オレンジで塗られた三角形をクリック　→　WEB予約画面に飛ぶ
白塗りの三角形をクリック　　　　　　→　電話をかける画面に飛ぶ

![実現したいこと](d2b7aa70bca5e26aaa3f328784244159.jpeg)


【現状】
<a>タグ要素の範囲が同じ高さで、横並びになっており、互いの三角形の範囲を侵食している。

![現状](fbe80f5f71e04e410b056beb58f46c51.jpeg)

【問題点・試したこと】
拡張したい部分の三角形を擬似要素で作成。それぞれの擬似要素にZ-indexを使用し、元々の<a>タグよりも手前(z方向)になるよう設定したが、赤色の三角形をクリックすると、電話予約画面に飛んでしまう。

![問題点・試したこと](e529b447e4bb093a5b8f46163ceb4699.jpeg)

【推定原因】
HTMLの構造として、
WEB予約　→　電話予約　の順に記載しているため、後から記載した電話予約側の要素が優先されてしまい、赤色三角形のリンク部分を侵食してしまっていると推定しています。
しかし、どのようにHTML構造から見直した方がいいのかがわからず、お力をお借りしたく、質問させて頂きました。
大変お手数おかけしますが、ご教示いただけますと幸いです。宜しくお願いします。

```HTML
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>test</title>
</head>

<link rel="stylesheet" href="./css/style.css">

<body>
  <header class="header">
    <div class="header_units web_position is-pc">
      <div class="header_unit">
        <a href="" class="header_ulink triangle triangle_right">
          <img src="./img/header_web.png" alt="" class="header_ulink_web">
        </a>
        <a href="tel:000-0000-0000" class="header_ulink triangle_left">
          <img src="./img/header_tel.png" alt="" class="header_ulink_tel">
        </a>
      </div>
    </div>
  </header>
</body>
```

```scss

// color-lists
$font_color: #343434;

//font
$font-family-default:  "Lato","游ゴシック体", "Yu Gothic", "yugothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", meiryo, "MS Pゴシック", "MS PGothic", sans-serif; // 標準フォント
$font-family-english:  'Lato', sans-serif; // 英語フォント
$font-family-japanease:'Noto Sans JP', sans-serif; // 日本語フォント
$font-family-base: $font-family-japanease;
$line-height-base: 1.6;

//margin
$margin-base: 8px;

//common
body{
  overflow-x: hidden;
  letter-spacing: 0.03em;
  color: $font-color;
  font-family: $font-family-default;
  letter-spacing: 0.03;
}

img{
  width: 100%;
  height: 100%;
}

.header{
  height: 96px;

  &_units{
    width: 100%;
    max-width: 320px;
    height: 100%;
    margin-left: $margin-base * 4;
  }

  &_unit{
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;


    &::before{
      content: '';
      display: inline-block;
      width: 100%;
      height: 100%;
      background-image: url(../img/header_web_bg.png);
      background-repeat: no-repeat;
      position: absolute;
      top: 0;
      left: 0;
    }

    &::after{
      content: '';
      display: inline-block;
      width: 100%;
      height: 100%;
      background-image: url(../img/header_tel_bg.png);
      background-repeat: no-repeat;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
    }


  }

  &_ulink{
    display: block;
    height: 100%;
    width: 100%;
    z-index: 5;
    position: relative;

    &_web{
      width: 101px;
      height: 24px;
      position: absolute;
      bottom: 16px;
      left: 16px;
    }

    &_tel{
      width: 96px;
      height: 24px;
      position: absolute;
      top: 16px;
      right: 16px;
    }
  }
}

.triangle_left{
  position: relative;

  &::after{
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 46px 0 0 160px;
    border-color: transparent transparent transparent #007bff;
    transform: rotate(180deg);
    position: absolute;
    right: 100%;
    top: 2px;
    z-index: 11;
  }
}

.triangle_right{
  position: relative;

  &::after{
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 46px 0 0 160px;
    border-color: transparent transparent transparent red;
    position: absolute;
    left: 100%;
    bottom: 0;
    z-index: 11;
  }
}

```

【使用画像】
![電話予約](2fcf8959963362f73560c2fd77d06c04.png)
![白塗り三角形に使用した背景画像](1012ce98df781ad9914b29cb25426409.png)
![WEB予約](21069c8c048374a47c7c1a4523e781e2.png)
![オレンジ塗り三角形](88b50e4affac0a7dca6c5135a23dfbda.png)

【使用環境】
vscode
Google chrome

【使用言語】
HTML
SCSS

三角形の<a>タグ範囲が互いに干渉しあってしまう

### 前提・実現したいこと
ホームページにおける、トップ画面のスライドショーを作成しています。
（一定時間経過したら、自動でフワッとフェードアウト・インする画面をjavascriptで作りたい。）


### 発生している問題・エラーメッセージ
クラスの付与・除去が、２回に１回しか適用され無い。

```
エラーメッセージ
```

### 該当のソースコード
{
    const images = [
        'images/slide-0.png',
        'images/slide-1.png',
        'images/slide-2.png',
        'images/slide-3.png',
        'images/slide-4.png',
        'images/slide-5.png',
    ];

    let count = 0;
    const slideImage =()=> {
        if(count >= images.length){
            count = 0;
        }else{
            document.getElementById('slideshow').src = images[count];
            count++;
            document.getElementById('slideshow').classList.add('active');
        }
        setTimeout(slideImage, 2000);
    }
    window.onload = slideImage;
}

```ここに言語名を入力
javascript
```

### 試したこと

classListのところをtoggleに変えてみたところ、
当然ながら２回に１回しか動きが適用されませんでした。
タイミング的に、addをカウントが始まったところで記述して、
removeを、一定時間が経った後に適用されるように記載したいです。

アニメーションがついている、クラスの付与・除去を行うため、
activeで操作をしたいです。

### 補足情報（FW/ツールのバージョンなど）
visual studio code

フワッとフェードイン・アウトするスライドショーを作成したい。

### 前提・実現したいこと

友達と２人で共同開発がしたくていろんなサイトを見てみるとgithubを使って、レポジトリを作って、、、、のようなこと
が書かれているのですがそんなめんどくさいことしないで、cloud9で開発画面の共有をする方が楽に開発できるのではないかと考えるのですが、何か悪い影響があるのでしょうか？
私たちは、よく会う友人でコミュニケーションをいつでも取ることができるので、githubを使わなくても弊害がないように感じます。

友人と二人で共同開発　git必要なのか？？

この度、電車の到着予定時刻の算出機能を実装することになりました。

そこまで厳密にする必要はなく、目的駅までの進路にチェックポイント座標をいくつか設けていて、
いずれかの座標周辺に到着したら、チェックポイント座標番号に応じて、駅まで残り何分と表示する感じです。
予定時刻より到着が遅れても特に問題ないです

まず、以下の要件があります。

### 要件

* 電車の止まる駅は2つだけ。始発駅と終着駅。途中下車はないものとする(ケーブルカーみたいなイメージです)
* 始発駅or終着駅に止まったら、ぐるりとUターンして、停車する。
* しばらく停車した後、始発駅→終着駅or終着駅→始発駅に向けて発進する。
* 電車の現在地座標は、GPSにより10秒ごとにDBに記録される
* 到着予定時刻を表示するのは、目的の駅に向かってくる電車についてのみとする。
* 始発駅から見て、帰りの電車と、終着駅から見て、行きの電車で表示する(電車が離れていくのに、残り何分って出ても困りますもんね)
* 始発駅から発車したが、何らかのトラブルで終着駅にたどり着かず、途中でUターンして帰ってきましたみたいなイレギュラー要素は考えないものとする
* GPSのバッテリー切れにより座標記録が途絶えるといったケースは発生しないものとする

### DBテーブル定義

今、用意してあるDBテーブルは次の2つです。
(守秘義務に関わるため、多少実際のテーブル構造、データと異なります)

```
1. 現在地情報

mysql> DESC locations;
+--------------+------------------+------+-----+-------------------+----------------+
| Field        | Type             | Null | Key | Default           | Extra          |
+--------------+------------------+------+-----+-------------------+----------------+
| id           | int(10) unsigned | NO   | PRI | NULL              | auto_increment |
| train_number | smallint(6)      | NO   |     | NULL              |                |
| latitude     | double(9,7)      | NO   |     | NULL              |                |
| longitude    | double(10,7)     | NO   |     | NULL              |                |
| created_at   | timestamp        | NO   |     | CURRENT_TIMESTAMP |                |
+--------------+------------------+------+-----+-------------------+----------------+

mysql> SELECT * FROM locations ORDER BY created_at DESC LIMIT 3;
+--------+--------------+------------+-------------+---------------------+
| id     | train_number | latitude   | longitude   | created_at          |
+--------+--------------+------------+-------------+---------------------+
| 716276 |            2 | 35.6889590 | 139.7567090 | 2020-10-05 10:02:56 |
| 716275 |            1 | 35.6841900 | 139.7558600 | 2020-10-05 10:02:19 |
| 716274 |            1 | 35.6841920 | 139.7558670 | 2020-10-05 10:02:04 |
+--------+--------------+------------+-------------+---------------------+

2. 電車マスタ

mysql> DESC trains;
+--------------+------------------+------+-----+-------------------+----------------+
| Field        | Type             | Null | Key | Default           | Extra          |
+--------------+------------------+------+-----+-------------------+----------------+
| id           | int(10) unsigned | NO   | PRI | NULL              | auto_increment |
| train_number | smallint(6)      | NO   |     | NULL              |                |
| name         | varchar(30)      | YES  |     | NULL              |                |
| created_at   | timestamp        | NO   |     | CURRENT_TIMESTAMP |                |
| deleted_at   | timestamp        | YES  |     | NULL              |                |
+--------------+------------------+------+-----+-------------------+----------------+

SELECT * FROM trains LIMIT 3;
+----+--------------+----------+---------------------+------------+
| id | train_number | name     | created_at          | deleted_at |
+----+--------------+----------+---------------------+------------+
|  1 |            1 | かしわ号 | 2020-10-04 18:27:15 | NULL       |
|  2 |            2 | もみじ号 | 2020-10-04 18:27:15 | NULL       |
|  3 |            3 | さくら号 | 2020-10-04 18:27:15 | NULL       |
+----+--------------+----------+---------------------+------------+
```

電車が通電中であれば、走行状態に関わらず、
10秒毎に現在地情報テーブルにレコードがINSERTされていくイメージです

### 何がしたいか

電車の進行方向を判定したいです。
行きの電車(始発駅→終着駅)なのか、帰りの電車(終着駅→始発駅)なのか。

今、私が考えているやり方は、次の通りです。

#### 帰りの電車の判定方法

1 始発駅の手前の部分に、チェックポイント座標をひとつ用意

2 電車の現在地座標がチェックポイント座標を中心点とした、
半径50メートル以内の円に入った時、DBからその列車に関する直近2つのレコードを取得

```
mysql> SELECT * FROM locations WHERE train_number = 1 ORDER BY created_at DESC LIMIT 2;
+--------+--------------+------------+-------------+---------------------+
| id     | train_number | latitude   | longitude   | created_at          |
+--------+--------------+------------+-------------+---------------------+
| 716275 |            1 | 35.6841900 | 139.7558600 | 2020-10-05 10:02:19 |
| 716274 |            1 | 35.6841920 | 139.7558670 | 2020-10-05 10:02:04 |
+--------+--------------+------------+-------------+---------------------+
```

3 2点のレコードについて、目的地座標までの距離を三平方の定理などを使って計算。
※最新のレコードの距離の値が、二つ目のレコードよりも小さい時、駅に向かってきていると見なす

4 電車マスタの対象電車について、帰りの電車フラグをセットする

```
mysql> UPDATE trains SET is_return = true WHERE train_number = 1;
```

行きの電車の判定は同じように、終着駅の手前で、
距離が近づいてきているかを計算して、帰りの電車フラグをfalseにするみたいな。

…以上のような方法で考えているのですが、どう思いますか？

何かこう、進行方向テーブルのようなものを別に作って管理すべきでしょうか。

このようなテーブル設計は初めてなので、いかんせんベストプラクティスがわからず、
調べても求めている情報が見つからなかったので質問させて頂きました次第です。

経験豊富な皆様、どうかアドバイスよろしくお願いいたします。

PHP+MySQLで、電車の進路を判定する良い方法は何ですか？

### やりたいこと
文章内に、以下の文字列を発見した場合、
[(太字)〇〇〇]
JavaScriptで以下の文字列に書き換えたい
<b>〇〇〇</b>

### やってみたこと・問題点
正規表現の後方参照を利用することで、上記の実現を試みました。
以下、書いたコードです。
```ここに言語を入力
var exp= /([(太字))(.*?])/ig;
$('body').html($('body').html().replace(exp,"<b>$2</b>"));

// 問題点
//<b>〇〇〇</b>　ではなく、
//<b>〇〇〇]</b>　となってしまいます。]がいらないです。

//ほかにも、
// var exp= /([(太字))(.*)(])/ig;
//などでも試しましたが失敗でした。

```

<b>〇〇〇</b>　に置き換えたいのに、
<b>〇〇〇]</b>　となってしまいます。
上記のコードの正しい書き方がわからず、苦戦しております。

正しい書き方をご存じの方がいらっしゃいましたら、どうかご教授いただけましたら幸いです。

何卒、よろしくお願い申し上げます。

正規表現で、特定の形式の文字列を、別の文字列に置き換えたいです。

現在PHPでメールフォームを作っています。
送信自体はうまくできたのですが、同じ内容のメールを指定した管理者用のアドレスにBCCで送りたいのですが設定方法がわからないためアドバイス願います。

```PHP
$header = "From:タイトル<info@example.com>\r\n";
$header    .= "Reply-to: info@example.com\r\n";
$header    .= "X-Mailer: PHP/" . phpversion();

mb_language("ja");
mb_internal_encoding("UTF-8");

mb_send_mail($_SESSION['email'], "確認メール", $message, $header);
```
このmb_send_mailからBCCで別のアドレス宛に送りたいのですがどうした設定を行えばよいでしょうか？そもそも、1つでは送れないのでしょうか？

$bcc_add = "BCC: bcc@example.com\r\n";　みたいなものを定義して追加できればと思うのですが、どこにどのように定義したらよいでしょうか？
宜しくお願いいたします。

BCCのアドレスにも同時に送信するには？

現在、下記の様な静的なサイトをコーディングしているのですが、ファイル構造を検討しています。

```
top - foo - bar - 商品1の一覧（shohin1）
　　　　　　　　　　- 商品2の一覧（shohin2）
```


そこで出てきた疑問が、URL的にはhttps://example.com/foo/bar/shohin1/の方がスッキリして良いと思いますが、
https://example.com/foo/bar/shohin1.htmlでも問題ない？という事です。

なぜ、/shohin1/じゃなくて良いと思ったかは、
①shohin1の下層は無いから
②なので、shohin1フォルダを作ってindex.htmlを作ると、index.html一つだけしかファイルが入らないから
③URLは、意図した構造になっているから（/bar/の下層になっている様に見える）
です。

②については、この様なページがいくつかある為、自分がただ単に気持ち悪いだけなのですが、
もしこの感覚が間違っていたらご指摘ください。

サイトの構造的には、shohin1はbarの下層になるので、
ファイル構成もbarフォルダ内にshohin1フォルダを作って、index.htmlで表示させた方が良いのでしょうか？

すみませんがよろしくお願いします。

/shohin.htmlと/shohin/、どちらが良いのでしょうか？

2つのsection間に斜めの境界線を入れたいと思い、片方のsectionにafter擬似要素で斜めの背景をつけることで実装しようとしました。

```HTML
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプル</title>
  <link rel="stylesheet" href="css/style.min.css" type="text/css">
</head>

<body>
  <section class="First">
  </section>

  <section class="Sencond">
  </section>
</body>
</html>
```

```SCSS
@charset "UTF-8";

html, body {
     margin:0;
     padding:0;
     border:0;
     outline:0;
     font-size:100%;
     vertical-align:baseline;
     background:transparent;
 }

.First {
   display: block;
   position: relative;
   background: #000;
   height: 300px;
   width: 100vw;

   &::after {
     content: '';
     display: block;
     height: 0;
     width: 100vw;
     position: absolute;
     bottom: -14.0541vw;
     left: 0;
     border-left: 100vw solid transparent;
     border-top: 14.0541vw solid #000;
   }
 }

.Second {
   display: block;
   padding-top: 14.0541vw;
   height: 300px;
   width: 100vw;
 }

```
Chromeで確認すると意図通りのページになっているのですが、safariで見ると、下記2つ問題点があります。
① afterと一つ目のsectionの重なる部分に、細い筋が入る
![イメージ説明](13dc12cda04e375aedc72f328ee2336d.png)

② after要素にwidth:100vwを当てているのに、横長に広がり、スクロールができてしまう。

色々調べたのですが上記2つの解決策を見つけることができず、どなたかご教示いただければ幸いです。
お手数おかけいたしますが、どうぞよろしくお願いいたします。

追記：
ご指摘いただき、OSとブラウザのバージョンを記載いたします。
OS：macOS Catalina バージョン 10.15.6
ブラウザ：safari バージョン13.1.2

safariで要素間に隙間ができてしまう

swiperを使ってスライド設定をしているのですが、クライアントから
『最初のページと最後のページでのみクリックできない方の矢印を非表示にしたい』との
希望があって、修正箇所とその記述方法を探しています。

https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js

と

https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/css/swiper.min.css

をデフォルトのまま使ってHTMLのページ内には

---HTML記載箇所----

```
<div class="swiper-container">
    
    <div class="swiper-wrapper">
        
        <div class="swiper-slide"><img src="img/img01.png" width="600" height="851" alt=""/></div>
        <div class="swiper-slide"><img src="img/img02.png" width="600" height="851" alt=""/></div>
		<div class="swiper-slide"><img src="img/img03.png" width="600" height="851" alt=""/></div>
        <div class="swiper-slide"><img src="img/img04.png" width="600" height="851" alt=""/></div>
		<div class="swiper-slide"><img src="img/img05.png" width="600" height="851" alt=""/></div>
        <div class="swiper-slide"><img src="img/img06.png" width="600" height="851" alt=""/></div>
		<div class="swiper-slide"><img src="img/img07.png" width="600" height="851" alt=""/></div>
        <div class="swiper-slide"><img src="img/img08.png" width="600" height="851" alt=""/></div>
		<div class="swiper-slide"><img src="img/img09.png" width="600" height="851" alt=""/></div>
        <div class="swiper-slide"><img src="img/img10.png" width="600" height="851" alt=""/></div>
		<div class="swiper-slide"><img src="img/img11.png" width="600" height="851" alt=""/></div>
        <div class="swiper-slide"><img src="img/img12.png" width="600" height="851" alt=""/></div>
		<div class="swiper-slide"><img src="img/img13.png" width="600" height="851" alt=""/></div>
        <div class="swiper-slide"><img src="img/img14.png" width="600" height="851" alt=""/></div>
		<div class="swiper-slide"><img src="img/img15.png" width="600" height="851" alt=""/></div>
		<div class="swiper-slide"><img src="img/img16.png" width="600" height="851" alt=""/></div>
    </div>
    
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 44">
          <path class="arrow arrow-left" d="M0,22L22,0l2.1,2.1L4.2,22l19.9,19.9L22,44L0,22L0,22L0,22z" />
        </svg>
      </div>

      <div class="swiper-button-next">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 44">
          <path class="arrow arrow-right" d="M27,22L27,22L5,44l-2.1-2.1L22.8,22L2.9,2.1L5,0L27,22L27,22z" />
        </svg>
      </div>
</div>
```

----スクリプト対応箇所の記述----


```
	<script>
		var mySwiper = new Swiper ('.swiper-container', {
  loop: false,
  slidesPerView: 1,
  spaceBetween: 10,
  centeredSlides : true,
  pagination: '.swiper-pagination',
			dynamicBullets: true ,
  nextButton: '.swiper-button-next',
  prevButton: '.swiper-button-prev',
  breakpoints: {
    767: {
      slidesPerView: 1,
      spaceBetween: 0
    }
  }
})
	</script>
```



の記述を行っていますがどこをどう直すべきか、お分かりになりますでしょうか？
デフォルトの設定ですでに最初のページと最後のページは矢印が透過された状態になっているので
これが非表示になれば問題ないのですが・・・。

公式ページ：https://idangero.us/swiper/

swiperの矢印設定について

Laravel5.6
mysql  Ver 15.1 Distrib 5.5.56-MariaDB　(本番環境)
mysql  Ver 14.14 Distrib 5.7.22,　（開発環境）

でアプリケーションを制作しています。


DBに個人を特定する値が入っています。ぶっちゃけると MACAddressなのですが
毎回、500件程にwhereで絞り込んだ後に、およそ100件程のMACAddressの付き合わせ検索を連続で頻繁に行う必要があります。
具体的には外部からhttpsでPOSTされて来る100件程の生のMACAddressの値と、DBの値を比較する処理をしています。

これまでDBにはMACAddressが生データで入力されており、完全一致で検索をかけていましたが、
これをhash化して管理したいと考えています。

そこで検索性が高く、いざというとき（DBデータ盗まれた等）複号化されにくい暗号化の方法としてどのようなものを使うのがふさわしいでしょうか？

まとめると以下の様な条件になります。

・DB検索に時間がかからなければ良い。
・システムとして値の複号化は必須要件ではない。（つまりopenSSL等で複号化をしないでも良い）
・DBの方では一意性が保証できる値となっていれば良い。
・DBの情報が漏洩した際、復元されにくいものが良い。
・md5,sha1 は計算力を使えば複号されるので不採用。
・Laravelファサードの Hash:check() はかなりの処理時間がかかるので不採用。


また、このような要求にこたえられるような暗号化の記述がされたサイト等あれば、
それのみでもご紹介いただけると幸いです。

DB検索性の高い暗号化処理について（復号化の必要なし）

### 前提・実現したいこと

アコーディオンメニュー付きグローバルナビを作成しておりますが、アコーディオン部分がPCではマウスhoverした時スマホではクリックした時に表示されるよう分けたいと考えています。スマホ表示させたときにホバー機能を解除するのはどうしたらいいでしょうか？

### 該当のソースコード
<html>
<header>
<nav>
        <ul>
          <li><a href="#">トップ</a></li>
          <li class="sub-menu"><a href="#">商品一覧</a>
           <ul>
            <li><a href="#">Link1</a></li>
            <li><a href="#">Link2</a></li>
            <li><a href="#">Link3</a></li>
           </ul>
          </li>
          <li class="sub-menu"><a href="#">お問い合わせ</a>
           <ul>
            <li><a href="#">Link4</a></li>
            <li><a href="#">Link5</a></li>
            <li><a href="#">Link6</a></li>
           </ul>
          </li>
          <li><a href="#">ご購入案内</a></li>
          <li><a href="#">店舗情報</a></li>
          <li><a href="#">会社案内</a></li>
        </ul>
</nav>
<div class="menu-toggle"><i class="fa fa-bars" aria-hidden="true"></i></div>
</header>



<css>
header nav{
  float: right;
}

header nav ul{
  margin: 0;
  padding: 0;
  display: flex;
}

header nav ul li{
  list-style: none;
  position: relative;
}

header nav ul li ul{
  position: absolute;
  left: 0;
  background: rgba(34, 49, 52, 0.9);
  display: none;
}

header nav ul li.active ul{
  display: block;
}

header nav ul li:hover ul{
  display: block;
}

header nav ul li ul li{
  display: block;
  width: 200px;
}
header nav ul li a{
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  color: #fff;
  text-decoration: none;
  display: block;
}

header nav ul li a:hover,
header nav ul li a.active{
  color: #000;
  background: #fff; 
}

.menu-toggle{
  color: #fff;
  float: right;
  line-height: 50px;
  font-size: 24px;
  cursor: pointer;
  display: none;
}

@media (max-width: 991px){
  header{
    padding: 0 20px;
  }
  .menu-toggle{
    display: block;
  }
  header nav{
    position: absolute;
    width: 100%;
    height: calc(100vh - 50px);
    background-color: rgba(34, 49, 52, 0.9);
    top: 50px;
    left: -100%;
    transition: 0.5s;
  }
  header nav.active{
    left: 0;
  }
  header nav ul{
    display: block;
    text-align: center;
  }
  header nav ul li a{
    border-bottom: 1px solid rgba(0,0,0, .2);
  }
  header nav ul li.sub-menu:before{
  content: '\f0d7';
  font-family: fontAwesome;
  position: absolute;
  line-height: 50px;
  color: #fff;
  right: 5px;
  }
  header nav ul li.active.sub-menu:before{
    content: '\f0d8';
  }
  header nav ul li.active ul{
    position: relative;
    background: rgba(34, 49, 52, 0.9);
  }
  header nav ul li ul li{
    width: 100%;
  }

### 試したこと

ここに問題に対して試したことを記載してください。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

スマホ表示の際にホバー機能を解除させたい

Webページに半角カナを使用することは、文字化けするからという理由で使用しないことが当たり前かと思っていましたが、特殊な文字を使用しない限り、通常のアイウエオであれば文字化けすることが稀なように思います。
ホームページ作成者に作成依頼したところ、普通に半角カナを使用していたため、半角カナは使用しないように指摘しようと思いました。しかしMac, Iphone, Android等で閲覧しても問題なく表示されましたので、そもそも、考え方自体が古いのではないかと思い質問させていただきました。

もちろん古い機種等で閲覧すれば文字化けすると思いますし、全ての端末に対応していないことも承知していますが、Webページには半角カナを使用しないように他者に指摘したところで「今時文字化けするように古い機種で見る人なんていないし、そんな細かいことは気にしてどうするm9(^Д^)」と言われると反論できません。
自分自身は半角カナを使用しない方が良いとの考えですが、半角カナは使用しても問題ないのでしょうか？

【参考】総務省
https://www.soumu.go.jp/soutsu/tokai/siensaku/accessibility/L3_text1.html