公開日時：2022.06.22
Vue.jsを使ってみよう！
こんにちは！
最近寝るのが遅く昼ごろに起きがちなGlobal Web Designの福田です(笑)
私はWeb制作の勉強をはじめてから、昨年の4月までずっとjQueryを使っていましたが
「jQueryよりも便利なJavaScriptはないだろうか？」
と思っていました。
そのとき見つけたのがVue.jsというJavaScriptフレームワークでした。
それからはWeb制作はすべてVue.jsでJavaScriptを構築していて、とても扱いやすく便利なフレームワークだなと思っています！
そこで今回はVue.jsについてご紹介していきます！
目次
Vue.jsとは
Vue.jsは、JavaScriptフレームワークの1つになります。
JavaScriptはほぼ全てのブラウザで動くプログラミングで、フロントエンドアプリケーションの開発でも使用されています。
JavaScriptフレームワークで最も有名なのがjQueryですね。
jQueryは導入もしやすくて使っている方も多いのではないでしょうか？
しかし、jQueryはDOM操作を自分で行うという弱点があります。
最近は、WEBページを偏移せずに1つのページで処理を完結させる「Single Page Application」などのフロントエンド開発が主流になり、jQureyの弱点が顕著化しています。
そこで登場したのがVue.jsになります。
Vue.jsはDOM操作を自動化してくれたり、効率良くフロントエンドの開発ができるようになっています。
Vue.jsのメリット
ここからはVue.jsのメリットをご紹介していきます。
Vue.jsのメリットは
- 学習コストが低い
- 拡張性が高い
- 再利用できるコンポーネント
- データを同期できる
になります。
学習コストが低い
JavaScriptフレームワークは専用の書き方を覚える必要がありますが、Vue.jsではシンプルに設計されているため、とても覚えやすいです。
書き方もHTMLに似た書きかたで非常に扱いやすいです。
Vue.jsは国内でも多く使われているので、学習しやすい環境が整っていると言えるでしょう。
また公式ドキュメントもあるため気になる方は、まず確認してみるのが良いでしょう。
拡張性が高い
他のJavaScriptフレームワーク(React、Angular)などは、中規模以上を想定したフレームワークですが、Vue.jsはシンプルに設計されているため、さまざまな規模の開発を行うことができます。
また既存のプロジェクトの一部にも適用できるため、途中から導入をすることもできます。
再利用できるコンポーネント
コンポーネントとは、HTMLの一部分を切り取って、その内容を簡単に呼び出せる部品になります。
コンポーネントは、複数のモーダルウインドウやアコーディオンメニューなどを作成するときにとても使いやすくHTMLのコード量を減らすことができます。
コンポーネントについてはまた別記事にてご紹介していきます。
データを同期できる
Vue.jsはHTML要素に特別な属性を付けることによって、JavaScriptのデータとひもづけができます。
データと対象をひもづけし、どちらかに変更があればもう片方へ自動的に反映させる仕組みを「データバインディング」といいます。
Vue.jsは要素がお互いに更新しある「双方向データバインディング」に対応しています。
そのため同期作業が自動化されて、開発の効率がよくなります。
Vue.jsでハンバーガメニューを作ってみる！
ここからはVue.jsでハンバーガーメニューを実装していきます。
CSSとJavascriptでハンバーガーメニューを実装しよう!の記事からコードを引用して書いていきます。
<body>
<header id="header">
<div class="header-area">
<h1>ロゴ</h1>
<div class="hamburger" @click="hamburger = !hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
<ul class="slide-menu" :class="{active: hamburger}">
<li>メニュー</li>
<li>メニュー2</li>
<li>メニュー3</li>
<li>メニュー4</li>
</ul>
</header>
<script src="https://unpkg.com/vue@next"></script>
<script src="js/script.js"></script>
</body>
body{
overflow-x: hidden;
}
.header-area{
display: flex;
justify-content: space-between;
height: 65px;
padding: 0 20px;
align-items: center;
}
.hamburger{
width: 40px;
height: 25px;
position: relative;
}
.hamburger span{
position: absolute;
width: 100%;
height: 1px;
background-color: blue;
transition: .5s;/* 追記 */
}
.hamburger span:first-of-type{/* ハンバーガーメニューの1番目の線 */
top: 0;
}
.hamburger span:nth-of-type(2){/* ハンバーガーメニューの2番目の線 */
top: 50%;
}
.hamburger span:last-of-type{/* ハンバーガーメニューの3番目の線 */
top: 100%;
}
.slide-menu{
background-color: rgba(0, 0, 0, .8);
position: fixed;
top: 65px;
width: 100%;
left: 0;
transform: translateX(100%);
transition: .5s;/* 追記 */
}
.slide-menu li{
color: #fff;
line-height: 400%;
text-align: center;
}
.hamburger.active span:first-of-type{/* ハンバーガーメニューの1番目の線 */
top: 50%;
transform: rotate(45deg);
}
.hamburger.active span:nth-of-type(2){/* ハンバーガーメニューの2番目の線 */
opacity: 0;/* 透明にする */
}
.hamburger.active span:last-of-type{/* ハンバーガーメニューの3番目の線 */
top: 50%;
transform: rotate(-45deg);
}
.slide-menu.active{
transform: translateX(0);
}
const header = Vue.createApp({
data() {
return {
hamburger: false,
}
},
})
header.mount('#header')
HTMLの「<script src=”https://unpkg.com/vue@next”></script>」でVue.jsを読み込んでいます。
JavaScriptの
const header = Vue.createApp({
})
header.mount('#header')
でVue.jsのコアを宣言しています。
「data(){}」とはデータプロパティで、数値、文字列などの値やオブジェクトなどのデータを格納する場所になります。
今回は真偽値の「hamburger: false,」を格納しています。
このハンバーガメニューは
- 「@click=”hamburger = !hamburger”」をクリックすると、データプロパティの「hamburger: false,」 のとき「hamburger: true,」に、「hamburger: true,」のときに「hamburger: false,」に切り替わる
- 「:class=”{active: hamburger}”」で「hamburger: true,」のときに「active」というクラスを追加、「hamburger: false,」のときに「active」というクラスを削除
の流れになります。
Vue.jsは直接HTMLにイベントの発火などを書くことができるので、JavaScriptのコードをスッキリさせることができます。
@click
Vue.jsの「@click」はv-onディレクティブで、正式に書くと「v-on:click=”hamburger = !hamburger”」となりますが、「v-on:」は「@」で省略できるため「@click=”hamburger = !hamburger”」となります。
「@」の後ろの「click」はイベントハンドラといい、その要素をクリックしたときにという意味です。
「click」の後ろの「”hamburger = !hamburger”」は、データプロパティの「hamburger」が「true」のときは「false」に、「false」のときは「true」にという意味になります。
「!hamburger」の「!」は否定で「hamburger 」を「false」にするという意味を持っています。
:class
「:class」とはVue.jsでv-bindといいます。
v-bindは作成した変数の値などをHTML属性に渡すために使います。
「:class」も正式に書くと「v-bind:class」と書きますが、「:」で省略して書くことができます。
その後の「”{active: hamburger}”」でクラス名を動的に制御しています。
データプロパティの「hamburger: true」であればクラス「active」をつける。
「hamburger: false」であればクラス「active」を外すという意味になります。
See the Pen
Vue ハンバーガーメニュー by Fukuda Yuzuru (@fukuda-yuzuru)
on CodePen.
まとめ
いかがでしたしょうか？
今回はVue.jsについてご紹介しました。
jQueryを使っている方は初めは難しく感じると思いますが、HTMLのインラインでJavaScriptを制御できるため、視認性がとてもよくなります。
またこれからVue.jsについて記事を書いていこうと思っていますので、Web制作などに活かせた頂けたら嬉しいです！
こんにちは！
最近寝るのが遅く昼ごろに起きがちなGlobal Web Designの福田です(笑)
私はWeb制作の勉強をはじめてから、昨年の4月までずっとjQueryを使っていましたが
「jQueryよりも便利なJavaScriptはないだろうか？」
と思っていました。
そのとき見つけたのがVue.jsというJavaScriptフレームワークでした。
それからはWeb制作はすべてVue.jsでJavaScriptを構築していて、とても扱いやすく便利なフレームワークだなと思っています！
そこで今回はVue.jsについてご紹介していきます！
目次
Vue.jsとは
Vue.jsは、JavaScriptフレームワークの1つになります。
JavaScriptはほぼ全てのブラウザで動くプログラミングで、フロントエンドアプリケーションの開発でも使用されています。
JavaScriptフレームワークで最も有名なのがjQueryですね。
jQueryは導入もしやすくて使っている方も多いのではないでしょうか？
しかし、jQueryはDOM操作を自分で行うという弱点があります。
最近は、WEBページを偏移せずに1つのページで処理を完結させる「Single Page Application」などのフロントエンド開発が主流になり、jQureyの弱点が顕著化しています。
そこで登場したのがVue.jsになります。
Vue.jsはDOM操作を自動化してくれたり、効率良くフロントエンドの開発ができるようになっています。
Vue.jsのメリット
ここからはVue.jsのメリットをご紹介していきます。
Vue.jsのメリットは
- 学習コストが低い
- 拡張性が高い
- 再利用できるコンポーネント
- データを同期できる
になります。
学習コストが低い
JavaScriptフレームワークは専用の書き方を覚える必要がありますが、Vue.jsではシンプルに設計されているため、とても覚えやすいです。
書き方もHTMLに似た書きかたで非常に扱いやすいです。
Vue.jsは国内でも多く使われているので、学習しやすい環境が整っていると言えるでしょう。
また公式ドキュメントもあるため気になる方は、まず確認してみるのが良いでしょう。
拡張性が高い
他のJavaScriptフレームワーク(React、Angular)などは、中規模以上を想定したフレームワークですが、Vue.jsはシンプルに設計されているため、さまざまな規模の開発を行うことができます。
また既存のプロジェクトの一部にも適用できるため、途中から導入をすることもできます。
再利用できるコンポーネント
コンポーネントとは、HTMLの一部分を切り取って、その内容を簡単に呼び出せる部品になります。
コンポーネントは、複数のモーダルウインドウやアコーディオンメニューなどを作成するときにとても使いやすくHTMLのコード量を減らすことができます。
コンポーネントについてはまた別記事にてご紹介していきます。
データを同期できる
Vue.jsはHTML要素に特別な属性を付けることによって、JavaScriptのデータとひもづけができます。
データと対象をひもづけし、どちらかに変更があればもう片方へ自動的に反映させる仕組みを「データバインディング」といいます。
Vue.jsは要素がお互いに更新しある「双方向データバインディング」に対応しています。
そのため同期作業が自動化されて、開発の効率がよくなります。
Vue.jsでハンバーガメニューを作ってみる！
ここからはVue.jsでハンバーガーメニューを実装していきます。
CSSとJavascriptでハンバーガーメニューを実装しよう!の記事からコードを引用して書いていきます。
<body>
<header id="header">
<div class="header-area">
<h1>ロゴ</h1>
<div class="hamburger" @click="hamburger = !hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
<ul class="slide-menu" :class="{active: hamburger}">
<li>メニュー</li>
<li>メニュー2</li>
<li>メニュー3</li>
<li>メニュー4</li>
</ul>
</header>
<script src="https://unpkg.com/vue@next"></script>
<script src="js/script.js"></script>
</body>body{
overflow-x: hidden;
}
.header-area{
display: flex;
justify-content: space-between;
height: 65px;
padding: 0 20px;
align-items: center;
}
.hamburger{
width: 40px;
height: 25px;
position: relative;
}
.hamburger span{
position: absolute;
width: 100%;
height: 1px;
background-color: blue;
transition: .5s;/* 追記 */
}
.hamburger span:first-of-type{/* ハンバーガーメニューの1番目の線 */
top: 0;
}
.hamburger span:nth-of-type(2){/* ハンバーガーメニューの2番目の線 */
top: 50%;
}
.hamburger span:last-of-type{/* ハンバーガーメニューの3番目の線 */
top: 100%;
}
.slide-menu{
background-color: rgba(0, 0, 0, .8);
position: fixed;
top: 65px;
width: 100%;
left: 0;
transform: translateX(100%);
transition: .5s;/* 追記 */
}
.slide-menu li{
color: #fff;
line-height: 400%;
text-align: center;
}
.hamburger.active span:first-of-type{/* ハンバーガーメニューの1番目の線 */
top: 50%;
transform: rotate(45deg);
}
.hamburger.active span:nth-of-type(2){/* ハンバーガーメニューの2番目の線 */
opacity: 0;/* 透明にする */
}
.hamburger.active span:last-of-type{/* ハンバーガーメニューの3番目の線 */
top: 50%;
transform: rotate(-45deg);
}
.slide-menu.active{
transform: translateX(0);
}const header = Vue.createApp({
data() {
return {
hamburger: false,
}
},
})
header.mount('#header')HTMLの「<script src=”https://unpkg.com/vue@next”></script>」でVue.jsを読み込んでいます。
JavaScriptの
const header = Vue.createApp({
})
header.mount('#header')でVue.jsのコアを宣言しています。
「data(){}」とはデータプロパティで、数値、文字列などの値やオブジェクトなどのデータを格納する場所になります。
今回は真偽値の「hamburger: false,」を格納しています。
このハンバーガメニューは
- 「@click=”hamburger = !hamburger”」をクリックすると、データプロパティの「hamburger: false,」 のとき「hamburger: true,」に、「hamburger: true,」のときに「hamburger: false,」に切り替わる
- 「:class=”{active: hamburger}”」で「hamburger: true,」のときに「active」というクラスを追加、「hamburger: false,」のときに「active」というクラスを削除
の流れになります。
Vue.jsは直接HTMLにイベントの発火などを書くことができるので、JavaScriptのコードをスッキリさせることができます。
@click
Vue.jsの「@click」はv-onディレクティブで、正式に書くと「v-on:click=”hamburger = !hamburger”」となりますが、「v-on:」は「@」で省略できるため「@click=”hamburger = !hamburger”」となります。
「@」の後ろの「click」はイベントハンドラといい、その要素をクリックしたときにという意味です。
「click」の後ろの「”hamburger = !hamburger”」は、データプロパティの「hamburger」が「true」のときは「false」に、「false」のときは「true」にという意味になります。
「!hamburger」の「!」は否定で「hamburger 」を「false」にするという意味を持っています。
:class
「:class」とはVue.jsでv-bindといいます。
v-bindは作成した変数の値などをHTML属性に渡すために使います。
「:class」も正式に書くと「v-bind:class」と書きますが、「:」で省略して書くことができます。
その後の「”{active: hamburger}”」でクラス名を動的に制御しています。
データプロパティの「hamburger: true」であればクラス「active」をつける。
「hamburger: false」であればクラス「active」を外すという意味になります。
See the Pen Vue ハンバーガーメニュー by Fukuda Yuzuru (@fukuda-yuzuru) on CodePen.
まとめ
いかがでしたしょうか？
今回はVue.jsについてご紹介しました。
jQueryを使っている方は初めは難しく感じると思いますが、HTMLのインラインでJavaScriptを制御できるため、視認性がとてもよくなります。
またこれからVue.jsについて記事を書いていこうと思っていますので、Web制作などに活かせた頂けたら嬉しいです！
Page Top