カテゴリー
サインイン 新規登録
学習時間 20時間
難易度 中級
質問投稿
価格 ¥1,980
月額 ¥2,980
Unlimited会員はこちらの教材を含む100種類以上のUnlimited対象教材が学び放題

【Rails×React】UberEats風アプリを作りながら、SPA開発を学ぼう

イラストで分かりやすく、Ruby on RailsとReactを使ったSPA開発を解説。Rails APIモードとReact Hooksを使いながら、言語やWebアプリケーションの基礎も学べる。さらにデバッグ時の注意点やChrome DevToolsの見方など、現場で使うWeb開発のメソッドも習得。

4.3
最終更新 2023/5
エンジニアリングPdM

「初めての動くアプリ」にちょうどいいSPAで、アプリケーション開発に必要な知識を学ぶ

本教材ではUber Eats風のSPAをサーバーサイドはRuby on Rails、フロントエンドはReactを使って開発します。RailsはAPIモードを使います。またReactは、いまやスタンダードとなりつつあるReact Hooksをその使い方から解説しています。

Ruby on RailsやReactのチュートリアルを終えて、あるいはこれから取り組もうとされている方にちょうどいい実践的な教材です。言語の基礎文法も解説しながら、発展的な内容の習得にも役立つ内容となっています。

とはいえ、サーバー/フロントを一気通貫で実装するのは大変だと思います。なので本教材ではシステム構成やモデル・データの関係を説明した図解イラストを多く取り入れています。

現場で使えるWebアプリケーション開発のスキルや考え方なども解説

エンジニアに大切なことは言語やフレームワークの使い方、知識だけではありません。困ったときの対処法や、効率的な開発なども重要なポイントです。

「自走できるエンジニア」に必要なマインドセットやデバッグ方法、またChrome DevToolsの使い方などを基礎から分かりやすく解説しています。本教材を完走することで、Webアプリケーション開発の知識だけでなく、現場で使えるノウハウや姿勢も身につけることができます。

学習内容

  • Ruby on Railsについて
    • migrationファイルの書き方(カラムのtypeや各種optionの意味)
    • modelファイルの書き方(各モデルのリレーションやバリデーション、クラスメソッドやインスタンスメソッドの違いなど)
    • routesファイルの書き方(REST APIにおけるURLの決め方など)
    • seedを使った初期データの投入方法
    • APIモードにおけるcontrollerの書き方
    • corsの設定方法
    • TDDについて(本教材ではTDDを用いませんが、その概念を解説します)
  • Reactについて
    • Functional Componentの書き方
    • axiosを使ったAPI通信のためのモジュールの定義方法
    • Atomic Componentに沿ったコンポーネント設計、ディレクトリ構成
    • useEffect, useState, useReducerなどのHooksの使い方
    • React Routerの使い方
  • その他
    • システム機能要件の決め方
    • アプリケーション開発におけるデバッグ方法
    • Chrome DevToolsの使い方

完成物のイメージ

本教材の対象者

  • Ruby on Railsの基礎を学習し、SPA対応のサーバーサイドの実装にチャレンジしたい方
  • Reactの基礎を学習し、コンポーネント設計やサーバーサイドとの通信などを学びたい方
  • Webアプリケーション全般の基礎知識を学びたい方
  • 「自走できるエンジニア」を目指している方
  • Railsチュートリアル を読み終えて、より実践的な内容を習得したい方

受講における必要条件

Ruby on Rails, React(RubyやJavaScriptの基礎文法含む)の基本的な書き方を理解されていること

学ばないこと

  • HTML、CSS
  • アプリケーションの本番環境へのデプロイ方法

本教材の対応バージョン

  • Rails 6.0.3.6
  • React 16.13.1

本教材で質問対応可能なOSや環境

  • Mac OS

Railsチュートリアルと合わせて読むことをオススメします

本教材は「公式Railsチュートリアル 読み物ガイド」の中にも含まれております。 その他の素晴らしい学習情報・書籍などと合わせて学習を進めることで、より深くRailsアプリケーション開発を理解することができます。

カリキュラム

Section 0 はじめに
Section 1 要件定義・設計
  • 1-1 実際のUber eats(Web版)の構成を確認する
  • 1-2 今回実装する範囲・要件を決める
  • 1-3 データ・モデルの設計
  • 1-4 フロントエンドの設計
Section 2 Ruby on Railsでデータの準備をする
  • 2-1 Railsプロジェクト、Migrationファイルを作成する
  • 2-2 必要なModelファイルを作成する
  • 2-3 サーバーサイドのルーティングを定義する
  • 2-4 DBへデータを追加する

講師のプロフィール

教材のレビュー

4.3
30件の評価
56%
26%
10%
3%
3%
jaymzzz37 3ヶ月以上前
未経験からエンジニアになるために半年ほどフロントエンドの勉強をしました。サーバーサイドがどのようなことをしているのか、フロントとどのように繋ぎこむのかというメンタルモデルを自分の中で掴むために本コースを受けました。 Rubyは書いたことがないので文法や記法は全くわからない状態で受けましたが、説明が丁寧だったのでそれぞれのファイルで何を行っているのかを十分に理解することができました。 また間に小ネタ もっと見る
ちゃんよ 1年以上前
タイポや細かい粗がとにかく多い。Railsチュートリアルを終えReact完全未経験の状態では、あくまでニュアンスがわかるくらいにとどまると感じた。Reactの知見もある程度得てから受講した方がためになる。「Rails × Reactの非同期通信」を扱った教材は他に見たことがないので、取り扱う題材自体は素晴らしかったです。
obakeeeen 1年以上前
未経験エンジニアの転職の際にSPA構成のポートフォリオを用意するための練習として購入しました。 大体2週間、3時間で完走しました。 reactとrailsのAPIモードがどのように動いているか一通り把握できたので、SPAでポートフォリオを作りたいが、勉強はrailsだけ、reactはまだ手をつけて間もない、何から初めていけばいいかイメージできないと言う方はおすすめだと思います。 気になった点 もっと見る