学習時間 | 20時間 |
---|---|
難易度 | 中級 |
質問投稿 | 可 |
【Rails×React】UberEats風アプリを作りながら、SPA開発を学ぼう
イラストで分かりやすく、Ruby on RailsとReactを使ったSPA開発を解説。Rails APIモードとReact Hooksを使いながら、言語やWebアプリケーションの基礎も学べる。さらにデバッグ時の注意点やChrome DevToolsの見方など、現場で使うWeb開発のメソッドも習得。
「初めての動くアプリ」にちょうどいい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アプリケーション開発を理解することができます。