LoginSignup
3
1
@kokihello

Ruby on RailsとReactでBlogアプリを作りました。

Last updated at Posted at 2024-03-29

使用技術一覧

目次

  1. アプリ名
  2. 環境
  3. ER図
  4. 使用技術詳細
  5. アプリ機能
  6. 学習記録
  7. 実装について

Isostagram

Image from Gyazo

Github : https://github.com/morishitakouki/Isostagram/tree/main
url : https://rails-react-frontend-blog-e49b147a0c56.herokuapp.com/

アプリの概要

バックエンドにrailsとフロントエンドにreactを使ったblogアプリを作りました。

環境

言語・フレームワーク バージョン
Ruby 3.3.0 　
Ruby on Rails 7.0.8.1
MySQL 8.0
Node.js 20.11.1 　
React 18.2.0

ER図

Image from Gyazo

(トップへ)

使用技術詳細

Backend

  • devise / devise_token_authを使用したトークン認証機能
  • carrierwaveを用いAmazon S3に画像を保存する投稿機能

Frontend

  • コード解析: ESLint
  • CSSフレームワーク: react-bootstrap
  • 主要パッケージ: Axios / react-router-dom / @mui/material / styled-components / react-hook-form / react-bootstrap, bootstrap

Infrastructure, Development Environment

  • 開発プラットフォーム : Docker
  • インフラ : AWS( S3) / Heroku *デプロイ

アプリ機能

トップページ / ログイン

railsAPIから返されたトークン認証情報をローカルストレージに保存しています。
React hooksのuseContextを使いどのページでもログインしてるか否かを判別しログインしていなければ新規登録とログイン画面以外にアクセスできないようにしています。

Image from Gyazo

Image from Gyazo

新規登録

react-hook-formを使いバリデーションを実装しました。

Image from Gyazo

ブログ投稿

Image from Gyazo


ブックマーク機能

Image from Gyazo

編集機能

Image from Gyazo

削除機能

Image from Gyazo

ログアウト

Image from Gyazo

学習記録


1. Progate（2023年4月〜）

プログラミングのプの字もわからない状態からHTML、CSS、SQL、バックエンド言語(主にRuby)などをProgateで学びwebサイトを作る大まかな技術をつけました。

2. Ruby(2023年6月中旬〜)

Progateでの学習が終えてバックエンドの言語を学習しました。
RUbyを選定した理由は、初めて触れたのがRubyであるという点と、Rubyが、書いていて一番自分に向いているなと感じたからです！
Rubyを学ぶ上で難しかったのはオブジェクト指向という概念です。プログラミング初心者にとってクラスという概念は理解するのに時間がかかりました。

主に「ゼロからわかるRuby超入門」という書籍を使いハンズオン形式で学習しました。

こちらの書籍はRubyを触ったことのない人にはうってつけの書籍でRubyの全体像を取得するにはとてもおすすめです！

「ゼロからわかるRuby超入門」（難易度：入門〜初級）

3. Ruby on Rails(2023年7月中旬〜)

Rubyでwebサイトを作るにはフレームワークが便利なのでRubyのフレームワークで最もメジャーなRuby on Railsを学習しました。

私は主に現場RailsやUdemyを使って勉強していました。
現場Railsはただ読むというよりは手を動かしながら書くことを意識してました。
現場Railsはアマゾンのレビューではそこまで難しくないと書かれてありましたがRails初学者の自分にとっては結構難しかったですね、、
特にChapter6のRailsの全体像を理解するという章ではなにを言っているのか全くわかりませんでした。
ProgateでRailsに触れてからこちらの書籍で学習すると理解しやすくなります。

Chapter2からChapter4を完璧にすれば簡単なwebサイトを作れるのでそちらを重点的に進めるのがおすすめです。

参考にさせていただいた書籍、講座☟

現場で使える Ruby on Rails 5速習実践ガイド

4. Git Github(2023年8月〜)

webサイトを管理する上でこれらの知識は必須なので学習することに。
下記の記事がとてもわかりやすかったのでご参考までに。

5. Docker(2023年10月〜)

自分のアプリを他のPCにクローンして作業するときにMacOSだと動くけどWindowsだと動かないみたいな問題が発生していたので、すべての環境を同じにするため仮想環境を勉強しました。
参考にさせていただいたものを載せておきます。

6. React(2023年11月)

Railsで簡単なアプリを作れるようになってきた頃、モダンな技術を学んでみたくなったためReactの学習を始めました。
Javascriptは一応Progateで少しだけ触ってほぼなにも覚えていない状態でしたが、
Udemyでじゃけぇさんという方のReactの講座はJavascriptから丁寧に解説してくださるので私にとっては神講座でした。

とてもわかりやすくおすすめです。

7. Rails + React(2024年1月〜)

どうやらRailsとReactでアプリを作ることができるらしい、ということを知って早速学習してみることにしました。
zennの記事を参考にしてあとは手探りで開発を進めていきました。

実装について

1. 実装手順

2月の中旬くらいから始めました。なにを作ろうかとは特に決めてなく、いきなり実装から始めました。

  1. Dockerで開発環境構築
  2. Backend、Frontendの実装(Ruby on Rails, React)
    2.0 RailsとReactの紐付け(CORS, axios)
    2.1 認証機能の実装(devise_token_auth, React-hook-form)
    2.2 投稿機能の実装
    2.3 画像投稿機能の実装(CarrierWave)
    2.4 ブックマーク機能の実装
    2.5 削除、編集機能の実装
  3. 本番環境に適応(Heroku)

2. 苦労したポイント

まずログイン機能にはとても苦労しましたね。。

Railsだけでアプリを作っていた時はdeviseを使って現場Rails通りにやれば実装できましたが、ReactとAPI通信をする場合、どうすれば良いのかわかりませんでした。
調べた結果、devise_token_authというgemを使うとFrontから送られてきた認証情報をRailsのAPIモードで受け取ることができるらしいのでそれで実装してみることに。

大きなエラーや小さなエラーまで様々なエラーがでましたが特に苦戦したのはユーザー情報の取得、保持です。
まずバックエンドから送られてきたユーザー情報を取得することができませんでした。

原因はローカルストレージにaccess_tokenしか保存してなかったのが原因でした。つまりバックエンドに送る情報もaccess_tokenのみ。これだけだとユーザーが識別できません。clientとuidも送ることで解決しました。

const response = await axios.get(
       `${process.env.REACT_APP_API_URL}/auth/sessions`,
      {
        headers: {
          'Content-Type': 'application/json', // access_token,client,uidを送る
          'access-token': accessToken,
           client: client,
           uid: uid,
        },
      }
    );

そして今度はログインしてる時とログインしてない時で状態を分けるためにdeviseお馴染みのヘルパーメソッドcurrent_userを使おうとしましたがなぜか機能しない。なぜだ？
原因はcurrent_userを使ってるcontrollerがapi/v1配下にあるのでcurrent_api_v1_userにしないとダメらしい。そんなん知らんがな。。。
下記の記事がなかったら解決できていませんでした。ありがとうございます。

ただcurrent_api_v1_userにしてそのままコントローラーに書いても機能しませんでした。

# posts_controller.rb

 def index
  user = current_api_v1_user
  posts = user.posts      #なぜかuserがnilになる
  render json: posts
 end

原因はindexアクションにユーザー情報を送ってないことが原因でした。Rails側で認証情報を取得することで初めてヘルパーメソッドが利用できることを知りました。
ちなみにこれを解決するのに1週間くらいかかりました。

// Index.jsx

useEffect(() => {
  fetchPosts()    // fetchPostsでRailsのindexアクションにaccess_token,client,uidを送信して特定のユーザーのpostデータを取得
    .then((data) => setPosts(data))
    .catch((error) => console.error("投稿の取得エラー:", error));
}, []);

そして最後に苦労したのは本番環境への適用です。
デプロイ作業だけでおよそ2週間くらいかかりました。これが原因で就活が遅れてしまいました..(←もっと早くから作っとけ)

まずデプロイするためのレンタルサーバーはHerokuを利用しました。
AWSにしようかと最初は思いましたがなんか難しいらしいのでHerokuでデプロイすることにしました。

Backend側は簡単にデプロイできましたがFrontend側のデプロイでめちゃくちゃ苦労しました。
Frontend側はモダンなReactのビルドツールであるViteを利用しましたがデプロイ知識がない自分にとってこれが裏目になりました。

ビルドまではできるんですけどいざHerokuでアプリを開いてみると原因不明のエラーコードH-10(アプリケーションクラッシュ)が発生しました。
Herokuのlogをみても全く分からず、試行錯誤を重ねて悩み続けた結果、結局Frontendだけcreate-react-appで新たに作り直しました。

このように色々エラーに悩まされましたがそれが自分の成長につながったのでポートフォリオを作ってよかったと思いました！

3. 今後導入したい技術

⚫︎ RSpec

RSpecを利用してテストを書きエラーの早期発見を目指したいです。

⚫︎ CI/CD

​​ビルドやテスト、リリース、デプロイなどの各作業を自動化し、リリースできる状態にまで効率的に進められるようにしたいです。

⚫︎ Figma

AWS Amplify Studioを利用してFigmaで作成したデザインをReactアプリに連携しUIデザインの向上を目指したいです。

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
1