Web アプリ 開発環境

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 のバージョンが表示される)