差分

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

--- vue:nuxt.jsとbulmaでハンバーガーメニュー [2018/12/02] – [Nuxt.jsアプリ（Bulma）の作成] adash333
+++ vue:nuxt.jsとbulmaでハンバーガーメニュー [2019/01/01] (現在) – [出来上がったサイトとソースコード] adash333
@@ 行 43: / 行 43: @@
 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/
+年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