ゆるっとVue.js勉強会Vue.jsハンズオン「Vue.jsでSPAを作ろう」

こんにちは、ロジカルスタジオPR部です。
なんと早いもので、外部向け勉強会「ゆるっとStudy」も3回目となりました

これもひとえに皆様のご愛顧のお陰です、誠にありがとうございます！
弊社マスコットキャラクターロージーも嬉しそうです！

今回の勉強会は、前回のハンズオンに続き、Vue.jsがテーマです。
今回は、この便利なVue.jsを使ってSPAを作るということが目的となります！
なんと今回、予定の参加人数があっという間に埋まり、当勉強会の宣伝をブログで出来ないほどでした…。
Vue.js×ハンズオンのニーズの高さをひしひしと感じる今日このごろです。

【SPAとは？】

シングルページアプリケーション（英: single-page application、SPA）とは、単一のWebページのみから構成することで、デスクトップアプリケーションのようなユーザ体験を提供するWebアプリケーションまたはWebサイトである。必要なコード（HTML、JavaScript、CSS）は最初にまとめて読み込むか、ユーザの操作などに応じて動的にサーバと通信し、必要なものだけ読み込みを行う。
出典　Wikipedia

SPAでは、その中のリンクを押すとURLは変わりますが、その遷移は擬似的なものであり、実際はページ遷移はされません。
その証拠に、SPA内のリンクを押してもブラウザ側では読み込み中の表示が出ません！
有名なSPAの例として、Twitterが挙げられます。

【SPAのメリットは？】

では、「SPAにはどのようなメリットがあるの？」というところを見ていきましょう！

高速な画面遷移

SPAでないサイトだと、共通パーツ（ヘッダ、フッタ、ナビetc…）がページ遷移のたびに読み込まれるため、読み込み時間のロスとなります。
SPAでサイトを作ると共通パーツは一度しか読み込まれず、共通でないパーツのみ適宜読み込まれるので効率的です！

バックエンドとフロントエンドで開発を切り分けられる

SPAでページを作ると、バックエンドとのやり取りはAPIで行われます。
フロント側でphpなどを書く必要がないため、バックエンドとフロントエンドの動きを完全に別にできる、というわけです！

Vue.jsを使用すると、このように様々なメリットを持ったSPAが比較的簡単に作ることができます！
SPA作りを通して、Vue.jsに関する様々な概念について理解を深めていきましょう！

【今回の勉強会の登壇者・メンター】

登壇者は今回も、弊社Vue.jsの勉強会といえばこの方、上平さん！
Vue.jsに触れて2ヶ月、Vue.jsの案件にも加えて頂き、ある程度慣れてきたとはいえ、
人に教えられるのかと言われると若干心配でしたが、上平さんに背中を押されて挑戦！
私以外にも、上平さん、有澤さん、sanadiさん、そしてメンター初挑戦の社員が一人、メンターとして参加しました。

メンター参加は、