はじめに
こんにちは！
AXLBIT株式会社ソリューション部の@ax-shotaisodaです。
今回は、2023年6月5日に行われた社内勉強会の内容を報告をさせていただきます。
勉強会の発表内容は、 「Vue.jsで爆速フロントエンド開発」 でした。Vue.jsってなに？というところから実際にコードを書いてみる方法まで紹介していきます。
Vue.jsとは
Vue.jsとはWebアプリケーションに特化し、効率的に開発できるJavaScriptのフレームワークです。
Vue.jsの特徴として、公式サイトには以下の記載がありました。
親しみやすい
直観的なAPIとワールドクラスのドキュメントを使用して、標準的なHTML、CSS、JavaScript をもとに構築します。高パフォーマンス
手動での最適化をほとんど必要としない、真にリアクティブなコンパイラで最適化されたレンダリングシステム。多用途
ライブラリーとフル機能のフレームワークの間でスケールする、リッチで段階的に採用可能なエコシステム。
Vue.jsが使用されている有名サイト
Vue.jsは数多くの企業やプロジェクトに採用されています。
Vue.jsの特徴
先程、公式サイトに記載してある特徴を挙げましたが、発表者の@ax-fujinoさんが思う特徴も以下に記載していきます。
高速かつ高機能なSPA
- 設計がシンプルなので、コンパクトかつ高速です。Vue.jsの本体はわずか20KB程度しかありません。それにより画面遷移が爆速で、SEOやUXで有利になります。
組み合わせ可能な柔軟性と拡張性
-
既存のWebアプリケーションにパーツ単位で組み込むことが可能です。それによりWebサイトの一部のみVue.jsで書くということも可能です。逆に他のフレームワークも組み込むことが可能です。
-
豊富なライブラリ等を組み合わせて拡張性が無限大です。SPAの弱点をある程度は補うことが可能で、やりたいことが簡単に実現可能です。
学習コストが低く、コードも読みやすい
-
日本国内の利用者が多く情報も豊富で、公式ドキュメントも丁寧です。
-
単一ファイルコンポーネントというコンポーネントの定義方法があり、JacaScript, HTML, CSSを同じファイルに纏めて記述するので、可読性が良いです。
以下に例を示しています。
<script setup>
import { ref } from 'vue'
const greeting = ref('Hello World!')
</script>
<template>
<p class="greeting">{{ greeting }}</p>
</template>
<style>
.greeting {
color: red;
font-weight: bold;
}
</style>
DOM操作の自動化（リアクティブ）
- HTMLの要素に属性を与えるだけで、イベントやデータの関連付けが自動で行われます。以下に例を示しています。
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello World!'
}
}
}
</script>
- データと画面が自動で同期されます。（データバインディング）
以下に例を示しています。プレイグラウンドなどで、以下のコードを張り付けると自動でデータ同期される様子が確認できます。
<template>
<div>
<input v-model="userInput" type="text" placeholder="入力してください" />
<p>Your Input: {{ userInput }}</p>
</div>
</template>
<script>
export default {
data() {
return {
userInput: ''
}
}
}
</script>
コンポーネントの再利用
- パーツのような感じで、コードの一部を切り取りコンポーネントという形で何度でも呼び出せます。コンポーネントを変更すると呼び出した全てに変更が反映されるようになっています。以下にコンポーネント使用の例を示しています。
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello World!'
}
}
}
</script>
<template>
<div>
<MyComponent />
</div>
</template>
<script>
import MyComponent from './MyComponent.vue';
export default {
components: {
MyComponent
}
}
</script>
- 発展として、ページごとに入れ替えるレイアウトという概念も存在します。
<template>
<div>
<h1>テスト1</h1>
<p>テスト1のコンテンツがここに表示されます。</p>
</div>
</template>
<template>
<div>
<h1>テスト2</h1>
<p>テスト2のコンテンツがここに表示されます。</p>
</div>
</template>
import { createRouter, createWebHistory } from 'vue-router'
import Test1 from '../views/Test1.vue'
import Test2 from '../views/Test2.vue'
const routes = [
{
path: '/',
name: 'Test1',
component: Test1
},
{
path: '/test2',
name: 'Test2',
component: Test2
},
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
Vue.jsを触ってみよう
-
はじめての方
-
Node.jsを触ったことがある方
まとめ
今回の発表を聞き、Vue.jsは手軽にさわることができそうなので、プレイグラウンドなどで、色々と試してみると面白いのかなと思いました。みなさんも是非この記事を参考にVue.jsに取り組んでみてください。
参考文献
https://ja.vuejs.org/
https://about.gitlab.com/
https://my.nintendo.com/
https://developer.apple.com/tutorials/swiftui
https://workman.jp/shop/default.aspx
https://store.united-arrows.co.jp/
https://www.linefriends.jp/
https://ja.vuejs.org/guide/introduction.html
https://ja.vuejs.org/tutorial/#step-1
https://play.vuejs.org/#eNo9jcEKwjAMhl/lt5fpQYfXUQfefAMvvRQbddC1pUuHUPrudg4HIcmXjyRZXEM4zYlEJ+T0iEPgXjn6BB8Zhp46WUZWDjCa9f6w9kAkTtH9CRinV4fmRtZ63H20Ztesqiylphqy3R5UYBqD1UyVAPk+9zkvV1CKbCv9poMLiTEfR2/IXpSoXomqZLtti/IFwVtA9A==
https://ja.vuejs.org/guide/quick-start.html#using-vue-from-cdn
https://cli.vuejs.org/#getting-started
https://nuxt.com/docs/getting-started/installation