Udemy 10. ログイン前のレイアウト構築 #02
2020年08月20日に更新

Nuxt.js ウェルカムページを構成するコンポーネントファイル群を作成しよう(1/4)

ウェルカムページは、全4回に渡って構築します。

1/4 ウェルカムページを構築するコンポーネントファイルの作成(今ここ)

2/4 アイキャッチ画像の設置とツールバーの作成

3/4 スクロールイベントでツールバーの色を変える

4/4 レスポンシブデザインの対応(最終的なコード記載)

今回達成すること

今回はウェルカムページに必要なファイル群を作成し、それぞれの場所へ配置していきます。

デザイン的な作業は次回に行うとし、今回は段取り作業となります。

最終的な完成イメージはこのようになります。

2020-08-04 09-30-12−2

ウェルカムページの仕様

1ページのランディングページとし、ツールバーメニューをクリックすると詳細までスクロールする仕様とします。

2020-07-31 21-06-09 (5)

ツールバーメニュー

事業計画書を作成できるWebアプリを想定し、スクロールメニューは4つにします。

メニュー名 内容
製品 アプリケーションの紹介・強み
価格 アプリケーションの価格
お問合せ お問合せフォーム
会社情報 メンバー紹介、会社名・所在地の表示

「会員登録」、「ログイン」メニューはリンクを設定して別ページへ遷移させます。

メニュー名 遷移先 pagesファイル
会員登録 /signup signup.vue
ログイン /login login.vue

フッターメニュー

コピーライトのみを表示するフッターを作成します。

ブランチを切る

実装に入る前に「front」ディレクトリ上でブランチを切っておきます。

root $ cd front
front $ git checkout -b 20200803_layouts
front $ git branch

* 20200803_layouts

front $ cd ..
root $ # 戻っておく

レイアウトファイルを作成する

まずウェルカムページのベースとなるレイアウトファイルを作成します。

root $ touch front/layouts/welcome.vue

作成したwelcome.vueを仮編集しておきます。

front/layouts/welcome.vue
<template>
  <v-app>
    welcome.vue
  </v-app>
</template>

<script>
export default {
}
</script>

ログインフラグを用意する

Nuxt.jsはトップページに「pages」ディレクトリのindex.vueを使用します。

このファイルはログイン前とログイン時の双方で使用するため、ログインフラグによってレイアウトを切り替える必要があります。

Vuexにログインフラグを作成する

ログインフラグはNuxt.js上のどこからでも参照できるようにVuexを使用します。

Nuxt.jsでVuexを使用するには「store」ディレクトリ内にJSファイルを作成することで使用可能となります。

なお、ここのファイル名をindex.js以外にする場合、呼び出しにファイル名を指定する必要があります。

今回のようにアプリ全体で使用する変数やメソッドの場合はindex.jsに記載すればOKです。

ファイルを作成しましょう。

root $ touch front/store/index.js

state内にloggedInフラグを用意します。

front/store/index.js
export const state = () => ({
  loggedIn: false
})

export const getters = {}

export const mutations = {}

export const actions = {}

loggedInフラグは、

  • ログイン中の場合にtrue
  • ログインしていない場合はfalse となります。

これで下準備ができました。

トップページのレイアウトファイルを切り替える

トップページを表示するindex.vueにレイアウトファイルの切り替え設定を行います。

index.vueをまるっと書き換えましょう。

front/pages/index.vue
<template>
  <div>
    index.vue
  </div>
</template>

<script>
export default {
  layout ({ store }) {
    return store.state.loggedIn ? 'default' : 'welcome'
  }
}
</script>

レイアウトファイルの切り替えはlayoutプロパティ内で行います。

上記コードは

  • ログインフラグがtrueの場合 => default.vueを使用し、
  • ログインフラグがfalseの場合 => welcome.vueを使用します。

ここまでの変更を確認してみよう

それではコンテナを起動してここまでの変更を確認してみましょう。

root $ docker-compose up

http://localhost:8080 にアクセスして「welcome.vue」が表示されたら成功です。

これがログイン前のレイアウトとなります。

2020-08-04 01-25-12

続いてログイン後のレイアウトを表示してみましょう。

index.jsのログインフラグをtrueに変更します。

front/store/index.js
export const state = () => ({
  loggedIn: true // trueに変更
})
...

リロードすると、「index.vue」が表示されました。

2020-08-04 01-33-49

確認が取れたらログインフラグはfalseに戻しておきます。

front/store/index.js
export const state = () => ({
  loggedIn: false // falseに戻す
})
...

ウェルカムページを構成するファイル群を作成する

ウェルカムページで使用するファイル一式を作成します。

「components」ディレクトリ以下に「welcome」ディレクトリを作成し、各ファイルを作成します。

root $ mkdir front/components/welcome && touch $_/{welAppBar.vue,welAbout.vue,welProducts.vue,welPrice.vue,welContact.vue,welCompany.vue}

作成した各ファイルの役割は以下の通りです。

front/components/welcome
├── welAbout.vue    # このサイトについて・サイトの説明
├── welAppBar.vue   # ウェルカムページのツールバー
├── welCompany.vue  # 会社詳細
├── welContact.vue  # お問合せ
├── welPrice.vue    # 製品・サービスの価格・プラン
└── welProducts.vue # 製品・サービスの紹介

各ファイルを仮編集する

作成した6つのファイルを仮編集します。

front/components/welcome/welAbout.vue
<template>
  <div>
    welAbout.vue
  </div>
</template>

<script>
export default {
}
</script>
front/components/welcome/welAppBar.vue
<template>
  <div>
    welAppBar.vue
  </div>
</template>

<script>
export default {
}
</script>
front/components/welcome/welCompany.vue
<template>
  <div>
    welCompany.vue
  </div>
</template>

<script>
export default {
}
</script>
front/components/welcome/welContact.vue
<template>
  <div>
    welAContact.vue
  </div>
</template>

<script>
export default {
}
</script>
front/components/welcome/welPrice.vue
<template>
  <div>
    welPrice.vue
  </div>
</template>

<script>
export default {
}
</script>
front/components/welcome/welProducts.vue
<template>
  <div>
    welProducts.vue
  </div>
</template>

<script>
export default {
}
</script>

welcome.vueからファイルを呼び出そう

編集したファイル群をwelcome.vueから呼び出しましょう。

front/layouts/welcome.vue
<template>
  <v-app>
    <wel-app-bar />
    <v-sheet>
      <v-container
        fluid
        :style="{ maxWidth: '1280px' }"
      >
        <v-row
          v-for="(menu, i) in menus"
          :key="`menu-${i}`"
        >
          <v-col cols="12">
            <div :is="`wel-${menu.title}`" />
          </v-col>
        </v-row>
      </v-container>
    </v-sheet>
  </v-app>
</template>

<script>
import welAbout from '~/components/welcome/welAbout'
import welProducts from '~/components/welcome/welProducts'
import welPrice from '~/components/welcome/welPrice'
import welContact from '~/components/welcome/welContact'
import welCompany from '~/components/welcome/welCompany'

export default {
  components: {
    welAbout,
    welProducts,
    welPrice,
    welContact,
    welCompany
  },
  data () {
    return {
      menus: [
        { title: 'about', subtitle: 'このサイトはブログ"独学プログラマ"で公開されているチュートリアルのデモアプリケーションです' },
        { title: 'products', subtitle: '他にはない優れた機能の数々' },
        { title: 'price', subtitle: '会社の成長に合わせた3つのプラン' },
        { title: 'contact', subtitle: 'お気軽にご連絡を' },
        { title: 'company', subtitle: '私たちの会社' }
      ]
    }
  }
}
</script>
  • <div :is="wel-${menu.title}" /> … 配列をループし、titleと一致するコンポーネントを呼び出している。

    コードを変換するとis="wel-about"といった値になります。

    この書き方はtitleとコンポーネント名を一致させる必要がありますが、ブロックごとにコンポーネントファイルを分けることができ、1ページ物のランディングページにおすすめです。

  • import … Nuxt.js v2.13では動的に変化するコンポーネントの自動読み込みに対応していない。そこでisで呼び出すコンポーネントは従来の呼び出し方で行う。

    こちらの記事の「6. コンポーネントファイルの自動インポート」で詳しく解説しています。

上記の編集後、ブラウザにこのように表示されたら成功です!

2020-08-04 09-00-53

共通フッターを作成しよう

これら作成するフッターは、ウェルカムページ以外にもログイン前のページ全般に使用します。

そこで「components」ディレクトリ以下に「beforeLogin」ディレクトリを作成し、その直下で管理します。

ファイル名はbefLoginFooter.vueとしましょう。

ターミナルを新しいウィンドウで開く、下記コマンドを実行してください。

root $ mkdir front/components/beforeLogin && touch $_/befLoginFooter.vue

Vuetifyのv-footerを使って簡単に編集しましょう。

front/components/beforeLogin/befLoginFooter.vue
<template>
  <div>
    <v-footer
      absolute
      dark
      color="black"
    >
      befLoginFooter.vue
    </v-footer>
  </div>
</template>

<script>
export default {
}
</script>
  • absolute(アブソリュート) … このバインドキーをつけることで画面下に表示される。

welcome.vueから呼び出しましょう。

front/layouts/welcome.vue
<template>
		...
    </v-sheet>
    <bef-login-footer /> <!-- 追加 -->
  </v-app>
</template>
...

ブラウザをリロードすると。。。

2020-08-04 09-30-12

上手く行きましたね。これで下準備は終了です。

コンテナを削除しておきましょう。

root $ 「control」+「C」
root $ docker-compose down

コミットしとく

ここまでの変更をコミットしておきます。

root $ cd front
front $ git add -A
front $ git commit -m "welcome_page_setup"
front $ cd ..
root $ # 戻っておく

まとめ

今回はウェルカムページに必要なファイル群を作成し、それぞれの場所へ配置していきました。

今は骨組みだけですが、次回から肉付けをしていきましょう。

次回予告

ウェルカムページにアイキャッチ画像の設定と、ツールバーにアプリ名・メニューボタンの表示設定を行います。

どうぞお楽しみに!(下のリストにリンクあるよ)

あなたの力になれること
私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる...。そんな方に向けた単発・短期間メンターサービスを行っています。下のサービスへお進みください。
独学プログラマのサービス
次の記事はこちら
1. このカテゴリーの歩き方 #01
【お知らせ】UdemyでRails × Nuxt.jsの動画を公開することになりました
1. このカテゴリーの歩き方 #02
【随時更新】アプリケーション仕様書
1. このカテゴリーの歩き方 #03
【随時更新】このカテゴリーの歩き方
1. このカテゴリーの歩き方 #04
(Docker+Rails6+Nuxt.js+PostgreSQL)=>Heroku 環境構築~デプロイまでの手順書
2. Docker入門 #01
Docker for Macをインストールする手順
2. Docker入門 #02
分かるDocker解説。仮想環境・コンテナ・Dockerイメージ・Dockerfileとは何か?
2. Docker入門 #03
分かるDocker解説。DockerComposeとは何か?
3. Dockerを使ったRails+Nuxt.js環境構築 #01
【Docker+Rails6+Nuxt.js】今回作成するアプリの開発環境の全体像を知ろう
3. Dockerを使ったRails+Nuxt.js環境構築 #02
【MacOS】Homebrew経由でGitをインストールする方法
3. Dockerを使ったRails+Nuxt.js環境構築 #03
Rails6を動かすAlpineベースのDockerfileを作成する(AlpineLinuxとは何か)
3. Dockerを使ったRails+Nuxt.js環境構築 #04
Nuxt.jsを動かすAlpineベースのDockerfileを作成する(C.UTF-8とは何か)
3. Dockerを使ったRails+Nuxt.js環境構築 #05
.envファイルを使ったdocker-compose.ymlの環境変数設計
3. Dockerを使ったRails+Nuxt.js環境構築 #06
Rails6・Nuxt.js・PostgreSQLを動かすdocker-compose.ymlファイルを作成する
3. Dockerを使ったRails+Nuxt.js環境構築 #07
docker-compose.ymlを使ってRails6を構築する(PostgreSQLパスワード変更方法)
3. Dockerを使ったRails+Nuxt.js環境構築 #08
docker-compose.ymlを使ってNuxt.jsを構築する
4. 複数プロジェクトのGit管理 #01
複数プロジェクトで行うGit管理の全体像を理解しよう(Gitサブモジュール解説)
4. 複数プロジェクトのGit管理 #02
【Git】既存の子ディレクトリをサブモジュール管理に変更する手順
4. 複数プロジェクトのGit管理 #03
【GitHub】秘密鍵の生成・公開鍵を追加・SSH接続するまでを画像で分かりやすく
4. 複数プロジェクトのGit管理 #04
【GitHub】リモートリポジトリの追加・サブモジュールのリンク設定を行う
5. RailsAPI×Nuxt.js初めてのAPI通信 #01
【Rails6】"Hello" jsonを返すコントローラを作成する
5. RailsAPI×Nuxt.js初めてのAPI通信 #02
【Nxut.js】axiosの初期設定を行う(baseURL・browserBaseURLを解説)
5. RailsAPI×Nuxt.js初めてのAPI通信 #03
【Rails6】Gem rack-corsを導入してCORS設定を行う(オリジン・CORSとは何か)
6. Heroku.ymlを使ったDockerデプロイ #01
デプロイ準備。Herokuへ新規会員登録を行いHerokuCLIをインストールする
6. Heroku.ymlを使ったDockerデプロイ #02
heroku.yml解説編。Docker環境のRails6をHerokuにデプロイする(1/2)
6. Heroku.ymlを使ったDockerデプロイ #03
HerokuCLI-manifestのデプロイ解説編。Docker環境のRails6をHerokuにデプロイする(2/2)
6. Heroku.ymlを使ったDockerデプロイ #04
Dockerfile解説編。Docker環境のNuxt.jsをHerokuにデプロイする(1/2)
6. Heroku.ymlを使ったDockerデプロイ #05
デプロイ完結編。Docker環境のNuxt.jsをHerokuにデプロイする(2/2)
7. モデル開発事前準備 #01
【Rails6】application.rbの初期設定(タイムゾーン・I18n・Zeitwerk)
7. モデル開発事前準備 #02
【Rails6】モデル開発に必要なGemのインストールとHirb.enableの自動化
7. モデル開発事前準備 #03
【Docker+Rails】A server is already running. Check /tmp/pids/server.pidエラーの対応
7. モデル開発事前準備 #04
【Docker】<none>タグのイメージを一括削除する & Rails .gitignoreの編集
8. ユーザーモデル開発 #01
Railsユーザーモデル作成。テーブル設計・ユーザー認証設計を理解する
8. ユーザーモデル開発 #02
Railsユーザーモデルのバリデーション設定(has_secure_password解説)
8. ユーザーモデル開発 #03
Railsバリデーションエラーメッセージの日本語化(ja.yml設定方法)
8. ユーザーモデル開発 #04
EachValidatorクラスのカスタムバリデーション設定(Rails6/lib以下読込)
8. ユーザーモデル開発 #05
Rails環境ごとにSeedデータ切り替えるseeds.rbの書き方
8. ユーザーモデル開発 #06
Rails6から導入された並列テストを理解する
8. ユーザーモデル開発 #07
Railsユーザーモデルバリデーションテスティング(name/email/password)
8. ユーザーモデル開発 #08
Nuxt.jsからRailsのユーザーテーブルを取得しHerokuにデプロイする
9. Nuxt.jsフロント開発事前準備 #01
【Nuxt.js2.13超解説】バージョンアップ手順と6つの新機能+2つの変更点
9. Nuxt.jsフロント開発事前準備 #02
Docker AlpineベースのNode.js上で動くNuxt.jsにVuetifyを導入する
9. Nuxt.jsフロント開発事前準備 #03
VuetifyにカスタムCSSを導入してオリジナルブレイクポイントを作る
9. Nuxt.jsフロント開発事前準備 #04
Nuxt.jsにnuxt-i18nを導入して国際化に対応する
10. ログイン前のレイアウト構築 #01
Nuxt.jsのレイアウト・ページ・コンポーネントの役割を理解しよう
10. ログイン前のレイアウト構築 #02
Nuxt.js ウェルカムページを構成するコンポーネントファイル群を作成しよう(1/4)
10. ログイン前のレイアウト構築 #03
Nuxt.js ウェルカムページにアイキャッチ画像・アプリ名・メニューボタンを表示しよう(2/4)
10. ログイン前のレイアウト構築 #04
Nuxt.js addEventListenerでスクロールを検知しツールバーの色を変化させよう(3/4)
10. ログイン前のレイアウト構築 #05
Nuxt.js ウェルカムページをレスポンシブデザインに対応させよう(4/4)
10. ログイン前のレイアウト構築 #06
Nuxt.js 会員登録ページのレイアウトファイルを作成しよう(1/4)
10. ログイン前のレイアウト構築 #07
Nuxt.js 名前、メール、パスワードのコンポーネントファイルを作成しよう(2/4)
10. ログイン前のレイアウト構築 #08
Nuxt.js 親子コンポーネント間の双方向データバインディングを実装する(3/4)
10. ログイン前のレイアウト構築 #09
Nuxt.js Vuetifyのv-text-fieldを使った会員登録フォームのバリデーション設定(4/4)
10. ログイン前のレイアウト構築 #10
Nuxt.js ログインページ実装とHerokuデプロイまで(router. replaceとpushの違いとは)
11. ログイン後のレイアウト構築 #01
Nuxt.js ログイン後のツールバーを作成しよう(inject解説)
11. ログイン後のレイアウト構築 #02
Nuxt.js アカウントメニューページ・ログアウト機能を実装しよう(nuxt-child解説)
11. ログイン後のレイアウト構築 #03
Nuxt.js ログイン後のトップページにプロジェクト一覧を表示しよう
11. ログイン後のレイアウト構築 #04
Nuxt.js プロジェクトページにVuetifyのナビゲーションドロワーを追加しよう
11. ログイン後のレイアウト構築 #05
Nuxt.js paramsIDからプロジェクトを検索してVuexに保存しよう
SPA開発
ブログ構築
小ネタ集