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
420
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
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
8
3.4k
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
110
AI時代のUIはどこへ行く?
yusukebe
17
8.7k
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
110
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
110
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
2k
デザイナーが Androidエンジニアに 挑戦してみた
874wokiite
0
280
rage against annotate_predecessor
junk0612
0
160
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
270
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
140
旅行プランAIエージェント開発の裏側
ippo012
2
890
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
GraphQLとの向き合い方2022年版
quramy
49
14k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
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
以上です ありがとうございました