Web アプリ開発を始めるには、いくつかのツールが必要です。
必要なソフトウェア
- Node.js + npm / Vite
- VS Code + いくつかのエクステンション
- ターミナルエミュレーター
- Web ブラウザ
Node.js
Node.jsは、フロントエンド開発において、多くの開発ツール (パッケージマネージャー等) の基盤になります。なおオリジナルの役割はサーバーサイドで JavaScript を動かすための実行環境です。
- 公式サイトから 最新の長期サポート安定版 (LTS) をダウンロードしてインストールしてください。
npm (Node Package Manager)
npm は、JavaScript のライブラリやフレームワークを管理するためのツールです。
yarn / pnpm / bun という別ツールが npm の代替として使われることもあります。いずれでも大筋は変わりません。学習セットでは npm を使います。
npm個別のインストールは不要です。Node.jsをインストールすると自動的にインストールされます。
Vite (Builder & Bundler)
Vue アプリを素早く構築するためのツールです。複雑な設定なしに開発を始められます。 この学習セットでは、シンプルで高速な Vite (ヴィート) を使用します。
Visual Studio Code (VS Code)
VS Codeは、コードを書くための無料の高機能エディターです。開発生産性が向上します。拡張機能も豊富です。
- 公式サイト からダウンロードしてインストールしてください。
VS Code の Vue 開発向け おすすめエクステンション
- ESLint: コードの品質を保ち、潜在的な問題を指摘してくれます。
- Prettier: コードを自動でフォーマット (整形) してくれます。
- Vue - Official: Vue 開発を強力にサポートしてくれます。
(補足) ターミナルエミュレーター
Web アプリをあなたの PC 上 (ローカル環境) で開発する場合、ターミナルエミュレーターというものを使う場面があります。いわゆる “黒い画面” です。文字を打ち込むことでコンピューターを操作できます。
最初は戸惑うかもしれませんが、よく使うコマンドは限られています。繰り返し使いながら、徐々に慣れて行きましょう。主なものの起動方法は以下の通りです:
- Windows コマンドプロンプト:
Windowsキー +rを押下 →cmdと入力 → Enter 押下 - macOS ターミナル.app: 「アプリケーション」→「ユーティリティ」→「ターミナル.app」をダブルクリック
インストールの確認
コマンドプロンプトやターミナルで以下を実行し、バージョンが表示されれば OK です。
node -v
# v22.16.0
# (Node.js のバージョンが表示される)
npm -v
# 11.4.2
# (npm のバージョンが表示される)