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

間違いや改善の指摘

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

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

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

質問ポリシー①

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

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

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

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

0-1

リアルタイムチャットを作ってみよう!

はじめに

本教材では、LINEやFacebook Messengerのようなリアルタイムチャットアプリケーションを開発していきます。

サーバーサイドではRuby on Rails、フロントエンドではJavaScript(Vue.js)を使っていきます。

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

この教材から学べること

Ruby on RailsとVue.jsを使ったWEBアプリケーションの開発方法を学ぶことができます。
下記で詳しく説明します。

① 認証機能を実装します。サインアップ・ログイン・ログアウトを実装することで、認証機能がどのように機能しているかを学ぶことができます。認証状態の管理はWEBアプリケーションの基本です。是非この機会に学んでください。

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

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

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

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

この教材を進めるための必要条件

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

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

この教材の対象者

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

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

開発するアプリのイメージ

下記が開発するアプリのイメージ動画です。まずは動画を見てイメージをつかんでみてください。

サインアップとログイン機能、チャット機能、いいね機能、ログアウト機能が大きな機能です。

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

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

サインアップ画面

チャット機能

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

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

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

チャットルーム

いいね機能

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

いいね機能

ログアウト機能

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

ログアウト機能

この教材で学ばないこと

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

  • HTMLに関する知識
  • CSSに関する知識

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

注意点

  • この教材では、本番環境へのデプロイ手順は含んでいません。

この教材の対応バージョン

  • Ruby on Rails 6.0.3.6
  • Vue 3.0.0

目次

0章 はじめに

あなたのMac OSで開発ができる環境を作ります。環境構築がある意味一番大変ですが、一緒に頑張っていきましょう。

1章 要件定義・設計をしよう

アプリケーションの要件定義、設計をおこないます。
どんな機能が必要か、その機能を実現するためにはどのような設計である必要があるか、どんなページが必要か、などを一緒に考えていきます。

2章 サインアップとログイン機能の実装しよう | Ruby on Rails

Ruby on RailsプロジェクトをAPIモードで新規作成し、サインアップ・ログイン機能を作っていきます。
Postmanを使って、サインアップ・ログイン機能が動くことを確認していきます。
Postmanの使い方はここで説明しますのでご安心ください。

3章 メッセージ機能を実装しよう | Ruby on Rails

メッセージ機能用のメッセージモデル・コントローラを作っていきます。Postmanを使って、メッセージの一覧が取れるかなどをチェックしていきます。

4章 いいね機能を実装しよう | Ruby on Rails

いいね機能を実装するために、いいね機能用のデータベーステーブルと、メソッドを実装します。

5章 リアルタイムチャット機能を実装しよう | Ruby on Rails

リアルタイムチャット機能であるAction Cableを追加していきます。WebSocketがどういう仕組みで動いているかをここで説明していきます。

6章 ウェルカムページを実装しよう | Vue.js

Vue.jsプロジェクトを新規作成し、ウェルカムページを作っていきます。コンポーネントの作成、v-ifやメソッドの実行方法など、Vue.jsの基本的な使い方をここで学びます。

また、Ruby on Railsプロジェクトで作ったサインアップ・ログイン機能をVue.jsプロジェクトと繋ぎ込みます。認証方法をここで学びます。

7章 ナビバーを実装しよう | Vue.js

チャットルームページのナビバーとその機能を実装していきます。

この時にログアウト機能を実装します。また、ログインしていない場合はチャットルームに入れないようにするなど、ナビゲーションガードと呼ばれる機能を使ってアクセス制限をおこないます。

8章 リアルタイムチャット機能を実装しよう | Vue.js

チャットページでリアルタイムチャットの機能を実装していきます。ここでしっかりと動くアプリケーションが出来上がります。

9章 いいね機能を実装しよう | Vue.js

最後にいいね機能を実装していきます。アプリケーションの最終段階です。

10章 最終調整をしよう | Vue.js

フロントエンドの見た目を最終調整していきます。

11章 リファクタリングとこれまでのまとめ

本教材のまとめと、コードのリファクタリングを行います。Ruby on Rails側ではN+1問題を解決します。

この章は以上です。お疲れ様でした!次章から楽しく学んでいきましょう😊

修正履歴

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

  • 2022-5-17: [9-2] ご指摘によりdeleteLike関数のmessage.idの引数を削除
  • 2022-8-14: 0章のタイプミスを修正
  • 2022-8-15: 1章のタイプミスを修正、説明文言を追加
現在のパート (1)
全パート (46)
みんなで助け合おう!
現在のパートのディスカッション 全1件
0-1
ryoma 2021-12-25
レビューができない

とても良い教材でした!

だからこそ、指摘したいです。

レビューができない

良い教材でしたので、レビューしようと思いましたが、レビューできません。

レビューができないと、他のレビューがやらせっぽく見える

レビューできないのに、何人かのユーザーはレビューできています。
いくつかの教材のレビューを見ると、このレビューはやらせ???と疑ってしまいますよ。

改善を求む

良い教材だと思うので、☆5つけたいですし、レビューしたいですね〜。
レビューができないままだと、他のレビューはやらせなのかなぁ〜と思っていしまいます。