Vue.jsの機能を使って色々作ってみた

1. Vue.jsの機能を使って 色々作ってみた （株）ロジカルスタジオ 土谷 隆秀
2. 当発表の概要 ・Vue.jsは非常に書きやすいフレームワークである ・ディレクティブ、ウォッチャー、バインディング等、 便利な機能が用意されている ・Vue.jsの機能を使っていろんなものを作ってみたので、 当発表ではそれをお見せします
3. 自己紹介 名前:土谷 隆秀 所属:(株)ロジカルスタジオ 職業:コーダー / ブログライター / 勉強会スタッフ Javascript歴:約半年 Vue.js歴：3ヶ月 弊社ブログにて記事を書いています(T.K) http://develop.logical-studio.com/
4. ハンバーガーメニュー @clickの使用とClassのバインディング
5. ハンバーガーメニューとは ボタンを押すと展開するナビゲーションメニュー スマホサイトなどでよく使われる https://logical-studio.com/
6. ハンバーガーメニューの設計 1.ボタン、メニュー、オーバーレイを作る（略） 2.@clickで、ボタンをクリックするとメニューが出るようにする 3.CSSにtransitionを追記し、なめらかに動くようにする https://codepen.io/ls_pr/pen/zYxLRwm
7. 2.@clickで、ボタンをクリックするとメニューが 出るようにする ・pタグ（ボタン）を押すことで、 isOpenの真偽値を切り替える 記述： @click=“isOpen=!isOpen” ・isOpen=trueの時、 #wrapにクラス”active”をつける 記述： :class=“{ active : isOpen }”
8. 2.@clickで、ボタンをクリックするとメニューが 出るようにする CSSで、 ・表示前：activeをつけずに記述 ・表示後：activeをつけて記述 表示方法はお好みで 例：右からスライド、中央から拡大、など ※フェードインの場合は注意（後述） v-ifを使うやり方もあるが省略
9. 3.CSSにtransitionを追記し、なめらかに動くよ うにする オーバーレイ部分はフェードインする ▪問題点 CSSに #hoge{opacity:0;} .active #hoge{opacity:1;} と書くと、要素は残ったまま →要素の下にあるものを操作できない
10. 3.CSSにtransitionを追記し、なめらかに動くよ うにする – 完成 ▪解決法 •CSS 表示前：{width:0;height:0;opacity:0;} 表示後：{width:100%;height:100%;opacity:1;} •CSS – transition 右図を参照 https://codepen.io/ls_pr/pen/zYxLRwm 同様にモーダルウインドウも作成可能
11. スクロール量により状態が変わるヘッダー mountedの使用
12. 作りたいもの サンプルをご覧ください https://codepen.io/ls_pr/pen/eYmQgpr
13. 設計 １．変化前の状態をマークアップ・CSSを記述（略） ２．mountedでイベントリスナーを追加し、スクロール位置を取得 ３．変化後の状態をCSSで記述
14. ２．mountedでイベントリスナーを追加し、 スクロール位置を取得 mouted:DOMが作成された後一度実行される この時点でイベントリスナーを追加 •右のjsの解説 ・mountedで、スクロール/ロードされた時点で 関数”setCoordinate”を実行するよう設定 ・setCoordinate： スクロール位置をcoordinateYに代入する関数
15. ２．mountedでイベントリスナーを追加し、 スクロール位置を取得 coordinateY(=スクロール位置)が40より大の時 #appにクラス”fixed”を追加
16. ３．変化後の状態をCSSで記述 ネスト化しやすい https://codepen.io/ls_pr/pen/eYmQgpr
17. 入力内容によってエラーメッセージを出す computedの使用
18. 作りたいもの •フォーム内の文字が10文字以内の時 エラーメッセージなし •フォーム内の文字が11文字より多い時 エラーメッセージを出す https://codepen.io/ls_pr/pen/MWYxgrW
19. 設計 1．フォームとエラーメッセージ表示箇所を作成 2．computedを用いてメッセージの内容を作成 3．マスタッシュ（{{ }}）でエラーメッセージを表示 4．エラー時にフォームのcssを変える
20. 1．フォームとエラーメッセージ表示箇所を作 成 input内の値を、inputTextとバインディング
21. 2．computedを用いてメッセージの内容を作 成 ▪computed:算出プロパティ methodsと違い、常に値が更新される •右のjsの解説 ・inputTextが10文字より多い時 errorMessage=’10文字より多いです’ ・inputTextが10文字以内の時 errorMessage=‘’
22. 3．マスタッシュ（{{ }}）でエラーメッセージを表 示 {{ errorMessage }}
23. 4．エラー時にフォームのcssを変える errorMessageがある（errorMessage !== ‘’）の時 クラスをつけ、スタイルを変更 https://codepen.io/ls_pr/pen/MWYxgrW
24. 以上です ありがとうございました