6
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@saito_next
in

【Vue.js_1時間入門⏰】1時間でローカル環境の構築からシンプルなカウンターアプリを作るまで🔢【初心者向け】

6
Last updated at Posted at 2026-11-02

この記事で作るもの

このようなものを作ります。ブラウザで動くカウンターアプリです。
「ボタンを押してね」を押すたびに画面の数字がカウントされていく仕組みです。
image.png

はじめに

JavaScript、そしてそのフレームワークであるVue.jsの操作感を学習するために、簡易的なカウンターアプリを作成しました。

これからJavaScriptやVue.jsを扱う方への参考および備忘録として、ローカル環境の導入からアプリ作成までの手順をまとめます。
環境や操作の慣れなどの個人差はありますが、初心者の方向けにも、ざっくり1時間ほどで1つの成果物が作れる記事を目指しました⏰

⏱️ 本記事の所要時間：約60分

下記のイメージで進めていきます！

  • 00〜05分：🧐 そもそもVueとは何なのか
  • 05〜20分：📋 事前準備（環境の確認）
  • 20〜30分：🔧 Vueプロジェクト作成〜サーバーの起動
  • 30〜35分：👓 App.vueの仕組みを知ろう
  • 35〜45分：🔢 カウンターを作ってみよう
  • 45〜55分：🎀 デザインの追加
  • 55〜60分：📝 おわりに

目次

  1. 🧐 そもそもVueとは何なのか
  2. 📋 事前準備
  3. 🔧 Vueプロジェクト作成〜サーバーの起動
  4. 👓 App.vue の仕組みを知ろう
  5. 🔢 カウンターを作ってみよう
  6. 🎀 デザインの追加
  7. 📝 おわりに

1. 🧐 そもそもVueとは何なのか

そもそも、今から使おうとしているVue.jsとはどのようなフレームワークなのでしょうか。
「フレームワーク」といえば「開発を手助けしてくれるもの」ですが、Vue.jsは具体的にどう助けてくれるのでしょうか？

Vue.js最大の特徴は、「コードブロックを組み合わせて開発できる」 という点です。

従来のフロントエンド開発では HTML・JavaScript・CSS と役割ごとにファイルが分かれていましたが、Vue.jsでは1つの .vue ファイルの中に以下の3つの要素をまとめて記述できます。

【Vueを構成する3つのブロック】
Vueのファイル（.vue）の中では、主に以下の3つのコードブロックを組み合わせて記述します。

  1. 📦見た目 (<template>)：HTMLの役割。ボタンや文字の配置などを書く場所
  2. ⚙️機能(<script setup>)：JavaScriptの役割。変数を作ったり、動きを制御する場所
  3. 🎀デザイン (<style>)：CSSの役割。色やフォント、大きさなど、見た目を装飾する場所

→ Vueを使うことで .vue ファイル1つで見映え・機能・デザインのすべてを設定できるということですね🙌
イメージを持つにはやはり作ってみるのが一番早いので、さっそく次のステップからVueを使った開発を始めていきましょう！

2. 📋 事前準備

今回必要なものは下記5点です。
インストール方法については、各公式ページや各種解説記事を参考に進めてみてください。

  1. VSCode（Visual Studio Code）
    コードを編集するための開発環境です。
    動作が軽く、自分の開発スタイルに合わせて足りない機能を拡張機能でサクサク導入することができます。
    VSCode公式ダウンロードページ
  2. Node.js
    JavaScript / TypeScriptをブラウザ外で実行するためのエンジンです。
    もともとJavaScriptはWebブラウザ上で動かすための言語でしたが、今回のようにVSCode上で直接コードを記述・実行するためには、ブラウザの外で動作させるための「Node.js」というエンジンをインストールする必要があります。
    Node.js公式ダウンロードページ
  3. Vue.js
    JavaScript / TypeScriptのフロントエンドフレームワークです。
    今回はVSCodeの ターミナル（コマンドを打ち込んで操作する場所） から、Node.jsのコマンドを使ってインストールします。
  4. ブラウザ環境
    作成したアプリを確認するために使用します（Google Chrome、Microsoft Edgeなど、種類は問いません）。
  5. Vue - Official（拡張機能）
    VSCodeでVueを書くための必須拡張機能です。コードの補完や見やすい色分け（シンタックスハイライト）をしてくれます。
    VSCode内の「拡張機能」タブから「Vue - Official」と検索してインストールします。
    手順内でインストール方法について紹介します。

3. 🔧 Vueプロジェクト作成〜サーバーの起動

それでは、上記の準備が完了しているものとして、VSCode上で開発を進めるための環境を作っていきます。
以下の手順で進めていきます。

① vueプロジェクトの作成
② 開発用サーバーの起動

工程ごとに各処理の解説やトラブルシュートを入れておりますので、是非、ご自身の環境でも進めてみてください！

① vueプロジェクトの作成

この工程では、「VSCodeのターミナル（コマンドを打ち込んで操作する場所）」からVueに「プロジェクト名やtypescriptの使用有無」を設定し、Vueプロジェクトを作成します。
VSCode上でターミナル（ctrk + J）を開いて以下のコマンドを実行します。

npm create vue@latest
💡 コマンド解説

  • npm： Node.jsのパッケージ（ライブラリなど）を操作するためのコマンドです。

  • create vue@latest： 最新のVue環境を作成するためのツールを実行します。

🔍 トラブルシュート（エラーが出る方はこちらをクリック）

ここで起きがちな2エラーについて解説します。

  • 「npmが見つからない」エラー（ObjectNotFound）が出る場合🔍

npmはNode.jsと一緒にインストールされる機能です。エラーが出る場合は、Node.js自体がまだ入っていない可能性があります。
ターミナルで以下を入力し、バージョンが表示されるか確認してください。

node -v

（例：v26.13.0 のように表示されればOKです）

表示されない場合は、Node.jsをインストールし直してから再度お試しください。

  • セキュリティエラーが出る場合🚨

「スクリプトの実行がシステムで無効にされています」といったセキュリティ上のエラーが出た場合は、ターミナルで以下を実行して一時的に動作を許可してください。

Set-ExecutionPolicy RemoteSigned -Scope Process

実行後、再度 npm create vue@latest を試してみてください。

npm create vue@latest を実行すると以下のような画面になります。
今回はプロジェクト名count-numで進めていきます。

create vue@latest 実行後
PS C:\Users\(ユーザ名)\todo> npm create vue@latest                          

> todo@0.0.0 npx
> create-vue

┌  Vue.js - The Progressive JavaScript Framework
│
◇  Project name (target directory):
│  count-num
│
◇  Use TypeScript?
│  Yes
│
◇  Select features to include in your project: (↑/↓ to navigate, space to select, a to toggle all, enter to confirm)
│  none
│
◇  Select experimental features to include in your project: (↑/↓ to navigate, space to select, a to toggle all, enter to confirm)
│  none
│
◇  Skip all example code and start with a blank Vue project?
│  No

Scaffolding project in C:\Users\(ユーザ名)\todo\count-num...
│
└  Done. Now run:

   cd count-num
   npm install
   npm run dev

| Optional: Initialize Git in your project directory with:

   git init && git add -A && git commit -m "initial commit"

PS C:\Users\(ユーザ名)\todo>
💡 各行解説
  • ◇Use TypeScript? （TypeScriptを使いますか？）
    👉 Yes （※今回はJavaScriptのコードで進めますが、Yesのままで問題なく動作します）
  • ◇Select features to include in your project: （追加の便利機能を含めますか？）
    👉 none （画面を切り替えるルーティング機能などの追加機能は使わず、シンプルな状態で作りたいためnoneにします）
  • ◇Select experimental features to include ~: （実験的な機能を含めますか？）
    👉 none （開発中のテスト段階の機能は不要なため、noneにします）
  • ◇Skip all example code and start with a blank Vue project? （サンプルコードをスキップしますか？）
    👉 No （最初に公式のサンプルコードがあった方が全体のイメージを掴みやすいため、Noを選択します）

プロジェクト名や追加機能についての質問が表示されますが、最初はすべてデフォルト（Enterキー連打）で進めて問題ありません。

② 開発用サーバーの起動

Vueプロジェクトが作成できたら、開発サーバーを起動させてVueの初期ウェルカム画面をブラウザに表示してみましょう。

まず、以下のコマンドで開発サーバーを起動させます。

cd <作成したプロジェクト名>
npm install
npm run dev

サーバーが起動すると、ターミナルにローカルサーバーのURL（下記ではhttp://localhost:5173/の部分）が表示されます。
URLをCtrlキーを押しながらクリックするか、コピーしてブラウザに貼り付けてみてください。

npm run dev 実行後
PS C:\Users\(user名)\todo> npm run dev                                    

> todo@0.0.0 dev
> vite

  VITE v8.3.5  ready in 757 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window
  ➜  Vue DevTools: Press Alt(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools
  ➜  press h + enter to show help

ブラウザに以下のようなVueの初期ウェルカム画面が表示されたら、Vueプロジェクト作成〜サーバーの起動は完了です！🎉
この画面は①で作成したVueプロジェクト内の「App.vueというファイル」の内容を基に表示されています。
以降の工程では、このApp.vueを書き換えて画面にカウンターアプリを表示させます。
image.png

4. 👓 Appvueの仕組みを知ろう

ここで、カウンターアプリを作る前に、Vue最大の特徴である 【3つのブロック】 のイメージを掴むため、プロジェクトの中にある src/App.vue ファイルを開いてみましょう。

作成したVueプロジェクトの開き方

1.VSCodeの「ファイル」メニューから「フォルダーを開く...」を選択します。
image.png

2.『3. プロジェクト作成〜起動』の①で指定したプロジェクト名のフォルダ（例：count-num）を選択し、「フォルダーの選択」を押してください。
image.png

3.プロジェクトフォルダが開きました！
目的の App.vue ファイルは、エクスプローラー内の src フォルダの中にあります。
image.png

App.vue を開くと、前述した通り、Vueのファイルが主に以下の3つのブロックで構成されていることが確認できるはずです。

【Vueを構成する3つのブロック】

  • <template>（📦見た目）
  • <script setup>（⚙️機能）
  • <style>（🎀デザイン）
💡 コラム：VueとReactとの違いとは？

Vue.jsは、同じく大人気のJavaScriptライブラリ「React」と比較されることがよくあります。
以下にその違いをまとめます。

  • React：
    「UI構築のライブラリ」です。家で例えると「土台やパーツ」だけが用意されている状態なので、家を建てるには自分で壁や屋根のパーツを別途選んで組み合わせていく自由さがあります。
  • Vue.js：
    「フレームワーク」です。最初から「家を建てるためのルールや必要な道具が一式セット」になっているため、迷わずすぐに組み立てを始められるのが特徴です。

どちらもフロントエンドの主役となる技術で、JavaScript開発を強力に助けてくれる点に変わりはありません。ただ、どちらも「家の作り方」そのものを決める技術なので、同じプロジェクト内で混ぜて使うことはせず、どちらか片方を選んで使っていくのが一般的です。

💡 コラム：JavaScriptとTypeScriptの違いとは？

どちらも「Webページに動きや機能をつけるための言語」といったイメージがありますが、**「書きやすさ」と「エラーへの備え方」**に大きな違いがあります。

  • JavaScript（JS）：
    型を気にせずサクサク書ける一方で、実際に動かしてみるまでエラーに気づきにくいという特徴があります。
  • TypeScript（TS）：
    JavaScriptに「型（データの種類）」の概念を加えたものです。丁寧に型を明記していくのでJSほどサクサクとは書けないものの、コードを書きながら事前に細かくエラーを検知できるという特徴があります。

→ 本記事ではシンプルなカウンターアプリを作る為、JSで開発していきます！

ここまで確認できたら、次はこの App.vue の中身を書き換えて、実際にカウンターアプリを作っていきましょう！

5. 🔢 カウンターを作ってみよう

それでは、実際に App.vue の中身を書き換えて、簡単なカウンターアプリを作ってみましょう。

App.vue の中身をすべて消して、下記コードをそのまま貼り付けてみてください。

カウンターアプリ作成用コード
<template>
  <div style="text-align: center; margin-top: 50px;">
    <h1>{{ count }}</h1>
    <button @click="count++">ボタンを押してね</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 数字を保存するハコ（初期値は0）
const count = ref(0);
</script>
💡 各行解説

{{ count }}：JavaScript側の変数（count）を画面に表示しています（リアクティブに変数が連動します）。

@click="count++"：ボタンがクリックされたら、count の値を 1 増やすという処理を簡潔に書いています。

ref(0)：値が変わったときに画面の表示も自動で更新（再描画）させるためのVueの機能です。

ブラウザを確認し、ボタンを押すたびに数字が増えるカウンターアプリが出来ていれば成功です！
image.png

💡拡張機能（Vue - Official）の導入方法

現状、App.vueに真っ白なコードが並んだ状態かと思いますが、
画面が意味毎に色分けされ、文字補完があれば今後の開発が更に進めやすくなります。
VSCodeからJavascriptの拡張機能の「Vue - Official」をインストールしましょう。

・VSCode内の「拡張機能」タブから「Vue - Official」と検索してインストールボタンを押下
※同じ名前の物が複数出てきますが、Vue公式から出ているものを選択してください。
image.png

・拡張機能を反映させるため、VSCodeを一度閉じ、再起動します。

・再起動し、拡張機能が反映されていることを確認してください。
色分けでぐっと見やすくなりました！
before: 拡張機能なし
image.png
after: 拡張機能あり
image.png

6. 🎀 デザインの追加

Vueは <template>、<script>、<style> の3要素で構成されていると説明しました。
最後に <style>（画面の装飾）部分を追加して、見た目を綺麗に整えてみましょう。

先ほどのコードの下に、以下の<style>タグを追加してください。

カウンターアプリ作成用コード_デザイン部分

<template>
  <div class="counter-box">
    <h1>{{ count }}</h1>
    <button @click="count++">ボタンを押してね</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const count = ref(0);
</script>

<style>
/* ここにデザインを書く */
.counter-box {
  text-align: center;
  margin-top: 50px;
  font-family: sans-serif;
}

h1 {
  font-size: 60px;
  color: #42b883; /* Vueカラーの緑 */
}

button {
  background-color: #42b883;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #35495e;
}
</style>

ブラウザを確認し、カウンターアプリに見た目の装飾が追加されていれば完成です！
image.png

7. 📝 おわりに

以上が、Vue.jsの導入からカウンターアプリの作成までの手順となります。

個人的な所感としては、従来のようにHTML・JavaScript・CSSをバラバラのファイルに分けず、1つの .vue ファイルの中で完結させられるのは非常に見通しがよく便利だと感じました。

ここから発展させて、

  • 配列を使ってデータを管理する Todoアプリ
  • 外部APIと連携して情報を取得する お天気アプリ
  • 家計を管理する シンプル家計簿

など、作れるものは幅広くあるので、気になった方はぜひ色々なアプリづくりに挑戦してみてください！

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?