フロントエンド

【Vue.js】【SPA】の作り方をわかりやすくまとめてみた【初心者向け】

2020/11/12追記
『SPA』の作り方も解説したVue.js入門講座をリリースしました。

最近徐々に増えつつある『SPA(エスピーエー)』。

『SPA』とは、『シングルページアプリケーション』の略で、

一般的なホームページと比べると、

ページ移動の時の読み込みがほとんどなくスムーズに動く事が特徴です。

  • 一般的なホームページ・・ページ移動毎にページ全体を読み込む
  • SPA・・ページ全体を先に読み込む・・読み込んだ後はページ移動がスムーズ

『SPA』なホームページを作るには、

『JavaScript(ジャバスクリプト)』をゴリゴリ書く必要があるのですが、

一から書いていくととても大変なので、

近年、効率よく『SPA』なホームページをつくる方法が誕生しました。

いくつか方法がありますが、

今回は『Vue.js(ビュージェイエス)』を使って、
『SPA』のテストページをつくってみたので、その方法をまとめてみます。

つくったテストページはこちらです。

Vou-routerテストページ

こんな画面です。

画面上メニュー内の、HomeとAboutを押す事で、

スムーズにページが入れ替わることがわかるのではと思います。

アオキ
ページの読み込みがほとんど感じられないんですよね、すごい。
Sponsored link

『Vue.js』で『SPA』をつくる手順

大まかな流れはこんな感じです。

  1. 『Node.js』インストール
  2. 『Vue CLI』インストール
  3. 『Vue.js』インストール
  4. 『Bulma』インストール
  5. フォルダ・ファイル構成確認
  6. 各ページ作成・Vou-router調整
  7. 仕上げ

『Vue.js』で『SPA』をつくる下準備

『SPA』なホームページをつくるために、まずは『Node.js』をインストールします。

https://nodejs.org/ja/

『Node.js』がインストール成功するとコマンドプロンプトで、

>node -v
v10.11.0

>npm -v
6.5.0

などバージョンが表示されればOKです。

参考記事

続いて『Vue.js』をコマンドラインでインストールするためのツールである、

『vue-cli』をインストールします。

$ npm install -g vue-cli

インストールできたら、任意のフォルダに移動して、『Vue.js』をインストールします。

$ vue init webpack vue-router-test

webpack(ウェブパック)・・『JavaScript』や『Sass』などを一つのファイルにまとめてくれる画期的なツール

『Webpack』の関連記事

インストールが始まると、初期設定の情報が表示されるので、全部エンターキーを押して進めます。

Project name エンター
Project description エンター
Author エンター
Runtime エンター
Install vue-router エンター
Use ESLint to link your code エンター
Standard エンター
Setup unit tests エンター
Jest エンター
Setup e2e tests with Nightwatch エンター
Yes, use NPM エンター

# Project initialization finished!

と表示されればOKです。

$ cd vue-router-test

で作成したフォルダに入りつつ、

見た目も大事っしょって事で、

最近じわっと人気がでている『bulma(ブルマ)』もインストールしてみます。

  • bulma・・よく使う機能を集めた手軽でオシャレなCSSフレームワーク

『bulma』の関連記事

$ npm install bulma

『bulma』は『Sass』で書かれているので、『Sass』を使えるようにするためのライブラリもインストールします。

Sass・・CSSを効率よく書けるようにした方法。

$ npm install sass-loader node-sass –save-dev

ここまできて、ようやくメインの『Vue.js』+(たくさんのソフト)をインストールします。

$ npm install

『package.json』というファイルに必要なソフトがずらりと書かれていて、

それらのソフトが、『node_modules』というフォルダにまるっとインストールされます。

無事インストールできたら、

$ npm run dev

とコマンドをうって、

http://localhost:8080

と表示されたら、グーグルクロムなどで

http://localhost:8080

を検索し、この画面が表示されればOKです。

アオキ
ここまでは下準備、長いっちゃあ長いけど何回かやってると慣れてきまっせ。
Sponsored link

『Vue.js』で『SPA』をつくるためのフォルダ構成

『Vue.js』で『SPA』をつくるイメージはこんな感じです。

たくさんのファイルがつながっているんですよね。

『src』フォルダの中にたくさんのファイルを作成していきます。

まず、『main.js』というファイルが、『App.vue』と『router』をインポートしています。

『router』フォルダの中の『index.js』というファイルが『vue-router』の本体になります。

新たに 『pages』というフォルダをつくって、その中に ページファイル(今回だと Top.vue とか About.vue とか) を作成します。

コンポーネント・・部品という意味。Vue.jsはコンポーネントを組み合わせてホームページをつくることができます。拡張子は .vue です。

『vue-router』によって、『pages』フォルダ内の各ファイルを振り分けます。

アオキ
サッカーでいったら司令塔的な。柴崎や遠藤的な役割ですかね。

『pages』ファイル(コンポーネント)の中で、
必要があればより小さな『components』を作って読み込ませることもできます。

それではソースコードをば。

Sponsored link

『Vue.js』で『SPA』をつくるためのファイル群

main.js

初期設定のままでOK。
『App.vue』と『vue-router』が読み込まれるように設定してあります。

App.vue

『App.vue』の中の、 という箇所の中で、

司令塔『vue-router』がページを振り分けます。

また、どのページでも共通で使うような部品(例えばメニューやフッターなど)は、

『App.vue』に書いておくと全ページで共通で使用されます。

(今回の場合は Navbarコンポーネントを作って、 を読み込ませています。

司令塔 vue-router router/index.js

インストール時は『pages』フォルダはないのでつくっておきます。

ページ pages/top.vue

ページ pages/about.vue

共通で使う Navbarはcomponentsフォルダに保存します。

『bulma』サイトにあるサンプルをちょっとだけ改良してます。

components/Navbar.vue

肝はRouterLink という箇所。

RouterLink to=”/” でトップページ、
RouterLink to=”/about” でAboutページへジャンプするように指定していて、

を合図に、司令塔『vue-router』がページに振り分けられます。

この段階で、 コマンドラインで npm run dev とうって、

http://localhost:8080/

http://localhost:8080/about

とうってページが切り替わればOKです。

開発時は npm run dev で試して、

本番用にファイル生成するには、npm run build とうつとOKですが、一点注意したい点があります。

Sponsored link

『Vue.js』で『SPA』をつくるための注意事項

npm run build とうつと、

たくさんのファイルが『webpack』によって、distフォルダにまとめてくれます。

が、

初期設定だとなぜか生成されたファイルのパスの位置が違って、

画面真っ白という事になりがちなのです。

アオキ
僕は初期の頃 相当ハマりました・・

対策としては、設定ファイル config/index.js の46行目あたりの

アオキ
サーバーのルートディレクトリに置くのを想定してるみたいです。

デザインの調整は、

『bulma』の公式ページを見つつ、
パーツをコピペしていくとだいぶ綺麗なサイトがつくれるようになります。

『bulma』の関連記事

最後にもう一度テストページをば。

Vou-routerテストページ

アオキ
それにしても、読み込みスピードほとんどなくスムーズに動くっていいですね。
アオキ
これからもっと頻度あげてSPAつくりをやっていきたいもんです。
created by Rinker
¥3,177 (2022/07/02 12:25:55時点 Amazon調べ-詳細)

『Vue/Vuex/Nuxt』ではこんな記事も読まれています。

1. 【Vue.js】初心者向けの動画をリリースしました【Udemy】

2. 『Vue.js』サンプルアプリの作り方動画を追加しました【Udemy】

3. Vue.js3のセクションを追加しました【Udemy】【Vue.js】

4. 【JavaScript】初心者向けの動画をリリースしました【Udemy】

5. 【Vue.js】と【Firebase】で作るミニWebサービス を試してみた〜Googleログインまで〜

6. 【Nuxt】入門 Vuexの状態管理を【図解】してみた【初心者向け】

7. 【Laravel5.5】Webアプリケーションを作るためのゆるめの環境構築編【Node.js】【npm】【Vue.js】【初心者向け】

8. 【Laravel】と【Vue.js】のサンプル動画を見ながらさらりと解説してみる

9. 【Vue.js】【SPA】の作り方をわかりやすくまとめてみた【初心者向け】

10. 【Vue.js】かっこいいフォトギャラリーを発見したのでソースを読んでみた。カテゴリーで選べてなめらかに動くんです

アオキ
ツイッターでも記事ネタ含めちょろちょろ書いていくので、よろしければぜひフォローお願いしますm(_ _ )m

アオキのツイッターアカウント


関連記事一覧 (一部広告あり)

コメント

    • 名前
    • 2020年 9月 06日

    SPA・・部分的に読み込む(読み込む量が少ないのでさくっと動く)

    SSRの間違いでは?
    (読み込むという言い方ではサーバーからのレスポンスとして差分が与えられるみたいないいかたになってしまうのでグレー)

      • aoki_monpro
      • 2020年 9月 07日

      ご指摘ありがとうございます、表現イマイチでしたので修正いたします。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

アーカイブ

  1. バックエンド

    【Laravel第3弾】イベント予約システムの作り方をリリースしました【TALL…
  2. 学び・生涯学習

    アンケートのお願い Udemy 次Laravelシステムとフロントについて
  3. オンライン教材

    【Laravel(PHP)】初心者向け アプリのつくり方 をリリースしました【t…
  4. 数学

    【三角関数】とは わかりやすくまとめてみた【動画あり】
  5. バックエンド

    【Laravel】マルチログイン対応ECサイトの講座をリリースしました【Udem…
PAGE TOP