Vue.js + Bootstrap4でポートフォリオサイトの雛形を作ろう！ #JavaScript

こんにちは、masa08です。

今年ももうすぐ終わりです。「あ〜寒いな〜、寒いしVue.jsを使って何か作ってみたいなぁ」と思っていた矢先、Qiitaで以下のサイト等を読んで、急にポートフォリオサイトを作成してみようと思い、爆速で作成してみました。

フロント未学習の大学生が1週間でVue.jsを使ったポートフォリオを作った話
 Vue.js を vue-cli を使ってシンプルにはじめてみる
 Vue-routerを使って、SPAをシンプルにはじめてみる
 vue-cliで始めるVue.jsチュートリアル (2)
VueCLIからVue.js入門①【VueCLIで出てくるファイルを概要図で理解】

今回、Vue.jsとBootstrap4を使ってポートフォリオサイトを作成した結果、自分で思ったよりも早く実装することができました。今回はサイトを作る過程を解説していきたいと思います。

対象者

HTML,CSSは学んだ！次は何を学ぼうかと考えている方
JSとか知らないけど一旦Vue.jsいじってみたいという方
~~クリスマスもパソコンが恋人！コーディングするぞって方~~

基本的には何も知らない初心者対象にして書きますが、僕自身もVueに関しては初心者なので、何か間違い等ありましたら、指摘していただけると幸いです。

この記事を読んで得られること

ポートフォリオサイトの雛形
コンポーネントの作成経験
簡単なSPA(Single Page Application)サイトの作成経験

補足: SPAとは、Webアプリケーションのアーキテクチャの一つで、ブラウザによるページ遷移を行うことなく、コンテンツを切り替えることによって表示を変えるようなサイトを作成することが可能になります。

完成品について

完成品はこちら↓
https://masa08.github.io/vue_introduction/#/

制作期間は約3日間です。HTML/CSSの経験がある人であれば、思ったよりも時間をかけずに実装することができるかと思います。
今回は、Vue.jsとBootstrap4を使ってSPAを用いたポートフォリオの雛形を作るところまでを解説したいと思います。それでは初めていきます。

環境を整えよう！

nodeとnpmをインストール

まず最初にnodeをインストールしましょう。以下のサイトからダウンロードします。
https://nodejs.org/ja/download/
ダウンロードしたファイルを開いて、nodeをインストールします。インストールが終わったら、ターミナルで以下のコマンドを打って、nodeがインストールされているのかを確認しましょう。またnodeをインストールするとnpmを一緒にインストールされるので、そちらも確認しましょう。

$ node -v # 結果がv10.14.2であれば正解

$ npm -v # 結果がv6.4.1であれば正解

vue-cliをインストール

以下のコマンドを打ってvue-cliをインストールします。vue-cliは一種のフレームワークみたいなもので、これを用いることによって簡単にアプリケーションの雛形を作成することができます。

$ npm install -g vue-cli

以下のコマンドを打って、実際に雛形を作成してみましょう。途中に色々と出てくると思いますが、全部Enterを押してしまって大丈夫です。

$ vue init webpack portfolio

以下のコマンドを打った後に、localhost:8080にアクセスしてみてください。

$ cd portfolio
$ npm run dev

以下のような画面が出てくれば正解です。これで準備が整いました！

Bootstrap4をvueに導入

それではBootstrap4をVueに導入したいと思います。以下のサイトを参考に進めていきます。
https://bootstrap-vue.js.org/docs/

まずターミナルで以下のコマンドを打って、bootstrap-vueをインストールしましょう。

$ npm install vue bootstrap-vue bootstrap

そしてsrc/router/index.jsを以下のように編集します。

src/router/index.js

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue' // added
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)
Vue.use(BootstrapVue) // added

import 'bootstrap/dist/css/bootstrap.css' // added
import 'bootstrap-vue/dist/bootstrap-vue.css' // added

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

importの部分でbootstrap-vueを読み込んでいます。それではBootstrapが適用されているか確認してみましょう。src/App.vueのtemplateの部分を以下のように編集します。

src/App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
    <button class="btn btn-primary">test</button>
  </div>
</template>

以下のように、青いボタンが表示されていたら、正解です！無事にBootstrap4が適用されました。

作業外観

以下のような手順で作業を進めていきます。
1. index.jsのimportとroutingを編集
2. src/components下にコンポーネントファイルの作成と中身の編集
3. src/App.vueのの部分にcomponentが挿入される

コンポーネントとは、画面に表示されている要素をまとめたもので、その中にはHTMLやCSS、データ等を要素として含むことができます。このようなコンポーネントを組み合わせることによって、Webサイトを作成していきます。

試しに数ページ実装してみましょう。

1. index.jsのimportとroutingを編集

index.jsを以下のように変更します。ここでは、test1、test2、test3というコンポーネントをimportして、ルーティングの設定を行なっています。この段階では、まだコンポーネントを作成していないので、エラーが出るかと思います。

src/router/index.js

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue' // added
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import test1 from '@/components/test1'
import test2 from '@/components/test2'
import test3 from '@/components/test3'

Vue.use(Router)
Vue.use(BootstrapVue) // added

import 'bootstrap/dist/css/bootstrap.css' // added
import 'bootstrap-vue/dist/bootstrap-vue.css' // added

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/test1',
      name: 'test1',
      component: test1
    },
    {
      path: '/test2',
      name: 'test2',
      component: test2
    },
    {
      path: '/test3',
      name: 'test3',
      component: test3
    }
  ]
})

2. src/components下にコンポーネントファイルの作成と中身の編集

実際にコンポーネントを作成していきます。以下3つのファイルを作成します。

test1.vue

<template>
    <h1>test1</h1>
</template>

test2.vue

<template>
    <h1>test2</h1>
</template>

test3.vue

<template>
    <h1>test3</h1>
</template>

コードを書き終えたら以下のリンクにアクセスしてみてください。それぞれのページが表示されるはずです。
http://localhost:8080/#/test1
http://localhost:8080/#/test2
http://localhost:8080/#/test3

3. src/App.vueのrouter-viewタグの部分にcomponentが挿入される

ここは特段書くコードはないのですが、どうやって画面が表示されているかをみていきましょう。App.vueのtemplateの中身をみてみると

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
    <button class="btn btn-primary">test</button>
  </div>
</template>

となっています。各コンポーネントはこのファイルのrouter-viewタグの部分に埋め込まれます。App.vueに書かれたコードは、main.jsによって読み込まれ、その後、index.htmlのid=appを持つタグに内容がマウント(既存のDOM要素を、Vue.jsによって書かれたコードに置き換えること)されます。

headerを作ってみよう！

さて、4枚ほどページが出来上がったところで、headerを作っていきましょう。まずはsrc/components下に新しくcomponentを作成します。

myheader.vue

<template>
  <div>header</div>
</template>

次に、App.vueをいじります。templateの中身とscriptの中身を、以下のように編集してください。

App.vue

<template>
  <div id="app">
    <myheader></myheader>
    <img src="./assets/logo.png">
    <router-view/>
    <button class="btn btn-primary">test</button>
  </div>
</template>

<script>
import myheader from './components/myheader'

export default {
  name: 'App',
  components: {
    myheader
  },
}
</script>

importの部分で、コンポーネントを読み込み、scriptタグ内で、myheaderタグを定義して、実際にHTML内でmyheaderタグを使っています。

画面を見てみると、全てのページの上部に文字が表示されていることがわかります。

Bootstrap4を用いてデザインを整える！

ここでBootstrap4を使用します。今回は以下のサイトからコードを拝借します。Bootstrapで実現できる実装のほとんどが以下のサイトに乗っていると言っても過言ではないので、Bootstrapを使っている人はぜひ使って見てください(あまり使いすぎると勉強にならない気もしてるので注意)。
https://hackerthemes.com/bootstrap-cheatsheet/

それでは上記サイトからnavbarを拝借して、それを少しだけ編集して、myheader.vueに貼り付けます。

myheader.vue

<template>
    <div>
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <router-link class="text-white px-3" to="/">home</router-link>
                </li>
                <li class="nav-item">
                    <router-link class="text-white px-3" to="/test1">test1</router-link>
                </li>
                <li class="nav-item">
                    <router-link class="text-white px-3" to="/test2">test2</router-link>
                </li>
                <li class="nav-item">
                    <router-link class="text-white px-3" to="/test3">test3</router-link>
                </li>
                </ul>
            </div>
        </nav>
    </div>
</template>

router-linkを使うことで、App.vueのrouter-viewの部分を、任意コンポーネントに切り替えることができます。aタグではなくてrouter-linkを使うことがポイントです。

以下のような画面が出てきたでしょうか？headerにあるボタンを押すと、通信が走ることなく、ページ間を行き来することができるはずです！これでポートフォリオサイトの雛形が完成しました！

自分で好きなように実装してみよう！

あとは各ページを自分の好きなように実装して、Bootstrap4を使って体裁を整えて、github pagesを使えば、自分だけのポートフォリオをネットに公開することができます。github pagesへの公開に関しては、ディレクトリ構成等で少し苦戦することになるとは思いますが、以下の記事を参考にすればなんとかなると思います。
フロント未学習の大学生が1週間でVue.jsを使ったポートフォリオを作った話