未経験者が頑張ってWebアプリを作ってみた

初心者が頑張ってそこそこモダンな技術を使ってポートフォリオアプリケーションを作ってみました。

#使用技術

Docker
Docker-compose 
Ruby 2.6.5
Rails　６．０．０
AWS（EC2,S3,VPC）

になります。
もう本番環境に上げています

なのでこちらのリンクを踏めばすぐに飛ぶことができます。
http://13.208.108.131:3000/

#どういったアプリなのか

僕はよくブロガー兼Youtuberの人を見るときがあります。
そうでなくてもツイッターとYoutubeで活動している方を見ることがあるのですが、その時に思うのは、

###プラットフォームの移動がめんどくさい

って言うことなんですよね。

TwitterいってからYoutubeに行ってコンテンツを楽しむ
しかもその上にブログ記事を書いている人にはブログ記事もチェックしないといけない

いつも思っていました。
俺が見たいのはブログなどのコンテンツであって読み込み画面や別のタブを開いて検索をかけてとかがしたいわけではない

なので、それらをすべて一つのアプリケーションにまとめることができれば楽だなと思ったので、まだまだサービスとしては至らない点は多いですがそういった思想のもと作ってみました。

#このアプリの紹介というか思い出話

このアプリでは３つの分類にページが分かれています。

・ブログ
・つぶやき
・動画

した２つにはバリデーションをかけています。なので、動画以外を動画投稿のページで投稿してしまうと、バリデーションによって弾かれてしまいます。
その機能を作ろうとした時に、どうやってもバグになってしまうんですよね。

普通にやろうとすると、動画投稿のページで普通に動画を投稿しようとすると動画を投稿しているのにバリデーションで弾かれてしまうんですよね。

なので、ActiveStorageに対してバリデーションをかけられるGemを追加していくことで対応しましたね。

あと印象に残っているのは、
No Method Errorになてしまった時に、チェックするのは基本的にはコントローラーなのですが、底があっているときにはどこを見たらいいかというと、マイグレーションファイルとモデルを見ていくと解決の糸口になるということがわかったときはすごい良かったとお思いました。

それにその頃からエラーが起きてしまってもどこを見ていったらいいかを構造的に考えていくといったことができるようになったので、良かったなと

初学者にありがちなのが、

コピペに頼るあまり構造がわかっていない。
だからエラーになったとしても対処ができない、仕組みや構造がわかっていないから。
それを解消できるきっかけはやっぱりこのアプリをつくったときですね。

エラーになっても、構造から逆算して考えるようになったので、成長が早くなったというかスタートラインに立つことができたなと感じました。

あと頑張ったことといえばActionTextを導入したことですね。

Rails6からの機能で、Railsでかんたんにブログが投稿できるようになるっていうものですね。
なので、追加してみたのですが、初心者には難しかったですね。
何より情報がすくねぇっていう問題があったので、、
本当にググっても情報がまじで出てこねぇっていうことが頻発したので、めちゃくちゃ大変だったんですよね。
ユーザーとの関連付けも大変だったのですよはい。

・ActionTextに関するマイグレーションファイル
・Blogに関するマイグレーションファイル
・ActiveStorageに関するマイグレーションの３つが生成されるのですが、その時に俺間違えてActionTextに関するマイグレーションファイルの方にユーザー情報を関連付ける記述をしてしまったので、投稿する時に

ユーザー情報なんてねぇよって怒られてましたｗ
まぁソレはBlogのマイグレーションファイルに記述すればよかったのでいいんですけどね。

あとはオブジェクトについてまなんだりしました
それと非同期いいね機能も学んだので、すげぇ良かったです。

あと、ユーザー別の投稿一覧ページを作成した時に、UserモデルをDeviseというGemを導入する時に作ったのですが、それのShowメソッドを用いて作りました。

これがけっこう大変でした。
なんせ投稿を取得しようとすると、別のテーブルから引っ張ってくることができなくてずっとNo Method Error担ってしまっていましたので。
これはcongrollerの記述を

    @posts = Post.find(user_id: @user.id)

から

    @posts = Post.where(user_id: @user.id)

findメソッドを使わずにwhereメソッドを使ったら解決しました。
findメソッドだと全部の投稿を持ってきてしまうからかな。

なので、whereメソッドのように、指定した投稿のみ持ってこれるようにしました。

あと、これタブUIを実装したのですが、これ実はスクリプトなしで作っています。
HTMLとCSSのみですね。

まじで苦労した。

#まとめ

今回マジでドカンと成長できたなと思いました。
初学者あるあるを散々踏み抜いてきたので回避することを学びました。
主に、エラーが起きたときはそのプログラムやアプリはどういった順番で動いていくものなのかを思い出してそこから逆算することでエラーの原因を突き止めるといったことをやれるようになったので、本当に良かったと思っています。
それに過去一番でかいアプリになりました。
モデルの数11個ですからねこれ。
これからの自分の成長が楽しみだなと思えるようになりました。
ほんとね、何でも来いよと思えます。
そのたびにまた調べてやってやんよって感じですね。
ここまで長い文章でしたが、みなさんありがとうございました。