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

Ruby on RailsとVue.jsを使ってリアルタイムチャットを作りながら、WEBアプリケーションの開発の一連の工程を学ぶ

要件定義、データベース設計、Rails APIモード開発、フロントエンド開発を通し、WEBアプリケーションの開発の基礎を習得。さらにAPIのテスト、デバッグ、Google Chrome Developers Toolの使い方など、エンジニアとして戦える知識も一緒に身につける。

4.6
最終更新 2022/11
豊田桃子

Ruby on RailsとVue.jsを使って、WEB開発の基本から応用までを丁寧に学んでいく

このページをご覧いただきありがとうございます!

本教材では、LINEやFacebook Messengerのようなリアルタイムチャットアプリケーションを開発していきます。サーバーサイドではRuby on Rails、フロントエンドではJavaScript(Vue.js)を使っていきます。

いきなり開発を始めるのではなく、要件定義・データベース設計や必要な機能の洗い出しなど、現場で実際に使える知識〜開発までの工程を一つ一つ丁寧に学ぶことができます。

Ruby on Rails、Vue.jsはコードの書き方の解説を行いながら進めていきます。そのため、「Ruby on Railsはなんとなくわかるけど、実際にアプリをどのように作ればいいのか分からない」という方や、「Vue.jsは一度も使ったことがないけど使ってみたい」方など、WEB開発の入門として最適な教材です。

また、APIテストツールの使用方法やデバッグ方法、エラー分の見方など、「エンジニアとして戦える知識」も一緒に学ぶことができます。

学習内容

Ruby on RailsとVue.jsを使ったWEBアプリケーションの開発方法を学ぶことができます。
まず、この教材ではログイン機能を実装します。そのため、認証機能がどのように機能しているかを学ぶことができます。 ログイン状態の管理はWEBアプリケーションの基本です。是非この機会に学んでください。

また、HTTP通信に加え、WebSocket通信を使ったリアルタイムなチャット機能も実装します。WebSocketの基本知識が身に付くため、チャット機能がどのように動いているかを学ぶことができます。

最後に、Postmanと呼ばれるAPIテストツールも使用します。実務でもよく使われるツールなので、ぜひこの機会に使い方をマスターしてください。

まとめると、この教材を終えた時点で下記の知識を身につけることができます。

  • Ruby on Railsを用いたAPI開発ができるようになる
  • APIがどのようなものか理解できる様になる
  • HTTP通信の仕組みを理解できる様になる
  • WebSocket通信の仕組み(リアルタイムチャットの機能がどのように動いているか)を理解できるようになる
  • Postmanを使ったAPIのテストができるようになる
  • Vue.jsを用いたフロントエンド開発ができるようになる
  • サインアップ・ログイン・ログアアウト機能の実装方法がわかるようになる
  • 認証機能がどのように動いているか理解できるようになる

作成物のイメージ

下記が開発するアプリのイメージ動画です。まずは動画を見てイメージをつかんでみてください。
サインアップとログイン機能、チャット機能、いいね機能、ログアウト機能が大きな機能です。

サインアップ・ログイン機能

まずは、サインアップ・ログイン画面です。サインアップまたはログインに成功すると、チャットルームにリダイレクトされます。チャットルームではログインしている名前とメールアドレスが表示されます。
Image from Gyazo

チャット機能

チャットルームにアクセスすると、メッセージを送信することができます。受け取ったメッセージは左側に、自分が送信したメッセージは右側に表示されます。

リアルタイムチャットアプリケーションなので、メッセージを送信すると同時に他のユーザにメッセージが届くようになっています。

また、ログインしていない場合は、チャットルームにはアクセスできないように制限をかけています。
Image from Gyazo

いいね機能

メッセージをダブルクリックすると、いいねをつけることができます。いいねした瞬間に、相手の画面にもいいねアイコンが表示されます。もう一度ダブルクリックすることで、いいねを取り消すことができます。
Image from Gyazo

ログアウト機能

最後に、ログアウトの機能です。ログアウトボタンを押すと、ログイン画面にリダイレクトされます。また、ログアウトするとチャットルームにはアクセスできないように制限をかけています。
Image from Gyazo

本教材の対象者

この教材は、下記の様な方におすすめです。

  • Ruby on RailsとVue.jsでアプリケーションを開発してみたい方
  • Railsチュートリアルが終わったけど、どうアプリケーションを作ればいいかイメージがつかない方
  • Ruby on Railsを一通り勉強したけど、いまいち開発方法がわからない方
  • APIがどんなものかいまいちわからない方
  • 認証機能がどの様に機能しているかいまいちよくわからない方
  • Vue.jsを使ってアプリケーションを開発してみたい方
  • フロントエンドのフレームワークに挑戦してみたい方

Railsチュートリアルと並行して読むと効果的です

本教材では、Ruby on Railsでバックエンドを実装していきますが、Ruby on Railsチュートリアルと並行しながら実装進めると更に効果的です。Railsチュートリアルでは、環境構築から実装、Herokuへのデプロイまでの手順が丁寧に説明してあります。ぜひ並行しながら進めてください。

受講における必要条件

この教材を進めるにあたり、下記の知識が必要です。

  • シェルコマンドの基本的な知識(cd、mkdir、touchなどがわかること)
  • HTML/CSSの基本的な知識(divタグ・pタグ・formタグや、display: blockなどがわかること)
  • Rubyの基本的な知識(eachの使い方やメソッド定義の仕方がわかること)
  • JavaScriptの基本的な知識(変数宣言、オブジェクトの使い方、ループの仕方などがわかること)

学ばないこと

この教材では、Ruby on RailsとVue.jsの開発方法を中心に学んでいきます。そのため、下記の2点については解説していません。

  • HTMLに関する知識
  • CSSに関する知識
  • ターミナルの操作方法

特にCSSに関しては、他の箇所の解説を詳しく行うため、コードをコピー&ペーストしていただくのみとします。

本教材の対応バージョン

Ruby on Rails 6.0.3.6
Vue 3.0.0

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

Mac OS
Shell - bash

修正履歴

※ 2022年5月17日から、修正履歴を記載することにいたしました!

  • 2022-5-17: [9-2] ご指摘によりdeleteLike関数のmessage.idの引数を削除
  • 2022-8-14: 0章のタイプミスを修正
  • 2022-8-15: 1章のタイプミスを修正、説明文言を追加

カリキュラム

Section 0 はじめに
Section 1 要件定義・設計
  • 1-1 ページ構成と機能を洗い出してみよう
  • 1-2 データベース設計をしよう
  • 1-3 バックエンドの設計をしよう
  • 1-4 フロントエンドの設計をしよう
Section 2 認証機能を実装しよう _ Ruby on Rails
  • 2-1 Ruby on Railsプロジェクトを新規作成しよう
  • 2-2 認証機能を実装しよう
  • 2-3 Postmanを使って機能を確認しよう
  • 2-4 MVCを理解しよう

講師のプロフィール

教材のレビュー

4.6
18件の評価
72%
22%
0%
0%
5%
BobParr 6ヶ月以上前
講師の方が忙しいのだと思いますが、教材が1年以上更新されていません。 しかしながら他の生徒の方が質問を投げておりそれらをヒントに最後まで完走することができました。 ActionCableを使った実装は初めてで勉強になりました。 フロントでVue.js、バックエンドでRails APIを使った教材があまりない中で本教材は貴重な存在でした。また少し時間を空けて復習してみたいと思います。 やってよかった もっと見る
山縣杏奈 1年以上前
Vueをざっと学び、フロントエンドのみの開発は少しできる程度で本教材を購入しました。 初心者にわかりやすい優しい表現だったので、小難しく考える必要がなく進むことができました。 ただエラーがあった場合の対処法が少なく感じたので、エラーハンドリングがもう少し充実すると助かるかもしれません。 Docker環境での実装をしましたが最後までやり切ることができました。 ありがとうございました。 もっと見る
rihaku 1年以上前
ソースコードの説明を初心者にも理解できる言葉で解説されていた点に満足しました。 一方で、リアルタイムチャット機能部分やFont awsome導入部分などお手本通りに記述しても想定通り動作しないことが多くあり残念でした。