教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。
その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。
本教材では、Ruby on Rails(以下Rails)とVue.jsのフレームワークであるNuxtJS(以下Nuxt)を用いてバックエンドとフロントエンドを分けた開発を学習します。
具体的には、アプリケーションの基本であるTODOアプリをシングルページアプリケーション(SPA)として作成します。
SPAとは、単一のWebページで動作するアプリケーションの総称です。
ユーザーのアクションに応じて画面が部分的にどんどん描き変わります。
Webアプリなのに、まるでスマートフォンのネイティブアプリのように高速に動作するアプリケーションです。
参考:SPA(Single Page Application)ってなに?)
Techpitを使って学習している皆さまの中には、これまでにRailsやLaravelのみでアプリケーションを作成された方もいらっしゃるのではないでしょうか。
今回は、いわゆるモダンな開発と言われるバックエンドとフロントエンドを分離させた開発手法を、学んでいただきたいです。
この教材を最後まで学習していただければ、これまでに作成したアプリケーションにも実装を応用させてみたり、エンジニア転職を目指している方は他の方と差別化したポートフォリオ作りのきっかけになったりします。
更に、Firebaseを利用したログイン認証機能と、Vuexというライブラリを用いた状態管理も実装しています。
Railsのみでアプリケーションを実装する場合は、認証機能の実装においてDeviseなどのGemが有名ですが、今回は外部サービスを使ってみましょう!
最後に、教材のデプロイまで行うことができます!
他の教材と比べて、フレームワーク2つ、外部サービス1つ、更にデプロイの学習まで行うということで、非常にボリューミーな内容になっています。
ですが、実際に作成するものは身近なTODOアプリなので、挫折することなく学習できます。
もちろん、分からないところはぜひ質問してください。
(Mac OS以外での開発環境における質問対応はできかねますのでご了承ください。)
個人的な思いとしては、ぜひ皆さんにフロントエンドとバックエンドのAPIが繋がる様子を体験していただきたいです!
よろしくお願いします。
v-bind
やv-for
などの用語を聞いてピンとくる方はよりスムーズに学習できます。)本教材はフロントエンドとバックエンドを分けた開発の概要を学ぶため、必要な解説は行いますがVue.jsの細かい記法については言及しません。
本教材でアプリケーションを作ったのち、もう一度Vue.jsの学習をしていただけると、理解が深まります。
Ruby 3.0.0
Rails 6.1.1
Vue 2.6.11
Nuxt 2.12.2
mac OS
こちらもwindowsでも動作が可能ですが、確認はできておらず、教材ではmacOSの場合のみでの解説を行なっています。
申し訳ありませんが、Windowsの方はCloud9の環境を使っていただくか、OSに依存する質問対応はできない前提でのご購入を検討ください。(教材の不明点には、もちろん回答いたします。)
学習できる内容が多い反面、ボリュームがかなり多いので心して臨んでいただきたいです!
また、お時間の関係もあるかも知れません。
しかし、学習している内容を忘れないためにも1つの章段のまとまりは、同じ学習時間内で終えていただくことをお勧めします。
本教材は、かつて小野聡之が作成したアプリケーション及びハンズオンを本人同意のもと、堀越優希がバージョンアップ及び修正、ハンズオン記事の大幅な修正と加筆を行ったものです。
本教材の概要や筆者の紹介、開発に必要な環境などを説明します。
Railsを用いてAPIを作成していきます。
APIにTODOを管理できる具体的なバックエンドの機能を実装していきます。
Nuxtを用いてフロント側のアプリケーションを作成していきます。
フロント側にTODOアプリの機能を作成していきます。
4章までに作成したバック側(API)とフロント側を連携させていきます。
Firebaseを利用して、まだ作成していないユーザーの作成や認証機能を実装していきます。
Nuxt側でログイン状態の管理をするためにVuexというライブラリを導入します。
具体的な使い方の説明をした上で、ログインページの実装を行います。
ログイン、非ログインで表示を変えるサイドバーの実装を行います。
ログイン成功時のメッセージ表示や削除機能など追加機能の実装、及びリファクタリングを行います。
RailsAPIのアプリケーション、Nuxtのアプリケーションをそれぞれデプロイして繋ぎ合わせます。
ここまでの総括と今後のアップデートの方法、及び今後の学習アドバイスを行います。