学習時間 | 8時間 |
---|---|
難易度 | 中級 |
質問投稿 | 可 |
【React ×TypeScript × Ruby】サーバーレスでゴルフ場検索サービスを作ってみよう!
ReactとRubyを使ったゴルフ場検索サービスの開発!教材内では、Rakuten, Google MapsのAPIについてだけでなく、AWS Lambda, DynamoDB, API Gatewayを用いたサーバーレス開発についても学ぶ。
上場したばかりの注目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