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

間違いや改善の指摘

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

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

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

質問ポリシー①

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

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

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

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

0-1

教材の概要

RailsとNuxtでバックエンドとフロントエンドを分けた開発を行ってみよう!【with Firebase】

本教材では、Ruby on Rails(以下Rails)とVue.jsのフレームワークであるNuxtJS(以下Nuxt)を用いてバックエンドとフロントエンドを分けた開発を学習します。
具体的には、アプリケーションの基本であるTODOアプリをシングルページアプリケーション(SPA)として作成します。

SPAとは、単一のWebページで動作するアプリケーションの総称です。
ユーザーのアクションに応じて画面が部分的にどんどん描き変わります。
Webアプリなのに、まるでスマートフォンのネイティブアプリのように高速に動作するアプリケーションです。

参考:SPA(Single Page Application)ってなに?

Techpitを使って学習している皆さまの中には、これまでにRailsやLaravelのみでアプリケーションを作成された方もいらっしゃるのではないでしょうか。
今回は、いわゆるモダンな開発と言われるバックエンドとフロントエンドを分離させた開発手法を、学んでいただきたいです。

Railsさえ使ったことがあれば、Vue.jsを知らない方でも大丈夫です。

この教材を最後まで学習していただければ、これまでに作成したアプリケーションにも実装を応用させてみたり、エンジニア転職を目指している方は他の方と差別化したポートフォリオ作りのきっかけになったりします。

更に、Firebaseを利用したログイン認証機能と、Vuexというライブラリを用いた状態管理も実装しています。
Railsのみでアプリケーションを実装する場合は、認証機能の実装においてDeviseなどのGemが有名ですが、今回は外部サービスを使ってみましょう!

最後に、教材のデプロイまで行うことができます!
他の教材と比べて、フレームワーク2つ、外部サービス1つ、更にデプロイの学習まで行うということで、非常にボリューミーな内容になっています。

ですが、実際に作成するものは身近なTODOアプリなので、挫折することなく学習できます。
もちろん、分からないところはぜひ質問してください。
(Mac OS以外での開発環境における質問対応はできかねますのでご了承ください。)

個人的な思いとしては、ぜひ皆さんにフロントエンドとバックエンドのAPIが繋がる様子を体験していただきたいです!

よろしくお願いします。

できるようになること

  • バックエンドとフロントエンドを分ける開発の手法を理解できる
  • SPAの概要が理解できる
  • Railsを使ってAPIを作成できる(APIモードでのRailsの開発)
  • Vue.jsの基本的な知識を身につけることができる
  • Nuxtを用いてVue.jsでフロント側の基礎的な開発ができる
  • Vue.jsで利用できるUIフレームワーク「Vuetify」を用いたデザインができる
  • Vue.jsのライブラリVuexを用いて、フロントエンド側の状態管理ができる
  • Firebaseの認証機能(Authentication)を使うことができる
  • FirebaseのHostingサービスを使って、フロントエンドのアプリをデプロイできる
  • Herokuを使ってAPIのデプロイができる

受講における必要条件

  • Railsで簡単なアプリケーションを作成したことがある方(CRUD機能のある物であればOKです。)

受講における推奨条件

  • Vue.jsの初歩的な知識がある方(解説はしていますが、v-bindv-forなどの用語を聞いてピンとくる方はよりスムーズに学習できます。)
  • Vueを扱ったことがなくても、調べながら挑戦してみようと思える方

本教材の対象者

  • Railsでポートフォリオやアプリケーションを作ったことはあるが、JavaScriptのフレームワークは使ったことがない方
  • VueやNuxtを学習したが、バックエンドとの連携をさせたことがない方
  • Vue.jsの学習とともに、Nuxtの学習にも挑戦してみたい方
  • Firebaseの認証機能やホスティング機能を使ってみたい方
  • モダンな開発にチャレンジしてみたい方
  • SPAに興味がある方
  • Railsチュートリアルを読み終えて、より実践的なAPIの作成に挑戦したい方

学ばないこと

本教材はフロントエンドとバックエンドを分けた開発の概要を学ぶため、必要な解説は行いますがVue.jsの細かい記法については言及しません。

本教材でアプリケーションを作ったのち、もう一度Vue.jsの学習をしていただけると、理解が深まります。

本教材の対応バージョン

Ruby 3.0.0
Rails 6.1.1
Vue 2.6.11
Nuxt 2.12.2

Railsは恐らく5系でも問題ないですが、可能であれば6系のインストールをお願いします。
また、執筆時点でRailsは6.1.1バージョンを使用していましたが、こちらはデプロイ時にちょっと修正を行う必要があります。
6.1.3.1以上の方はそちらのバージョンでも問題ありませんし、6.1.1で進めていただいても、対応を掲載しているので問題ありません。

本教材に対応している環境

mac OS
こちらもwindowsでも動作が可能ですが、確認はできておらず、教材ではmacOSの場合のみでの解説を行なっています。
申し訳ありませんが、Windowsの方はCloud9の環境を使っていただくか、OSに依存する質問対応はできない前提でのご購入を検討ください。(教材の不明点には、もちろん回答いたします。)

作成するアプリケーションのイメージをつかもう

Image from Gyazo

学習における注意点

学習できる内容が多い反面、ボリュームがかなり多いので心して臨んでいただきたいです!
また、お時間の関係もあるかも知れません。
しかし、学習している内容を忘れないためにも1つの章段のまとまりは、同じ学習時間内で終えていただくことをお勧めします。

執筆者について

本教材は、かつて小野聡之が作成したアプリケーション及びハンズオンを本人同意のもと、堀越優希がバージョンアップ及び修正、ハンズオン記事の大幅な修正と加筆を行ったものです。

  • 小野聡之
    価格比較アプリ「Pricey」を運営する株式会社WilicoのCTO。
    0→1でのサービスローンチを数多く経験し、
    前職ではRails、Reactを用いたアプリケーション開発に従事。
    過去にプログラミングスクールのメンター経験があり、教育支援にも強い関心がある。

Github
Twitter

  • 堀越優希
    &Salesforceエンジニア。本業ではLaravelやSalesforce上で動作するアプリケーションをApexで開発をする側ら、Railsを用いた個人開発やチーム開発等を行っている。過去に教員の経験があり、現在もプログラミングスクールでメンターをしている。また、就業支援のNPOで講義をするなど、教育・キャリア支援に強い関心がある。

Github
Twitter

目次

0章 はじめに

本教材の概要や筆者の紹介、開発に必要な環境などを説明します。

1章 Railsプロジェクトの作成 (API)

Railsを用いてAPIを作成していきます。

2章 TODO機能の API の実装 (API)

APIにTODOを管理できる具体的なバックエンドの機能を実装していきます。

3章 Nuxtプロジェクトの作成 (Front)

Nuxtを用いてフロント側のアプリケーションを作成していきます。

4章 TODO機能のページ作成 (Front)

フロント側にTODOアプリの機能を作成していきます。

5章 NuxtとAPIの連携 (ToDo機能)

4章までに作成したバック側(API)とフロント側を連携させていきます。

6章 Firebaseを利用した認証機能の作成と状態管理

Firebaseを利用して、まだ作成していないユーザーの作成や認証機能を実装していきます。

7章 ログイン状態の保持とログインページ、マイページの実装

Nuxt側でログイン状態の管理をするためにVuexというライブラリを導入します。
具体的な使い方の説明をした上で、ログインページの実装を行います。

8章 サイドバーの実装

ログイン、非ログインで表示を変えるサイドバーの実装を行います。

9章 機能追加とリファクタリング

ログイン成功時のメッセージ表示や削除機能など追加機能の実装、及びリファクタリングを行います。

10章 デプロイ

RailsAPIのアプリケーション、Nuxtのアプリケーションをそれぞれデプロイして繋ぎ合わせます。

11章 あとがき

ここまでの総括と今後のアップデートの方法、及び今後の学習アドバイスを行います。

現在のパート (0)
全パート (10)
みんなで助け合おう!
現在のパートのディスカッション 全0件