学習時間 | 20時間 |
---|---|
難易度 | 初級 |
質問投稿 | 可 |
Ruby on RailsとVue.jsを使ってリアルタイムチャットを作りながら、WEBアプリケーションの開発の一連の工程を学ぶ
要件定義、データベース設計、Rails APIモード開発、フロントエンド開発を通し、WEBアプリケーションの開発の基礎を習得。さらにAPIのテスト、デバッグ、Google Chrome Developers Toolの使い方など、エンジニアとして戦える知識も一緒に身につける。
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を用いたフロントエンド開発ができるようになる
- サインアップ・ログイン・ログアアウト機能の実装方法がわかるようになる
- 認証機能がどのように動いているか理解できるようになる
作成物のイメージ
下記が開発するアプリのイメージ動画です。まずは動画を見てイメージをつかんでみてください。
サインアップとログイン機能、チャット機能、いいね機能、ログアウト機能が大きな機能です。
サインアップ・ログイン機能
まずは、サインアップ・ログイン画面です。サインアップまたはログインに成功すると、チャットルームにリダイレクトされます。チャットルームではログインしている名前とメールアドレスが表示されます。
チャット機能
チャットルームにアクセスすると、メッセージを送信することができます。受け取ったメッセージは左側に、自分が送信したメッセージは右側に表示されます。
リアルタイムチャットアプリケーションなので、メッセージを送信すると同時に他のユーザにメッセージが届くようになっています。
また、ログインしていない場合は、チャットルームにはアクセスできないように制限をかけています。
いいね機能
メッセージをダブルクリックすると、いいねをつけることができます。いいねした瞬間に、相手の画面にもいいねアイコンが表示されます。もう一度ダブルクリックすることで、いいねを取り消すことができます。
ログアウト機能
最後に、ログアウトの機能です。ログアウトボタンを押すと、ログイン画面にリダイレクトされます。また、ログアウトするとチャットルームにはアクセスできないように制限をかけています。
本教材の対象者
この教材は、下記の様な方におすすめです。
- 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章のタイプミスを修正、説明文言を追加