rails歴10ヶ月の人が初めてWEBアプリを公開してみた

(Qiita初投稿です。）
資格試験の悩みを解消するwebアプリ[Qua](https://quaquestions.herokuapp.com/)を作りました。開発人数は１人、webサービスを作ったことがない初心者でした（他の言語の経験もなし）。全くの手探りという状況から公開しました。ドキュメントを残しているのでそれをもとに日付と共に振り返っていきたいと思います。

## Quaとは？
資格試験でわからないことがあった。でも誰にも質問できない。塾にも通ってない。どうしよう！という不安を解決するwebアプリです。
例：　FP２級に受験資格はあるのですか？
https://quaquestions.herokuapp.com/
![QUa3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480294/93edf877-f217-30ff-0382-788f1d069061.png)


↑トップページ
正直、初めてですよ感満載のページになってしまいました。あとまだ、サンプル兼動作確認のため投稿した自分の質問しかありません(泣)。
![Qua2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480294/c053e4fc-4629-c5f7-5585-a82c15b540ae.png)

投稿ページにはrails6で実装されたactiontextを実装しました（使ってみたかった）。ただ、新しい要素過ぎてサイズの調整など細かい設定やカスタマイズの方法がのっていないので初心者の私には結構苦労しました。
![QUa4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480294/660854a6-9df3-96d7-facb-7e0a2cec8297.png)
これが詳細ページです。今の技術ではこれが限界でした。今後のアップデートでデザインを良くしたいと思っているページです。

## 製作開始から公開まで...
ここからは製作開始から公開までの道のりを書いておこうと思います。

###きっかけ
「自分もいよいよrails歴5ヶ月目。そろそろ本格的なwebアプリを作っていみたいな...。そうだ！資格試験の質問アプリを作ろう！」って感じののりでした。塾にも通っておらず、完全独学でやっていたのでこんな感じになったんです。今はもうないですがこのときにサイトマップやどういうアプリにするかを決めました。
### 作り始める
１月６日アプリを制作し作り始めました。実務経験が皆無のなのでどういうモデルで行くかとかそういう細かいことを一切気にせず作ってしまいました。
なんとなく予想はできたかもしれませんが余裕で動きません。そして、色々修正をしていたら何故か投稿すらできなくなったしまいました。（アホですね笑）正直全然進んでなかったので新しく作り直すことに決めました。これが作り始めて２週間です。笑うしかありません。
###あることを思い出す...
投稿すらできずに悩んでいたところに自分が初めて買った参考書を思い出したました。「[Ruby on rails 超入門！](https://www.amazon.co.jp/Ruby-Rails-5-%E8%B6%85%E5%85%A5%E9%96%80-%E6%8E%8C%E7%94%B0%E6%B4%A5%E8%80%B6%E4%B9%83/dp/4798048321/ref=tmm_hrd_swatch_0?_encoding=UTF8&qid=&sr=)」という本です。なんとそこにQ＆Aサイトを作ろう！という章があったのです。一回やったのにすっかり忘れていました。これで作ったのを土台にして作ればいいじゃないか！と思ったわけです。なので急いで参考書どうり作り原型が完成しました。
###カスタマイズ
１月２０日いよいよリベンジです。今回はしっかり設計図を書き計画的にやりました。原型は確かに作れましたが、あくまで原型です。問題だらけです。デザインはもちろん新規登録・ログイン機能もなければベストアンサーも決めれないし画像やリンクすら乗せることもできないし、ユーザーidで紐付けすらできていません。あくまで投稿機能だけの原型です。つまりやりたい放題です。一つ一つやったことを紹介すると長すぎるので苦労した点だけ紹介します。
###ユーザーidで投稿データを紐付け
おそらく一番苦労しました。railsに慣れている人なら「は？」ってなるかもしれません。ただ初心者はこういうところでつまずきます。
「rails　投稿データ紐付け」で検索しても出てくるには出てきますがやっても動きません。NoMethodErrorとかになります。最終的にはサイトに頼らず完全自力でやりました。ある意味いい経験になりました。ただ、今見返すと[そのサイト](https://qiita.com/you8/items/63ad0b9c07da4323fe26)とほとんど仕組み的には似たような方法でやっていました。ちなみにユーザーidで投稿データを紐付けに１、２周間はかけています。
###ベストアンサー機能
これも同様に苦労しました。理由は単純で参考にできるサイトが全然ありません。「rails ベストアンサー機能」とかで調べてもほとんどかんけいないきじです（あっても理解できない）。ということでこれもほぼ自力でした。ただ[このサイト](https://masahiro.me/2019/07/answers-reactions-best-answer/)は多少参考にできたので一応載せておきます。
###フォロー機能
これは苦労した人も少なからずいそうですがもちろん自分も苦労しました。最終的には以下の使徒を参考にしてできました。
[railsでフォロー機能をつける。](https://qiita.com/yuno_miyako/items/d6595719ae7065927499)
[【Rails】Deviseユーザーをフォローする機能を作成する](https://remonote.jp/rails-follow-devise-ajax)

###完成間近
3月２０日
そろそろ公開しようと思い公開までにやることを４つ決めました。
①セキュリティ対策
②デザインの修正
③エラー・バグがないか確認
④利用規約
の順番です。そして４月１日公開を目標にしました。

セキュリテイ...devise-securityやrack-attackなどのgemで対処しました。
デザイン...色を大きくかえてみました。
エラー・バグ...エラーは幸いにもありませんでしたがバグ？のようなものはいくつか見つかりましたが大したことはないものですぐに修正できました。
利用規約...あまり良くない方法かもしれませんが[webサイトの利用規約](https://kiyaku.jp/)をベースにしました。
##３月２８日　公開完了
サーバーはheroku・ドメインはお名前どっとこむで「quaquestions.com」にしました。
herokuはhobbyプランを契約しました。少し前サンプルを、herokuで公開したとき安定して動作しなかったので心配だったのですがすんなり行きました。
###問題点
見落としていたところがありました。レスポンシブデザインを完全に無視していました。
レスポンシブデザインとはどのモバイルからみてもきれいに見えるというものです。
つまりパソコンで見たら普通だけどスマホで見たらレイアウトが崩れているということです。なので急いでレスポンシブデザインを対応させました。
##レスポンシブデザイン対応→一旦完成
４月３日全てのページをレスポンシブデザインに対応させ完成させました。１月２０日から４月３日、３ヶ月近い間作り終えました。
###これから先は...
デザインを修正したとはいえまだまだダサいのでもっとかっこよくする。
いいね機能が未だにないので実装する
remote対応

###反省点
実際、反省点はいくつもあります。ただ、最も反省したのはモデルの名前です。deviseで新規登録機能を実装しようとしたときUserモデルという名前は他のサンプルアプリで使っていたのでややこしくならないようManという名前にしました。その時は、モデルの名前なんてなんでもいいだろと思ってたのですが間違いでした。理由は他の記事や参考書を参考にしにくいからです。ほとんどの記事や参考書はユーザーのデータを保管するモデルの名前はuserモデルという名前です。ただ、そんなとき変な名前のモデルだとコピーペーストはもちろんできませんし「ここってuserのままでいいの？いやManやMenにしないとだめ？」ってことがおきます（特に初心者）。なので初心者はちゃんとしたアプリを作るときはuserという名前でモデルを作りましょう（ある程度railsに慣れている中・上級者は大丈夫）。

###最後に
最後に今回Quaを作るのに使ったgemをのせて終わります。

```
gem 'devise'                       #新規登録・ログイン
gem 'rails-i18n'                   #日本語化
gem 'devise-i18n'                  #devise日本語化
gem 'devise-i18n-views'            #devise日本語化
gem 'jquery-rails'                 #jquery
gem 'bootstrap-sass'               #bootstrap
gem 'kaminari'                     #ページネーション
gem 'acts-as-taggable-on'          #タグ付け機能
gem 'ransack'                      #検索機能
gem 'impressionist'                #PV数
```

って感じですね。

ここまで見てくれてありがとうございました。いま、Quaの利用者はほぼ０です。勉強のため作ったアプリだとはいえ**使ってください！！**それだけです。

https://quaquestions.herokuapp.com/

追記　URL変更しました。