RailsとVue.jsでSPA開発を学ぶ

本教材ではSPA(Single Page Application)と呼ばれるWebアプリケーション設計での開発を、Ruby言語で動作するWebアプリケーションフレームワークであるRuby on Railsと、JavaScript言語で動作するUI(ユーザーインターフェース)を構築するためのフレームワークであるVue.jsを用いて解説します。

SPAとは名前にあるように1つのWebページで構成されるアプリケーションのことで、より高度な表現を実装することができることから、多くの企業で導入されています。

SPAは大きく2つのフレームワークで構成されます。

1つ目はサーバーサイドフレームワークであり、処理の要求（リクエスト）に対して処理を行った結果（レスポンス）を返すAPI（Application Programming Interface）を提供します。

Ruby on RailsはWebアプリケーション開発において広く用いられているフレームワークですが、本教材ではAPIを提供するだけのために使用します。

2つ目はフロントエンドフレームワークであり、HTML・CSS・JavaScriptを使用してページの見た目(UI)を構築します。

SPA開発のための主なフロントエンドフレームワークとしてAngular、React、Vue.jsなどがあります。それぞれ特徴が異なりますが、本教材ではVue.jsを使ったSPA開発を解説します。

なお、Vue.jsを使ったことがない方でも理解していただけるように、基本的な書き方から解説していきます。
更に、より実践的な内容としてVuexを用いた状態管理やコンポーネントの分離についても解説します。

学習内容

• Ruby on Railsを用いたAPI開発の流れ
• Vue.jsを用いたフロントエンド開発の流れ
• Ruby on RailsとVue.jsを組み合わせたSPA開発のやり方
• Vue.jsの状態管理ライブラリであるVuexの使い方
• Vue.jsのUIライブラリであるVuetifyの使い方
• コンポーネントの分離
• Vue.jsの基本的な書き方

作成物のイメージ

本教材の対象者

• Railsでサンプルアプリケーションを2、3個作ったことがある方
• Vue.jsに初めて触れる方

受講における必要条件

• HTMLの基礎知識(<div>, <ul>, <button> などのタグの使い方を理解している)
• Rubyの初歩的な知識(変数、配列、ハッシュ、if文、メソッド・クラスの概念を理解している)
• Ruby on Railsの初歩的な知識(モデルからデータを取得して画面に表示する程度のアプリケーションを作ったことがある)
• JavaScriptの初歩的な知識(変数、配列、オブジェクト、if文、関数の書き方を理解している)

学ばないこと

• CSSによるスタイリング
• ユーザ登録機能
• デプロイ方法

本教材の対応バージョン

• ruby 2.7.1
• Rails 6.0.3.2
• Vue 2.6.11
• vue-cli 4.5.3

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

• macOS