LoginSignup
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@M_Haruki

Vue.jsでとりあえずサイトを作る [初心者向け]

Last updated at Posted at 2025-02-15

始めに

概要

レッスン形式で簡単なサイト(Vue.jsの紹介サイト)を作ることで、Vue.jsへの理解を深める。

Vue.jsを触ったことのない人向けで、仕組みの理解は置いておいて、まずは動くものを作ることを目指す。
HTMLとCSSの知識さえあれば、理解できるように書いた。

本記事では、Vue3のCompositionAPIを使い、ビルドツールとしてViteを用いる。

わかりやすさを優先するため、不十分もしくは正確性を欠いた説明がある。

コードのコピペだけで終わらず、色々変えて試しながら進めることを推奨する。

本記事のゴール

次のような、Vue.jsを簡単に紹介するサイトを作る。

IMG_1924.PNG

対象者・前提条件

Vue.jsとは

人気のあるJavaScriptフレームワーク。
素のHTMLなどにない機能が使えるため楽に開発でき、特にJSは格段に書きやすくなる。
公式ドキュメントが日本語化されていて読みやすいため、適宜参考にするとよい。

Codespacesとは

Codespacesとは、ブラウザから使えるコードエディタ(VSCode)である。
最低限の使い方は、次のサイトを参考にするとよい。

執筆時のバージョン

名称 バージョン
Node.js v20.18.1
npm 10.8.2
Vue.js 3.14.1
Vite v6.1.0

プロジェクトの作成

VSCodeでフォルダを開いた状態か、Codespacesでリポジトリを開いた状態から始める。

Vue.jsテンプレートの作成

ターミナルに次のコマンドを打つ。

npm create vue@latest

プロジェクト名を入力し、矢印キーで各機能の有効/無効を選択しエンターで確定する。
IMG_1920.PNG
機能の各項目の意味は、おおよそ次の通り。VueRouter以外は、わからなければNoを選んでもいい。

項目名 推奨 説明
Ok to proceed? y 本当にプロジェクトを作成するかを問われている
Project name {任意} プロジェクト名
Package name {任意} パッケージ名、サジェストされているものをそのまま選択すればいい
Add TypeScript? No JavaScriptの代わりにTypeScriptを使うかどうか
Add JSX Support? No JSXの構文をサポートするかどうか
Add Vue Router for Single Page Application development? Yes 複数ページのサイトを作るために使うVueRouterを有効かするかどうか(本記事の内容を実施するには必須)
Add Pinia for state management? No 状態管理ライブラリPinitaを有効にするかどうか
Add Vitest for Unit Testing? No テストフレームワークVitestを有効にするかどうか
Add an End-to-End Testing Solution? No エンドツーエンドのテストフレームワークを有効にするかどうか
Add ESLint for code quality? Yes 静的コード解析ツールEslintを有効にするかどうか
Add Prettier for code formatting? Yes コードフォーマッターPrettierを有効にするかどうか

完了すると、Done. Now run: ...と表示されて、プロジェクト名のフォルダが作られる。

プレビュー

ターミナルに表示されたとおり、下記のコマンドを打って開発用サーバーを立ち上げる。

cd {プロジェクト名} #プロジェクトフォルダへ移動
npm install #必要なものをインストールする(npm iと省略できる)
npm run dev #開発用サーバーを起動する

IMG_1921.PNG

VSCodeであればターミナルに出てきたhttp://localhost:5173/などのURLをタップして、Codespacesであれば右下のブラウザーで開くもしくはポートタブから、プレビュー画面を開ける。
次のようなVue.jsの初期ページが表示されているはずだ(バージョンや機能によって表示されるページは多少異なる)。

IMG_1922.PNG

ページ作成

これからページを作っていく。

これ以降のファイルは、プロジェクト名のフォルダからのパスで表す。

共通のCSS(main.css)

まずは、src/assets/main.cssの内容を削除し、次の内容を書き込む。

src/assets/main.css
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

このCSSファイルに書いた内容はページ全体に適用されるので、全要素へ指定するスタイルや、テーマカラーの指定などを書くことが多い。

App.vue

テンプレートの内容が邪魔になってしまうためsrc/App.vueの内容を全て削除し、次のように書き換える。

src/App.vue
<template>
  <RouterView></RouterView>
</template>

Homeページ(Vueファイルの書き方)

まずはHomeページを作る。

src/views/HomeView.vueの内容を全て消し、今回はVueを紹介するということで、次のように書き換える。

src/views/HomeView.vue
<template>
  <div class="home-view">
    <h1>Vue.jsの紹介</h1>
    <p>
      Vue.jsは、人気のあるJavaScriptフレームワークです。
      <br>
      シンプルで柔軟なAPIを提供し、リアクティブなデータバインディングとコンポーネントベースのアーキテクチャを特徴としています。
    </p>
    <ul>
      <li>リアクティブなデータバインディング</li>
      <li>コンポーネントベースのアーキテクチャ</li>
      <li>シンプルで柔軟なAPI</li>
      <li>豊富なエコシステムとプラグイン</li>
    </ul>
    <p>
      Vue.jsは、単一ページアプリケーション（SPA）や複雑なフロントエンドプロジェクトの開発に適しています。
    </p>
  </div>
</template>
<style scoped>
.home-view {
  padding: 20px;
}

h1 {
  color: #42b983;
  font-size: 2rem;
  margin-bottom: 20px;
}

p {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

ul {
  list-style-type: disc;
  padding-left: 1.5rem;
}

li {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}
</style>
<script setup>
// JavaScript here
</script>

先ほど開いたプレビューを確認すると、書いたコードが反映されていることが確認できる。

Vueファイル(拡張子がvue)では、templateタグの中にHTMLを、styleタグの中にCSSを、scriptタグの中にJavaScriptを書く。
それぞれ特殊な記法はあるものの、基本は普通のHTMLなどと一緒である。

Aboutページ

次にAboutページを作る。

src/views/AboutView.vueの内容を全て消し、サイトに関しての説明として、次のように書き換える。

src/views/AboutView.vue
<template>
  <div class="about-view">
    <h1>このサイトについて</h1>
    <p>このサイトは、Vue.jsの学習用に作成されました。</p>
    <p>Vue.js公式とは無関係のサイトです。</p>
  </div>
</template>

<style>
.about-view {
  padding: 20px;
}

h1 {
  color: #42b983;
  font-size: 2rem;
  margin-bottom: 20px;
}

p {
  font-size: 1.2rem;
  margin-bottom: 10px;
}
</style>

プレビューのURLの末尾に/aboutをつけて、書き換えてアクセスすると、書いたコードが反映されていることを確認できる。

Homeページとやっていることは同じである。
styleタグとscriptタグは省略可能なため、scriptタグを省略した。

別ページへのリンクを追加する(RouterLink)

HomeページとAboutページを行き来するためのリンクを書く。
HomeView.vueのtemplateタグの最後の方に次のように追記する。

src/views/HomeView.vue(一部)
    </p>
    <br>
    <RouterLink to="/about">このサイトは何?</RouterLink>
  </div>
</template>

プレビュー画面でhomeのページに戻ると、リンクが追加されているだろう。
<a href="/about">About</a>でも動作するが、aタグの代わりに<RouterLink to="/about">About</RouterLink>
と書くとロードを挟まないページ遷移を実現でき、好ましい。
外部ではないプロジェクト内へのリンクは、基本RouterLinkで書くべきだ。

画像を追加する(パスの指定方法)

Vueのロゴ画像を追加するため、HomeView.vueのtemplateタグの最初の方に次のように追記する。

src/views/HomeView.vue(一部)
<template>
  <div class="home-view">
    <h1>Vue.jsの紹介</h1>
    <img src="@/assets/logo.svg" alt="Vueのロゴ画像">
    <p>

また、それに合わせてstyleタグ内のCSSも書き加える。

src/views/HomeView.vue(一部)
}

img {
  width: 100px;
}
</style>

再びプレビューを見ると、ロゴ画像が追加されているだろう。
imgタグのsrcへ指定したように、src/assets/フォルダに置いたコンテンツへは、@/assets/logo.svgとすることでアクセスできる。
@を使うと、srcフォルダからのパスでファイルを指定できる。
相対パスも使えるが、@を使ったパス指定の方が確実で安全だと思われる。

ページの追加(VueRouter)

VueRouterの設定変更(router/index.js)

src/router/index.jsのroutesという配列に次の内容を追加する。

    {
      path: '/links',
      name: 'links',
      component: () => import('../views/LinksView.vue'),
    },

index.js全体は次のようになる。

src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue'),
    },
    {
      path: '/links',
      name: 'links',
      component: () => import('../views/LinksView.vue'),
    },
  ],
})

export default router

このファイルは、VueRouterというルーティングライブラリの設定ファイルだ。
ページを増やすときは、そのページのパス(どういったURLでアクセスできるサイトか)と、固有の名前、ページのVueファイルのパスを、今回のように追記する。

Vueファイルの追加

今指定したLinksView.vueというファイルを作る。
src/views/にLinksView.vueというファイルを作成し、リンク集としての次の内容を書き込む。

src/views/LinksView.vue
<template>
    <div class="links-view">
        <h1>Vue.js学習に役立つリンク集</h1>
        <ul>
            <li><a href="https://vuejs.org/" target="_blank">公式サイト</a></li>
            <li><a href="https://vuejs.org/guide/" target="_blank">公式ガイド</a></li>
            <li><a href="https://vuejs.org/api/" target="_blank">APIリファレンス</a></li>
            <li><a href="https://router.vuejs.org/" target="_blank">Vue Router</a></li>
            <li><a href="https://vuex.vuejs.org/" target="_blank">Vuex</a></li>
            <li><a href="https://vuetifyjs.com/en/" target="_blank">Vuetify</a></li>
            <li><a href="https://vue-loader.vuejs.org/" target="_blank">Vue Loader</a></li>
        </ul>
    </div>
</template>

<style scoped>
.links-view {
    padding: 20px;
}

h1 {
    color: #42b983;
    font-size: 2rem;
    margin-bottom: 20px;
}

p {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

ul {
    list-style-type: disc;
    padding-left: 1.5rem;
}

li {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}
</style>

Vueファイルなので、やっていることは先程のHomeやAboutと同じである。

プレビューのURLの末尾に/linksをつけて、書き換えてアクセスすると、今作ったページができているだろう。

全ページ共通要素の追加(App.vue)

src/App.vueの内容を次のように書き換えて、サイト全体のヘッダーを作る。

src/App.vue
<template>
  <header>
    <nav>
      <ul>
        <li>
          <RouterLink to="/">ホーム</RouterLink>
        </li>
        <li>
          <RouterLink to="/about">このサイトについて</RouterLink>
        </li>
        <li>
          <RouterLink to="/links">リンク集</RouterLink>
        </li>
      </ul>
    </nav>
  </header>
  <RouterView></RouterView>
</template>

<style scoped>
header {
  background-color: #42b983;
  padding: 10px 20px;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 20px;
  padding: 0;
  margin: 0;
}

nav li {
  display: inline;
}

nav a {
  color: white;
  text-decoration: none;
  font-size: 1.2rem;
}

nav a:hover {
  text-decoration: underline;
}
</style>

プレビューにヘッダーが追加されているだろう。

すべてのページはApp.vueの中に表示されていて、VueRouterは、RouterViewタグの中に入る内容を変えることでページ遷移を実現している。
App.vue自体を書き換えることで、どのページでも共通して表示される要素を実装できる。

コンポーネントの追加

コンポーネントの作成

src/components/にOfficialLink.vueというファイルを作成し、公式サイトへのリンクを構成する、次の内容を書き込む。

src/components/OfficialLink.vue
<template>
    <div>
        <a href="https://vuejs.org/">Vue.js公式サイトはこちら</a>
    </div>
</template>
<style scoped>
div {
    margin-top: 50px;
}

a {
    display: inline-block;
    padding: 10px 20px;
    background-color: #42b983;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}

a:hover {
    background-color: #369870;
}
</style>

コンポーネントの利用

このボタンを設置したいページ、HomeView.vueとAboutView.vueのscriptタグを下記のように改変または追加する。

<script setup>
import OfficialLink from '@/components/OfficialLink.vue'
</script>

そして、読み込んだページの各templateタグの最後の方に、OfficialLinkタグを設置する。

    <OfficialLink />
  </div>
</template>

プレビューを確認すると、homeページとaboutページに、同じ公式サイトへのリンクが追加されているだろう。
このように、Webサイトのパーツをコンポーネントとして、新たなVueファイルに切り出すことで、再利用できるようになる。

終わりに

完成形

改めて完成形はこんな感じだ。

IMG_1924.PNG

また、今回のソースコード全体はこちらから確認できる。

この後のおすすめ

今回は触れなかったが、Vue.jsの本来の強みであるJSを書けると、より多くの機能を実装できるようになる。
Vue.jsでのJSを知るには、下記の公式チュートリアルがおすすめだ。
この内容をやった後であればどう役立つかもわかりやすいと思う。

参考文献

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?