教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。
その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。
本教材では、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を、実際にテストするためのツールです。実務でもよく使われるツールなので、ぜひこの機会に使い方をマスターしてください。
まとめると、この教材を終えた時点で下記の知識を身につけることができます。
この教材を進めるにあたり、下記の知識が必要です。
cd
、mkdir
、touch
などがわかること)div
タグ・p
タグ・form
タグや、display: block
などがわかること)each
の使い方やメソッド定義の仕方がわかること)この教材は、下記の様な方におすすめです。
下記が開発するアプリのイメージ動画です。まずは動画を見てイメージをつかんでみてください。
サインアップとログイン機能、チャット機能、いいね機能、ログアウト機能が大きな機能です。
まずは、サインアップ・ログイン画面です。サインアップまたはログインに成功すると、チャットルームにリダイレクトされます。チャットルームではログインしている名前とメールアドレスが表示されます。
チャットルームにアクセスすると、メッセージを送信することができます。他の人から受け取ったメッセージは左側に、自分が送信したメッセージは右側に表示されます。
リアルタイムチャットアプリケーションなので、メッセージを送信すると同時にチャットルームに参加している他のユーザにメッセージが届くようになっています。
また、ログインしていない場合は、チャットルームにはアクセスできないように制限をかけています。
メッセージをダブルクリックすると、いいねをつけることができます。
いいねした瞬間に、相手の画面にもいいねアイコンが表示されます。もう一度ダブルクリックすることで、いいねを取り消すことができます。
最後に、ログアウトの機能です。ログアウトボタンを押すと、ログイン画面にリダイレクトされます。
また、ログアウトするとチャットルームにはアクセスできないように制限をかけています。
この教材では、Ruby on RailsとVue.jsの開発方法を中心に学んでいきます。
そのため、下記の2点については解説していません。
特にCSSに関しては、他の箇所の解説を詳しく行うため、コードをコピー&ペーストしていただくのみとします。
あなたのMac OSで開発ができる環境を作ります。環境構築がある意味一番大変ですが、一緒に頑張っていきましょう。
アプリケーションの要件定義、設計をおこないます。
どんな機能が必要か、その機能を実現するためにはどのような設計である必要があるか、どんなページが必要か、などを一緒に考えていきます。
Ruby on RailsプロジェクトをAPIモードで新規作成し、サインアップ・ログイン機能を作っていきます。
Postmanを使って、サインアップ・ログイン機能が動くことを確認していきます。
Postmanの使い方はここで説明しますのでご安心ください。
メッセージ機能用のメッセージモデル・コントローラを作っていきます。Postmanを使って、メッセージの一覧が取れるかなどをチェックしていきます。
いいね機能を実装するために、いいね機能用のデータベーステーブルと、メソッドを実装します。
リアルタイムチャット機能であるAction Cableを追加していきます。WebSocketがどういう仕組みで動いているかをここで説明していきます。
Vue.jsプロジェクトを新規作成し、ウェルカムページを作っていきます。コンポーネントの作成、v-if
やメソッドの実行方法など、Vue.jsの基本的な使い方をここで学びます。
また、Ruby on Railsプロジェクトで作ったサインアップ・ログイン機能をVue.jsプロジェクトと繋ぎ込みます。認証方法をここで学びます。
チャットルームページのナビバーとその機能を実装していきます。
この時にログアウト機能を実装します。また、ログインしていない場合はチャットルームに入れないようにするなど、ナビゲーションガードと呼ばれる機能を使ってアクセス制限をおこないます。
チャットページでリアルタイムチャットの機能を実装していきます。ここでしっかりと動くアプリケーションが出来上がります。
最後にいいね機能を実装していきます。アプリケーションの最終段階です。
フロントエンドの見た目を最終調整していきます。
本教材のまとめと、コードのリファクタリングを行います。Ruby on Rails側ではN+1問題を解決します。
この章は以上です。お疲れ様でした!次章から楽しく学んでいきましょう😊
※ 2022年5月17日から、修正履歴を記載することにいたしました!
deleteLike
関数のmessage.id
の引数を削除だからこそ、指摘したいです。
良い教材でしたので、レビューしようと思いましたが、レビューできません。
レビューできないのに、何人かのユーザーはレビューできています。
いくつかの教材のレビューを見ると、このレビューはやらせ???と疑ってしまいますよ。
良い教材だと思うので、☆5つけたいですし、レビューしたいですね〜。
レビューができないままだと、他のレビューはやらせなのかなぁ〜と思っていしまいます。