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 - STEP01

お問い合わせ内容を以下の中から選択してください。

お仕事のご依頼
採用のお問い合わせ
その他お問い合わせ

CONTACT - STEP02

以下の項目よりご依頼内容を選択してください。

ブランディングに関するお問い合わせ
ディレクションに関するお問い合わせ
制作全般に関するお問い合わせ
デザインに関するお問い合わせ
開発に関するお問い合わせ

CONTACT - STEP03

以下よりご予算を選択してください。

APPROXIMATE BUDGET
0 yen
0 yen
~
2,000,000 yen
~
4,000,000 yen
~
6,000,000 yen
~
8,000,000 yen
~
10,000,000 yen

CONTACT - STEP04

以下よりプロジェクトの公開日を選択してください。

ESTIMATED TIMELINE
0 month
0 month
~
1 month
~
2 month
~
3 month
~
4 month
~
5 month
~
6 month

CONTACT - STEP05

以下のフォームよりプロジェクトの情報を入力し、
プライバシーポリシーをご確認の上、確認画面へ進んでください。

NAME ✳︎
COMPANY ✳︎
E-MAIL ✳︎
TEL ✳︎
INQURY CONTENT ✳︎

CONTACT - STEP02

以下の項目より職種を選択してください。

ディレクター
デザイナー
ディベロッパー
その他

CONTACT - STEP03

以下よりご経験年数を選択してください。

YEARS OF EXPERIENCE
1 year
0 year
~
1 year
~
2 year
~
3 year
~
4 year
~
5 year
~
6 year
~
7 year
~
8 year
~
9 year
~
10 year

CONTACT - STEP04

以下の項目よりご希望の雇用形態を選択してください。

正社員
契約社員

CONTACT - STEP05

以下のフォームより志望動機をご記入ください。

NAME ✳︎
ORGANIZATION ✳︎
E-MAIL ✳︎
TEL ✳︎
URL ✳︎
INQURY CONTENT ✳︎

CONTACT - STEP02

以下のフォームより情報を入力し、
プライバシーポリシーをご確認の上、確認画面へ進んでください。

NAME ✳︎
ORGANIZATION ✳︎
E-MAIL ✳︎
TEL ✳︎
INQURY CONTENT ✳︎
STEP01

C L O S E

S U B M I T

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
Apr.23.2018

2018年 G.W.の休暇のお知らせ

by Mami Ohtani

CASE
Mar.19.2020

成果のための「輪」を創る。コーポレートサイト、採用ブランディングの舞台裏

by UNIEL

BLOG
Nov.30.2017

コードを書くときに考えていること

by Staff

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