カテゴリー
サインイン 新規登録
学習時間 20時間
難易度 中級
質問投稿 不可
価格 ¥2,980
月額 ¥2,980
Unlimited会員はこちらの教材を含む100種類以上のUnlimited対象教材が学び放題

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

TODOアプリ作成を通じて、フロントとバックを分ける開発手法を学ぶ。Firebaseを用いた認証、Vuexを用いた状態管理、デプロイまで。応用的なポートフォリオを作成したい方にもおすすめ。

4.8
最終更新 2023/1
yuki

アップデート情報

  • 2023.11.13(月)

    • 購入の際の注意事項を追加します。
      • Vue2系、Rails6系と両方最新のバージョンではない点
      • 新規の質問を受け付けていない点
      • Vercel等のフロントエンドプロジェクトのリリースに関して言及できていない点
        申し訳ありませんが、こちらをご理解いただいた上での購入をお願いいたします。
  • 2022.10.22(土)
    Herokuの無料プラン廃止に伴う対応を追記

フロントとバックを分けた「イマドキ」のSPA開発を、基礎的なTODOアプリを通じて挫折せずに学ぶ

■ なぜこのテーマを執筆したのか

近年、フロントエンドのアプリケーション、及びバックエンドのAPIに関して、別フレームワークを用いた開発手法を目にすることが増えてきました。求人サイトを見てみても、同じサービスでフロントエンドとバックエンドの開発チームのメンバーをそれぞれ別で募集しているのを見たことある方もいるのではないでしょうか。

また、未経験からエンジニア転職に挑戦する方のポートフォリオにも、一部そのような実務を意識した複雑な実装に挑戦している様子が見られます。

一方で、フロントとバックを個別に学ぶことのできる教材はありますが、一貫して学習できる教材に出会うことは、なかなか難しいのではないでしょうか。

そんな課題感から、TODOアプリという基本的なアプリケーションの開発を通じて、フロントエンドとバックエンドを分けるSPA(シングルページアプリケーション)の開発手法を学べる教材を執筆しました。

SPA(シングルページアプリケーション)とは

シングルページアプリケーションとは、Webアプリケーションの構成法の一つで、Webブラウザ側でページの移動を行わず、最初に読み込んだWebページ上のスクリプトがサーバとの通信や画面遷移を行う方式。

引用:It用語辞典 e-Words

■ どのように学ぶのか

SPAはRailsやLaravelのみのモノリシックなアプリと比較して、画面の描画も高速で、UXが非常に優れています。今回はそのSPAをフロントエンドはNuxtJS(以下Nuxt)で、バックエンドはRuby on RailsでAPIを開発します。

また、本教材では派生してFirebaseの認証機能や、フロントエンドでのログイン状態などの管理にVuex、最後は2つのアプリケーションを別々のプラットフォームにデプロイするなど幅広い経験を積むことができます。

本教材は、モダンな開発手法の内容理解を優先するため、あえてシンプルなTODOアプリの開発を選定しました。

これを元に学習後にご自身のアプリにも応用しやすい内容になっています。教材の学習後はぜひ、ポートフォリオの改善や、個人アプリの新しい挑戦に活用していただけますと幸いです。

ぜひ、お気軽に質問もしてください!応援しています。

学習内容

本教材ではNuxtとRailsの2軸で学習していきます。

  • Rails

    • APIとは何か
    • 基本的なAPIの開発(モデル、コントローラー、ルーティング)
    • フロントエンドに返却するJSONの扱い方
    • CORS(Cross-Origin Resource Sharing)の仕組み
  • Nuxt

    • Nuxtを用いた基本的な開発の進め方
    • computedやcreatedなどのライフサイクルの仕組み
    • コンポーネントの仕組み
    • Vuetifyの基本的な利用方法
    • Axiosを用いた非同期通信の方法
    • Vuexを用いたログイン状態の管理
    • 新規登録時のアニメーションコンポーネントの作成方法
    • ログイン成功時のメッセージコンポーネントの作成方法
  • その他

    • NuxtとRailsAPIの接続
    • フロントバックを分けた状態で開発環境から本番環境へ移行する際の注意
    • Firebase Authenticationを用いた認証機能の実装
    • Firebase Hostingを用いたフロントエンドアプリケーションのデプロイ
    • Herokuを用いたバックエンドAPIのデプロイ

作成物のイメージ

TODOの登録〜削除の動きをご紹介

Image from Gyazo

本教材の対象者

  • SPAを作ってみたい方、Nuxtを触ってみたい方
  • RailsとVue.jsを組み合わせたいが、難しいと感じている方
  • Railsは学習したものの、まだフロントエンドのフレームワークに挑戦できていない方
  • ポートフォリオを1つ作成済み、もしくは複雑なポートフォリオ作成に挑戦したい方
  • Railsチュートリアルを読み終えて、より実践的なAPIの作成に挑戦したい方

受講における必要条件

  • Vue.jsを触ったことがある。もしくは、調べながら使ってみようと挑戦できる方

v-bindv-for といった基本的なVueのデータバインディングの仕組みをご存知のほうが、教材は進めやすくなっています。なので一度Vue.jsに関して本を学習されたり、公式のチュートリアルを経験することをおすすめします。ただ今回はそこまで複雑なVueの記法を用いていないため、調べながらできる範囲だとは思います。あくまで自己責任で調べながら受講にトライしていただいても構いません。

  • Railsを用いて何かアプリケーションを開発したことがある方
    こちらは必須条件です。APIの作成に伴い、TODOアプリでもいいのでRailsで簡単なアプリケーションを開発した経験は必要です。

  • JavaScriptを利用したプログラムを少なくとも一度は書いたことがある方
    こちらは必須条件です。JavaScriptを使って一度でも何か簡単なコードを書いた経験は必要になります。

学ばないこと

本教材ではNuxtとRailsAPIを用いた開発に関して扱うため、Vue.jsの細かい解説(v-bindのデータバインディングの仕組みなど)はしておりません。

本教材の対応バージョン

  • Rails 6.1.3(6.0.3.6, 6.1.3.1または、 6.1.3より上のバージョンであれば問題ありません。)
  • Nuxt/cli 2.15.7
  • Vue 2.6.12

Vueは3.0系では未対応となっているため、2系での開発をお願いします。
Railsも6.1.3.1以上のバージョンを使用していただくようお願いします。

本教材で質問対応可能なOSや環境

  • MacOS

    • 著者がM1チップ搭載のものを使用していますので、そちらも問題ありません。
  • Windows
    Windowsの方向けの説明は省略しているため、ターミナルなどを読み替えて実施していただくか、Cloud9などの環境などを使用していただけければ学習自体は可能です。

2022/2/15 レビューにて、Windowsでも環境構築とデプロイの際に注意していただければ、問題なく進められる旨レビューいただきました。ありがとうございます。

カリキュラム

Section 0 はじめに
Section 1 Railsプロジェクトの作成(API)
  • 1-1 プロジェクトの作成からデフォルト画面の表示まで
Section 2 TODO機能を持つRailsAPI の実装 (API)
  • 2-1 Todoモデルとテーブルの作成
  • 2-2 Todoのコントローラーの作成
  • 2-3 Todoのルーティングを作成する
  • 2-4 Userモデルとテーブルの作成
  • 2-5 Userのコントローラーの作成
  • 2-6 Userのルーティングを作成する
  • 2-7 JSON形式のデータを扱いやすいように整形する

講師のプロフィール

教材のレビュー

4.8
13件の評価
92%
0%
0%
7%
0%
イノキ 1年以上前
質問の回答が返ってこないので注意が必要です
R 1年以上前
統合的にSPAとrailsを学べるものがないので非常に助かりました。バックエンド側の認証について加筆していただけるとさらに良いものになると思ってます。
のいのい 1年以上前
異業種からの転職をし、現在職場にてフロントをNuxt JS バックをRailsを使用している開発に携わっております。Vueに関しては開発に入る前にオンライン教材でのみ学習、Railsは何度かポートフォリオ作成時に触れて、Railsチュートリアル2周目を終えた状況でした。 フロントとバックを分けた開発に携わっている方にはもってこいの教材だと感じましたし、もしVue、Railsに興味があり何かしら作成 もっと見る