モテるためには、まず出会い - 戦略的に出会いの数を増やしていく方法をVue.jsを使って考える

mote

2019年1月29日 23:36

モテ + プログラミング、というゲスいネタで記事を書き始めました。

今日はワークショップ形式で進めていこうと思います。

まず、この文章について

この文章は以下のような立ち位置から書かれています

・異性と付き合うための率直な方法を真面目に考察します
・私は男性で、かつ異性愛者のため、その立ち位置からモテる方法について考えていきます

もし上の文章を読んで不快に感じそうと思われた方は、これ以上は読み進めないことをおすすめします。

まず、定義をする

さて、モテるためにはまず出会いが必要です。

まず、ここで、モテと出会いの定義をしましょう。

モテの定義

具体的なモテの定義をここでは、一緒に休日を過ごせる異性が常に数人いる状態、とします。
これは例えば、週末に映画を見に行きたいと思った際に、常に誰かを誘える状態をイメージしてもらえるとわかりやすいかと思います。

モテの定義については現代の日本社会においては、男性と女性で若干捉え方が違うように思います。
モテる女性の場合、放っておいても勝手に異性から誘いが来るというケースをモテると表現することもありますが、男性の場合はこちらから誘って相手が誘いに応じる確率の高さ、がいわゆるモテの指標になるのではないかと思います。
これは持論もある程度混ざってはいるものの、知人でいわゆるモテている人を見ていると、どんどん自分から誘いにいっている人が多い印象です。

この文章は男性目線で書いていくので、モテの指標をこちらから誘って相手が誘いに応じる確率の高さと定義します。
誘いに応じる確率が高いということは、一緒に休日を過ごせる異性が常に数人いる状態と同義だと考えます。

出会いの定義

次に出会いの定義ですが。
知らない異性と新たに知り合うこと、この回数を出会いとしカウントしていくこととします。
結構単純ですが、単純故にデータとして扱いやすいです。
出会いには、場所や出会いの状況、一緒にいた人数や誰といたか？、異性と出会ったときの満足度など様々な要素が含まれています。
これらの要素も合わせてデータを蓄積させていくことで、あなたがどのような状況で異性と出会った場合に最も満足度が高かったか？を振り返ることができるようになります。
これは出会いがうまく行かなくても改善点を探すための重要な糸口となるので、絶対に残しておくべきです。
いわゆる、ログ、ですね。

ちなみに、今、ログ、データなどの単語が出てきましたが、これらを分析するのに、Google スプレッドシート, Google Data studioを使用することを現在検討しています。
これらは無料で使用できるにもかかわらず、使い方次第で十分強力なツールとなり得るので、もし触れたことがない方がいましたらオススメです。

そういう筆者はモテているのか？

ちなみに、こんな記事を書いているぐらいだから、お前自身はモテるのか？と聞かれそうです。私なら、モテない口だけの人間からモテ講義なんて聞きたくありません。

私には妻がいます。
出会って一目惚れし、彼女と付き合いたいと思い、そのための行動を起こしました。
結果、彼女から私に連絡をくれ、その後順調に親睦を深めて結婚しました。
自分で言うのもなんですが、仲は良いです。

ここで強調しておきたいのは、
・私は彼女と付き合いたいと思い、
・自ら行動を起こし、
・自身の願望を実現させた点
です。
つまり、誰かと付き合うというのは、自らの意思で行動し実現できるというところです。
ちょっとしたアプリを作りたいと思い、コードを書いてそれを現実化させるのと何ら変わりありません。
一応モテ + プログラミングというネタでnoteに記事を書いてみることを妻に話した際に、書いている本人がまともな人間かは書いといたほうがいいんじゃないかしら？と言われたので書くことにしました。

というわけで、私の説明は以上。さて本題。

出会いの機会を増やしていく

まずは出会いそれ自体がなければ、次がありません。
出会いの機会を増やしていきます。

というわけで、現在のあなたの生活を客観的に可視化していくことで、出会いにつなげていきましょう。
...話が飛躍したと感じましたね？

まずモテるためには、出会いが必要、では出会いの機会を増やしていくためには...?
まず、あなた自身の生活の中で、どこに出会いの可能性があるかを可視化してみようと思います。下のような箇条書きメモ帳をVue.jsを使って作ります。
これを使って下記のようにあなたの普段の生活で行っていることを書き出してみてください。

ちなみにVue.jsを選んだのは少ないコード量で、簡単にリスト型のメモアプリを作れると思ったからです。
学習コストも少ないですし、最近人気でもあるので、初めて触る方もこれを機にVue.jsを触ってみることをおすすめします。

なお、vueとはなんぞや？と言う方は下記をどうぞ
(Vue.jsは公式ドキュメントが充実しているので、公式のドキュメントだけをまずは読み込んでおけば問題ありません)

私自身vueを触るのはとても久しぶりだったので、上の公式ドキュメントを一通り見返しておきました。

デザインについてはBootstrapの力を借りてサクッと作っていきます。

では、今回のメモアプリを作るのに、２つのファイルを作成します。

まずindex.htmlを作成し、下記のように書きます。
ここでBootstrapとvue.jsも読み込んでいます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>あなたの日常の行動を書き込んでください</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

</head>
<body>

<div id="app" class="container">
  <div class="form-group">
    <p class="text-muted">あなたの日常の行動を書き込んでください</p>
    <input type="text" class="form-control" v-model="newItem" id="newItem" placeholder='記入して"登録"を押してください'>
    <button type="button" class="btn btn-primary mt-3" v-on:click="addItem(newItem)">登録</button>
  </div>
  <ul>
    <li v-for="item in items">
      <label>
        <input type="checkbox" v-model="item.isChecked" class="mr-2">{{ item.title }}
      </label>
    </li>
  </ul>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="./app.js"></script>

</body>
</html>

次にapp.jsを同じ階層に作成します。

const STORAGE_KEY = 'mylife-memo';
const itemList = {
  load: function () {
    var itemList = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
    return itemList;
  },
  save: function (itemList) {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(itemList));
  }
}

const vm = new Vue({
  el: '#app',
  data: {
    items: itemList.load(),
    newItem: '',
  },
  watch: {
    items: function (items) {
      itemList.save(items)
    }
  },
  methods: {
    addItem: function(newItem){
      this.items.push({
        title: newItem,
        isChecked: false
      });
      this.newItem = '';
    },
  }
})

あとはindex.htmlをgoogle chromeなどのブラウザで開いてみれば、簡易的なメモアプリとして動くはずです。
(Vue.jsをCDN経由で読み込んでいるので、インターネットに繋がる状態で開いてください)

まず、あなたの日常の行動をひたすら書き込んでいきましょう。
ちなみに書き出した内容はブラウザ内のlocalStrageに保存するようにしてあるので、シークレットウィンドウで開いている場合は保存されませんのでご注意を。

ちなみに、localStrageとは？という方は下記のレッスンを見てみると良いかもしれません。

さて、一通り日常の行動を書き込んでみましたか？
そしたらここから、あなたの日常に出会いの可能性があるかを、客観的に見てみることにしましょう。

出会いがありそうな行動にチェックを付けて客観視

このメモアプリにはチェックボックスがついています。
今回書き出したあなたの日常の中で出会いの可能性がありそうなものにチェックを付けていきましょう。
これはあなた自身の日常をしっかり客観視するために必要なことです。

いくつかチェックをつけることができたでしょうか？
それとも、全くチェックを付けられなかったでしょうか？
そもそも出会いというのはどこに潜んでいるのか？あなたはチェックを付けながら考えていたことかと思います。
もし、チェックを付けられたなら、そのチェックを付けた行動を次回からはより意識的に実行していくことが必要になります。
その出会いがありそうだと感じた瞬間を見定め、出会いをモノにするには何が必要か？獲物を刈り取るハイエナのように思考を巡らす必要があります。

簡易的なメモアプリにあなたの欲しい機能を追加する

ところでこのメモアプリ、機能がシンプルすぎて少々物足りないですね。
あなたの欲しい機能は何でしょうか？
それをご自身で追加してみることをおすすめしたいです。
例えば、、、

・どのブラウザから参照しても書いたものが見れるようにローカルのDBに保存するようにしたい
・むしろクラウドメモアプリとして機能させたいので、HerokuやFirebaseなどのサービス上に構築したい
・その場合、アクセス制限したいから、とりあえずbasic認証を付けたい
・メモアプリの機能を追加したい。例えば書いた項目に対して、コメントを付けられるようにしたい
・書いたメモに対して、そのメモに関する場所や時間帯、そこから出会いに繋がる可能性などを項目ごとにメタデータとして持たせて、アプリ内で検索できるようにしたい

などなど、今ざっと書き出しただけでも、機能追加についてはたくさんのアイデアが生まれてきますね。
どれも一つ一つは小さな機能なので、ググったりしつつ調べれば、勉強がてら簡単に実装できるようになるはず。
ぜひ機能追加して、あなただけのメモアプリを作ってください！

では、話を本題に戻します。

今あなたが書き出した項目にはチェックが付いているものや付いていないものがそれぞれあると思います。
なぜそこにチェックを付けた・付けなかったのか？、その理由を書いていき、あなたがそのように感じた要因を可視化していきます。
上にも出てきましたが、やはりコメント追加機能は必要そうですね。

少し長くなってきたので、次回メモアプリにコメント機能を追加した上で、あなたの周りに潜む出会いの可能性について、より深掘りしていきたいと思います。

頂いたサポートは、より面白い記事を執筆するためのリサーチ費用やクラウド導入費用など、何らかの用途に使用していきたいと考えています。