「寝かせて.com」制作記 -ウェブカツでプログラミング学習!-

nekasete.com

こんにちは、ウェブカツで女性割引を利用し、プログラミングの勉強をしているSoyです。今月末で卒業なので、これが最後のウェブカツブログとなります。

これからもプログラミングの学習と、こちらのブログは続けていきます!よろしければブックマークしてください♪

LaravelとVue.js + Vuex + Vue Routerを使用して、PMS・生理痛のつらさを書き込める掲示板「寝かせて.com」を作成しました。今回はその制作記録を綴ります(とは言っても技術的なことはあまり書いてません)。小規模アプリなので、Vuexを使う必要はなかったのですが、初めての練習がてらに取り入れてみました。

「寝かせて.com」の概要と目的

「寝かせて.com」は、PMSや生理痛に悩まされる女性のつらさを吐き出せる掲示板を作りたい、との思いで制作しました。

寝かせて.com

(PMSや生理のときって、とりあえず横になりたいですよね。寝かせて……といつも思っています。それで、「nekasete.com」でドメインを検索してみたら見事空きがあったので取っちゃいました!でもあとで気づいたけど「寝させて」の方が自然かもしれない!ちなみに私は「寝かして」って言うよ!!)

生理について話すことは、ひと昔前に比べるとそれほどタブーとはされていませんね。職場でも学校でも、女性同士で「今日生理でお腹痛いねん」「えーしんどいなぁ」なんて話すことはよくあると思います。でも同僚の男性や、取引先の女性にこんな話はできないですよね。(百貨店の生理バッジなんてやだやだ!)

生理はやっぱり内々のこと。オープンにしたいけど、できない。でもツラいから吐き出したい。そんなときに「寝かせて.com」を使ってみてください。

「寝かせて.com」の開発環境

macOS Mojave 10.14.6
PHP 7.2.22
Laravel 6.5.0
Vue.js 2.5.17
Vuex 3.1.2
Vue Router 3.1.3

「寝かせて.com」の制作記録

機能洗い出し

「PMS・生理痛のつらさをシェアできる掲示板」には、シンプルに以下の2つの機能がついています。

つらさ書き込み機能

書き込み機能

PMS・生理中・生理後など今の状況を選択して、ツラい症状のジャンルを複数タグ付けできます。

症状のジャンルは、順に精神的なもの・身体的なもの・自律神経にかかわるもので色が分かれています。自分の症状がどこからきているのか把握しましょう。

お大事に機能

書き込みに対して「お大事に」ボタンでエールを送れます。

また、この掲示板は完全匿名性でユーザーの情報はデータベースに保存されません。そのため、ブラウザのsessionStrageにデータを保存し、画面をリロードしても「お大事に」履歴が残るようにしています。

しかし、sessionStorageはブラウザを閉じるとデータが破棄されます。

当初、半永久的にデータが保存されるlocalStorageを使用していました。ところが、クライアントのブラウザにデータが保存され、それが蓄積されていくのはユーザーにとって親切でないと判断し、変更しました。

ちなみに、この匿名性を採用するにあたり参考にしたのは、同じウェブカツ生のみやさんが作られたHakidameです。会員登録不要で手軽に書き込めるため、たくさんの人が利用しています。愚痴を吐き出したり、ツラさを吐露するなら匿名の方がやりやすいですね!

DB設計

DB設計

DB設計はプログラミング・ウェブサービスの要ですね!今回は、データベースもシンプルです。コメントについているreaction_a~bは、はじめに「お大事に」というリアクションではなく、「共感・労わり・励まし」といった複数のボタンを設置していた名残です(めんどくさくてそのまま)。

誰がどの投稿にリアクションしたかというのは重要でないため、サーバーサイドでリアクションの数を足したり引いたりするだけの簡単な実装にしました。プログラミングはロジックを考えるのが大変でもあり、楽しくもありますが、いかにシンプルにするか、というのもとても大事だなと思います。

状況はPMSや生理中など、カテゴリーは症状が精神的なもの・身体的なもの・自律神経的なものなどをあらかじめ登録しています。

新しい試みとしては、コメントとタグが多対多の関係になることで必要になった「中間テーブル」の存在です。
多対多のリレーションと中間テーブルについてはこちらの記事を参考にしました。

Eloquent のリレーション(多 対 多) - Laravel学習帳

ルーティングと機能の実装

今回はVue Routerを使用してSPAにしています。通常、Laravelのweb.phpにviewやactionのルートを定義しますが、Vue Routerによってフロントがviewを操作することになります。

web.php
Route::get('/{any}', function () {
    return view('app');
})->where('any', '.*');

そこで、web.phpでは常にapp.blade.phpが返ってくるようにしました。{any}はあれですね。「何でも」ってことなので、どんなパラメータが来ようがappを表示するよってことです(多分)。

では、サーバーサイドのルーティングはどこに書くのか。サーバーサイドは、LaravelのAPIを使用しますよ〜ということなので、api.phpを使用します。

Route::get('/top', 'BoardController@show');
Route::post('/top', 'BoardController@actions');

シンプルにgetとpostのルートを設定しました。

ルーティングの対象

初めの画面表示では、GET送信で状況および症状タグ、そして書き込みの3つがデータベースから読み込まれます。

その後、POSTで書き込みがデータベースに登録され、非同期で一覧に追加されます。また、リアクションもPOSTで送信され、データベースにはリアクションの数が、sessionStorageにはクライアントのリアクション履歴が登録される仕様です。

Vuexに挑戦!!

Vuexのディレクトリ構成

Vue.jsとVuexのディレクトリ構成

*Vue Routerは省略しています

Laravelを使っているのでresources配下のjsディレクトリにこんな感じで入っています。

Vueのコンポーネント

CommentBoard
ここにはCommentCreateとCommentが入っています。

CommentCreate
状況・症状タグ・テキストエリア・書き込みボタンをformタグで囲ったものが入っています。

Comment
DBに登録されたコメントを表示するコンポーネントです。ここにはReactionsが入っています。

Reactions
クリックによって切り替わる「お大事に」ボタンと「未お大事に」ボタンが入っています。各Commentコンポーネントに1つ付きます。

Vuexのモジュール

Vuexの解説記事で、よくこの図解を見ました。

Vuexの流れ

うんうん、わかるよ。こんな感じね。……で?どうやってコード書くの???

Vuexのディレクトリ構造は何パターンも例があって初心者泣かせだと思います。actionとかmutationとか、役割はわかるけどどこに書いたらいいのかわからなくてしばらく唸っていました(笑)。

例えば、actionだけを集めたactions.jsやmutationだけを集めたmutations.js。

あるいは、対象のものを主体として、そこに関連するactionやmutationを集めたmodule。私は今回、初めてということもあって正しい構成になっているかは自信がないのですが、このmoduleを取り入れることにしました。

comment.jsというモジュールには、書き込みコメントに関するstateやgetter、action、mutationがまとまっています。それらを一括exportしてindex.jsでimportしています。

const state = {
 comments:[]
 }

const getters = {
 }

const actions = {
  getCommets({ commit }) {
  //処理
  },
   createComment({ commit }, [comment, situation, tags]) {
  //処理
  }
 }

const mutations = {
  setComments(state, data) {
  state.comments = data;
  }
 }

export default {
 namespaced: true,
 state,
 getters,
 mutations,
 actions
 }

例えば、コメントが書き込まれると、
components/CommentCreate.vueのmethodからdispatchでcomment.jsのcreateCommentというアクションを発動させます。
次に、createCommentからcommitでsetCommentsというミューテーションへデータを渡します。

Vuexを取り入れてみた感想

Vuexについては、正直当たり前ですがまだまだ理解が浅いです。今回作ったものはかなりシンプルな構成なのでそもそも状態管理するほどでもなく…。でも、コンポーネント間で親から子へ、子から親へデータを渡すよりは楽だなと感じました。

どこからでもstateにアクセスできて、簡単にデータをとってこれるのは良いですね!次はもう少し複雑な構成で、いかにシンプルに管理できるかというのを考えて作っていきたいと思います。

「寝かせて.com」今後の展望

今後追加予定の機能は以下の通りです(仮名称)。PMSや生理痛の重い女性だけではなく、女性のパートナーがいる男性、あるいはPMS・生理痛の軽い女性にも利用していただけると嬉しいです。

わたしの生理ヒストリー

いつから始まって、昔はどんなだったか。今はどんな症状があるか。生理痛緩和のためにどんな工夫をしているかなど、いろんな女性の「生理の歴史」を書き込める掲示板です。

学生時代は友達同士で「いつから始まった?」なんて話をよくしたものです。だけど、とてもプライベートな話題なので気軽に打ち明けられるものではありません。

とくに、小学校中学年で生理が始まった女の子なんかは、相談できる相手がいない場合もあります。自分の生理は変じゃないか、普通はどんな風なのか。いろんな女性の生理ヒストリーを見て、若い女の子たちの不安が少しでも解消されると良いですね。

男子の疑問掲示板

男性って、生理についてどんな疑問があるのでしょうか。
大切なパートナーの生理に対する「疑問」を遠慮なく聞ける掲示板があったらどうだろう、と考えています。

さいごに

というわけで、今後もアップデートをしていく予定です。どうぞみなさん、使ってくださいませ!よろしくお願いしまぁす!!

プログラミングスクールの選び方はこちら

おすすめのプログラミングスクールはウェブカツ!!

初心者向けオンラインプログラミング学習

プログラミング学習初期にウェブサービス部でつまづいた内容はこちら

Soyがプログラミングを学んだ先に実現したいことはこちら

Soyのプログラミング・デザインに関するブログはこちら

かりばんびーに -cari bambini-

Soyのプログラミング以外のブログはこちら

About a Soy|イタリア人とドイツに住むSoyのブログ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)