カテゴリー
サインイン 新規登録

間違いや改善の指摘

内容の技術的な誤り・誤字脱字やミスのご報告・解説やトピックの追記/改善のご要望は教材をさらに良くしていく上でとても貴重なご意見になります。

少しでも気になった点があれば、ご遠慮なく投稿いただけると幸いです🙏

実際には誤りではなく勘違いであっても、ご報告いただけることで教材のブラッシュアップにつながります。

質問ポリシー①

教材受講者みなさんのスムーズな問題解決のために、心がけていただきたいことがあります。

教材の内容に関する質問を投稿しましょう

教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。

その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。

0-1

教材の概要

本教材はRubyプログラミング言語の上で動作するWebアプリケーションフレームワークであるRuby on Railsを使ってTinder風簡易マッチングアプリを作成します。

0からTinderの基本的な機能を実装していきます。HTML・CSS・JavaScript・Rubyを使用して開発しますが、主にRuby on Railsの大まかな流れを把握してもらうことを一番の目的としております。本教材を通してWebアプリケーションを最後まで作りきることで、まずはサービスを作る楽しさを感じていただければ嬉しいです。

本教材はマッチングアプリのTinderを参考にしております。Tinderはマッチングしたユーザー間でチャットすることができるアプリです。

image

Medium - Rewriting iOS Purchase Layer for #1 Top Grossing App using Modules

Tinderを使ったことがない方は、まずはTinderとはどんなサービスかを見てみましょう。

参考)Tinder

学習内容

  • Ruby on Rails を使った実践的な開発方法を学びます
  • Devise を使った認証機能の開発を行います
  • 画像アップロード機能の開発を行います
  • seed を使った初期データの投入方法を学びます
  • Hammer.js を使ってスワイプ機能の開発を行います
  • 中間テーブルを利用したデータベース設計方法を学びます
  • Action Cable を使ってリアルタイムでメッセージを送る機能の開発を行います

この教材の対象者

  • Rails を使ってWebアプリケーションを作ったことがある方

受講における必要条件

  • HTML/CSS の基礎知識
  • Ruby の基礎知識
  • Rails を使ってWebアプリケーションを作ったことがある方

初めて、Ruby on Rails をやる方にとっては、実装内容的に難しいと感じると思います。なので、まずは「Trello風ToDoタスク管理アプリを作成しよう!【Rails】」か「【Ruby on Rails 6】Instagram風簡易SNSアプリを作ってみよう!」を完了してから進めることをおすすめします。

本教材の環境(対応バージョン)

  • macOS
  • Rails 6.0.3.4
  • Ruby 2.7.2

私の手元にWindowsがないため、Windows環境に関する質問はお答えできかねます。ご了承ください。

作成するアプリケーションのイメージをつかもう

目次

0章 はじめに

教材の概要や作成するアプリケーションのイメージを掴みます。

1章 開発環境を構築しよう

VSCode の設定や、Rails6 の環境を構築します。

2章 プロジェクトの作成

Railsで新規プロジェクトを作成します。

3章 トップページの実装

ユーザーが最初にアクセスするトップページを実装します。

4章 Devise を使った認証機能の実装

Deviseを使って、アカウント作成機能・ログイン機能を実装します。

5章 プロフィールページの実装

ユーザーの情報を確認できるプロフィールページを実装します。

6章 プロフィール編集機能の実装

ユーザーのプロフィール情報を編集する機能を実装します。

7章 プロフィール画像アップロード機能の実装

プロフィール画像をアップロードできるようにします。

8章 スワイプ機能の実装

Hammer.jsを導入して、スワイプ機能を実装します。

9章 リアクション機能の実装

ユーザーをスワイプした際に、like, dislikeというリアクションを送れる機能を実装します。

10章 マッチング一覧ページの実装

自分とマッチングしたユーザーを表示するページの実装をします。

11章 チャットルーム作成機能の実装

自分とマッチングしたユーザーのチャットルームを作成するページを実装します。

12章 チャット機能の実装

Action Cable を使って、リアルタイムでメッセージを送れる機能を実装します。