こまけぇこたぁいいんだよ ─ のんびりVue.js超入門［第7回：SPA制作 -コーディング編- ］

こんにちは、ma-ya’s CREATE［まーやずくりえいと］です。

前回に引き続き、今回はVue.jsによるSPA制作コーディング編です。

基本的には以前作ったSPAのコードをサンプルサイトとして、コメント＆ちょっとした解説と共に記載していきます（かなりお恥ずかしいですが）。

• サンプルサイト

一応動く実例サイトのコードを見ることで理解しやすい部分もあるんじゃないかと思ってます（その代わり記事は冗長です）。

※一部不要なコードはカットしていきます。

index.html

先ずはプロジェクトフォルダ直下にあるindex.htmlを見てみましょう。

index.html

コード少なっ！て感じ。

実際にはhead内にOGP関連の記述をしていますが、今回は見やすくするために割愛してます。

にしても少ない。

注目すべきはbody内の

<div id="app"></div>

です。

一見空要素ですが、これが別のvueファイルの中身と置き換わると考えましょう。

※ちなみにhead内でファビコンを読み込んでいますが、素材の格納場所は同じ階層にあるstaticフォルダとしています。

では次。

src/App.vue

srcフォルダ内のApp.vueファイルです。ここで<div id=”app”></div>の中身が定義されています。

src/App.vue

ざっと見るとHTML、script、CSSが記載されています。

こんな風にしてページ、コンポーネント（部品）毎のスクリプトやスタイルを書いていくんですね。

それぞれ見ていきましょう。

HTML

templateタグで囲われたid=appなdivがいますね。ここの内容が先ほどのindex.htmlの<div id=”app”></div>と置き換わると考えましょう。

更に見ていくと

<menu-list></menu-list>
<router-view/>

という見慣れぬ要素。

結論から言うと、ここの内容はさらにまた別ファイルから読み込んでいます。

このサイトの場合は下記のような仕様です。

• トップ含む3ページで共通のヘッダーメニュー
• メニュークリックでヘッダー以下のコンテンツ領域を切替（ルーティング）

なのでつまり

• <menu-list></menu-list>の部分でメニュー用に作ったコンポーネントを読込
• <router-view/>部分で各ページ用に作ったコンポーネントを表示切替

するわけですね。

menu-listというのは後に用意する任意のコンポーネント名で、カスタム要素と言われています。

ルーティングの設定や各コンポーネントの作成は後で見ていきましょう。

1. メニュー用コンポーネント（menuList）のインポート
2. 使用するコンポーネント名（menuList）の指定

でしょうか。コンポーネントを①読み込んで②指定する。というわけです。

すると↑のHTMLエリアで<コンポーネント名></コンポーネント名>（<menu-list></menu-list>）のようにカスタム要素としてコンポーネントを使用することができます。

そして最終的にカスタム要素はコンポーネントで定義した内容に置き換わります。

キャメル / パスカルケースのコンポーネント名はHTMLエリアでケバブケースにする必要あり

後述するメニュー部分のコンポーネント名はキャメルケースです（menuList）。

しかしHTMLは基本的に大文字小文字の区別が出来無い為、キャメル / パスカルケースのコンポーネント名はHTML側ではケバブケースで記述する必要があるのです。

今回、メニューリストのコンポーネント名は「menuList」なので、これはカスタム要素としてHTMLで使用する際は「menu-list」としてやるとVueさんは勝手に理解してくれます。

※ちなみに今回scriptエリアではnormalize.cssも読み込んでいます。
①プロジェクトフォルダ直下でコマンドプロンプト「npm install –save normalize.css」してプロジェクトにnormalize.cssをインストール
②サンプルの通りscriptエリアで「import ‘normalize.css’」してやるとnormalize.cssが使えます。

style

このページで使用するCSSです。好きにやっちゃって下さい。

基本的にApp.vueはページ全体のコンテンツ定義になるハズなので、今回は普段bodyに指定するようなCSSを適当にぶち込んでいます。

ゆかいなコンポーネントたち

ではいよいよApp.vueで読み込まれているコンポーネントたちを見ていきましょう。

menuList.vue

src/componentsフォルダの中にメニュー用コンポーネントを作っています。

ファイル名は任意ですが、拡張子は.vueです。

src/components/menuList.vue

HTML

メニューをリスト形式でループ出力しています。

この連載の第二回でもやった繰り返し処理ですね。

ここではそれぞれのメニュータイトル文字列とパスをdata内でオブジェクトにして、それぞれループ出力しています（詳細は省きます）。

<router-link></router-link>

さらに上記の記述「router-link」によってルーティング用リンクを生成することができます。

このリンクに呼応してルーティングするコンテンツの表示切替が行われます。

まあこまけえことは置いといて、SPAでルーティングさせるには専用リンクタグがあるよ、くらいに思っとけばいいと思う（適当）。

ポイント：<router-link>のexact属性

<router-link>タグ内にちゃっかりいるexact属性ですが、これけっこうポイントです。

これを付けることによって、アクティブなページのリンクのみに.router-link-activeというクラスが付きます。

ので、現在見ているページのメニュー項目のみにCSSでスタイリングしたい場合などは付けときましょう。

script

このコンポーネントで使用するdataを定義してます。

メニューリスト用のオブジェクト定義ですね。ここら辺の詳細は連載第二回の繰り返し処理参照。

CSS

ここも基本的に好きなようにやっちゃって～な感じですが一つポイントが。

<style scoped>

↑のscoped属性を使用すると、そのコンポーネント内にCSSの適用を限定することができます。

複雑な構成のサイトやアプリになると管理が楽になる予感。

あと、上述した<router-link>のexact属性で付与される.router-link-active用のスタイルも当てているので要チェケ。

top.vue / designs.vue / cordings.vue

同じくsrc/componentsフォルダの中にトップ及び他2ページ分のコンポーネントを作っています。

といっても基本的なファイル構造はmenuList.vueと一緒なので読み飛ばしてもOK。

html / script / style エリアに表示したい内容を記述するのみです。

今回の連載はあくまで実例を示すことが主旨なので、冗長になるかもしれないですが3ページ分のコンポーネントを載せます。

今見返すとだいぶ突っ込みどころあるぞ…

src/components/top.vue

src/components/designs.vue

src/components/cordings.vue

さて、各ファイルこれと言ってポイントは無いんですが、ちょっとした部分を解説しときます。

top.vue

トップのテキストアニメーション（一文字ずつ出現するやつ）はVue.jsだとすごく簡単に実装出来ます。

<h1><span v-for="(t, index) in title" :key="index" class="item" :style="{ animationDelay: index*80+'ms' }" v-text="t"/></h1>

～～

data () {
    return {
      title: 'WHAT I CAN DO.',
    }
  }

～～

.item {
  display: inline-block;
  min-width: .3em;
  animation: text-in .2s ease-out 0s backwards;
}
@keyframes text-in {
  0% {
    transform: translate(-5px,5px);
    opacity: 0;
  }
}

Vue.jsはdataに格納した文字列をループによって一文字ずつ取り出せます。

それを利用してループを回すことで、簡単に一文字ずつのテキストアニメーションが可能。

designs.vue / cordings.vue

これら2ファイルは共通のCSSを読み込んでみました。

<style scoped>
  @import "../assets/common.css";
</style>

こんな感じで、別途 src/assets フォルダ内に作成したcommon.cssを読み込むことが可能。

とまあソース部分が長くなりましたが（これでもメディアクエリとか結構削った）、必要なコンポーネントが出そろいました。

一旦整理してみる

ちょっと長くなったのでいったん整理します。

1. 大枠のindex.htmlで<div id=“app“></div>領域を確保
2. <div id=“app“></div>の中身はApp.vueでざっくり定義
3. App.vue内で必要な部品＝コンポーネントファイル（.vue）を準備

ここから最後にルーティングの段階です。

簡単に言うと、ページ切替の設定をします。

今回の場合だと、top.vue / designs.vue / cordings.vue の表示切替を設定していきます。

index.js

最後にsrc/router/index.jsを編集してルーティングしていきます。

App.vueに記述した<router-view/>の内容を、メニューのリンクパスに応じて出し分ける作業、といった感じ。

めんどくさそう…

だがしかしルーティングの指定は非常にシンプルです。まだあるんか！と思った方はご安心を。

src/router/index.js

まずはコンポーネント等の読み込み

ソース中のコメントにもある通り、先ずは各コンポーネント等の読み込みから始めます。

Vueとvue-routerに加えて必要なコンポーネントを読み込みましょう。

今回、ルーティングさせるコンポーネントはtop.vue / designs.vue / cordings.vueの三つ。

そしてVue-router機能を使うための記述 Vue.use(Router) も忘れずに。

ルーティングを設定

続いてルーティングさせる各コンポーネントのパスと表示するコンポーネント名をサンプルソースの通りに指定。

お気づきかもしれませんが、menuList.vueのrouter-linkに指定したパス（menuList.vueのdata内）とここのパスは対応させて下さい。

コーディング終了！

お疲れさまでした！これでコーディングは終了です。

コーディング編は各ファイルの相関関係さえざっくりと把握しておけば、ハードルが下がると思います。

さっさと必要なコンポーネントを準備して、読み込みの記述とかはコピペしちゃえば実際割とサクサク作業は進むかと（シンプルな作りであれば）。

まあ今回僕は色々思い出しながら書いてたんでめちゃめちゃ時間かかりましたがね…

次回予告

ここまで作ってきた.vueファイル群ですが、もちろんこれらはそのままサーバーにアップロードしても何も起こりません。

最後の最後でこれらのファイルをビルドする必要があります。

しかし大丈夫。面倒なことは全てVue CLI氏がやってくれます。

ビルドして！とコマンドから一言頼めば、氏が良い感じにファイル群をhtml / css / js などにまとめてくれるので、それを丸ごとサーバーにアップロードするだけ。

次回は最終回としてビルドの仕方をちょろっとやって終わりたいと思います（もう山はとっくに越してます！）。

ではでは。

• [Vue.js] SPAを最速で作成！ついでにhistoryモードでGithub Pagesへデプロイ：こまけぇこたぁいいんだよ ─ のんびりVue.js超入門［第10回］
• [Vue.js] 共通SCSSファイルをグローバルで読み込む方法：こまけぇこたぁいいんだよ ─ のんびりVue.js超入門［第9回］
• こまけぇこたぁいいんだよ ─ のんびりVue.js超入門［第8回：SPA制作 -ビルド編- ］
• こまけぇこたぁいいんだよ ─ のんびりVue.js超入門［第7回：SPA制作 -コーディング編- ］
• こまけぇこたぁいいんだよ ─ のんびりVue.js超入門［第6回：SPA制作 -Vue CLI環境構築編- ］
• こまけぇこたぁいいんだよ ─ のんびりVue.js超入門［第5回：v-model］
• こまけぇこたぁいいんだよ ─ のんびりVue.js超入門［第4回：v-if / v-show］
• こまけぇこたぁいいんだよ ─ のんびりVue.js超入門［第3回：ディレクティブ / メソッド］
• こまけぇこたぁいいんだよ ─ のんびりVue.js超入門［第2回：繰り返し］
• こまけぇこたぁいいんだよ ─ のんびりVue.js超入門［第1回：Hello,world!］

備考：サンプルコードを実際に動かしたい場合

ひな型プロジェクトをこれまでのサンプルコードで上書きしてnpm run devする場合、以下を行わないとエラーになります。

• プロジェクトにnormalize.cssをインストール（プロジェクト直下でコマンドプロンプト「npm install –save normalize.css」）、もしくはApp.vue内の「import ‘normalize.css’」記述を削除
• src/assets内の画像（MV.png）とCSSファイル（common.css）の用意
  └画像は何でもいいのでファイル名を「MV.png」にする
  └CSSはファイル名を「common.css」にする。中身は空でもOK。※これも一応↓にサンプル載せます
• サンプルコード内のコメントを削除

読み込むファイルのパスが繋がらなかったり、ファイルが存在しないとエラーになるというわけです。

↑の対策をしておけば途中でエラーになれど、最終的にはローカル反映されます。

ちなみにeslint（文法チェック機能）が働くので↑の対応をしても小さい警告は出ます（http://localhost:8080にはアクセス出来る状態）。
気になる方は各ファイルの最終行に空行を追加＆不要なスペースを削除などで対応して下さい。
コマンドにはエラーの出ているファイル名や箇所が表示されるのでそれを一つ一つクリアしてもOK。
重大なエラー（パスが通じてない・参照ファイルが存在しない）はローカル反映（http://localhost:8080へのアクセス）不可ですが、軽微なエラーはエラーが出つつも反映はされます。

src/common.css