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

もんプロ～問題発見と解決のためのプログラミング〜

 

2 Pockets

【Vue.js】初心者向け講座をリリースしました。【Udemy】

https://coinbaby8.com/vuejs-udemy.html

こちらのツイートから約1か月半。インプットしすぎて消化しきれなくなってきたので、 Vuejs 収録少しずつ始める事に。　少し迷ったのですが　Vue3 の情報がまだまだ少ないという事で、前半はVue2 から始める構成にしました。淡々とがんばるどー。— 世界のアオキ🥑プログラミング×生涯学習×熊本 (@aoki_monpro) August 13, 2020インプットしすぎて消化しきれなくなってきたので、 Vuejs 収録少しずつ始める事に。　少し迷ったのですが　Vue3 の情報がまだまだ少ないという事で、前半はVue2 から始める構成にしました。淡々とがん...

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

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

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

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

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

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

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

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

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

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

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

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

Vou-routerテストページ

こんな画面です。

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

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

アオキ

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

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

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

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

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

https://nodejs.org/ja/

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

>node -v
v10.11.0

>npm -v
6.5.0

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

参考記事

もんプロ～問題発見と解決のためのプログラミング〜

 

16 Pockets

【Laravel】Webアプリ環境構築の仕方【Vue.js】【初心者向け】

https://coinbaby8.com/laravel55-webapplication-vuejs.html#VuejsNodejsnpm

ロリポップやXサーバーなど、格安のレンタルサーバーでも運用できるプログラミング言語といえばやっぱり『PHP(ピーエイチピー)』。その『PHP』をフル活用したフレームワークで人気急上昇中の『Laravel(ララベル)』。『Laravel』をうまいこと使うと、物流管理システム勤怠管理システム予約システムといったシステムをインターネット上で使えるようになります。いわゆる『Webアプリケーション』を作ることができるようになります。『Laravel(ララベル)』だけでも『Webアプリケーション』はつくれてしまうのですが、実際に使う側にとって...

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

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

$ npm install -g vue-cli

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

$ vue init webpack vue-router-test

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

『Webpack』の関連記事

もんプロ～問題発見と解決のためのプログラミング〜

 

2 Shares

7 Pockets

【JavaScript】の環境構築の仕方 webpackとbabel【昭和と令和なJavaScript】

https://coinbaby8.com/javascriptes6-webpack-babel.html

プログラミングの歴史において、『JavaScript(ジャバスクリプト)』ほど、栄光と挫折を味わった言語はないんじゃないかと思ったりします。こちらの記事に面白おかしく書いてありますが、JavaScriptの歴史をざっくりまとめたよ!1995年生まれで、ポケモン赤・緑とタメというポケモン世代な言語で、戦国時代暗黒時代新時代の幕開けそしてもはやJavaScriptではない世界まで駆け抜けた『JavaScript』。例えるならビリギャルのように、偏差値35でグレた時代から慶応ボーイに成り上がり、さらには『イーロン・マスク』よろしく宇宙に飛び出すよ...

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

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』の関連記事

もんプロ～問題発見と解決のためのプログラミング〜

 

2 Users

3 Pockets

【Sass】の書き方 bulmaフレームワークから読み解いてみる【初心者向け】

https://coinbaby8.com/sass-bulma-how-to-writing.html

ホームページなりWebサービスを作ろうと思ったらもれなく『HTML』と『CSS』が必要になりますが、実は多くのプログラマーが苦手意識を持ってたりするのが『CSS』。なんせ、書くのがめんどくさい。一行一行書いていかなきゃなのでとてもめんどくさいし、一箇所変えると他のあらぬところまで影響しちゃったりしてややこしい。よく使うクラスや書き方を用意しておいてどうにかやりくりしてきたものの、それでもやっぱりめんどうくさい。さらには変数もif文も計算もできないということで、『CSS』はプログラム言語じゃないっしょ。なんて言...

$ 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です。

アオキ

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

『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』を作って読み込ませることもできます。

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

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

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

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

App.vue

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

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

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

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

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

 <template>
  <div>
    <header>
      <Navbar />
    </header>
  <main>
    <div id="app">
      <router-view/>
    </div>
  </main>
  </div>
</template>

<script>
import Navbar from './components/Navbar.vue' // Navbar.vueを読み込み

export default {
  components: {
    Navbar //読み込む際はここにも追記必要
  },
  name: 'App'
}
</script>

<style lang="scss">  // 追記 lang="scss" と記載必要
@import "../node_modules/bulma/bulma.sass"; // bulma使うのでここで読み込み
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

司令塔 vue-router router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Top from '@/pages/top' //追記
import About from '@/pages/about' //追記

Vue.use(Router)

export default new Router({
  mode: 'history',  // 追記 URLに#が入るのを防止
  base: 'test/vue-router-test', //追記 ベースURL 今回はサーバー内のサブディレクトリに保存したいため
  routes: [
    {
      path: '/',
      name: 'top', //追記
      component: Top //pagesフォルダ内のコンポーネント名
    },
    {
      path: '/about', //追記
      name: 'about', //追記
      component: About //追記 こちらのpagesフォルダ内のコンポーネント名
    }
  ]
})

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

ページ pages/top.vue

<template>
<div>
    top
<div>
</template>

ページ pages/about.vue

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

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

components/Navbar.vue

<template>
<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="https://coinbaby8.com">
      もんプロ Vue-router + Bulma サンプル
    </a>

    <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>

  <div id="navbarBasicExample" class="navbar-menu">
    <div class="navbar-start">
      <RouterLink class="navbar-item" to="/">
        Home
      </RouterLink>

      <RouterLink class="navbar-item" to="/about">
        About
      </RouterLink>

      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link">
          More
        </a>

        <div class="navbar-dropdown">
          <a class="navbar-item">
            Blog
          </a>
          <a class="navbar-item">
            Contact
          </a>
        </div>
      </div>
    </div>

    <div class="navbar-end">
      <div class="navbar-item">
        <div class="buttons">
          <a class="button is-primary">
            <strong>Sign up</strong>
          </a>
          <a class="button is-light">
            Log in
          </a>
        </div>
      </div>
    </div>
  </div>
</nav>
</template>

肝はRouterLink という箇所。

      <RouterLink class="navbar-item" to="/">
        Home
      </RouterLink>

      <RouterLink class="navbar-item" to="/about">
        About
      </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ですが、一点注意したい点があります。

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

npm run build とうつと、

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

が、

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

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

アオキ

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

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

assetsPublicPath: '/', という箇所の/を削除して、
assetsPublicPath: '',    という表示にしておくと無事表示されます。

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/', // ここの / を消す

アオキ

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

デザインの調整は、

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

『bulma』の関連記事

もんプロ～問題発見と解決のためのプログラミング〜

 

2 Users

3 Pockets

【Sass】の書き方 bulmaフレームワークから読み解いてみる【初心者向け】

https://coinbaby8.com/sass-bulma-how-to-writing.html

ホームページなりWebサービスを作ろうと思ったらもれなく『HTML』と『CSS』が必要になりますが、実は多くのプログラマーが苦手意識を持ってたりするのが『CSS』。なんせ、書くのがめんどくさい。一行一行書いていかなきゃなのでとてもめんどくさいし、一箇所変えると他のあらぬところまで影響しちゃったりしてややこしい。よく使うクラスや書き方を用意しておいてどうにかやりくりしてきたものの、それでもやっぱりめんどうくさい。さらには変数もif文も計算もできないということで、『CSS』はプログラム言語じゃないっしょ。なんて言...

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

Vou-routerテストページ

アオキ

それにしても、読み込みスピードほとんどなくスムーズに動くっていいですね。

アオキ

これからもっと頻度あげてSPAつくりをやっていきたいもんです。

Vue.js入門 基礎から実践アプリケーション開発まで

created by Rinker

¥375 (2024/04/19 12:38:03時点 Amazon調べ-詳細)

• Kindle
• Amazon
• 楽天市場
• Yahooショッピング

基礎から学ぶ Vue.js

created by Rinker

¥3,699 (2024/04/19 10:43:29時点 Amazon調べ-詳細)

• Kindle
• Amazon
• 楽天市場
• Yahooショッピング

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

アオキ

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