Tweet
Tweet

Slide 1

Slide 1 text

Vue.jsの機能を使って 色々作ってみた （株）ロジカルスタジオ 土谷 隆秀

Slide 2

Slide 2 text

当発表の概要 ・Vue.jsは非常に書きやすいフレームワークである ・ディレクティブ、ウォッチャー、バインディング等、 便利な機能が用意されている ・Vue.jsの機能を使っていろんなものを作ってみたので、 当発表ではそれをお見せします

Slide 3

Slide 3 text

自己紹介 名前:土谷 隆秀 所属:(株)ロジカルスタジオ 職業:コーダー / ブログライター / 勉強会スタッフ Javascript歴:約半年 Vue.js歴：3ヶ月 弊社ブログにて記事を書いています(T.K) http://develop.logical-studio.com/

Slide 4

Slide 4 text

ハンバーガーメニュー @clickの使用とClassのバインディング

Slide 5

Slide 5 text

ハンバーガーメニューとは ボタンを押すと展開するナビゲーションメニュー スマホサイトなどでよく使われる https://logical-studio.com/

Slide 6

Slide 6 text

ハンバーガーメニューの設計 1.ボタン、メニュー、オーバーレイを作る（略） 2.@clickで、ボタンをクリックするとメニューが出るようにする 3.CSSにtransitionを追記し、なめらかに動くようにする https://codepen.io/ls_pr/pen/zYxLRwm

Slide 7

Slide 7 text

2.@clickで、ボタンをクリックするとメニューが 出るようにする ・pタグ（ボタン）を押すことで、 isOpenの真偽値を切り替える 記述： @click=“isOpen=!isOpen” ・isOpen=trueの時、 #wrapにクラス”active”をつける 記述： :class=“{ active : isOpen }”

Slide 8

Slide 8 text

2.@clickで、ボタンをクリックするとメニューが 出るようにする CSSで、 ・表示前：activeをつけずに記述 ・表示後：activeをつけて記述 表示方法はお好みで 例：右からスライド、中央から拡大、など ※フェードインの場合は注意（後述） v-ifを使うやり方もあるが省略

Slide 9

Slide 9 text

3.CSSにtransitionを追記し、なめらかに動くよ うにする オーバーレイ部分はフェードインする ■問題点 CSSに #hoge{opacity:0;} .active #hoge{opacity:1;} と書くと、要素は残ったまま →要素の下にあるものを操作できない

Slide 10

Slide 10 text

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 同様にモーダルウインドウも作成可能

Slide 11

Slide 11 text

スクロール量により状態が変わるヘッダー mountedの使用

Slide 12

Slide 12 text

作りたいもの サンプルをご覧ください https://codepen.io/ls_pr/pen/eYmQgpr

Slide 13

Slide 13 text

設計 １．変化前の状態をマークアップ・CSSを記述（略） ２．mountedでイベントリスナーを追加し、スクロール位置を取得 ３．変化後の状態をCSSで記述

Slide 14

Slide 14 text

２．mountedでイベントリスナーを追加し、 スクロール位置を取得 mouted:DOMが作成された後一度実行される この時点でイベントリスナーを追加 ●右のjsの解説 ・mountedで、スクロール/ロードされた時点で 関数”setCoordinate”を実行するよう設定 ・setCoordinate： スクロール位置をcoordinateYに代入する関数

Slide 15

Slide 15 text

２．mountedでイベントリスナーを追加し、 スクロール位置を取得 coordinateY(=スクロール位置)が40より大の時 #appにクラス”fixed”を追加

Slide 16

Slide 16 text

３．変化後の状態をCSSで記述 ネスト化しやすい https://codepen.io/ls_pr/pen/eYmQgpr

Slide 17

Slide 17 text

入力内容によってエラーメッセージを出す computedの使用

Slide 18

Slide 18 text

作りたいもの ●フォーム内の文字が10文字以内の時 エラーメッセージなし ●フォーム内の文字が11文字より多い時 エラーメッセージを出す https://codepen.io/ls_pr/pen/MWYxgrW

Slide 19

Slide 19 text

設計 1．フォームとエラーメッセージ表示箇所を作成 2．computedを用いてメッセージの内容を作成 3．マスタッシュ（{{ }}）でエラーメッセージを表示 4．エラー時にフォームのcssを変える

Slide 20

Slide 20 text

1．フォームとエラーメッセージ表示箇所を作 成 input内の値を、inputTextとバインディング

Slide 21

Slide 21 text

2．computedを用いてメッセージの内容を作 成 ■computed:算出プロパティ methodsと違い、常に値が更新される ●右のjsの解説 ・inputTextが10文字より多い時 errorMessage=’10文字より多いです’ ・inputTextが10文字以内の時 errorMessage=‘’

Slide 22

Slide 22 text

3．マスタッシュ（{{ }}）でエラーメッセージを表 示 {{ errorMessage }}

Slide 23

Slide 23 text

4．エラー時にフォームのcssを変える errorMessageがある（errorMessage !== ‘’）の時 クラスをつけ、スタイルを変更 https://codepen.io/ls_pr/pen/MWYxgrW

Slide 24

Slide 24 text

以上です ありがとうございました