Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vue.jsの機能を使って色々作ってみた
Search
ls_pr
February 17, 2020
Programming
0
380
Vue.jsの機能を使って色々作ってみた
ls_pr
February 17, 2020
Tweet
Share
More Decks by ls_pr
See All by ls_pr
戦場で生き抜く 炎上案件の耐え方
ls_pr
0
180
自作PCのすすめ
ls_pr
0
110
ツボを押さえたWFの作り方
ls_pr
0
99
Linuxのちょこっと調べ
ls_pr
0
98
色々な色の話~今日から使える簡単配色テクニック3つ~
ls_pr
0
210
ゼロから始めるフロントエンドモジュール開発についてあれこれ
ls_pr
0
88
ejsのすすめ
ls_pr
0
130
JSにおける正規表現
ls_pr
0
100
NuxtではじめるVue.js
ls_pr
0
260
Other Decks in Programming
See All in Programming
php-fpm がリクエスト処理する仕組みを追う / Tracing-How-php-fpm-Handles-Requests
shin1x1
4
780
Coding Experience Cpp vs Csharp - meetup app osaka@9
harukasao
0
110
eBPF Updates (March 2025)
kentatada
0
130
コンテナでLambdaをデプロイするときに知っておきたかったこと
_takahash
0
130
AHC 044 混合整数計画ソルバー解法
kiri8128
0
290
remix + cloudflare workers (DO) docker上でいい感じに開発する
yoshidatomoaki
0
110
CQRS+ES勉強会#1
rechellatek
0
380
Devin , 正しい付き合い方と使い方 / Living and Working with Devin
yukinagae
1
500
RailsでCQRS/ESをやってみたきづき
suzukimar
2
1.5k
AIエージェントを活用したアプリ開発手法の模索
kumamotone
1
740
‘무차별 LGTM~👍’만 외치던 우리가 ‘고봉밥 코드 리뷰’를?
hannah0731
0
520
本当だってば!俺もTRICK 2022に入賞してたんだってば!
jinroq
0
200
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
15
1.1k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
What's in a price? How to price your products and services
michaelherold
244
12k
Music & Morning Musume
bryan
46
6.4k
Building a Modern Day E-commerce SEO Strategy
aleyda
39
7.2k
Designing Experiences People Love
moore
140
23k
KATA
mclloyd
29
14k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
460
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
31
4.7k
GraphQLの誤解/rethinking-graphql
sonatard
69
10k
Transcript
Vue.jsの機能を使って 色々作ってみた (株)ロジカルスタジオ 土谷 隆秀
当発表の概要 ・Vue.jsは非常に書きやすいフレームワークである ・ディレクティブ、ウォッチャー、バインディング等、 便利な機能が用意されている ・Vue.jsの機能を使っていろんなものを作ってみたので、 当発表ではそれをお見せします
自己紹介 名前:土谷 隆秀 所属:(株)ロジカルスタジオ 職業:コーダー / ブログライター / 勉強会スタッフ Javascript歴:約半年
Vue.js歴:3ヶ月 弊社ブログにて記事を書いています(T.K) http://develop.logical-studio.com/
ハンバーガーメニュー @clickの使用とClassのバインディング
ハンバーガーメニューとは ボタンを押すと展開するナビゲーションメニュー スマホサイトなどでよく使われる https://logical-studio.com/
ハンバーガーメニューの設計 1.ボタン、メニュー、オーバーレイを作る(略) 2.@clickで、ボタンをクリックするとメニューが出るようにする 3.CSSにtransitionを追記し、なめらかに動くようにする https://codepen.io/ls_pr/pen/zYxLRwm
2.@clickで、ボタンをクリックするとメニューが 出るようにする ・pタグ(ボタン)を押すことで、 isOpenの真偽値を切り替える 記述: @click=“isOpen=!isOpen” ・isOpen=trueの時、 #wrapにクラス”active”をつける 記述: :class=“{
active : isOpen }”
2.@clickで、ボタンをクリックするとメニューが 出るようにする CSSで、 ・表示前:activeをつけずに記述 ・表示後:activeをつけて記述 表示方法はお好みで 例:右からスライド、中央から拡大、など ※フェードインの場合は注意(後述) v-ifを使うやり方もあるが省略
3.CSSにtransitionを追記し、なめらかに動くよ うにする オーバーレイ部分はフェードインする ▪問題点 CSSに #hoge{opacity:0;} .active #hoge{opacity:1;} と書くと、要素は残ったまま →要素の下にあるものを操作できない
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 同様にモーダルウインドウも作成可能
スクロール量により状態が変わるヘッダー mountedの使用
作りたいもの サンプルをご覧ください https://codepen.io/ls_pr/pen/eYmQgpr
設計 1.変化前の状態をマークアップ・CSSを記述(略) 2.mountedでイベントリスナーを追加し、スクロール位置を取得 3.変化後の状態をCSSで記述
2.mountedでイベントリスナーを追加し、 スクロール位置を取得 mouted:DOMが作成された後一度実行される この時点でイベントリスナーを追加 •右のjsの解説 ・mountedで、スクロール/ロードされた時点で 関数”setCoordinate”を実行するよう設定 ・setCoordinate: スクロール位置をcoordinateYに代入する関数
2.mountedでイベントリスナーを追加し、 スクロール位置を取得 coordinateY(=スクロール位置)が40より大の時 #appにクラス”fixed”を追加
3.変化後の状態をCSSで記述 ネスト化しやすい https://codepen.io/ls_pr/pen/eYmQgpr
入力内容によってエラーメッセージを出す computedの使用
作りたいもの •フォーム内の文字が10文字以内の時 エラーメッセージなし •フォーム内の文字が11文字より多い時 エラーメッセージを出す https://codepen.io/ls_pr/pen/MWYxgrW
設計 1.フォームとエラーメッセージ表示箇所を作成 2.computedを用いてメッセージの内容を作成 3.マスタッシュ({{ }})でエラーメッセージを表示 4.エラー時にフォームのcssを変える
1.フォームとエラーメッセージ表示箇所を作 成 input内の値を、inputTextとバインディング
2.computedを用いてメッセージの内容を作 成 ▪computed:算出プロパティ methodsと違い、常に値が更新される •右のjsの解説 ・inputTextが10文字より多い時 errorMessage=’10文字より多いです’ ・inputTextが10文字以内の時 errorMessage=‘’
3.マスタッシュ({{ }})でエラーメッセージを表 示 {{ errorMessage }}
4.エラー時にフォームのcssを変える errorMessageがある(errorMessage !== ‘’)の時 クラスをつけ、スタイルを変更 https://codepen.io/ls_pr/pen/MWYxgrW
以上です ありがとうございました