前のパートに戻る 完了して次のパートへ  

  0-1 React × Ruby × サーバレスでゴルフ場検索サービスを作ってみよう

この教材では、ゴルフ場を検索できるシンプルなサービスを作ります。 特徴としては、Rakuten API, Google Map API を組み合わせることで、既存のゴルフ場検索サービスにはない「ゴルフ場までの所要時間で絞り込みができる」点です。

完成イメージはこちらになります。 https://master.d3vno1isnhz8si.amplifyapp.com/

教材の構成は 3 部構成です。

  • 第 1 章 作成するサービスの全体像を理解する
  • 第 2 章 フロント編
  • 第 3 章 バックエンド編

学習内容


  • React を使った開発
  • Ruby を使った開発
  • サーバレス(AWS の Lambda, DynamoDB, API Gateway)を使った開発
  • AWS Amplify を使ったアプリケーションの公開
  • Rakuten API, Google API を使った開発

受講における必要条件


  • Ruby の基礎知識
  • JavaScript の基礎知識
  • Git/Github の基礎知識

この教材の対象者


  • React を使ってみたい方
  • サーバレスでの開発に興味がある方
  • AWS Amplify を使った手軽なアプリケーション公開に興味がある方
  • Rakuten API, Google API の使用に興味がある方

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


  • macOS

この教材を作成した想い


これまで著者は、動的な処理は jQuery で書き、Ruby on Rails のアプリケーションを Heroku で公開していました。しかし、React・サーバレスを使ってみて分かりやすさ、管理の簡単さに感動したので、今まで React, サーバレスを使ったことがない方が気軽にそれらの良さを感じて欲しいと思ってこの教材を作成しました。

React, サーバレスの経験がなくても理解できるように作っています。特に AWS を用いたサーバレスの部分は少し複雑な操作も多いので、スクリーンショットを多く使用して AWS を使うのが初めての方でも迷わないようにしています。

サービスを作りながら楽しく学んでいただけると嬉しいです。

目次


第1章 作成するサービスの全体像を理解する

作成するサービスとサービスを構成する技術について、図を用いて説明します。

第2章 フロント編

  1. Reactのインストール
  2. APIのモックを作ろう
  3. CSSを用意しよう
  4. Homeコンポーネントを定義しよう
  5. 検索フォームを作成しよう
  6. react-datepickerを使ってみよう
  7. 「ゴルフ場を検索する」ボタンを作ろう
  8. 検索結果を表示させよう
  9. 検索結果を表示する(結果が0件の場合)
  10. 検索結果を表示する(エラーの場合)
  11. ローディングを作ろう
  12. 本番環境にデプロイしよう

第3章 バックエンド編

  1. RakutenAPIの登録をしよう
  2. GoogleMapsPlatformの登録をしよう
  3. DynamoDBにテーブルを作ろう
  4. Lambdaでバッチ処理を作ろう
  5. LambdaでAPIを作ろう

議論

0 質問

このコースの評価は?