常連

注目の的

社会貢献

質問力

回答者

拍手喝采

自己紹介

Webプログラミングを学習する目的で、読めそうなnpmパッケージ（[ideas](https://github.com/IonicaBizau/idea)）を読んでいたところ、挙動が分からない箇所があったので質問させてください。


以下のようにインスタンスを作成する処理がありました。（`(省略)`部分は私が編集したものです）

```javascript:
var idea = new Idea(err => {
    if (err) { return logger.log(err, "error"); }
    var commands = {
        create: callback => {
            ....（省略）....
        }
      ....（省略）....
      , help: () => {
            ....（省略）....
        }
    };

    if (~process.argv.indexOf("-h") || ~process.argv.indexOf("--help")) {
      return commands.help();
    }

    if (!commands[process.argv[2]]) {
        process.argv[2] = "filter";
    }

    commands[process.argv[2]]((err, res) => {
        ....(省略)....
        display(res);
    });
});
```
クラス定義はこのようになっています。
```javascript
class Idea {
    constructor (path, callback) {
        if (typeof path === "function") {
            callback = path;
            path = null;
        }

        // Defaults
        this.path = path = path || DEFAULT_PATH;
        callback = callback || (err => { if (err) throw err });

        // Init
        if (!isThere(this.path)) {
            this.ideas = [];
            this.save(callback);
        } else {
            this.list((err, ideas) => {
                if (err) { return callback(err); }
                this.ideas = ideas;
                callback(null, ideas, this);
            });
        }
    }
    /**
     * list
     * Lists all ideas.
     *
     * @name list
     * @function
     * @param {Function} callback The callback function.
     * @return {Idea} The `Idea` instance.
     */
    list (callback) {
        rJson(this.path, (err, content) => {
            if (err) { return callback(err); }
            callback(err, content);
        });
        return this;
    }
    ....(省略)...
    create (idea, callback) {
        ....(省略)....
    }
    ....(省略)...
}

module.export = Idea;
```

コンストラクタによれば、このクラスは第一引数にパス名、第二引数にコールバック関数を受け取るようになっていますが、宣言時には無名関数で`err=>{}`だけを渡しています。

### 質問１
コンストラクタで無理やり各引数の値を`null`にしたり`callback=path`にしたりしているのは、JavaScriptではコンストラクタを複数作って引数の型や数で使い分けるような機能がないからでしょうか？また、こうした書き方はJS文化的に一般的なのでしょうか

## 質問2
`list`メソッドはコールバック関数を受け取り、Ideaインスタンスを返すとありますが、そのコールバック関数は`this.list()`において
```javascript
this.list((err, ideas) => {
    if (err) { return callback(err); }
    this.ideas = ideas;
    callback(null, ideas, this);
});
```
と実装されており、この挙動がわかりません。この3つの引数をとるコールバック関数は一体どこでどんな役割を果たしているのでしょうか？

ES6 コンストラクタの引数とコールバック関数

teratailというのは初心者・プロフェッショナルを問わずに質問を投稿して回答をもらう場だと思うのですよ。

teratailの質問の中には、本当にとんでもない質問をしたり、本当にとんでもない回答をする人もいると思います。だけど、それを単純に低評価・マイナス評価するのはどうかと思っています。

例えば、プロフェッショナルの間では、案件という言葉をよく使いますが、案件とか仕様とかいう言葉や風習を初心者に直に押し付けてもいいのですか？と私は考えるわけです。

それよりは、多少間違ってもいいからブレインストーミング方式で回答していって、評価する人は、より正しいと思う回答にプラス評価をする、というのでいいと思うのです。そうしないと、回答者さんが回答する気を無くしてしまうからです。

自分の意見はコメントで表明することができるので、できるだけ低評価・マイナス評価を付けないということにしていきませんか？という質問というか意思表明です。

皆さんの忌憚なきご意見をお待ちしております。

そもそもteratailの質問・回答に対して低評価・マイナス評価を付けること自体正しいことなの？

素のjavascriptでアコーディオンを作るにはどうすればいいでしょうか？
jQueryは使えません
簡単な雛形をくだされば助かります

今のところ
document.getElementById("").style.display = "blcok";
でやろうとしてますができません
クリックするとdlごと消えます

aタグが必要なんでしょうか？
よろしくおねがいします

素のjavascriptでアコーディオンを作るにはどうすればいいでしょうか？

### 前提・実現したいこと
[こちら](https://q-az.net/elements-drag-and-drop/)のサイト様で説明していることを、
Reactで実現したいのですが、いまいち上手く行きません…。
（Material-UIを利用しています。）

### 該当のソースコード
これで一応動いたのですが、
マウスを素早く動かすと、要素がついていけてないような感じで、移動が止まってしまいます。
ゆっくりマウスを動かしているうちは、期待通り動きます。
素早く動かしてもついてくるようにしたいのですが、
どこを修正したらいいのでしょうか…
よろしくお願いします＞＜

### ~~追記~~
~~恐らく、this.setState()で値を設定してから要素がレンダリングされるまでに、僅かな時間差があることが原因だと思われます。
上記のサイト様では、onMouseMoveイベントで直接要素の位置を変更しているのに対し、
Reactの場合はイベント発生時に値を変更（handleMove）し、変更があったことを確認してから新しい値でレンダリングする、という流れのため、
ゆっくりマウスを動かしているうちは問題ないものの、
激しくマウスを動かすと、「実際のマウスの位置」と、「変更前の値でレンダリングされている要素の位置」に差ができ
onMouseLeaveイベントが発生してしまう…ということなのだろうと思います。
これはもう、Reactのstateで要素の位置を管理すること自体諦めるしか無いのでしょうか…
回答お待ちしています＞＜
~~
```Javascript
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';

const styles = (theme) => ({
  box: {
    padding: theme.spacing.unit * 2,
    height: 100,
    width: 100,
    backgroundColor: 'red'
    cursor: 'move',
    position: 'absolute',
    zIndex: 1000,
  },
});

class TestComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isDrag: false,
      x: 0,
      y: 0,
      top: 0,
      left: 0,
    };
  }

  handleDown = (e) => {
    const item = this.node;
    const x = e.pageX - item.offsetLeft;
    const y = e.pageY - item.offsetTop;
    this.setState({ isDrag: true, x, y });
  }

  handleMove = (e) => {
    if (this.state.isDrag) {
      e.preventDefault();

      this.setState({
        top: e.pageY - this.state.y,
        left: e.pageX - this.state.x,
      });
    }
  }

  handleUp = () => this.setState({ isDrag: false });

  render() {
    const { top, left } = this.state;
    const { classes } = this.props;
    return (
      <div
        role="presentation"
        ref={(node) => { this.node = node; }}
        onMouseDown={this.handleDown}
        onMouseMove={this.handleMove}
        onMouseUp={this.handleUp}
        onMouseLeave={this.handleUp}
        className={classes.box}
        style={{ top, left }}
      >
        テスト
      </div>
    );
  }
}

TestComponent.propTypes = { classes: PropTypes.object.isRequired };

export default withStyles(styles)(TestComponent);

```

### さらに追記
一度、サイト様に記載されているコードをそのまま記述してみましたところ、なんと同じ症状が発生しましたOTL
サイト様のページでは、Div要素はスムーズに動いているので、不可能ではないはずなのですが…。
[こちら](https://codepen.io/rogi-chan-man/pen/ELJoGg)がCodePenで試したコードです。
CSSを少し編集したくらいで、JavaScriptのコードはコピペです。一切編集していません。

追記していた予想は外れていたようで…一向に原因がわかりません。助けてください（TmT）

Reactで要素をドラッグ＆ドロップで移動させたい

# はじめに
AWS初心者です。（GitHubも初心者だと言っても過言ではありません。）
優しく教えてください。


# やりたいこと
githubのmasterブランチに`git push`されたときに、Code Deployを使い自動デプロイを行いたい。


# やったこと
- EC2インスタンスの立ち上げ（後術）
- [このサイト](https://qiita.com/dq-nobuko-takatsuki/items/ba365966ae61e177a4da)を参考にロール等作成を一通り


# エラー
エラーログを探したのですが、わからず……
おそらくGitHubの設定がミスっていると踏んでいます。

![イメージ説明](739f1a41a1d1c6e869d8142c063742a9.png)


# EC2立ち上げ手順

以下の手順です。

```
# システムを最新に
sudo yum update -y

# 時間を日本に
sudo ln -sf /usr/share/zoneinfo/Asia/Tokyo /etc/localtime
echo -e 'ZONE="Asia/Tokyo"\nUTC=true' | sudo tee /etc/sysconfig/clock

# 上司に言われたので、不要っぽいサービスを停止
sudo systemctl disable amazon-ssm-agent.service
sudo systemctl disable atd.service
sudo systemctl disable autovt@.service
sudo systemctl disable dmraid-activation.service
sudo systemctl disable getty@.service
sudo systemctl disable libstoragemgmt.service
sudo systemctl disable mdmonitor.service
sudo systemctl disable postfix.service
sudo systemctl disable rngd.service
sudo systemctl disable sysstat.service
sudo systemctl disable systemd-readahead-collect.service
sudo systemctl disable systemd-readahead-drop.service
sudo systemctl disable systemd-readahead-replay.service

# ec2-userアカウントを無効化
sudo adduser nnahito
sudo usermod -G wheel nnahito
grep wheel /etc/group | grep nnahito
echo 'nnahito ALL = NOPASSWD: ALL' | sudo tee --append /etc/sudoers.d/cloud-init

# 鍵を作ったユーザに合わせる
sudo cp ~/.ssh/authorized_keys ~nnahito/.ssh/authorized_keys
sudo chown -R nnahito:nnahito ~nnahito/.ssh
sudo chmod -R go-rwx ~nnahito/.ssh
sudo ls -al ~nnahito/.ssh

# EC2-USERでログインできないように
sudo vim /etc/ssh/sshd_config
# 「DenyUsers ec2-user」を追記
sudo /bin/systemctl reload sshd.service

# sshログインポートを22以外に変更する
sudo vim /etc/ssh/sshd_config
# 「Port 22222」を追記
sudo /bin/systemctl reload sshd.service

# サーバのセットアップ
sudo su
yum install -y git
# EecKeeper入れた。割愛
amazon-linux-extras install nginx1.12
amazon-linux-extras install php7.2
# nginxのconfいじった。起動は確認してるので割愛

# php-fpmを実行するようのユーザ作成
useradd -s /sbin/nologin php-fpm
sudo vim /etc/php-fpm.d/www.conf
# user = php-fpm 
# group = php-fpm  に、それぞれ変更

# 以下、再起動したり起動時に自動でnginxとphp-fpmが立ち上がる設定とか。
```


# Code Deploy用に行った設定

```bash
yum install -y aws-cli
# ↑入ってた
```

---

**ロール作成**
- `AmazonS3ReadOnlyAccess`をEC2で
- `AWSCodeDeployRole`をcodedeployで作成

---

**EC2インスタンスにロールの当てはめ**
AmazonS3ReadOnlyAccessのみを当てはめ

---

**Code Deployのインストール**

```bash
aws s3 cp s3://aws-codedeploy-ap-northeast-1/latest/install . --region ap-northeast-1
# download: s3://aws-codedeploy-ap-northeast-1/latest/install to ./install

# インストーラーに実行権限を与える
chmod +x ./install

# インストーラーの実行にRubyがいるので、それも入れておく
sudo yum -y install ruby

# インストール
sudo ./install auto
```

---

**appspec.ymlの作成**

```bash
version: 0.0
os: linux
files:
  - source: /
    destination: /home/nnahito/deploy-test
```

↑ちなみに、`destination`を`/var/www/html/`に変更すると手動デプロイもできなくなります……
なんでなのでしょう？権限…？

---

**Code Deployで手動デプロイを試す**

- アプリケーションの作成
- デプロイの作成（gitHubリポジトリ/commit番号指定）

↓

実行
→成功

---

**git push時にデプロイできるようにロールにGitHub用のアカウントを作る**
ユーザ作成
- プログラムによるアクセスにチェック


---

**ポリシーの作成**

- JSON入力
- 確認画面で以下の忠告が出た

これは失敗…？

![イメージ説明](e1c39809405724e73bf0abe7c22674a8.png)

とりあえず無視して続き。
ポリシーのアタッチをさっき作ったGitHub用のアカウントに紐付け。

---

などなどを行い、git pushしても、一切動いてくれず、githgubを見に行くと、最初に提示したエラーが出ておりました。↓

![イメージ説明](739f1a41a1d1c6e869d8142c063742a9.png)


---

初めてなので、どこが間違っているかわからず……
申し訳ございませんが、おかしなところをご教示いただけますと幸いです。

よろしくお願いいたします。