SPA(シングルページアプリケーション)とは
シングルページアプリケーションとは、Webアプリケーションの構成法の一つで、Webブラウザ側でページの移動を行わず、最初に読み込んだWebページ上のスクリプトがサーバとの通信や画面遷移を行う方式。
学習時間 | 20時間 |
---|---|
難易度 | 中級 |
質問投稿 | 不可 |
2023.11.13(月)
2022.10.22(土)
Herokuの無料プラン廃止に伴う対応を追記
■ なぜこのテーマを執筆したのか
近年、フロントエンドのアプリケーション、及びバックエンドのAPIに関して、別フレームワークを用いた開発手法を目にすることが増えてきました。求人サイトを見てみても、同じサービスでフロントエンドとバックエンドの開発チームのメンバーをそれぞれ別で募集しているのを見たことある方もいるのではないでしょうか。
また、未経験からエンジニア転職に挑戦する方のポートフォリオにも、一部そのような実務を意識した複雑な実装に挑戦している様子が見られます。
一方で、フロントとバックを個別に学ぶことのできる教材はありますが、一貫して学習できる教材に出会うことは、なかなか難しいのではないでしょうか。
そんな課題感から、TODOアプリという基本的なアプリケーションの開発を通じて、フロントエンドとバックエンドを分けるSPA(シングルページアプリケーション)の開発手法を学べる教材を執筆しました。
■ どのように学ぶのか
SPAはRailsやLaravelのみのモノリシックなアプリと比較して、画面の描画も高速で、UXが非常に優れています。今回はそのSPAをフロントエンドはNuxtJS(以下Nuxt)
で、バックエンドはRuby on Rails
でAPIを開発します。
また、本教材では派生してFirebaseの認証機能や、フロントエンドでのログイン状態などの管理にVuex、最後は2つのアプリケーションを別々のプラットフォームにデプロイするなど幅広い経験を積むことができます。
本教材は、モダンな開発手法の内容理解を優先するため、あえてシンプルなTODOアプリの開発を選定しました。
これを元に学習後にご自身のアプリにも応用しやすい内容になっています。教材の学習後はぜひ、ポートフォリオの改善や、個人アプリの新しい挑戦に活用していただけますと幸いです。
ぜひ、お気軽に質問もしてください!応援しています。
本教材ではNuxtとRailsの2軸で学習していきます。
Rails
Nuxt
その他
TODOの登録〜削除の動きをご紹介
Railsを用いて何かアプリケーションを開発したことがある方
こちらは必須条件です。APIの作成に伴い、TODOアプリでもいいのでRailsで簡単なアプリケーションを開発した経験は必要です。
JavaScriptを利用したプログラムを少なくとも一度は書いたことがある方
こちらは必須条件です。JavaScriptを使って一度でも何か簡単なコードを書いた経験は必要になります。
本教材ではNuxtとRailsAPIを用いた開発に関して扱うため、Vue.jsの細かい解説(v-bindのデータバインディングの仕組みなど)はしておりません。
6.0.3.6, 6.1.3.1
または、 6.1.3より上のバージョンであれば問題ありません。)Vueは3.0系では未対応となっているため、2系での開発をお願いします。
Railsも6.1.3.1以上のバージョンを使用していただくようお願いします。
MacOS
Windows
Windowsの方向けの説明は省略しているため、ターミナルなどを読み替えて実施していただくか、Cloud9などの環境などを使用していただけければ学習自体は可能です。
2022/2/15 レビューにて、Windowsでも環境構築とデプロイの際に注意していただければ、問題なく進められる旨レビューいただきました。ありがとうございます。