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

【React ×TypeScript × Ruby】サーバーレスでゴルフ場検索サービスを作ってみよう!

ReactとRubyを使ったゴルフ場検索サービスの開発!教材内では、Rakuten, Google MapsのAPIについてだけでなく、AWS Lambda, DynamoDB, API Gatewayを用いたサーバーレス開発についても学ぶ。

4.2
最終更新 2023/3
ゆうすけ

上場したばかりの注目HealthTechベンチャーをはじめ、数多くの成長企業で使われる "React×Ruby" での開発

『従来の開発よりも5倍のスピードでReactとRubyを使ったWEBサービスを公開』本教材では、複数のAPIを組み合わせた検索サービスをサーバーレスで開発します。

AWSが公開しているサーバーレス開発のユースケース紹介によると、従来の1/3のコード量で開発が行えるので、生産性は5倍向上するといいます。それだけでなく、“開発:保守/運用” の作業比率を 1:9 から 9:1 に大きく改善し、簡易な機能追加は短期で実装・デプロイ可能になります。

参照元)浸透するサーバーレス 実際に見るユースケースと実装パターン - Amazon Web Services Japan

①なぜ、多くの企業で React が使われるのか?

本教材は、Reactを使って開発を行います。Reactは、Facebookとそのコミュニティによって開発されているユーザインターフェース構築のためのJavaScriptライブラリです。

昨年末に発表された、JavaScriptの利用動向に関する年次調査「State of JavaScript Survey(2019年版)」では、ReactがJavaScriptフロントエンドフレームワークの部門で首位の座についてます。

Reactは、仮想DOM という独自の構造によって、高速で表示を切り替えることができ、コンポーネントごとの状態管理もしやすいことなどから、多くのエンジニアの注目を集めるトレンドの技術です。

本教材では、Reactをこれまで使ったことがなかった人でも、気軽に良さを知ってもらえるようなつくりとなってますので、流行りの技術を十分に体験できると思います。

②サーバーレスで開発に専念
また、AWSでのデプロイ時に、EC2インスタンスを立ち上げたことがある人は分かると思うのですが、立ち上げてから実際にシステムで利用できるようにするには、アカウントなどの初期設定、システムの提供に必要なデータベースやHTTPサーバーなどの各種ミドルウェアのインストール・設定の作業が必要となります。

しかし、サーバレス(AWS Lambda, DynamoDB, API Gateway)を使った開発であれば、インフラ環境を整備する必要がなくなります。AWSがサーバーの構築から保守/運用まで一通り見てくれるので、事前にインフラ環境の準備をする必要がなく、アプリケーション開発に専念できるようになります。

③AWS Amplifyで複雑なデプロイをシンプルに

さらに、本開発では、GitHubにて最も成長しているオープンソースプロジェクトのトップ5に入り、ダウンロード数も数百万回を超えるAWS Amplifyを使って、デプロイを行います。

サーバーレスWEBアプリケーションの機能は、多くの場合ブラウザで実行されるフロントエンドコード(React)と、クラウド内で実行されるバックエンドのビジネスロジック(Ruby)に分散されています。

そのため、フロントエンドとバックエンドの互換性を確保し、新機能が本番環境に障害が生じないことを確認するためには、リリースサイクルを注意深く調整する必要があり、アプリケーションのデプロイが複雑かつ時間のかかりやすいものとなりがちです。

そこで、AWS Amplifyでは、サーバーレスアプリケーションをデプロイするためのシンプルなワークフローが提供されているため、アプリケーションのリリースサイクルを短縮できます。

学習内容

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

実際に作成するサービスの全体像

イメージ

フロント(クライアント)側:フォームで入力された検索条件をAPIへリクエストし、APIから受け取った条件に合ったゴルフ場を一覧表示します。
バックエンド側(バッチ処理):基準地点から各ゴルフ場までの所要時間(最重要)を求めてDBへ保存します。
バックエンド側(API):フロント側から受け取った情報、DBに保存された情報を元に条件に合ったゴルフ場をフロント側へ返します。

本教材を通して身に付くスキル

✔︎ React × TypeScript × Ruby での開発スキル
✔︎ サーバーレス(AWS Lambda, DynamoDB, API Gateway)を使った開発スキル
✔︎ AWS Amplifyを使って素早くサービスを公開するスキル
✔︎ Rakuten APIを使った開発スキル
✔︎ Google Maps APIを使った開発スキル

この教材の対象者

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

受講における必要条件

  • HTML/CSSの基礎知識
  • Rubyの基礎知識
  • JavaScriptの基礎知識

Rubyを一度も触ったことがない方は、まずは書籍等で基礎の学習からはじめることをオススメします。

学ばないこと

本教材では、HTML・CSSの解説は詳しくしておりません。細かく知りたい方はご自身で調べていただければと思います。

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

  • Mac OS

本教材の対応バージョン

  • Ruby 2.5.0

カリキュラム

Section 0 はじめに
  • 0-1 React × Ruby × サーバレスでゴルフ場検索サービスを作ってみよう
Section 1 第作成するサービスの全体像を理解する
Section 2 フロントエンド編
  • 2-1 React とは
  • 2-2 React のインストール
  • 2-3 API のモックを用いた開発を理解しよう
  • 2-4 CSS を用意しよう
  • 2-5 Home コンポーネントを定義しよう
  • 2-6 検索フォームを作成しよう
  • 2-7 react-datepicker を使ってみよう
  • 2-8 「ゴルフ場を検索する」ボタンを作ろう
  • 2-9 ゴルフ場一覧を表示させよう
  • 2-10 検索結果を表示する(結果が 0 件の場合)
  • 2-11 検索結果を表示する(エラー処理)
  • 2-12 ローディングを作ろう
  • 2-13 本番環境にデプロイしよう
  • 2-14 クラスコンポーネントと関数コンポーネント

講師のプロフィール

教材のレビュー

4.2
5件の評価
60%
20%
0%
20%
0%
イーサン 1年以上前
フロントエンドはTypeScriptとReact、バックエンドはRubyを使って開発をしていきます。 とてもわかりやすく、今後勉強する上で応用ができる内容なので大変勉強になりました。 また、講座作成時から時間が経っているにもかかわらず、質問に対して迅速な対応をしてくださりありがとうございました。 もっと見る
岡田佳久 1年以上前
LambdaやDynamoDBなどのモダンなサービスも盛り込まれていて良い教材でした。
庄田雄貴 1年以上前
ありがとうございました。