課題 成果物
38日目です。
2日間かけて作成した課題のブログアプリができました。
成果物
メインの画面上 ログインユーザーと投稿者が一致しているものだけ編集と削除が表示されます。
メインの画面下
ログインしていなければ見ることしかできません(編集、削除ボタンが消えています)。
ログイン画面
ユーザー登録画面
投稿の文言などは、個人的に好きな、なんでも肯定してくれる人気キャラクターの「コウペンちゃん」の言葉を使わせて頂きました笑
作者:るるてあ(さん)
課題の条件
- Userがブログを投稿できる
- Userが自分のブログを編集・削除できる
- ログインしていなくても全てのブログを閲覧できる
- フォームのヘルパーメソッドは「form_for」または「form_with」を使用する
- 一覧表示には部分テンプレートを使う
悩んだこと
- (時間短縮のために)rails newの際にscaffoldを使うべきか
- ルーティングでresourcesを使うべきか
- CSSフレームワークは使うか、使うとしたら何を使うか (Materialize.cssやBootstarapなど)
- 投稿記事に対してコメント機能をつけるべきか(DB設計時にcommentsテーブルをつけるべきか)
- ビューを習ったhamlやSASSで書くべきか
1と2に関してはこの記事を読み、考えさせられました。
Rails初心者はscaffoldとresourcesを使うな - Qiita
1は使用せず、(モデルやコントローラー、ビューなど)全てコマンドを実行して作りました。
2に関しては、可読性の問題もあるため、最初は全てルーティングをきちんと書き、全て出揃ってからBoostnoteに保存してresourcesと入れ替えました。
3に関しては、CSSフレームワークは使うことにしました。
理由は、フロントの実装が苦手な自分にとって今後役立ちそうだと思った為です。フレームワークは「Materialize.css」を使いました。
ネットで「Bootstarap」の記事も多く、リファレンスもしっかりしているということで悩みましたが、「Materialize.css」はカリキュラムで推奨され、かつチームメンバーも使用していた為、「聞ける人が多い」ことを重視しました。
4は、まずは慣れているHTMLやerb記法で書き、余裕があればhamlに変換することにしました。結果そのままでしたが笑
良かったところ
- 条件は全てクリアできたこと。
- 発表の2日前に完成したこと。
- DB 設計を最初にきちんとやったことで、後からカラムを追加するといった手戻りがなかったこと。
- Materialize.cssを利用してヘッダー(ナビゲーション)、フッターを作成、カードを利用した投稿記事の繰り返しができたこと。
- ページネーションを実装できたこと。
失敗したこと
- カリキュラムで使用したRails5.0.7.2を使ってしまったために「form_with」が使えず、Rails5.1以降は非推奨となった「form_for」を使わざるをえなかったこと。
- データベース設計をしてテーブルを作っただけでMaterialize.cssをビューファイルに貼り付けてしまったことで、エラーが多くなり機能を少し実装してブラウザを確認するということがあまりできなかった。
発生したエラー
- 「rails new blog-app」で作ろうとしたら、いきなり「blob-app」とスペルミスをして作ってしまった。
- 「cd blog-app」コマンドを忘れていた為、「rake db:create」を入力したが実行されなかった。
- マイグレーションファイルで「timestamps」を消してよくわからないまま「datetime」を入れたら、「created_at」「updated_at」カラムが作成されなかった。
- undefined local variable or method `f' for #<#<Class:0x00007fb320b042c8>:0x00007fb31b4cb640>
- Mysql2::Error: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'DESK LIMIT 5 OFFSET 0' at line 1: SELECT
tweets
.* FROMtweets
ORDER BY created_at DESK LIMIT 5 OFFSET 0
1 一回Railsファイルを消して作り直しました。
2 きちんとディレクトリを移動させてもう一回実行しました。
3 rollbackでやり直しました。
4 form_for でdoの前に| f |を忘れていたので付け足しました。
5 orderメソッドを使ってDBの情報を降順で持ってこようとしたのですが、「DESC」を「DESK」と書き間違えていました。ネットエラー文を調べたところ、「SQLで半角忘れなどが多いので、エラー文にまどわせれないように」とありました。
課題
- CSSをどのように当てたら良いか分からず、フッターの固定、投稿記事の中央寄せ、ページネーションの色の変更ができなかった。
- 基本の理解不足。基本的な機能の実装に時間がかかりすぎて、投稿へのコメント機能やマイページ機能の作成、色々なGemを試すといったことができなかった。
- ログインやサインアップがデフォルトのままのため、UIやUXの配慮が足りない
明日からチャットアプリの実装に戻り、カリキュラム進捗優先で進めます。