動機
お仕事でVue.jsを少し触りましたが、よくわからない状態なので改めて勉強してみました。
私のフロント側の技術レベルとしては、
- 生のHTML、CSS、JavaScriptを読んで改造することがギリギリできる。
- LaravelのbladeファイルやJavaのJSPファイルは作れる。
です。
記事に間違いがありましたら優しく教えてください😇
Vue.jsとは
有名なJavaScriptのフレームワーク。
SPAの実装などフロント側の開発で用いられる。
https://ja.vuejs.org/
使用方法
環境
Windows10のPCで作業します。
Vscodeを使ってプロジェクトを編集していきます。
インストール
公式のインストール手順を参照して実行します。
https://ja.vuejs.org/guide/quick-start.html#creating-a-vue-application
node.jsの最新版をインストールします。
特にカスタマイズしませんでした。
Powershellでは$ npm -v が動くのに、VscodeのPowershellでnpmコマンドが見つからない問題が発生しましたが、PC再起動で解決しました。
下記コマンドを実行します。
$ npm init vue@latest
選択肢はすべてNOにしました。
Vscodeの拡張機能から「Vue Language Features (Volar)」をインストールします。名前がよく似た拡張機能が多いため注意してください。
下記2つのコマンドを実行する。
$ cd <your-project-name>
$ npm install
下記コマンドを実行するとlocalhostで環境が実行される。
$ npm run dev
必要な場合は、下記コマンドでビルドすることができます。
$ npm run build
チュートリアル
公式のチュートリアルで基本を学びました。
(レンダリング、ウォッチャー、コンポーネント、イベントなど)
https://ja.vuejs.org/tutorial/#step-1
JavaScriptをある程度知っていないと読解できない部分があるため、少し苦労しました。
Vue router
Vue routerとは
Vue.jsにルーティング機能を持たせる。
指定したURLとVueのコンポーネントを紐付けることで、画面をリロードせずに画面描画を切り替えられます。
これでSPAが実装できます。
Vue routerのインストール
https://router.vuejs.org/installation.html
npm install vue-router@4でインストールする。
router.jsの新規作成やmain.jsなどを作成していく。
import './assets/main.css'
import { createApp } from 'vue'
import App from '@/App.vue'
import router from '@/router'
const app = createApp(App)
app.use(router)
app.mount('#app')
routesの中のpathは好きなように設定します。
home.vueとresume.vueは適当なページを用意しておけばOK。
import { createRouter, createWebHistory } from 'vue-router'
import home from '@/page/home.vue'
import resume from '@/page/resume.vue'
const routes = [
{ path: '/', name: 'home', component: home },
{ path: '/home', name: 'home', component: home },
{ path: '/resume', name: 'resume', component: resume },
]
const router = createRouter({
history: createWebHistory(),
routes,
})
export default router
<template>
<p>ブログサイト</p>
<router-view />
</template>
この状態で$ npm run devを実行すると、
- http://localhost では「ブログサイト」という文字とhome.vueの内容が表示されます。
- http://localhost/resume では「ブログサイト」という文字とresume.vueの内容が表示されます。
つまりこんな状態で動作しています。
URLによって<router-view />(=コンポーネント)が切り替わる仕組みになりました。
これで簡単ですがSPAの実装ができました。
最後
Laravelのbladeファイルとは仕組みが異なるため、コンポーネントや画面遷移を理解するのにとても時間がかかりました。
JavaScriptがわかる人はすごいですね。。
ここまでわかればフルスタックエンジニアと呼称していいのか？🤔