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
400
Vue.jsの機能を使って色々作ってみた
ls_pr
February 17, 2020
Tweet
Share
More Decks by ls_pr
See All by ls_pr
戦場で生き抜く 炎上案件の耐え方
ls_pr
0
190
自作PCのすすめ
ls_pr
0
120
ツボを押さえたWFの作り方
ls_pr
0
110
Linuxのちょこっと調べ
ls_pr
0
120
色々な色の話~今日から使える簡単配色テクニック3つ~
ls_pr
0
230
ゼロから始めるフロントエンドモジュール開発についてあれこれ
ls_pr
0
110
ejsのすすめ
ls_pr
0
140
JSにおける正規表現
ls_pr
0
120
NuxtではじめるVue.js
ls_pr
0
270
Other Decks in Programming
See All in Programming
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
140
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
320
CDK引数設計道場100本ノック
badmintoncryer
2
480
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
12
3.7k
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
1.1k
What's new in AppKit on macOS 26
1024jp
0
150
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
7.1k
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
530
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
0
120
ニーリーにおけるプロダクトエンジニア
nealle
0
950
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
350
PipeCDのプラグイン化で目指すところ
warashi
1
300
Featured
See All Featured
Fireside Chat
paigeccino
37
3.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
How STYLIGHT went responsive
nonsquared
100
5.6k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
990
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
282
13k
Facilitating Awesome Meetings
lara
54
6.5k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
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
以上です ありがとうございました