私は知っている。生きているみんな、ストレスを抱えていることを。
そして、ストレスを吐き出す場所を探していることを。
今回は悪口を吐き出してストレスを無くし、明日から笑顔で生きられるようにするべく、「どれだけ悪口を言っても大丈夫な部屋」を実装したので紹介する。

「悪口言ってもいい部屋」

まずは、作った部屋を見ていただこう。

使い方は簡単。
この人は誰？の入力欄に「悪口を言いたい人」を設定する。例えば、締め切りギリギリに仕様変更してくるクライアント、とか（私の周りにそう言うクライアントがいるわけではない）

その後、悪口入力欄に悪口を書き込んで、悪口を発射する。そうすると、コメントが返ってくるので確認してみてほしい。
（たまに怒ったコメントが返ってくる仕様にした。その辺もぜひ確認してみてもらいたい。）

「この人は私が悪口言いたい人に似ていない！」と言う場合は、次の人ボタンを押してもらえれば、アバターを変更できる。

環境

Netlify
CodePen
Vue.js
joe schmoe （アバター生成）
bootstrap
iTyped

Vue.jsを用いて実装した。
レイアウトの調整等にboostrap,タイトルに熱いメッセージを表示するために、iTypedを用いた。

ソースコードと解説

ソースコードは以下の通り。

See the Pen swearing room by Masahiro Nishiguchi (@Masaedge) on CodePen.

以下の記事を参考に、作成した。

...初めてVue.jsを用いてのWebアプリ開発であり、試行錯誤して作業を進めたので、かなり拙いコードなっている。Javascriptの理解度向上が今後の課題である。

悪口発射を押した時のコメント表示と、次の人ボタンを押したときの画面遷移が今回のポイントとなる。
悪口発射ボタンを押した際は、ランダムに発生させた数字によって、コメントが表示される仕様にした。

ちなみに私が愛ある悪口の本場、大阪出身であることから、コメントは大阪弁にした。大阪の人は悪口を言ってもおおらかに包み込んでくれることを知ってもらいたい思いもある（言いすぎると怒られるけどね！）。

javascript.js

const app = new Vue({
    el: '#app', // Vueが管理する一番外側のDOM要素
    data: {
      // Vue内部で使いたい変数は全てこの中に定義する
      count:1,
      button1:'悪口発射！',
      button2:'設定',
      name:'',
      nameset:'',
      nextperson:'次の人',
      messe:'',
    },
  methods:{
    setting:function(){
      this.name=this.nameset;
    },
    nextdata:function(){
      this.count += 1 ;
    },
    submit:function(){
      this.messe = '';
      var min = 1 ;
      var max = 99 ;
      var num = Math.floor( Math.random() * (max + 1 - min) ) + min ;
      console.log(num)
      // アバターの返答を表示
      if (num < 10){
        this.messe = 'かまへん、いくらでも悪口言っていいで';
      } else　if (num < 20){
        this.messe = 'わし今日ええ気分やねん、悪口言われても気にせん';
      } else if (num < 30){
        this.messe = 'あんたの気持ちが晴れるならなんぼでも言うていき';
      } else if (num < 40){
        this.messe = 'わしが若い時はもっとボロカス言うてたわ';  
      } else if (num < 50){
        this.messe = 'あんたの悪口、あんま悪口っぽないなあ';
      } else if (num < 60){
        this.messe = '関西の本場の悪口はそんなもんやないで！！';
      } else if (num < 70){
        this.messe = '今日はようけ鳥鳴いてんなあ';
      } else if (num < 80){
        this.messe = 'あんたの悪口より、最近の阪神の弱さの方がイライラするわ';
      }　else if (num < 90){
        this.messe = 'そんなことより今度大阪おいで';
      } else {
        this.messe = 'いい加減にしいや！';
      }
    },
 },
});

使ってみた感想

いくら悪口を言っても大阪人がやんわり受け止めてくれるのは、故郷を思い出すことができて、ストレス緩和効果を高めてくれた。
大阪に行ったことがない人は大阪を疑似体験できるかも知れない（過言）。
明日から笑顔で生きていけそうな気がする。

まとめ

初めてのWebアプリ開発だったが、かなり時間がかかってしまった。
が、意図したものを作る点においては、及第点と言えるだろう。

boostrapでの見栄えを整える部分と、Jacascriptには課題が残っている感じが拭えない。
今後さらなるパワーUPをしていく所存である。

ほなみんな！これ使って明日から笑顔で生きていこな！！