未経験が３か月でブックレビューサイトを作ってみた

#はじめに
はじめまして、cryptoboxと申します。
メーカーで開発職をしている新卒一年目のモノです。

私は現在勤めている会社にインターン経由で早期に内定を頂き、愚かにもロクに自己分析もせず入社を決定してしまいました。
現在はそれをすごく後悔していて、本当に自分がやりたいことは何か見つめ直したとき、人々の悩みを解決して感動を与えるアプリ/サービス開発を仕事にしたいと思うに至りました。

そんな動機でプログラミングの勉強を始め、未経験ながら３か月ほどでアプリを作りきることができました。

そこで今回は開発したアプリの紹介と、作っている過程でぶつかった困難、そしてそれをどう乗り越えたかをまとめたいと思います。

#つくったアプリ
##ブックレビューサイト「CloudCritic」
サイトURL（PCとスマホに対応）
https://cloud-critic.web.app/home

#アプリ制作のきっかけ
##課題意識
アプリ制作のきっかけは私が日頃から感じている１つの思いと現状のレビューサイトにおける２つの課題意識です。

１つの思いとは、
**世の中の本には埋もれている（もっと評価されるべき）名作が多すぎる！**ということです。

私は本を読むことが好きで、小説や漫画を結構多く読んでいます。そんな中、漫画「鬼滅の刃」を原作としたアニメが大ヒットしとんでもないブームになりました。

そこで私が思ったことは**「『鬼滅の刃』めちゃくちゃ面白いけど、世の中には『鬼滅の刃』レベルにもっと流行っていい本がいっぱいあるのに！！」**ということでした。

そんな世の中にあまり知られていないけど物凄く面白い本を、もっといろいろな人に知ってほしいと日頃から思っていました。

また、現状のレビューサイトにおける課題意識とは以下の２点です。

• レビューの敷居の高さ
• ５段階評価への疑問

それぞれ具体的に説明します。

->レビューの敷居の高さ
商品レビューをしたことがある人は、商品に対する自分の意見を言語化するのって意外と難しいと感じたことがある人も多いんじゃないでしょうか？

自分もその一人で、面白い本を読んでその感想を語りつくしたいけど、語彙力が無くて全然文字にできない！と感じていました。

->５段階評価への疑問
レビューサイトでよくある５段階評価が作品を正当に評価できているかに疑問を感じていました。

なぜなら５段階評価だと、ストーリーはとても面白いのに絵があまりうまくないといった漫画の評価が３．５とかになってしまうのです。

ストーリーが著しく面白いのであれば、絵がうまくないといったポイントで減点される必要はないと考えていて、５段階評価ではない別のシステムで作品評価ができないかと考えていました。

##解決策
この１つの思いと２つの課題意識を一挙に解決できるシステムを考えたとき、以下のアイデアが生まれました。

・ユーザーが作品に対してタグを付けられる
・そのタグに対して「いいね」できる
・また作品を「タグ検索」できる

ユーザーがレビューを書くのではなく、頭に思い浮かんだ断片的な言葉をタグとして作品につけることでレビューの敷居を低くします。

また、タグに対して「いいね」をすることで、作品を５段階で評価するのではなく、作品の良い部分や好きな部分を個別に評価できるというシステムにしました。

さらに作品をタグ検索できるようにし、例えば「もっと評価されるべき」とタグのついた作品を簡単に検索できるようにしました。

#機能紹介
ということで実装した機能を紹介していきます。

###①タグに「いいね」でレビュー
作品にタグを付けて「いいね」することで評価できます。

###②ワードクラウド
タグネームといいね数に応じてワードクラウドを生成。
作品の評価されているポイントが一目でわかります。

###③タグ検索
同じタグのついた作品を検索できます。

###④コメント機能
コメントの作成/編集/削除ができます。

###⑤ランキング
総合いいね数のランキングが見れます。

###⑥書籍検索

###⑦プロフィール編集

###⑧ログイン
メールアドレス、もしくはGoogle、Twitter、Yahooアカウントでログインできます。
また１クリックでお試しログインできるテストユーザーログイン機能も用意しています。

#困難だった事と乗り越えた方法
###モチベーション維持
自分はかなり飽き性で何かを初めても１ヶ月以上続くことはめったにありません。

今回アプリ開発をするにあたって最も気を使ったのがモチベーション維持です。具体的には以下の事を行っていました。

①開発を習慣化する
毎日、ご飯を食べ終わったら最低でも１行コードを書くということをしていました。やる気は作業をしているうちに出てくるもので、作業を始めるときがやる気の出ない最も辛いタイミングです。この**始めるタイミングのハードルを限りなく低くすることで習慣化に成功しました。**コードを書くことが習慣になってくると逆に書かないと気持ち悪いくらいになってきて毎日続けることができるようになっていきます。

②未完成でも友達に見せる
まだ完成していなくても友達に「いまこんなの作ってるんだー」と見せると結構「すごいね」とか言ってもらえてモチベーションになりました。完璧なアプリを見せてドヤりたいのもあるのですが、未完成でも好反応をしてくれる人は多いので見せてみるのはオススメです。

③MENTAを使う
開発していると「こんなゴミアプリ誰が使うんだ」とか「なんでこんな簡単な実装ができないんだ」と自分を責めてしまう事が良くありました。独りでやっているとどうしてもメンタルがヘラっていき作業が捗らなくなることがあります。これは恐らく悩みを共有できたり相談できる人がいない為起こることなんじゃないかと考えました。そこでMENTAを使うことで自分のメンターを作ることにしました。MENTAは開発の相談をするために使う人が多いかと思いますが、メンタルケアをしてもらうためにも使えるのでおススメです。

###エラー&エラー&エラー
今回開発を進めていくうえで数えきれないほどエラーに遭遇しました。出てきたエラーに対処を施してもその対処法が原因で別のエラーが出てくることもあり、ふて寝した日は数知れず。しかしエラーに対処していくうちに自分なりの対処フローが出来上がっていき、最初よりは時間を無駄にすることなく進めることができるようになっていきました。具体的なフローは以下のような感じです。

①エラー文を読み原因の仮説を立てる
②仮説が正しいと仮定して、原因を潰すように処理を書き換える

【②がうまくいった場合】
対処完了。エラーの内容/原因/対処法をメモしておく。こうすることで同じエラーが出たときスムーズに対応できるようになる。

【②がうまくいかなかった場合（基本的にはうまくいかない）】
・仮説をたてなおす（console.logで可視化してみる）
・仮説が立てられない場合エラー文で検索してGoogleを頼る
・MENTAに頼る

書いてみると当たり前の事をしているにすぎないことに気づきました。でも今のところの対処法はこんな感じです。

###非同期処理
JavaScriptの非同期処理に大変苦労しました。正直未だによくわかっていません。

これを理解していないため、Firebase Authでユーザーを管理する際にハマりまくりました。

自分の場合はJavaScriptのドキュメントを読んでも理解できなかったのでこの記事を読んでなんとなく理解した後、他の人のGitHubのソースコードを読むことで少しわかるようになりました。ただ現在も勉強中です。

###レスポンシブ対応
アプリ開発をMacBookAirで行っていたのでPCの画面上だと大丈夫なのですが、スマホで見るとデザインが崩れてしまっていることがよくありました。

CSSフレームワークにVuetifyを使っていたので、Vuetifyのグリッドシステムのドキュメントを読んでレスポンシブ対応できるようにしていきました。

ただ自分にとってグリッドシステムは理解が難しく、デザインをある程度思い通りにできるようになるまで１０回以上ドキュメントを読み直したと思います。

CSSをあまり深く勉強していない為、Vuetifyの前にCSSをしっかり勉強する必要があるなーと思っています。

#使用した技術
アプリを開発するにあたって使用した技術をまとめておきます。

• Nuxt.js（フロントエンド）
• Vuetify（CSSフレームワーク）
• Firebase Auth（認証）
• Cloud Firestore（データベース）
• Cloud Storage（画像アップロード）
• Firebase Hosting（ホスティング）
• axios（HTTPクライアント）
• GoogleBooksAPI（API）
• vue-word-cloud（ワードクラウド）
• vue-js-modal（モーダル）

#おわりに
未経験ながらなんとかアプリを作りきることができました。

といっても改善点は山積みでいまだに修正を繰り返しているのが現状です。やることが無限にありすぎて**アプリ開発に終わりってあるの？**と疑問に感じています。

ただ、自分の頭の中のアイデアをこうしてカタチにできたことに喜びを感じていますし、開発自体はとてもたのしかったです。（気づいたら深夜を周ってることもザラでした）

これからもずっと開発を続けていきたいと思っています！

■参考
本記事を作成するにあたって以下の記事を参考とさせていただきましたm(_ _)m

【初アプリ】未経験がFlutterで肉牛繁殖農家のためのアプリを作ってみた
ゴリゴリのSIerのSEが個人開発でWebサービスを作ってみた