Vue.js ことはじめ

はじめに

動きのあるホームページを作る時はjQueryを使ってきました。
でも最近、jQueryは古いとか終わったとかいう話をよく聞くようになりました。

では、代わりに何が良いのか調べた所、ReactやVue.jsといったモダンフレームワークが主流のようです。
ちなみにモダンフレームワークとは「最新の技術とトレンドを取り入れた開発手法や、その手法に利用されるフレームワーク」だそうです。

なので、Vue.jsを触ってみようとVue.jsの公式を覗いてみたのですが・・・
jQueryのように<script>で読み込んで、フレームワークというくらいなのでテンプレートをちょちょいと書き換えれば動くのかなと思っていたのですが・・・
何が書いてあるのかひと言も頭に入ってこず、さっぱりわやでした。

ということで、本腰を入れてVue.jsを探っていきたいと思います。

ざっくり

Vue.jsは、拡張子「.vue」のファイル(コンポーネントとも言う)を多数作り、これを配置して作成していきます。
このコンポーネントファイルはこのままではブラウザで動かないので、ツールを使ってJavaScriptに変換(ビルドとも言う)していきます。

流れとしては、コンポーネントファイルを作成→JavaScriptに変換→ブラウザで動作確認となります。
コンポーネントファイルを書き換えるたびに変換作業が必要となりますが、これを自動化する「Vite(ビート)」というツールがあります。
本格的なVue.jsの開発を行うときにViteを使うのが一般的になります。
ですので、Viteを使った開発環境を設定していきます。

動かすためにインストールが必要なものは、Node.jsとVisual Studio Codeだけです。

  • Node.js
    ツールがJavaScriptで作られているので実行するために必要です。
  • Visual Studio Code
    公式が推奨しているIDE(統合開発環境)です。

環境設定

Node.js

nodejs.org/en/サイトを開き[Download Node.js]をクリックするとダウンロードされます。

ダウンロードしたファイルを実行し、画面に従いインストールします。
特に設定する項目はないので、[Next]で進んで行けば良いと思います。

[スタート]-[Node.js]-[Node.js command prompt]がインストールされていますので、これを起動して「> node -v」コマンドでインストールを確認します。
バージョンが表示されたらOKです。

Visual Studio Code

Download Visual Studio Codeを開きます

OSを選択すると画面が変わりダウンロードが始まります。

ダウンロードしたファイルを実行し、画面の指示に従いインストールします。
特に設定を変更する必要は無いと思います。

以上でVisual Studio Codeのインストールは完了です。

Visual Studio Codeの日本語化

Visual Studio Codeを起動し、上部メニューから[View]-[Command Palette…]を選択します

上部テキストボックスに「Language」と入力して絞り込みます

「Configure Display Language」を選択し、言語一覧から「日本語」を選択

再起動するか聞いてくるので[Restart]をクリック

再起動すると、日本語になっています。

拡張機能は、最初のVue.jsのプロジェクトを立ち上げる中で構築していきますので、Visual Studio Codeの設定は以上です。

最初のプロジェクト

ざっくりとした開発手順

開発手順は以下のようになります。作業はVisual Studio Codeで行います。

  1. ターミナルでcreateコマンドを実行
    プロジェクトの作成です。
    必要なファイルを作成してくれます。
  2. ターミナルでinstallコマンドを実行
    必要なツールをインストールしてくれます。
  3. ターミナルでテスト用サーバーを起動
    ブラウザで画面や動作を確認できます。
  4. コーディング
    保存するたびに自動的にビルドが行われ、ブラウザで確認できます。
  5. ターミナルで本番用のビルドを実行
    プログラムが完成したら、本番サーバーにアップするファイルを作成します
  6. 本番サーバーにアップ

ここでは、「C:\Users\[ユーザー名]\prj」というフォルダを作成し、このフォルダの中に「vue-lesson01」というプロジェクトを作成しようと思います。

Visual Studio Code起動とフォルダの準備

Visual Studio Codeを起動します。

メニューの[表示]-[ターミナル]を選択して、ターミナルを開きます

ターミナルが開きます


ターミナルでプロジェクトを保存したいフォルダに移動します。
ディフォルトが「C:\Users\[ユーザー名]」でしたので、この下に「prj」というフォルダを作成してそこへ移動しました。
フォルダ作成は「> md prj」
フォルダ移動は「> cd prj」

 プロジェクト作成

プロジェクトフォルダと必要ファイルの一括生成

Viteを使うには、htmlファイルや専用の設定ファイルなど最初に複数のファイルが必要となります。
vue.jsが公式にViteを使う場合に必要なファイルを一気に作成してくれるコマンドを用意してくれていますので、まずこれを実行します。

ターミナルで、コマンド「npm create vue@latest」を実行します。

初めてcreate vueコマンドを実行した場合、以下のメッセージが表示されます。
create-vueパッケージをインストールするかどうかの問い合わせなので、「y」と入力してエンターキーを押してください。2回目以降、このメッセージは表示されません。

次にプロジェクト名を聞いてきますので、入力します。
ここでは、「vue-lesson01」としました。

リターンを押すと次に追加機能を追加するか聞いてきますので[←][→][↑][↓]キーでNo/Yesを選択してリターンキーを押します。
追加機能は現在以下の9個です。

追加機能概要
TypeScriptJavaScriptのスーパーセットとなるプログラミング言語
JSX SupportJavaScript XMLの略で、Reactで使用されるJavaScriptの拡張記法
Vue RouterSingle Page Application(SPA)のルーティング制御を行うための機能を提供
ページ全体をリロードせずに画面遷移するアプリケーションを簡単に実装することができる
PiniaVue.jsアプリケーションのために設計された新しい状態管理ライブラリで、Vuexの後継として、シンプルで軽量かつ直感的な設計が特徴
VitestJavaScriptフロントエンド開発のための高速なテストフレームワーク
End-to-End Testing SolutionVue.jsアプリケーションの全体的な機能をユーザーの視点からテストする手法
ESLint(イーエスリント)JavaScriptやTypeScriptなどの静的解析ツール
コードの品質を保つ
Prettier(プリティア)JavaScriptの自動フォーマッター
Vue DevTools 7 extension for debugging? (experimental)デバッグ用の Vue DevTools 7 拡張機能

今回は簡単はサンプルですので、ESLintとPrettierのみ「Yes」にしました。

リターンを押すとフォルダ・ファイルが作成され、完了します。

最後の緑色の4行は、この後実行する必要があるコマンドが指示されています。
現時点では必要なファイルが生成されただけで、コマンド等は未だインストールされていません。
この後順番にコマンドを実行していけば環境がされます。

ですが、その前にメニューの[ファイル]-[フォルダーを開く]を選択してフォルダを開いて、作成されたファイル一覧を表示してみます。

「C:\Users\[ユーザー名]」に出来ているプロジェクト名のフォルダを選択します

ファイル作成者を信頼するか聞いてきたら「はい、作成者を信頼します」を選択

拡張機能のインストールを聞いてきたら、拡張機能はあとでまとめてインストールしますので、とりあえずここでは[X]でダイアログを閉じておきます。

左端のエクスプローラーに作成されたフォルダ・ファイルが表示されます。

ツールのインストール

現段階では必要なファイルが作成されただけで、ツールはインストールされていません。
ツールは、「npm install」というコマンドでインストールされます。

インストールされるツール

インストールされるツールは、先ほど作成されたpackage.jsonというファイルに書かれています。

{
  "name": "vue-lesson01",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint . --fix",
    "format": "prettier --write src/"
  },
  "dependencies": {
    "vue": "^3.5.12"
  },
  "devDependencies": {
    "@eslint/js": "^9.13.0",
    "@vitejs/plugin-vue": "^5.1.4",
    "@vue/eslint-config-prettier": "^10.0.0",
    "eslint": "^9.13.0",
    "eslint-plugin-vue": "^9.29.0",
    "prettier": "^3.3.3",
    "vite": "^5.4.10"
  }
}

最初にプロジェクト名やバージョンが書かれています。

“scripts”ブロックには、ツールインストール後に使用できるコマンドが書かれています。
このコマンドについてはインストール後にふれます。

“dependencies”ブロックには、本番で必要なツールが書かれています。

“devDependencies”ブロックには、開発で必要なツールが書かれています。
createした時に拡張機能でESLintとPrettierをYesにしたので、これらの名前もうかがえます。

インストール実行

フォルダを選択したので、ターミナルが閉じてしまいましたので、再度[表示]-[ターミナル]でターミナルを開きます。

フォルダを開いてからターミナルを開いたので、カレントフォルダがプロジェクトフォルダになっています。

もし、「C:\Users\[ユーザー名] >」のようにプロジェクトフォルダになっていない場合は、移動しておきます。

npm installを実行します。

完了すると下記のように表示されます。

追加されたフォルダとファイル

エクスプローラーを見ると「node_modules」というフォルダと「package-lock.json」というファイルが増えています。

node_modulesというフォルダには、インストールされたツールがすべて入っています。

package-lock.jsonファイルには、インストールされたツールの厳密なバージョンが記録されています。

以上でツールのインストールは完了です。
ツールはプロジェクトごとにインストールされるので、この作業はプロジェクト作成ごとに必要です。

Visual Studio Code拡張機能のインストール

「npm create vue@latest」で作成されたファイルに、extensions.jsonというファイルがあります。
このファイルには、おすすめのVisual Studio Codeの拡張機能が書かれています。

拡張機能概要
Vue.volarvue.jsのコードを認識して色付けをしてくれる
dbaeumer.vscode-eslintESLintのエラー解析を、コードを入力した時点で自動的に実行し、エラー個所に赤い波線を表示してくれます
EditorConfig.EditorConfigエディターの細かいルールを統一するためのツール
esbenp.prettier-vscodeprettierをVSCode上のフォーマッターとして使い、ファイル保存時に自動的にフォーマット(整形)してくれます。

拡張機能ボタンで拡張機能を開き、Vue.colarを検索して[インストール]ボタンをクリックします。

以下、それぞれインストールしていきます。

以上でVS Codeの拡張機能のインストールは完了です。

動かしてみる

インストールされるツールが記載されているpackage.jsonの”scripts”ブロックには、ツールインストール後に使用できるコマンドが書かれています。

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint . --fix",
    "format": "prettier --write src/"
  },

左側に書かれている”dev”をターミナルで「npm run dev」のように実行すると、右側に書かれている”vite”が実行されます。

コマンド概要
dev開発用のサーバーを起動
buildリリース用ファイル作成
distフォルダの中にリリース用のファイルが作成される
previewリリース用のdistフォルダが正しく動作しているかを確認
サーバーが起動し、distフォルダの中身が立ち上がる
lintコードが正しく書けているかをチェックし、修正をしてくれる
formatコードをフォーマット(整形)してくれる

開発用のサーバー起動

ターミナルでコマンド「npm run dev」を実行します。

下記の画面が表示され、サーバーが起動します。
余談ですが、「npm run dev」コマンド、打ち間違えて「npm urn dev」でも「npm rum dev」でもサーバー起動しました(^^;

http://localhost:5173にマウスカーソルを合わせると「リンクにアクセス」と表示されます。
「リンクにアクセス」をクリックするとブラウザが立ち上がりページが表示されます。

サーバー停止するにはターミナルで[Ctrl+C]を押します。
「バッジジョブを終了しますか(Y/N)」と聞いてきますので、[Y]と入力しリターンを押すと終了します。

表示された画面について

何も作っていなのに表示されたこの画面は、「npm create vue@latest」の時に作られたサンプルファイルです。

ファイルは「src」フォルダにあります。

ファイル概要
index.htmlブラウザが最初に開くファイルです。
main.jsindex.htmlの中で<script>タグで定義されているので、最初に読み込まれます。
App.vue画面を構成しているコンポーネントです。
main.jsから呼び出されます。

「npm run dev」を実行したときに、「Vite」が起動してJavaScript等に変換してブラウザに表示されます。

リリース用ファイル作成

ターミナルで「npm run build」を実行します。

「dist」というフォルダが出来、この中にリリース用のファイルが作成されます。

リリース用フォルダ「dist」のテスト

ターミナルで「npm run preview」を実行すると、サーバーが起動し「dist」の中身がブラウザで表示されます。
テスト同様、「リンクにアクセス」でブラウザが開き「Ctrl+C」でサーバーが停止します。

テストと同じ画面ですが「dist」の中身が表示されています。

最後に

これで一応Vue.jsを動かす環境が出来、スタート地点に立てました。
これからコンポーネントの作り方等、学んでいきたいと思います。

コメント

タイトルとURLをコピーしました