記憶の回収をお手伝い！飲酒量＆お会計記録Webアプリ！ #codepen #javascript #html

#昨日もいつの間にか記憶がない！！
お酒でこんな経験ある方いませんか？
勧められるがままにお酒を飲んでいたら、いつの間にか記憶がない・・・！

一体どれだけ飲んだんだ？！
会計どうなった？〇〇さん払ってくれましたっけ？
そしてこんなことになるの何回目？！

#飲酒量もお会計も安心！次の日の確認も簡単！！
そんなあるあるに対抗するためにこんなものを作りました！
もはや飲み会中は常にこれを開いていれば安心？！

～ポイント～

①何件ハシゴしても自分が飲んだ杯数だけを記録できる！

②蓄積されていくから、まずい！もうこんなに飲んでるって危機感も覚えやすい。

③会計も記録できるので、よくある会計どうなった？！問題も次の日に確認できる！

④そしてどんな酔っ払いでも簡単に操作できます。(クリアボタンを押すミスだけ注意）

#CodePenを初めて使ってみました。
仕様はこちら。ToDoリストを追加していくコードをアレンジして使用。
お酒は私の好みです（笑）

HTML

<!-- 全体をVue.js有効にする -->
<div class="container text-center text-white bg-dark" id="app">

  <!-- タイトル行 -->
  <div class="row my-3">
    <div class="col-sm-6 mx-auto"><h1>何飲んだっけ？</h1></div>
  </div>

    <!-- その他入力行 -->
  <div class="row my-3">
    <div class="col-sm-6 mx-auto">
      <input v-model:value="task" placeholder="その他のお酒を入力…" class="form-control"><br>
      その他[{{ task }}] <button v-on:click="addTask" class="btn btn-primary">追加</button>
    </div>
  </div>
  
  <!-- ビール入力行 -->
  <div class="row my-3">
    <div class="col-sm-6 mx-auto">
      <button v-on:click="addBeel" class="btn btn-primary">ビール</button>
    </div>
  </div>

  <!-- レモンサワー入力行 -->
  <div class="row my-3">
    <div class="col-sm-6 mx-auto">
      <button v-on:click="addlemon" class="btn btn-primary">レモンサワー</button>
    </div>
  </div>

  <!-- ハイボール入力行 -->
  <div class="row my-3">
    <div class="col-sm-6 mx-auto">
      <button v-on:click="addhigh" class="btn btn-primary">ハイボール</button>
    </div>
  </div>

  <!-- 日本酒入力行 -->
  <div class="row my-3">
    <div class="col-sm-6 mx-auto">
      <button v-on:click="addnihon" class="btn btn-primary">日本酒一合</button>
    </div>
  </div>

  <!-- ワイン入力行 -->
  <div class="row my-3">
    <div class="col-sm-6 mx-auto">
      <button v-on:click="addwine" class="btn btn-primary">ワイン1杯</button>
    </div>
  </div>

  
  <!-- 全てのお酒をクリアするボタン -->
  <div class="row my-3">
    <div class="col-sm-6 mx-auto">
      <button v-on:click="clearAll" class="btn btn-danger">全てのお酒をクリア</button>
    </div>
  </div>

  <!-- お酒追加されると表示される部分 -->
  <div class="row my-3">
    <div class="col-sm-6 mx-auto">
      <p v-for="todo in todoList" class="alert alert-success">{{ todo }}</p>
    </div>
  </div>

  <!-- タイトル行 -->
  <div class="row my-3">
    <div class="col-sm-6 mx-auto"><h1>会計記録</h1></div>
  </div>
  
  <!-- 会計入力行 -->
  <div class="row my-3">
    <div class="col-sm-6 mx-auto">
      <input v-model:value="kaikei" placeholder="会計を入力…" class="form-control"><br>
      会計{{ kaikei }} <button v-on:click="addKaikei" class="btn btn-primary">追加</button>
    </div>
  </div>

  <!-- 会計追加されると表示される部分 -->
  <div class="row my-3">
    <div class="col-sm-6 mx-auto">
      <p v-for="kaikei in kaikeiList" class="alert alert-success">{{ kaikei }}</p>
    </div>
  </div>
  
</div><!-- 全体ここまで -->

JavaScript

const app = new Vue({
  el: '#app', // Vueが管理する一番外側のDOM要素
  data: {
    // Vue内部で使いたい変数は全てこの中に定義する
    task: '',
    kaikei:'',
    beel:"ビール",
    lemon:"レモンサワー",
    high:"ハイボール",
    nihon:"日本酒一合",
    wine:"ワイン一杯",
    todoList: [], // これは配列
    kaikeiList: [], // これは配列
  },
  methods: {
    // 関数はここ

    //ただ追加
    addTask: function() {
      console.log('次のお酒が追加されました：', this.task);
      // 配列の先頭に現在のタスク内容を追加する（最後尾の場合はpush）
      this.todoList.unshift(this.task);
      console.log('現在のお酒一覧：', this.todoList);
    },

    //ビールを追加
    addBeel: function() {
      console.log('ビールが追加されました：', this.beel);
      // 配列の先頭に現在のタスク内容を追加する（最後尾の場合はpush）
      this.todoList.unshift(this.beel);
      console.log('現在のお酒一覧：', this.todoList);
    },

    //レモンサワーを追加
    addlemon: function() {
      console.log('レモンサワーが追加されました：', this.lemon);
      // 配列の先頭に現在のタスク内容を追加する（最後尾の場合はpush）
      this.todoList.unshift(this.lemon);
      console.log('現在のお酒一覧：', this.todoList);
    },

    //ハイボールを追加
    addhigh: function() {
      console.log('ハイボールが追加されました：', this.high);
      // 配列の先頭に現在のタスク内容を追加する（最後尾の場合はpush）
      this.todoList.unshift(this.high);
      console.log('現在のお酒一覧：', this.todoList);
    },

    //日本酒を追加
    addnihon: function() {
      console.log('日本酒一合が追加されました：', this.nihon);
      // 配列の先頭に現在のタスク内容を追加する（最後尾の場合はpush）
      this.todoList.unshift(this.nihon);
      console.log('現在のお酒一覧：', this.todoList);
    },

    //ワインを追加
    addwine: function() {
      console.log('ワイン一杯が追加されました：', this.wine);
      // 配列の先頭に現在のタスク内容を追加する（最後尾の場合はpush）
      this.todoList.unshift(this.wine);
      console.log('現在のお酒一覧：', this.todoList);
    },
    
    //会計を追加
    addKaikei: function() {
      console.log('会計：', this.kaikei);
      // 配列の先頭に現在のタスク内容を追加する（最後尾の場合はpush）
      this.kaikeiList.unshift(this.kaikei);
      console.log('会計一覧：', this.kaikeiList);
    },
        
    // 以下を追加、関数名はなんでもよい
    clearAll: function() {
      this.todoList = [];
      console.log('全てのお酒が消去されました');
    },
  },
});

#ボタンがいい！！by酒飲みの友人

せっかくなので、これどう思う？と飲み仲間の友人に試してもらいました（笑）

「酔っぱらうと誤字脱字で解読不能のLINEを送っていることも多々あるので、入力のお酒ボタンは有難い。　
数字も読めなくなるので、ハイボール〇杯みたいな表示よりこちらのほうが危機を覚える。
あんまり酔えない上司との飲み会とか、飲み会の後に彼氏に会う予定があるときとかにいいかも。」

とのことでした。喜んでくれてよかったです（笑）

改善点としては、

「もう少しお酒の種類を増やしてほしいのと、飲み過ぎ防止を知らせてくれる機能とかが欲しい。」

とのことでした。
お酒の種類は増やせるとして、飲み過ぎ防止アラートがあれば、さらに安心です。
ここは改善の期待ができそうなところです。

#酔いたいとき・酔いたくないとき

お酒って不思議なもので、今日は酔っぱらうぞーーーーー！というときもあれば、
今日はどうしても酔わずに、早めに帰りたい。（でも飲み会は断れない）などのときもありますよね。

後者のときにはこのWebアプリが役立ってくれるのでは？！と感じました。
お酒の楽しみ方は様々ですが、筆者も平日に飲み会が入ったりするときは使ってみたいと思います！

#CodePenを使ってみて
テンプレートがあればアイデア次第で、かなり活用できるものが作れそう！と思いました。

カンニング万歳！検索したら、素敵なテンプレートが沢山転がっていたので、もっとかっこよく作れるように頑張りたいと思います。
（洒落たテンプレートに挑戦したものの、うまいこと機能とマッチしてくれませんでした。。。
　実装したいものに対するテンプレートの向き・不向きの判断も今後の課題です。)