JavaScript基礎 #1 はじめてとセットアップ

プログラミング言語 JavaScript JavaScript Node.js Vite
読了 6分

このシリーズは、JavaScriptをはじめて学ぶ方、または昔学んだけれどもう一度整理し直したい方のための7編構成の入門講座です。

  • #1 はじめてとセットアップ ← 今回の記事
  • #2 変数と型
  • #3 制御フロー
  • #4 関数
  • #5 オブジェクトと配列
  • #6 文字列とテンプレートリテラル
  • #7 モジュール — importとexport

今回の記事は、JavaScriptがどこでどのように動くのかから整理し、NodeとViteでモダンな開発環境を整えて最初のコードを実行するところまで進めます。

JavaScriptはどこで動くのですか？ #

はじめて学ぶ方が一番混乱するのがここです。JavaScriptは1つではなく、2つの環境で動きます。

  1. ブラウザ — Webページにインタラクションを与える環境。Chrome/Safari/Firefoxのようなブラウザは、JavaScriptエンジンを内蔵しています。
  2. Node.js — JavaScriptをブラウザの外で、サーバーやツール作りに使えるようにしてくれるランタイム。2009年に登場し、JavaScriptの活用範囲が大きく広がりました。

同じJavaScriptでも、環境によって使えるものが異なります。

ブラウザでのみ可能 
document.querySelector('h1');  // DOM アクセス
window.location.href;           // URL
fetch('/api/users');            // ネットワークリクエスト
Nodeでのみ可能 
const fs = require('fs');       // ファイルシステムアクセス
fs.readFileSync('data.txt');    // ファイル読み込み
process.env.HOME;                // 環境変数

言語そのもの(変数、関数、繰り返し、オブジェクト)は両方で同じです。その上に環境ごとのAPIが乗る構造になっています。このシリーズは、両方の環境で動作する言語のコアに集中します。

Nodeをインストールする #

JavaScriptを一番早く手になじませる方法は、Nodeをインストールすることです。ブラウザは毎回HTMLを経由する必要があり、はじめて学ぶときは摩擦が大きくなります。

macOS / Linux #

Volta をおすすめします。一度入れておけば、Nodeのバージョンを自動で管理してくれます。

Volta インストール + Node LTS 
curl https://get.volta.sh | bash
volta install node@lts

直接ダウンロードもできます。nodejs.org からLTSバージョンを入手してください。

Windows #

Node公式サイトからWindows Installerをダウンロードしてインストール。それ以外には winget install OpenJS.NodeJS.LTS も使えます。

インストール確認 #

インストール確認 
node --version    # v22.x.x のような出力
npm --version     # 10.x.x のような出力

node と npm の両方のコマンドが応答すれば準備完了です。

REPL — 1行ずつ実行してみる #

Nodeをインストールしたら、ターミナルに node とだけ入力してみてください。JavaScriptを1行ずつ実行できるREPL(Read-Eval-Print-Loop)が起動します。

Node REPL 
> 1 + 1
2
> const greeting = 'こんにちは'
undefined
> greeting + ', JavaScript!'
'こんにちは, JavaScript!'
> .exit

学習初期には、このREPLが一番手軽な実験室です。新しい構文を見たときにここで一度叩いてみると、すばやく感覚をつかめます。終了は .exit または Ctrl+D です。

最初のファイルを作って実行する #

REPLは1行ずつ叩くときには良いのですが、複数行を扱うには窮屈です。作業フォルダを1つ作って、ファイルとして書いてみましょう。

作業フォルダを作成 
mkdir js-playground
cd js-playground

hello.js ファイルを作って、次の内容を書きます。

hello.js 
const name = 'カーティス';
console.log(`こんにちは、${name}さん!`);

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, n) => acc + n, 0);
console.log(`合計: ${sum}`);

実行:

ファイル実行 
node hello.js
出力 
こんにちは、カーティスさん!
合計: 15

これがJavaScriptで小さなツールやスクリプトを作るときの基本的な流れです。ファイル作成 → node ファイル名 で実行。

ブラウザで実行してみる #

Web開発をするには、結局ブラウザでも動かせる必要があります。一番手軽な方法は、HTMLファイルを作って <script> タグで挟み込むことです。

index.html 
<html lang="ko">
  <head><title>JS 第一歩</title></head>
  <body>
    <h1 id="message"></h1>
    <script>
      const el = document.getElementById('message');
      el.textContent = 'ブラウザからこんにちは!';
    </script>
  </body>
</html>

このファイルをダブルクリックで開くか、VS CodeのLive Server拡張で実行すれば動きます。

ただし毎回HTMLファイルを手で扱うのは面倒です。そのためモダンな環境では、Vite のような開発サーバーツールを使います。

モダンな開発環境 — Vite #

Viteは、JavaScriptプロジェクトの開発サーバー、ビルド、モジュールシステムをまとめて処理してくれるツールです。ReactシリーズやTypeScriptシリーズで既に登場しました。バニラJavaScriptプロジェクトもViteで始められます。

Vite バニラ JS プロジェクト 
npm create vite@latest my-vanilla -- --template vanilla
cd my-vanilla
npm install
npm run dev

http://localhost:5173 をブラウザで開くと、デフォルトのページが表示されているはずです。src/main.js がエントリーポイントです。これを修正して保存すると、ブラウザが即座に更新されます(HMR — Hot Module Replacement)。

このシリーズでは、シンプルな例は node で、DOMが必要な例はViteで 動かしていきます。

コードエディタ #

VS Code が一番よく使われる選択肢です。最初は他の拡張なしでも十分です。慣れてきたら、次の2つくらいが役立ちます。

  • Prettier — 保存時に自動フォーマット
  • ESLint — コードスタイル/構文の警告

このシリーズでは、どちらも強制しません。慣れるまではツールを最小限にしておくほうが、学習には向いています。

JavaScriptの2つの顔 — 標準はECMAScript #

古い資料を見ると「ES5」「ES2015」「ES6」のような用語がよく登場します。JavaScriptの公式仕様の名前がECMAScript だからです。1年に1度、新しいバージョンが出ます。

  • ES2015 (= ES6) — let/const、アロー関数、クラス、モジュールなど大きな変更。現代JavaScriptの基準線。
  • ES2017 — async/await
  • ES2020 — オプショナルチェイニング (?.)、null合体 (??)
  • ES2022 — クラスのprivateフィールド (#)、top-level await
  • ES2024 — 毎年アップデート中

このシリーズはすべて、ES2015以降のモダンJavaScript を基準に進めます。var のような古い構文はほとんど扱いません。

まとめ #

今回の記事で整理した内容:

  • JavaScriptはブラウザ とNode の2つの環境で動く
  • Nodeをインストール(Voltaがおすすめ) → REPLまたは node ファイル名 で実行
  • ブラウザは <script> またはVite開発サーバーで動かす
  • エディタはVS Codeが無難。最初は拡張を最小限に
  • シリーズはモダンJavaScript(ES2015+)が基準

次の記事(#2 変数と型)では、変数宣言(let/const)とJavaScriptの基本的な型、そして型変換でよく出会う落とし穴を整理します。

X