モテるためには、まず出会い -Vue.jsで作ったメモアプリにコメント機能を追加する

mote

前回の記事の続きです。
今回もワークショップ形式で進めていきましょう。

さて、ではなぜあなたの日常の行動で出会いに繋がる or 繋がらないと感じたのか？その理由を記載するためにコメント機能を付け足していきましょう。

というわけでいきなりですが、コメント機能を付け足したソースコードを下記に載せます。
もしかしたらVueの流儀から外れた書き方をしている可能性もあるので、Vue.jsの公式ドキュメントを参照しつつ、あ、こいつここの書き方、ちょっと変なやり方で書いているな...などと難癖つけながらコード読んでもらえると、誰かのコードレビューをする前の準備運動になるのでおすすめです。
(完全に後付と言い訳)

index.html

<!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, index ) in items">
          <label>
            <input type="checkbox" v-model="item.isChecked" class="mr-2" />{{
            item.title }} />
          </label>
          <div class="text-left">
            <p v-if="item.hasComment">
              {{ item.comment }}<button
                class="btn btn-danger ml-2"
                v-on:click="deleteComment(index)"
              >
                コメント削除
              </button>
            </p>
            <div v-else>
              <input type="text" v-model="items[index].comment" />
              <button
                class="btn btn-primary ml-2"
                v-on:click="addComment(index)"
              >
                コメント追加
              </button>
            </div>
          </div>
        </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,
        hasComment: false,
        comment: ""
      });
      this.newItem = "";
    },
    addComment: function(index) {
      this.$set(this.items[index], "hasComment", true);
      itemList.save(this.items);
    },
    deleteComment: function(index) {
      this.$set(this.items[index], "hasComment", false);
      this.$set(this.items[index], "comment", "");
      itemList.save(this.items);
    }
  }
});

実際の処理部分だけでなく、見た目的にも結構差分が出ている思います。
実はコードを整形するのが面倒だったので(というか前回はしていなかったので)、prettierを導入してコードフォーマットをかけています。

prettierとはなに

jsの開発でよく使われているコードフォーマットツールです。

これを使えば、コードの見た目は気にせずに書いていても、最後にprettierを使えばいい感じにコードのフォーマットをしてくれます。
最近のフロントエンド界隈ではデファクトスタンダードになっています。

使い方は簡単なので、下にコマンドを記載していきますね。
なお、コマンドライン上からnpmかyarnが使えることを前提に書いていきますので、使用するにはnode.jsをインストールする必要があると思います。

インストール方法についてはインターネット上に情報はいくらでもあると思いますので、ここでは割愛します。

prettierのセットアップ手順

# npmの場合
npm i -D  prettier

# yarnの場合
yarn add -D prettier

上のコマンドを打つとpackage.jsonができるので、下記のように記述する。
package.jsonを開き、下記のように記述する。
ちなみに{js,html,json}という記述はjsとhtmlとjsonを対象とするということ。

{
  "scripts": {
    "fmt": "prettier --write './*.{js,html,json}'"
  },
  "devDependencies": {
    "prettier": "^1.16.3"
  }
}

ここまで書いたら、下記のコマンドを打つとhtmlやjsのファイルがフォーマットされます。
これでもう見た目を意識して書かなくてOK。
これは実際に開発する際にもとても重要で、見た目については意識せずに書けるのでロジックの実装だけ集中することができます。
私はどちらかというと、悲しいかな、頭のメモリが少ないので😢、なるべく本質的な部分(ここではロジックのこと)に集中できるような環境の中で開発を行っています。
ちなみにnpmやyarnとは？という方は、まずはnpmから学んでおきましょう。

npmやyarnとは？

誤解を恐れずに書くと、yarnはnpmの高速版なので、これらに初めて触れる場合はまずはnpmの仕組みを理解しましょう。
(私はもっぱらyarnを使っているのだけど、最近のnpmは速くなっているとも聞く。実際どうなんだろう？)

初学者のために公式とqiitaの記事を貼っておきます。

コメント機能を使ってみる

少し脇道にそれましたが、それではコメント機能を使ってあなたのそう感じた理由を記載していきましょう。

下記のようにチェックの有無に対する理由を書いていきます。

上は私が試しに作成してみたサンプルですが、これを見るとチェックを付けていないのは女性との接点がないからという理由によるものです。
私にとっての出会いの可能性とは、女性との接点の有無が関係していることがこれを見てわかります。
では、女性との接点を持つにはどうすれば良いでしょうか？
チェックを付けている項目にはいずれも女性との接点を持てそうなところに出かけているという共通点がありますね。
では、女性との出会いがありそうな場所って他にどんなところがあるでしょう。出会いの効率化を図るためにはそのような場所をリストアップして、そこに足を運ぶ機会を増やすというのが、一つ重要な施策となりそうですが。

・・・

うーん、私の場合は居酒屋やバーなどの飲み屋ぐらいしか思い浮かびません。ただ、これは上のリストにも書いていたことです。
これでは出会いの機会を増やす方法を伝えるどころか、自分自身出会いの機会を見失っている状態となってしまいます。
そんな状態でこんな記事を書いているわけにもいかないので、意地でも考えていく必要がありそうです。

というわけで、このワークショップ形式の記事は次回に続きます。
第三回目を書き終わるまでには、効率良く異性と出会える方法を見つけておきます。

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