L O A D I N G

SNS

MENU

CLOSE

0422-70-3802

C O N T A C T

1
EN

HELLO!

JP

CONTACT

お問い合わせ内容を入力し、プライバシーポリシーをご確認の上、NEXT STEPSUBMITボタンより確認画面へ進んでください。

  • ✳︎マークは必須項目となります。
  • お問い合わせの内容に合わせ、詳細をご連絡ください。
  • 営業日、三日以内に担当者より返信させていただきます。
  • 営業目的や人材紹介目的の場合、返信を控えさせていただきます。

B A C K

✳︎
お問い合わせ内容を選択してください
お仕事のご依頼
採用のお問い合わせ
その他お問い合わせ
ステイフルライフストアへのお問い合わせ
✳︎
項目を選択してください
ブランディング依頼
ウェブ制作依頼
グラフィックデザイン依頼
その他スポットでのご依頼
✳︎
希望職種を選択してください
エンジニア職でのご応募(経験者のみ)
デザイナー職でのご応募(経験者のみ)
ディレクター職でのご応募(経験者のみ)
総務職でのご応募(経験者のみ)
ステイフルライフストアスタッフのご応募
この項目は入力できません
✳︎
✳︎
✳︎
✳︎
プライバシーポリシーに同意しました。
  • STEP01
  • STEP02
  • STEP03

C L O S E

B A C K

S U B M I T

N E X T S T E P

CONTACT COMPLETE

お問い合わせありがとうございます。
お問い合わせ内容を確認させていただき次第、担当者より返信させていただきます。

THANK YOU
CLOSE

NEWS

BLOG Jun.16.2017

Vue.jsでインタラクション

by Staff

SHARE

最近、プロモーションサイトのような小規模のサイトでもVue.jsを使って書いてみたのですが、表現の部分でもいい感じに使うことができたので、感想をまとめました。(あくまで個人の見解です)

Vue.jsのいいところ

導入する敷居が低い

Vue.jsはコードを読み込んだらすぐに試すことができます。CDNから読み込んでもOKです。

webpackを入れてコンパイルしたりする必要もなく、試してみようと思えばすぐに始めることができます。

他のライブラリと組み合わせやすい

Vue.jsはViewの部分にフォーカスした作りになっているので、他のライブラリと併用することがとても簡単です。

たとえばAjaxをするのに、jQueryを使っても良いし、superagentやaxiosを使っても良いですし、TweenMaxや、Create.jsなどのアニメーションライブラリをあわせて使うことも簡単にできました。

transition

Vue.jsにはtransitionというコンポーネントがあり、これを使うとDOMの変更を監視して、CSSのtransitionに応じてクラスを付け替えてくれます。

なので、自分でDOMの状態の管理を、しなくて済むので結構楽。要素の出現、削除とかのアニメーションがすごくやりやすいです。

どうやって覚えた?

Code Gridさんの記事(https://app.codegrid.net/entry/2016-vue-1)を一通りやってみた後は、公式ドキュメントを見ながら使い方を覚えました。

日本語のドキュメントは、どのフレームワークよりも情報がまとまっていてわかりやすい気がします。

簡単に試してみる

お試しならCodePenでCDN読み込みすれば、簡単に試せます。

今回はスクロールの値をとって、アニメーションさせてみました。

何かの入力(スクロールや、ホイール、マウスカーソル)の値をうまく管理しながら実装ができるので、インタラクションのあるものを作る時にも向いているなと感じました。

今回は小さく使う方法でしたが、vuexとvue-routerをつかってSPAサイトを作ったりとかも他のフレームワークと比べるとすんなりとできた(個人の感想です)ので、もし良ければ使ってみてください。

by Staff

SHARE

OTHER ARTICLES

TOPIC
Dec.18.2017

年末年始休暇のお知らせ

by Staff

TOPIC
Dec.26.2018

年末年始休暇のお知らせ

by Mami Ohtani

BLOG
Mar.05.2020

Awwwardsカンファレンスから掘り下げる、文化によって異なる認識

by Daisuke Ishiyama

SCROLL TO
CLICK TO
N E W S   A L L
TAP TO NEWS ALL