常連

注目の的

### 実現したいこと
jqueryでのイベント登時録のベターな書き方


### 発生している問題・エラーメッセージ
現在jqueryにて簡単なコードを書いているのですが、以下について疑問があり、自分なりに検索し、調べたものの疑問に対する回答が得られなかった為質問をさせていただきます。

疑問例
jqueryでclickイベントを登録する場合を例にあげますと

```

$("セレクタ").on("click",function(){
    console.log("hoge");//例
};
```
といった記載を多く見かけるものの実際のサイト(個人サイトを除く)ではほとんど使われておらず、以下のような初心者、初級者から見るとわかりずらいコードが多く使われているような気がします。

```
//このメソッド自体は読み込み時にinit()が実行されているようでした。
$.testFunc = {
    self : $("セレクタ"),//書かれているもののどこにも適用されてないようでした。
    trigger : $("発火セレクタ"),
    init : function(){
        this.trigger.on("click",function(){
            console.log("hoge");//例
        });
    }
};

```
※上記コードは一般サイトのコードから転記しているものです。

上のようなコード(単純なものではないコード)になっているのは、そうしないと問題が発生するものなのでしょうか。
それとも管理がしやすい等の理由なのでしょうか。

まとまりの無い質問で申し訳ありませんが、上記のような複雑なコードになる理由をご存知の方がおりましたら回答をぜひよろしくお願いします。

### 補足情報（FW/ツールのバージョンなど）
必要なものがあれば追記します。

jqueryでのイベント登録(click等)について

### 前提・実現したいこと

LPの制作案件獲得に向けてLPのサイト模写を行っているものです。
「LP模写にあたっては、初めの段階では正確性を重視するといい」というアドバイスをいただいたのですが、どの程度まで正確だといいのでしょうか？
現状でいうと、見た目やレスポンシブ時のレイアウトはできる限り似せて、レスポンシブ時の動作なども再現できているつもりです。ただし、空白まで1px単位での調整や、ウィンドウ幅を動かした時の動作やレイアウトまで同じにすることは難しく、半ば諦めています。
LP案件獲得の実績として模写を使うなら、やはりその程度、あるいはそれ以上まで正確だといけないのでしょうか？


### 現状をgifで説明します

現在制作している模写を使って、自分の今の出来具合の参考にしていただければ幸いです。
今行っているサイト（トップ部分のみ）を例に挙げると、ウィンドウの左端と動画サイトリンクとの距離が見本と微妙に違います。次に、トップ底辺とボタンとの距離が見本ではウィンドウ幅と比例して距離が開いているのに対し、私の模写では一定です。
両方とも容量の都合で操作が早く、一致していないです。申し訳ありません。

![見本のサイト](ca5a3da8f808123a7652fbea2c897e6d.gif)

![[模写中のサイト](2add04a9944eba8ccaece70d409fb62c.gif)

### 試したこと

あまりに一致しないので、CSSコードを見本のサイトで一部見てしまっています。

現在手がけている模写を例に挙げると、positionを使って中央揃えにしている場合
```html
  left: 0;
  right: 0;
  margin: auto;
```
のようにleftとright両方に0を指定することでmargin:auto;での中央揃えが有効になることだけは理解できました。
でも、上で挙げた問題まで解決してピクセル・動作パーフェクトまで目指すのは難しいです…


### 補足情報（FW/ツールのバージョンなど）

ブラウザ:chrome(最新のバージョン)
テキストエディタ:atom(ver:1.32.2)

サイト模写はどの程度正確ならいいのでしょうか？

### 前提・実現したいこと

【実機でのVue.jsの作動】

monaca初心者です。コーディングも勉強中です。
自分用にアプリを作りたく、挑戦しています。

順序的には、monacaの前に、①ページを単体ずつコーディングしてブラウザで確認、②成功したらmonacaのindex.htmlの該当すると思われる場所に記述、③うまくいかなければmonacaで単体ページにバラして検証、という形で行っていました。

（③の段階です）
Vue.jsをmonacaで使用しようとしたところ、作動せず、コンソールに
[Vue warn]: Cannot find element: #app
と出ましたので、調べて、HTMLを読み込む前に作動させてしまってることが原因だと知り、イベントリスナー「DOMContentLoaded」を使用することで解決できました。
（Vue.jsは#app内で動くのだと思います）

このテストは簡易的に単体ページで行いました。成功したら、２つのタブで構成されていて、２つ目のタブがナビゲーションでページ遷移したその先に移動させようと思っていました。
移動させてみるとVue.jpの読み込みが成功しました。よし！と思ったら実機デバッグでは動いていませんでした。
同様に[Vue warn]: Cannot find element: #app　とエラーが出ます。
単体ページの時では、実機で動いていました。

テストでは、bodyタグの下に<div id="app">がありますが、移動先ではappの前にタブ１のコードがあったり、ons-templateやons-pageの中にappがあるからいけないのかと思い、こちらのページでもbody直下に<div id="app">を入れてみました。すると、Vue.jsが読み込まれる代わりに、タブ、ほかのページが消え去り、テストと同じページのみ表示されるようになりました。

divの位置をいくつか試してみたところ、先頭以外では実機では＃appを認識してくれません。


先頭以外に設置した#appを読み取ってくれない理由がわかりません。
bodyタグ直下以外の<div id="app">で、Vue.jsを作動させる方法はあるでしょうか。
または、どこか記述、解釈を間違えているのでしょうか。

ごくごく初心者なのですが、もしできる範囲であれば挑戦したいです。アドバイスをいただけますと嬉しいです。




### 発生している問題・エラーメッセージ

[Vue warn]: Cannot find element: #app

### 該当のソースコード

```html

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="components/loader.js"></script>
  <script src="vue.js"></script>
  <script src="main.js"></script>

  <script src="lib/onsenui/js/onsenui.min.js"></script>

    <script>
    // Page init event
    document.addEventListener('init', function(event) {
      var page = event.target;

      if (page.matches('#first-page')) {

        page.querySelector('#li01').onclick = function() {
          document.querySelector('#navigator').pushPage('li01.html');
        };

      } else if (page.matches('#second-page')) {
        page.querySelector('#pop-button').onclick = function() {
          document.querySelector('#navigator').popPage();
        };

      }
    });
  </script>
  <script>
    // Page init event
    document.addEventListener('init', function(event) {
      var page = event.target;

      if (page.matches('#first-page')) {

        page.querySelector('#li02').onclick = function() {
          document.querySelector('#navigator').pushPage('li02.html');
        };

      } else if (page.matches('#second-page')) {

        page.querySelector('#pop-button').onclick = function() {
          document.querySelector('#navigator').popPage();
        };

      }
    });
  </script>

  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
  <link rel="stylesheet" href="css/style.css">

  <script>
    ons.ready(function() {
      console.log("Onsen UI is ready!");
    });

    document.addEventListener('show', function(event) {
      var page = event.target;
      var titleElement = document.querySelector('#toolbar-title');

      if (page.matches('#first-page')) {
        titleElement.innerHTML = 'My app - Page 1';
      } else if (page.matches('#second-page')) {
        titleElement.innerHTML = 'My app - Page 2';
      }
    });
  </script>

</head>
<body>

  <ons-page>
    <ons-toolbar>
      <div class="center" id="toolbar-title"></div>
    </ons-toolbar>
    <ons-tabbar position="bottom">
      <ons-tab label="memo" page="tab1.html" active>
      </ons-tab>
      <ons-tab label="list" page="tab2.html">
      </ons-tab>
    </ons-tabbar>
  </ons-page>
  
  <ons-template id="tab1.html">

    <ons-page id="first-page">

	

    </ons-page>
  </ons-template>

  <ons-template id="tab2.html">

    <ons-page id="second-page">

  <ons-navigator id="navigator" page="page1.html"></ons-navigator>

  <ons-template id="page1.html">
    <ons-page id="first-page">
      <ons-toolbar>
        <div class="center">Page 1</div>
      </ons-toolbar>

　　　
	<li id="li01"><a>A</a></li>
	<li id="li02"><a>B</a></li>
    </ons-page>
  </ons-template>

  <ons-template id="li01.html">

   <div id="app">
    <ons-page id="second-page">
      <ons-toolbar>
        <div class="left"><ons-back-button>Page 1</ons-back-button></div>
        <div class="center">Page 2</div>
      </ons-toolbar>
     

    </ons-page>

    </ons-page>

      </div>
  </ons-template>

</body>
</html>
```


---

【main.jsの「DOMContentLoaded」の場所】
```js
document.addEventListener("DOMContentLoaded", function(event) {
new Vue({
  el: '#app',
  data: {
・・・・・・・・
```






### 試したこと

<div id="app"></div>の位置変更ーbodyタグ直下では認識するが構造が破綻する、それ以外の場所は認識せず

＃app→.appに変更してidをclassにー実機×

新規でタブのテンプレートで作成しタブ２に<div id="app"></div>を挿入し実機テストー同様のエラー（#appがみつからない）





### 補足情報（FW/ツールのバージョンなど）

バーが２つ重なったりレイアウトひどいものですが、ひとまず動くことを確認してから調整したいので、そういうところの指摘はなしでお願いしたいです。

クラウドIDEで書いていました。IDEのプレビューでは成功しています。
実機はXperia Z5にて。
IDEと実機では読み込み順が違うという情報を見たので、その辺が問題なのかと推測しましたが、読み込み順が違うからだとしてもどう改善すればいいのか分かりません。（誤った推測かもしれませんが）

【monaca】Vue.jsを使用したいが#appを読み取ってもらえない

皆さんは、プログラミングで分からないことがあったらまずググるかと思いますが、
その中でアフィリエイト目的の質の低いサイト、古いサイト、コードが載ってないサイトに出くわすことが
多々あるかと思います。

私もそうで、それにかなり時間を取られています。

なんとかする方法があれば教えて頂けるとありがたいです。

よろしくお願いします。

ググる方法について・・・

サーバーの死活確認、メモリ、CPU、容量などがある一定を超えると通知が出るようなサービスまたはツールを探しています。

zabbixを導入を考えているのですが、これはアプリケーション・サーバーに直接インストールする物ですか？
それとも別のサーバーにインストールするべきですか？
できれば、余っているVPSサーバーにインストールしたいと考えています。
Mackerelも気になるのですが、これらもインストールサーバー、どちらにインストールすべきですか？