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
410
Vue.jsの機能を使って色々作ってみた
ls_pr
February 17, 2020
Tweet
Share
More Decks by ls_pr
See All by ls_pr
戦場で生き抜く 炎上案件の耐え方
ls_pr
0
200
自作PCのすすめ
ls_pr
0
130
ツボを押さえたWFの作り方
ls_pr
0
120
Linuxのちょこっと調べ
ls_pr
0
120
色々な色の話~今日から使える簡単配色テクニック3つ~
ls_pr
0
230
ゼロから始めるフロントエンドモジュール開発についてあれこれ
ls_pr
0
120
ejsのすすめ
ls_pr
0
150
JSにおける正規表現
ls_pr
0
130
NuxtではじめるVue.js
ls_pr
0
280
Other Decks in Programming
See All in Programming
CSC305 Summer Lecture 12
javiergs
PRO
0
130
Claude Codeで挑むOSSコントリビュート
eycjur
0
190
フロントエンドのmonorepo化と責務分離のリアーキテクト
kajitack
2
160
OSS開発者という働き方
andpad
5
1.6k
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
240
パスタの技術
yusukebe
1
560
UbieのAIパートナーを支えるコンテキストエンジニアリング実践
syucream
2
800
AIエージェント開発、DevOps and LLMOps
ymd65536
1
370
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
3
1k
TanStack DB ~状態管理の新しい考え方~
bmthd
2
410
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
430
Honoアップデート 2025年夏
yusukebe
1
900
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Cult of Friendly URLs
andyhume
79
6.6k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
11
1.1k
Designing for humans not robots
tammielis
253
25k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Building an army of robots
kneath
306
46k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
185
54k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
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
以上です ありがとうございました