JavaScript 入門

JavaScript 開発環境の構築

JavaScriptの真の力を引き出すためには、まずコードを記述、テスト、そして実行するための専用のスペースと適切なツールが必要です。

大工が工房を構え、のこぎりや金槌などの特定の道具を必要とするように、開発者にもコードエディタ、強力なデバッグ機能を備えたブラウザ、そして多くの場合、ブラウザの外でJavaScriptを実行するための環境が整ったワークベンチが必要です。

このセクションでは、この極めて重要な環境の構築方法をガイドし、あなたのコンピュータをJavaScript開発の強力な作業台へと変貌させます。このセッションが終わる頃には、すべての基礎コンポーネントが整い、以前議論した「JavaScriptとは何か」を土台にして、最初のJavaScriptプログラムを書き始める準備が整っているはずです。

1. コードエディタの選択：開発者のワークベンチ

コードエディタは、コンピュータプログラムを書くために設計された専用のソフトウェアです。技術的にはWindowsのメモ帳（Notepad）やmacOSのテキストエディット（TextEdit）のような単純なテキストエディタでもコードは書けますが、専用のコードエディタは生産性を大幅に向上させ、一般的なミスを防ぐための優れた体験を提供してくれます。

1.1 コードエディタとは？

基本的なテキストエディタとは異なり、コードエディタはプログラミングに特化した機能を提供します：

  • シンタックスハイライト (Syntax Highlighting): コードの各部分（キーワード、文字列、コメント、変数）が異なる色で表示されます。これによりコードが一目で理解しやすくなり、タイポ（打ち間違い）もすぐに見つけられます。
  • 自動補完/インテリセンス (Autocompletion/IntelliSense): 入力中に、エディタがコードや言語の構文に基づいて、単語、関数名、変数名の候補を提案します。時間の節約とエラーの削減に直結します。
  • エラー検出 (Error Detection): 多くのエディタは、入力中に潜在的な構文エラーや警告をハイライトし、コードを実行する前に即座にフィードバックを提供します。
  • コードフォーマット (Code Formatting): エディタは自動的にコードをインデントし、要素を整列させ、一貫したスタイルを維持します。これは可読性と共同プロジェクトにおいて非常に重要です。
  • 統合ターミナル (Integrated Terminal): 通常、エディタ内で直接コマンドラインを実行できるため、アプリケーションを切り替える必要がありません。
  • 拡張機能とプラグイン (Extensions and Plugins): 何万ものプラグインを通じて、新しい言語のサポート、デバッグツール、リンター (Linters) などの機能を追加し、エディタをカスタマイズできます。

1.2 Visual Studio Code (VS Code)

JavaScript開発、特に初心者にとって、Visual Studio Code (VS Code) は異論の余地のない業界標準です。Microsoftによって開発されたこのエディタは、無料でオープンソース、非常に強力で高度なカスタマイズが可能です。Windows、macOS、Linuxで動作し、異なるOS間でも一貫した体験を提供します。

1.3 なぜ VS Code が最適なのか：

  • 軽量かつ高速: 豊富な機能を持ちながら、VS Codeの起動は比較的速く、レスポンスも軽快です。
  • 卓越した JavaScript サポート: JavaScriptのサポートが標準で組み込まれており、インテリジェントな自動補完、シンタックスハイライト、デバッグ機能が最初から使えます。
  • 巨大な拡張機能エコシステム: 新しい言語のサポートからテーマ、リンター、特定のフレームワーク向けツールまで、考えつくあらゆる機能に拡張機能が存在します。
  • 統合ターミナル: VS Codeの内部で直接CLI (コマンドラインインターフェース) を開いて使用できます。
  • Git 統合: 最も人気のあるバージョン管理システムであるGitとシームレスに連携し、コードの変更履歴を管理できます。

1.4 Visual Studio Code インストールガイド：

  1. 公式サイトにアクセス: ブラウザで https://code.visualstudio.com を開きます。
  2. インストーラーをダウンロード: サイトがOSを自動検出し、対応するダウンロードボタン（例：「Download for Windows」や「Download for macOS」）を表示します。
  3. インストーラーを実行:
    • Windows: ダウンロードした .exe ファイルをダブルクリックします。ライセンス契約に同意します。インストール中に "Add 'Open with Code' action to Windows Explorer context menu"（エクスプローラーのコンテキストメニューに「Code で開く」アクションを追加する） のチェックボックスをオンにすることを強くお勧めします。
    • macOS: ダウンロードした .zip ファイルをダブルクリックして解凍します。展開された "Visual Studio Code" アイコンを「アプリケーション (Applications)」フォルダにドラッグします。
    • Linux: ディストリビューションに応じて .deb (Debian/Ubuntu用) または .rpm (Fedora/RHEL用) をダウンロードします。
  4. VS Code を起動: インストール完了後、アプリケーションフォルダやスタートメニューから起動するか、ターミナルで code と入力して起動します。

1.5 VS Code の基本構成：

初めてVS Codeを開くと、ウェルカム画面が表示されます。主なインターフェースは以下の構成になっています：

  • アクティビティバー (Activity Bar)（左端）: エクスプローラー（ファイル管理）、検索、ソース管理、実行とデバッグ、拡張機能などのビューを切り替えるアイコンが並びます。
  • サイドバー (Sidebar)（左側）: アクティビティバーで選択したビューの内容（プロジェクトのファイル一覧など）が表示されます。
  • エディタグループ (Editor Group)（中央）: コードを記述し、ファイルを表示するメインエリアです。
  • パネル (Panel)（下部）: 統合ターミナル、出力、デバッグコンソール、問題ビューなどが表示されます。

すべてのボタンを覚える必要はありません。最も重要なのは、大半の時間を過ごす中央のエディタ領域です。

2. ブラウザ：最初の JavaScript 実行環境

JavaScriptはもともとウェブページをインタラクティブにするために作られました。そのため、すべての現代的なWebブラウザにはJavaScriptを解釈・実行するための JavaScriptエンジン が組み込まれています。これにより、ブラウザはJavaScriptを実行するための、最も身近で強力な環境となります。

2.1 なぜブラウザなのか？

  • 遍在性: 誰もがWebブラウザを持っているため、JavaScriptを実行するためのユニバーサルなプラットフォームとなります。
  • セットアップ不要: 複雑なコンパイラやランタイムを必要とする他の言語とは異なり、ブラウザはいつでもJavaScriptを実行できる状態にあります。
  • 視覚的フィードバック: Webページを操作するJavaScriptを書くと、ブラウザ上で即座に視覚的な結果が得られ、コードの仕組みを理解するのに役立ちます。
  • デベロッパーツール: 現代のブラウザには、JavaScriptコードの検査、デバッグ、理解に不可欠な強力なツールが搭載されています。

2.2 デベロッパーツール

Google Chrome、Mozilla Firefox、Microsoft Edge、Apple Safariといった主要なブラウザには、一連の「デベロッパーツール (DevTools)」が含まれています。これらはフロントエンド開発とJavaScriptのデバッグにおいて革新的なツールです。

2.2.1 コンソール (Console) は DevTools の鍵となる部分です：

  • JavaScriptコードからの出力メッセージ（エラーメッセージや、動作確認のために意図的に出力したメッセージ）を確認できます。
  • 単一行のJavaScriptコードを直接入力して実行できるため、クイックテストや実験に最適です。

2.2.2 デベロッパーツールの開き方：

  • Google Chrome, Mozilla Firefox, Microsoft Edge:
    • ショートカット: Windows/Linux は F12、macOS は Cmd + Option + I。
    • メニュー: ページ上の任意の場所を右クリックし、「検証 (Inspect)」を選択。
  • Apple Safari:
    • まず、「開発」メニューを有効にする必要があります。「Safari > 設定 (Preferences) > 詳細 (Advanced)」で「メニューバーに”開発”メニューを表示」にチェックを入れます。
    • その後、「開発 > Webインスペクタを表示」を選択するか、Cmd + Option + I を押します。

DevToolsが開いたら、"Console"（コンソール） タブを探してください。ここがJavaScriptの出力を確認し、コマンドを入力する場所です。

3. Node.js：ブラウザ外の JavaScript（オプション、推奨）

ブラウザはWebページ上のJavaScriptを実行するのに最適ですが、モダンなJavaScript開発はブラウザの外まで広がっています。Node.js は、Webブラウザの外でJavaScriptコードを実行できるようにするランタイム環境です。Google Chromeと同じ V8 JavaScriptエンジンを使用しているため、非常に高速です。

3.1 Node.js とは何か？

Node.jsを、「Chromeのコアエンジンを取り出し、PC上の独立したアプリケーションとして使えるようにしたもの」と考えてください。これにより、JavaScriptを使って以下のようなことが可能になります：

  • サーバーサイドアプリケーション: WebサーバーやAPIの構築。
  • コマンドラインツール: PCのタスクを自動化するスクリプトの作成。
  • デスクトップアプリケーション: Electronなどのフレームワークの使用。
  • ビルドツール: プロジェクトの依存関係の管理、コードのコンパイル、テストの実行。

この初心者コースでは主にブラウザベースのJavaScriptに焦点を当てますが、Node.jsは現代のJavaScriptエコシステムの基盤であるため、早めにインストールしておくことを強くお勧めします。

3.2 Node.js のインストール

  1. 公式サイトにアクセス: https://nodejs.org/ja へ進みます。
  2. LTS バージョンをダウンロード: 通常、「LTS」（長期サポート版）と「Current」（最新版）の2つの選択肢があります。必ず LTS バージョンを選択してください。 安定性が高く、初心者にお勧めです。
  3. インストーラーを実行:
    • Windows/macOS: ダウンロードしたインストーラーを実行し、デフォルト設定のまま進めてください。パッケージマネージャである npm (Node Package Manager) も自動的にインストールされます。

3.3 Node.js と npm のインストール確認：

インストール後、システムのターミナルまたはコマンドプロンプトを開き、以下のコマンドを入力して Enter キーを押します：

node -v

インストールされたNode.jsのバージョン（例: v18.17.0）が表示されれば成功です。

npm -v

インストールされた npm のバージョン（例: 9.6.7）が表示されれば成功です。npmはNode.jsに付属する重要なツールで、プロジェクトに必要なパッケージやライブラリを管理するために使用します。

4. 実践アクティビティ：設定の確認

ツールがインストールできたら、すべてが正しく動作しているか確認しましょう。

4.1 Visual Studio Code を開く：

  1. VS Codeを起動し、インターフェースを確認します。
  2. 「ファイル (File)」メニューから「フォルダーを開く... (Open Folder...)」を選択します。
  3. PC上のアクセスしやすい場所に新しいフォルダ（例: Documents/javascript_basics）を作成し、そのフォルダを選択して開きます。

4.2 ブラウザデベロッパーツールの探索：

  1. ブラウザを開き、F12 または右クリックの「検証」でデベロッパーツールを開きます。
  2. "Console" タブに移動します。
  3. コンソールに 2 + 2 と入力して Enter を押します。4 と出力されれば、エンジンの動作確認は完了です。
  4. 次に console.log("コンソールからの挨拶！"); と入力して Enter を押します。

4.3 Node.js と npm の検証（インストール済みの場合）：

  1. ターミナルを開きます。
  2. node -v と npm -v を実行し、バージョン番号が表示されることを確認します。

お疲れ様でした！これで開発環境のセットアップは完了です。あなたはJavaScriptの旅を始めるための基礎ツールをすべて手に入れました。