====== Nuxt.jsとBulmaでハンバーガーメニュー ======

WEBサイトのデザインとして、「レスポンシブデザイン」というものがあります。

パソコンで見るときは、メニューが左右に並んでいて、スマホで見ると、メニューが折りたたまれて、ハンバーガーのような横線３つのボタンなどになる、アレが、「レスポンシブデザイン」の代表例と言えると思います。

今回は、[[https://qiita.com/isamusuzuki/items/5ec800e423a3a56ef03d|Nuxt.jsにBulmaを組み込んだら、Vuexストアが理解できた件(@isamusuzuki 2018年05月03日に更新)]]をほぼ写経するかたちで、

<code>
パソコンでサイトを見ると、ナビゲーションバー（画面の一番上）に、メニューが横並びに表示
スマホででサイトを見ると、画面右上側にハンバーガーメニューを表示して、クリックするとメニューが縦に表示
</code>

されるようなサイトを作り、GitHub経由でNetlifyにデプロイ（アップロード）して、WEBサイトを公開します。



===== 開発環境 =====
<code>
Windows 8.1 Pro
VisualStudioCode
nvm-windows 1.1.7
node v10.14.1
npm 6.4.1
@vue/cli 3.2.1
</code>

===== Nuxt.jsアプリ（Bulma）の作成 =====
C:/vue/ フォルダに、Nuxt-Bulma-Hamburger2　アプリを作成する。

C:/vue/ フォルダをVisualStudioCodeで開き、Ctrl+@でコマンドプロンプトを開き、以下を入力

<code>
npx create-nuxt-app Nuxt-Bulma-Hamburger2
//いろいろ聞かれるが、UI flameworkで、bulmaを選択
//rendering modeはSingle Page Appを選択
</code>

{{:vue:pasted:20181202-233931.png}}

<code>
cd Nuxt-Bulma-Hamburger2
npm install
npm run dev
//下の方に出てくる、http://localhost:3000 を、Ctrlを押しながらクリック
</code>

{{:vue:pasted:20181202-234402.png}}

===== Nuxt.jsアプリ作成後のファイル構造 =====
Nuxtアプリ新規作成後のファイル構造は、以下のようになっている。

今回は、pages, components, layouts, storeの4つのフォルダの中身を編集していく。

{{:vue:pasted:20181202-235341.png}}

===== AboutページとContactページの作成 =====
pages/about.vue　（新規作成）

{{:vue:pasted:20181203-000610.png}}

pages/about.vue を新規作成すると、自動でルーティングが設定されて、localhost:3000/about に表示されます。

class="hero is-primary is-bold などは、CSSフレームワーク「Bulma」の表記方法です。\\
参考：https://bulma.io/documentation/overview/colors/

同様に、Contactページも作成する。

pages/contact.vue　（新規作成） 
{{:vue:pasted:20181203-000803.png}}

===== GitHubに登録 =====
https://github.com/にログインして、Nuxt-Bulma-Hamburger2という名前で、新規リポジトリを作成。

{{:vue:pasted:20181203-001308.png}}

上記の記載の一部にしたがって、VisualStudioCodeのコマンドプロンプトで、以下を入力します。<wrap hi>git remote add ...</wrap> のところは、それぞれのGitのアドレスを入力してください。

（以前、シークレットキーを登録したり、ログインしたりした記憶があるが、やり方は忘れてしまいました。。。）

<code>
git add .
git commit -m "make about and contact page"
//以下のgitのアドレスは、それぞれのものを入力してください
git remote add origin https://github.com/adash333/Nuxt-Bulma-Hamburger2.git
git push -u origin master
</code>

{{:vue:pasted:20181203-001513.png}}

ここまでのソースコード

https://github.com/adash333/Nuxt-Bulma-Hamburger2/tree/72d7c91a751c80f60c2e3465ca9e3189f1f6c0d3

===== ナビゲーションバーのComponentを作成 =====
Bulmaフレームワークを利用して、レスポンシブなナビゲーションバーを作成する。

コンポーネントは、名前の通り、components/xxx.vueというような名前で、components/フォルダに作成する。

components/Navbar.vue　（新規作成） 
{{:vue:pasted:20181203-002954.png}}

参考：https://bulma.io/documentation/components/navbar/

Navbarコンポーネントを、レイアウトファイルに取り付ける。

具体的には、 layouts/default.vue を以下のように変更する。

(変更前)
{{:vue:pasted:20181203-003048.png}}

(変更後)
{{:vue:pasted:20181203-003800.png}}

ブラウザの横幅を1023px以上に広げると以下のような感じになる。\\
（Navbar.vueのトップ　を　HOME　に変更した。）

{{:vue:pasted:20181203-003930.png}}

ブラウザの横幅（px, pixel）に応じて、ハンバーガーメニューが表示されたり、されなかったりするBulmaの仕様を利用しています。

https://bulma.io/documentation/components/navbar/
{{:vue:pasted:20181203-004447.png}}

Bulmaのtouch deviceとは、横幅が1023px以下とのことだそうです。

もうちょっと横幅が小さくなってからハンバーガーメニュー出してほしいのですが、やり方は分かりませんでした。

https://bulma.io/documentation/overview/responsiveness/
{{:vue:pasted:20181203-004335.png}}

ここまでのソースコード（変更点）：
https://github.com/adash333/Nuxt-Bulma-Hamburger2/commit/87ad1cfd1126d09cb0d8a6590ada0fa9badc14a9

===== ハンバーガーメニューをトグル（クリックするとメニューを表示）するようにする =====

components/Navbar.vue

<div class="navbar-burger">に、<wrap hi>@click="toggleMenu"</wrap>を追加して、クリックしたらメニューが出てくる（toggle）するようにtoggleMenu関数を定義。

<div class="navbar-burger">と、<div class="navbar-menu">に、<wrap hi>:class="{'is-active': isMenuActive}"</wrap>を追加。

これで、ブラウザの横幅が1023px以下のときにハンバーガーメニューが出て、それをクリックすると、メニューが表示されるようになる。

{{:vue:pasted:20181203-004903.png}}

{{:vue:pasted:20181203-005056.png}}

しかし、この時点では、メニューの中のリンク先をクリックしても、トグルされたメニューが開いたままになってしまって閉じてくれない。

そこで、Vuexという状態管理システムを用いて、リンク先をクリックすると、自動的にトグルが閉じるようにする。

ここまでのソースコード（変更点）：https://github.com/adash333/Nuxt-Bulma-Hamburger2/commit/7faf1f2870f9e35a1ecd65025a38f9fe4efb2eb7

===== Vuexストアを設定してトグルONとOFFをstoreに定義 =====

Vuexシステムを利用するために、store/フォルダ下に、新たにindex.jsを作成し、以下のように記載する。

store/index.js　（新規作成）
{{:vue:pasted:20181203-005621.png}}

storeに、isMenuActive (True or False)の状態を定義しておいて、

  -ハンバーガーメニューをクリックしたらON、OFF
  -リンクをクリックしてページ遷移したらOFF
となるようにしておきます。

components/Navbar.vue

<wrap hi><div class="navbar-burger"></wrap>を、以下のように変更
<code>
//変更前
@click="toggleMenu" :class="{'is-active': isMenuActive}"
//変更後
@click="$store.commit('toggleMenu')" :class="{'is-active': $store.state.isMenuActive}"
</code>

<wrap hi><div class="navbar-menu"></wrap>を、以下のように変更
<code>
//変更前
:class="{'is-active': isMenuActive}"
//変更後
:class="{'is-active': $store.state.isMenuActive}"
</code>

また、Navbar.vueの<script></script>の中身は全て削除する。
{{:vue:pasted:20181203-010612.png}}

===== Vuexについて =====
状態管理システムVuexの構造についての絵を、以下に貼り付けておきます。

https://vuex.vuejs.org/ja/
{{:vue:pasted:20181203-005913.png}}

データの流れが、Vue Components => Actions => Mutations => State => Vue Components　というように一方向らしいです。。。

大事なことは、<wrap hi>状態をStateに定義</wrap>しておき、MutationによってのみStateは変更される、ということらしいです。。。

<nuxt-link>経由で特定のページに移動したときのNuxt.jsアプリの動作として、<wrap hi>fetch()メソッドを呼び出す。</wrap>というものがあるとのことなので、indexページ、aboutページ、contactページの<script>のところに、以下のコードを追加します。

<code>
<script>
export default {
  fetch ({store}) {
    store.commit('resetMenu')
  }
}
</script>
</code>

stateとかstoreとか言葉がたくさん出てきて間違えやすいので、タイプミスに注意です。

pages/index.vue (変更後)

一度、ターミナル画面でCtrl+Cでサーバを停止し、もう一度、npm run devを入力。

{{:vue:pasted:20181203-010745.png}}

ちゃんとうまくいった。

pages/about.vue (変更後) 
{{:vue:pasted:20181203-010847.png}}

pages/contact.vue (変更後) 
{{:vue:pasted:20181203-010935.png}}

他のページへ移動しても、ちゃんとハンバーガーメニューは閉じてくれた。

ここまでのソースコード（変更点）：https://github.com/adash333/Nuxt-Bulma-Hamburger2/commit/182c2f27a8980bb12657e5022f04b2cc0338e0ae

===== NuxtサイトをNetlifyにデプロイ =====
公式サイトの通りに、NetlifyからGitHub経由でデプロイする。

https://ja.nuxtjs.org/faq/netlify-deployment/
{{:vue:pasted:20181203-011209.png}}

Netlifyでの画面は以下のようになる。
{{:vue:pasted:20181203-011533.png}}

===== Nuxt.jsに関するリンク =====
https://luftgarden.work/tut-nuxt-dog-part1/
 2018年5月3日
Nuxt.js で簡単な画像一覧アプリを作成する – Part.1

===== 出来上がったサイトとソースコード =====

出来上がったサイト

https://fervent-bardeen-1c8ad6.netlify.com/

{{:vue:pasted:20181203-011504.png}}

幅を狭くすると、以下のようにハンバーガーメニューが出て、クリックするとリンク先が表示される。

{{:vue:pasted:20181203-012026.png}}

ソースコード

https://github.com/adash333/Nuxt-Bulma-Hamburger2

===== Vuexについて理解するためのお勧めの本 =====

Vuex、正直難しいです。昔、私はReduxは挫折しました。しかし、以下の本を最初から読んでいくと、なんとなく、Vuexが少しわかった気にはなれます。

Vue.jsのコードを理解するためにも、以下の本は非常におすすめです。@vue/cli 3対応です。

<html>
<iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=i-doctor-22&language=ja_JP&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=B07J6FP6NQ&linkId=3eae8e6d0a6a2c6ef99ae93d78979e89"></iframe>
</html>
===== 写経元サイト =====
https://qiita.com/isamusuzuki/items/5ec800e423a3a56ef03d