差分

このページの2つのバージョン間の差分を表示します。

--- 18.nuxt.jsとbulmaでハンバーガーメニュー:index.html [2019/02/08] – [新規Nuxt.jsアプリの作成] adash333
+++ 18.nuxt.jsとbulmaでハンバーガーメニュー:index.html [2019/02/09] – [リンク] adash333
@@ 行 22: / 行 22: @@
 ソースコード
+https://github.com/adash333/Nuxt-Bulma-Hamburger3
+スクリーンショット
+{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190208-195135.png}}
-Demo
 ===== 開発環境 =====
@@ 行 62: / 行 62: @@
 yarn run dev
 </code>
+{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190208-152758.png}}
+  *アドレスをCtrlを押しながらクリックすると、以下のページが開きます。
+{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190208-152901.png}}
+これで、Nuxt.jsでBulmaを使用する準備が出来ました。
+===== インデックスページ以外のページ（about.vueとcontact.vue）を作成 =====
+pages/ディレクトリで、about.vueとcontact.vueの新規作成を行う。
+pages/about.vue
+<code>
+<template>
+  <section class="hero is-primary is-bold">
+    <div class="hero-body">
+      <h1 class="title is-size-2">About</h1>
+      <h2 class="subtitle is-size-4">NBH3とは？</h2>
+    </div>
+  </section>
+</template>
+</code>
+{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190208-154546.png}}
+pages/contact.vue
+<code>
+<template>
+  <section class="hero is-info is-bold">
+    <div class="hero-body">
+      <h1 class="title is-size-2">Contact</h1>
+      <h2 class="subtitle is-size-4">連絡先はこちらです</h2>
+    </div>
+  </section>
+</template>
+</code>
+{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190208-154515.png}}
+===== ナビゲーションバーのコンポーネントを作成する =====
-作成中
+components/Navbar.vue
-だいぶ時間がかかる。
-{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190206-160055.png}}
-まだ時間がかかる。なんか、10分くらいかかった気がします。
-{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190206-160623.png}}
-  *以下を入力して、確認します
 <code>
-cd Nuxt-Vuex-FireAuth
+<template>
-yarn run dev
+  <nav class="navbar is-white" role="navigation" aria-label="main navigation">
+    <div class="navbar-brand">
+      <div class="navbar-item">NBH3</div>
+      <div class="navbar-burger" data-target="navMenu">
+        <span></span>
+        <span></span>
+        <span></span>
+      </div>
+    </div><!-- navbar-brand END -->
+    <div class="navbar-menu" id="navMenu">
+      <div class="navbar-end">
+        <nuxt-link to="/" class="navbar-item">トップ</nuxt-link>
+        <nuxt-link to="/about" class="navbar-item">NBHとは？</nuxt-link>
+        <nuxt-link to="/contact" class="navbar-item">お問い合わせ</nuxt-link>
+      </div>
+    </div><!-- navbar-menu END -->
+  </nav>
+</template>
 </code>
-いきなりエラーが出ますが、1分以内に起動しました。
-{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190206-161201.png}}
-アドレスをCtrlを押しながらクリックすると、以下のページが開きます。
-{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190206-161229.png}}
-あまりかっこよくありません。Nuxt-Vuetifyの方たちのセンスなんでしょうか。。。
-{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190206-161342.png}}
-しかし、左側のハンバーガーメニューをクリックして、Inspire　をクリックすると、ちゃんと、Inspireのページに飛びます。
-アイコンもちゃんと使用できるようです。（Vue.js＋Vuetifyにアイコンをインストールするのが面倒なので、これはうれしいです。）
-{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190206-161420.png}}
-{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190206-161455.png}}
-なお、アイコンは、MDのようです。MDのアイコンは、以下から探すことができます。
+このNavbar.vueを、layouts/default.vue内に表示するようにします。
-https://material.io/tools/icons/
-{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190206-162008.png}}
-Nuxt.jsアプリの中身を見てみます。
 layouts/default.vue
-{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190206-162439.png}}
+(変更前)
-pages/index.vue
+{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190208-182646.png}}
-{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190206-162524.png}}
+(変更後)
-.nuxt/router.js (自動生成されます。触りません。)
+{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190208-182944.png}}
-{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190206-162904.png}}
-ローカルのパソコンで扱う分（普通はCodeSandboxは使わずに、こちらですよね）には、Nuxt.jsは十分魅力的です。Vue.jsと比べて、インストールに時間がかかるのが難点ですが。
+{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190208-183008.png}}
-ちなみに、layouts/default.vueのdarkを消したり、少し変更すると、以下のようになります。
+===== ハンバーガーメニューをトグルさせる =====
-{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190208-092134.png}}
+横幅を狭くすると、画面右上にハンバーガーメニューが出てきますが、それをクリックしても何も起こりません。
-<html>
+isMenuActiveというプロパティとtoggleMenuというメソッドを定義して、ハンバーガーメニューをクリックすると、縦方向にリンクが表示されるようにします。
-<script src="https://gist.github.com/adash333/bacc2736bdcd5ce8093225234bc50147.js"></script>
-</html>
-参考：https://ja.nuxtjs.org/guide/installation/
+<code>
-{{:17.nuxt.jsのvuexでパスワード制限:pasted:20190206-154043.png}}
+<template>
+...
+<div class="navbar-burger" data-target="navMenu" @click="toggleMenu" :class="{'is-active': isMenuActive}">
+...
+<div class="navbar-menu" id="navMenu" :class="{'is-active': isMenuActive}">
+...
+</template>
-https://qiita.com/soarflat/items/06377f3b96964964a65d
+<script>
-@soarflat
+export default {
-年07月24日に更新
+  data: () => {
-Prettier 入門 ～ESLintとの違いを理解して併用する～
+    return {isMenuActive: false}
+  },
+  methods: {
+    toggleMenu () {
+      this.isMenuActive = !this.isMenuActive
+    }
+  }
+}
+</script>
+</code>
+{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190208-190151.png}}
+{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190208-190240.png}}
+  *これで、トグルするようにはなったのですが、リンク先の飛んでも、メニューが開いたままになってしまっています。
+  *そこで、『ページ遷移』（=リンクがクリックされる）したときに、メニューが閉じる（isMenuActiveプロパティがfalseになる）ようなプログラムを実装します。
+  *このときに、Vuexを用いると、コンポーネント間の"isMenuActive"の『バケツリレー』を回避することができます。
+詳細はhttps://qiita.com/isamusuzuki/items/5ec800e423a3a56ef03d#nuxtjs%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E5%8B%95%E4%BD%9C%E3%82%92%E8%AA%BF%E3%81%B9%E3%82%8Bを読んだのですが、なかなか難しく、結論からいうと、今回と関係があるのは、以下の2つのようでした。
+  *isMenuActiveの状態管理に、Vuexを使った方がよい
+  *Nuxt.jsアプリでは、<nuxt-link>経由で特定のページに移動したとき、fetch()メソッドが呼び出される
+===== Vuexストアを設定する =====
+isMenuActiveプロパティの状態（trueかfalseか）を、Vuexストアで管理します（状態管理）。
+Nuxt.jsには、デフォルトの状態でVuexが入っており、store/ディレクトリに、index.jsや、xxxx.jsを記載したりすることにより、Vuexのコードを記載します。
+『クラシックモード』と、『モジュールモード』があるらしいです。
+参考：https://ja.nuxtjs.org/guide/vuex-store/
+{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190208-191155.png}}
+store/index.js (新規作成)
+<code>
+import Vuex from 'vuex'
+const store = () => new Vuex.Store({
+  state: {
+    isMenuActive: false
+  },
+  mutations: {
+    toggleMenu (state) {
+      state.isMenuActive = !state.isMenuActive
+    },
+    resetMenu (state) {
+      state.isMenuActive = false
+    }
+  }
+})
-===== インデックスページ以外のページ（about.vueとcontact.vue）を作成 =====
+export default store
-pages/ディレクトリで、about.vueの変更と、contact.vueの新規作成を行う。
+</code>
+{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190208-191513.png}}
-<html>
+  *layouts/Navbar.vueを編集して、ハンバーガーメニューをクリックすると$storeのtoggleMenu関数を実行し、また、navbar-burgerとnavbar-menuの開閉状態をisMenuActiveプロパティで制御しておくようにします。
-<script src="https://gist.github.com/adash333/f34ebffc087acc6a150efee453667ff7.js"></script>
-</html>
-参考：https://bulma.io/documentation/components/card/
-{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190205-153803.png}}
-{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190205-154336.png}}
-あれ、、、うまくいかない。今日はここまで。。。
-https://www.npmjs.com/package/@nuxtjs/bulma
-こちらを使うのがよいのか？
-  -Add @nuxtjs/bulma dependency using yarn or npm to your project
-  -Add @nuxtjs/bulma to modules section of nuxt.config.js
-  -You will need to use postcss loader if you are not already using it.
-だそうです。
 <code>
-{
+...
-  modules: [
+<div class="navbar-burger" data-target="navMenu" @click="$store.commit('toggleMenu')" :class="{'is-active': $store.state.isMenuActive}">
-    '@nuxtjs/bulma'
+...
-  ]
+<div class="navbar-menu" id="navMenu" :class="{'is-active': $store.state.isMenuActive}">
-}
+...
 </code>
+{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190208-192256.png}}
+  *VisualStudioCodeのターミナル画面で、一度、Ctrl+C => Y => Enterで、サーバを停止したのち、再度、<wrap hi>yarn run dev</wrap>を入力し、Nuxtサーバを再起動します。この時点では、まだ、ページ遷移してもトグルは閉じません。
+{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190208-192825.png}}
+===== ページ遷移したときにトグルが閉じるようにする =====
+ページ遷移したとき、すなわち、新しいページが描画されてfetch()メソッドを呼び出されたときにトグルが閉じるように（isMenuActiveがfalseになるように）します。
+具体的には、各pages/index.vue, about.vue, contact.vueの<script>内に、以下のコードを追加します。
 <code>
+<script>
-  build: {
+export default {
-    /*
+  fetch({ store }) {
-     ** You can extend webpack config here
+    store.commit("resetMenu");
-     */
-    postcss: {
-      plugins: {
-        "postcss-preset-env": {
-          features: {
-            customProperties: false
-          }
-        }
-      }
-    },
-    extend(config, ctx) {}
   }
+};
+</script>
 </code>
+pages/index.vue
+{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190208-193344.png}}
+pages/about.vue
+{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190208-193413.png}}
+pages/contact.vue
+{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190208-193438.png}}
-{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190206-134608.png}}
+今回は以上となります。
-{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190206-134657.png}}
-{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190206-140140.png}}
+===== ソースコード =====
+ソースコード
+https://github.com/adash333/Nuxt-Bulma-Hamburger3
-==== font awesome 5について ====
+スクリーンショット
+{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190208-195135.png}}
-https://www.npmjs.com/package/@fortawesome/fontawesome-free-webfonts
+===== 今回写経させていただいたサイト =====
-{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190206-090643.png}}
+https://qiita.com/isamusuzuki/items/5ec800e423a3a56ef03d
-→ん？、https://git.io/fNCzJ　へ行ってみる
+{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190208-195326.png}}
-{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190206-090753.png}}
-→https://www.npmjs.com/package/@fortawesome/fontawesome-free　へ行ってみる
-{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190206-090843.png}}
-Weekly Downloadsが23万、、、すごい。。。
-  *Add Dependencyから、@fortawesome/fontawesome-free　をインストールする（他のはアンインストールする）
-{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190206-091117.png}}
-参考
-https://qiita.com/riversun/items/4faa56ac40071f638313
-@riversun
-年01月18日に更新
-年後に差がつくFont Awesome5 ～フロントエンド開発(ES6,Webpack4,Babel7)への導入～
-https://qiita.com/OvThAlmin/items/154e53952bc46d91d44c
-@OvThAlmin
-年10月28日に更新
-nuxt-fontawesomeを使って Nuxt.jsへFont Awesome 5を導入する
-→これがよさそうです。やってみます。
-  -Add Dependencyから、nuxt-fontawesome, @fortawesome/fontawesome-svg-core, @fortawesome/vue-fontawesome, @fortawesome/free-solid-svg-icons をインストール
-  -nuxt.config.jsに以下を追記
-<code>
-module.exports = {
- modules: [
-    'nuxt-fontawesome' //ここに追記
-  ],
-//この部分を追記
- fontawesome: {
-    imports: [
-      {
-        set: '@fortawesome/free-solid-svg-icons',
-        icons: ['fas']
-      }
-    ]
-  }
-}
-</code>
-{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190206-133640.png}}
-{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190206-133718.png}}
-{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190206-133808.png}}
-{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190206-134027.png}}
-{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190206-134129.png}}
-https://codesandbox.io/s/1xv4vwlj4
@@ 行 251: / 行 259: @@
 目次：
-前：
+前：[[17.nuxt.jsのvuexでパスワード制限:index.html|17.Nuxt.jsのvuexでパスワード制限]]
-次：
+次：[[19.nuxt.jsで画像一覧アプリ:index.html|19.Nuxt.jsで画像一覧アプリ]]