常連

注目の的

自己紹介

区切り線を入れようと、以下のようなCSSを作りました。
```CSS
hr.chapterline {
    overflow: visible; /* For IE */
    padding: 0;
    border: none;
    border-top: medium double #666;
    color: #666;
    text-align: center;
}
hr.chapterline:after {
    content: "✿❀✿❀";
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1.5em;
    padding: 0 0.25em;
    background: white;
}
```
二重線の真ん中に、contentで指定した、花びらが4つ並ぶデザインが入る区切り線なのですが、

```HTML
<p>テスト</p>
<p>テスト</p>
<hr class="chapterline">
<p>テスト</p>
<p>テスト</p>
```
このようなhtmlを書いたとき、hr要素の下の部分（3番目の【テスト】の上）に大きく余白が空いてしまいます。
hr要素の上の部分と同じ高さの間隔に揃えたいのですが、何か方法はありますでしょうか？
contentを指定せず、2重線のみの場合は上下の余白が均等になりますので、content部分のpaddingが怪しいだろうと思っていますが…どのような指定をすればよいかわからず困ってしまいました。

もしよろしければお力添えをいただけますと幸いです。よろしくお願いいたします。

hr要素の余白について

### 発生している問題

お世話になります。
async function/await/promiseの実行される順番がよくわからないので教えてください。

0. なぜ1 5と行かないでasync functionの中に入っていくのですか？(No.1/No.2)
0. なぜawaitがあるとasync functionの外に行くのですか？(No.1)
0. なぜ2 4と行かないで2 3 4と表示されるのですか？(No.2)

### 該当のソースコード

```javascript
function pro(){
  return new Promise((res)=>{
    console.log(3);
    res();
  });
}

// No.1
console.log(1);
(async function(){
  console.log(2);
  await pro();
  console.log(4);
})();
console.log(5);
// 1 2 3 5 4

// No.2
console.log(1);
(async function(){
  console.log(2);
  pro();
  console.log(4);
})();
console.log(5);
// 1 2 3 4 5
```

async function/await/promiseの動きがわからない

position:fixedで固定したpagetopボタンをフッタのところで、止めたいのですが
フッタまでスクロールすると、消えてしまいます。
考えられる原因を教えてください。お願いします。

```html
<footer>
    <a href="#top" class="topBtn" id="topBtn"><img src="img/main/pagetop.png" alt="ページトップへ戻る"></a>
```

```css
.topBtn {
  position:fixed; /*固定*/
  bottom:0; /*場所を右下に移動*/
  right:62px; /*場所を右下に移動*/
  display:block; /*aタグをblock要素に変更*/
}
```
```javasript
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#topBtn").hide();
    $(window).on("scroll", function() {
        if ($(this).scrollTop() > 100) {
            $("#topBtn").fadeIn("fast");
        } else {
            $("#topBtn").fadeOut("fast");
        }
        scrollHeight = $(document).height(); //ドキュメントの高さ 
        scrollPosition = $(window).height() + $(window).scrollTop(); //現在地 
        footHeight = $("footer").innerHeight(); //footerの高さ（＝止めたい位置）
        if ( scrollHeight - scrollPosition  <= footHeight ) { //ドキュメントの高さと現在地の差がfooterの高さ以下になったら
            $("#topBtn").css({
                "position":"absolute", //pisitionをabsolute（親：wrapperからの絶対値）に変更
                "bottom": footHeight + 500 //下からfooterの高さ + 20px上げた位置に配置
            });
        } else { //それ以外の場合は
            $("#topBtn").css({
                "position":"fixed", //固定表示
                "bottom": "20px" //下から20px上げた位置に
            });
        }
    });
    $('#topBtn').click(function () {
        $('body,html').animate({
        scrollTop: 0
        }, 400);
        return false;
    });
});
</script>
```

お願いします。

pagetopボタンをフッター部分で止めたい

お世話になっております。

https://qiita.com/Mic-U/items/98f2e51c910a804d130c#%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89%E9%9D%9Eprototype
こちらで、Array.from()メソッドの使い方の例として

```ここに言語を入力
// Generate a sequence of numbers
Array.from({length: 5}, (v, k) => k);
// [0, 1, 2, 3, 4]
```
上記のコードが紹介されていました。
{length:5} = new Array(5)
ということは分かるのですが、第二引数のmap関数（？）の挙動が理解できません。

どなたかお教えくださらないでしょうか？

よろしくお願いいたします。

JavaScript、Array.from()メソッドについて

pythonを使っています。
```python
h, w = 30,30
step = 5
y, x = np.mgrid[step:h:step, step:w:step].reshape(2,-1)
```
とすると、5 から 25 まで 5 刻みの格子点のx座標とy座標が、x,yに格納されます。つまり、

(y,x) = (5,5),(5,10),(5,15),(5,20),(5,25),(10,5),…,(25,25)

といった具合です。実際に

> print(y)
print(x)

とすると

> [ 5  5  5  5  5 10 10 10 10 10 15 15 15 15 15 20 20 20 20 20 25 25 25 25 25]
> [ 5 10 15 20 25  5 10 15 20 25  5 10 15 20 25  5 10 15 20 25  5 10 15 20 25]

と表示されます。ちなみに、ソースコード中でy,xをx,yと書かないのはわざとです。この格子点の外側だけ、

(y,x)　= (5,5),(5,10),(5,15),(5,20),(5,25),(10,5),(10,25),(15,5),(15,25),(20,5),(20,25),(25,5),(25,10),(25,15),(25,20),(25,25)

をとりだすにはどしたらよいでしょう。つまり、

> print(y)
print(x)

としたときに、

> [ 5  5  5  5  5 10 10 15 15 20 20 25 25 25 25 25]
> [ 5 10 15 20 25  5 25  5 25  5 25  5 10 15 20 25]

と表示されるように、yとxに数字を格納したいです。スマートな方法はないでしょうか。

![イメージ説明](9a7ca8ddf970b4f167d14f9e3a2227ac.png)

格子点の外枠だけを求めるアルゴリズム

プルダウンメニューの最下部までスクロールしたら
それ以上下へはスクロールできないよう画面を固定したいのですが、何か良い方法はありますでしょうか？？

都合上、コードの公開などはできないため、以下がイメージになります。
SPビュー

ーーー/ヘッダーーーー
ーーーメインーーーー
【hoge】

ーー-/メイン-ーーー
ーーーフッターーーー

挙動
hogeをクリックすると、
display:noneにしていた
プルダウンメニューが出現する。



再度質問を整理すると

hogeをクリックしてプルダウンメニューが展開した時、現状だとbody最下部までスクロールが可能ですが、これをプルダウンの高さ分だけスクロールを許容して、メニューの高さ以上下にはスクロールできないようにしたいです。

Jsでメニューの高さを取得してそれ以上下へスクロールしたときはスクロール禁止にすれば...!とも思ったのですが、
absoluteで浮かせているためかうまくいかず？でした


わかりにくい点あるかもしれませんが、よろしくお願いいたします。

Hogeをクリックしたらプルダウンメニューが展開される。展開されたプルダウンメニューの高さ分だけスクロールを許容してそれ以上下へのスクロールは禁止したい

デザインパターンというものを知り、中でもIteratorパターンを学習し始めました。
IteratorAggregateインターフェースを活用した下記のコード内で、
getIterator()を使って、わざわざ$this->membersをArrayIteratorでラップして返す目的がわかりません。
IteratorAggregateはインターフェースのため、getIterator()をオーバーライドしないといけないということはわかっているのですが、なぜわざわざそんなことをするのかがわかりません。
foreachも$iterator as $memberではなく$members as $memberで表示上は同じになりますし・・・。
Iteratorパターンの本質をわかっていないのでしょうか。

```php
<?php

class Member{
    private $id;
    private $lastname;
    private $firstname;
    private $email;
    private $password;
    
    public function __construct($id, $lastname, $firstname, $email, $password)
    {
        $this->setId($id);
        $this->setLastname($lastname);
        $this->setFirstname($firstname);
        $this->setEmail($email);
        $this->setPassword($password);
    }


    public function setId(int$id){
      $this->id = $id;
    }
    
    public function getId(){
        return $this->id;
    }
    
     public function setLastname($lastname){
      $this->lastname = $lastname;
    }
    
    public function getLastname(){
        return $this->lastname;
    }
    
     public function setFirstname($firstname){
      $this->firstname = $firstname;
    }
    
    public function getFirstname(){
        return $this->firstname;
    }
    
     public function setEmail($email){
      $this->email = $email;
    }
    
    public function getEmail(){
        return $this->email;
    }
    
     public function setPassword($password){
      $this->password = $password;
    }
    
    public function getPassword(){
        return $this->password;
    }
```
```php
<?php

class Members implements IteratorAggregate{
    private $members = [];
    
    public function add(Member $member)
    {
        $this->members[] = $member;
    }
    
    public function getIterator()
    {
        return new ArrayIterator($this->members);
    }
}
```
```php
<?php

require_once 'memberclass.php';
require_once 'membersclass.php';

//ダミーの会員データを作成
$member1 = new Member(1, "姓1", "名1", "名1", "email1@example.com", "password1");
$member2 = new Member(2, "姓2", "名2", "名2", "email2@example.com", "password2");
$member3 = new Member(3, "姓3", "名3", "名3", "email3@example.com", "password3");
$member4 = new Member(4, "姓4", "名4", "名4", "email4@example.com", "password4");
$member5 = new Member(5, "姓5", "名5", "名5", "email5@example.com", "password5");

//Membersクラスに会員データを追加
$members = new Members();
$members->add($member1);
$members->add($member2);
$members->add($member3);
$members->add($member4);
$members->add($member5);

//getIteratorによりイテレーターを取得
$iterator = $members->getIterator();

//ループ処理
foreach ($iterator as $member){
    print $member->getId()." ";
    print $member->getLastname()." ";
    print $member->getFirstname()." ";
    print $member->getEmail()." ";
    print $member->getPassword()." ";
}
```

getIterator()とArrayIteratorの目的がわかりません

こんにちは。
お世話になっております。

```ここに言語を入力
var Person = function(firstAndLast) {
  firstAndLast = firstAndLast.split(" ");
  // Complete the method below and implement the others similarly
  this.getFirstName = function() {
    return firstAndLast[0];
  };
  this.getLastName = function(){
    return firstAndLast[1]
  };
  this.getFullName = function(){
    return firstAndLast[0] + " " + firstAndLast[1];
  };
  this.setFirstName = function(str){
    firstAndLast[0] = str;
  };
  this.setLastName = function(str){
    firstAndLast[1] = str;
  };
  this.setFullName = function(str){
    str = str.split(" ");
    firstAndLast[0] = str[0];
    firstAndLast[1] = str[1]
  }
  
 };

var bob = new Person('Bob Ross');
console.log(bob.getFullName());
```
上記のコードを実行すると
 Uncaught TypeError: bob.getFullName is not a function
が出てしまいます。
何度も読み返したのですが、原因がわかりませんでした。
どなたか、よろしくお願いいたします。

JavaScript コンストラクタ実装につきまして

顧客のサーバーリプレースなどで古いサーバー（＝数年前のサーバーでCPU,Disk I/O性能が低い）から新しいサーバーにファイルをコピーします。
− よく有るケース　500万ファイル以上／トータルサイズ2TB以上

ファイルコピーに24時間以上かかることも結構あります。
社内で似た環境を創りだすのが難しく、以下の知見をお持ちでしたら
知恵を貸して頂けると嬉しいです。

1. 新、旧　どちらのサーバーでコマンドを動かすと効率がいいのか？
[想像]CPU,I/Oともに性能が低い旧サーバーがボトルネックになると考えられるので、旧サーバーで動かしたほうが良い。
2. rsyncのデーモンモード、compressなど転送効率が上がりそうなオプションは有効か？
3. robocopyに転送効率につながるオプションは有るか？

今の対策としては日付など条件付きで何回かに分けてコピーし、最後に完全同期させています。
顧客の本番環境なので中々思い切った事が出来ませんが、以下も試したいなぁ。試したこと有る方います？社内SEな方なら試したことあるかな。

0. 新旧サーバー間　LAN直結（ネットワーク利用率を上げる）
0. ジャンボフレームにして（パケットの効率を上げる）
0. OS標準外のコマンドでいいのがあれば（Windowsだとfastcopy？）
0. tarやzipで固めてファイル数少なくして転送する。（ファイルを固める／展開するオーバーヘッドや余分なファイル領域を考えると非現実的）
0. USB-HDDにコピー（かえって遅い？）