【第2回】準備はOK？開発環境を整えよう！ | JavaScript入門

はじめに

前回の記事「JavaScriptってなんだろう？Web開発の第一歩を踏み出そう！」では、JavaScriptがWebサイトに「動き」と「インタラクティブ性」を与える魔法の言語であり、現代のWeb開発においていかに不可欠な存在であるか、そしてその広がる可能性とキャリアチャンスについて深く掘り下げて解説しました。JavaScriptがWebの骨格（HTML）と見た目（CSS）に「生命」を吹き込む役割を担っていることをご理解いただけたかと思います。

さあ、JavaScriptの魅力に触れ、いよいよ実際にコードを書き始める準備が整いましたね。しかし、プログラミングを始めるには、ただ「コードを書く場所」があればいいというわけではありません。効率的に、そして楽しく学習を進めるためには、適切な「開発環境」を整えることが非常に重要になります。

本記事では、JavaScriptを学び、実際にWeb開発を行う上で必要となる基本的なツールとそのセットアップ方法を、プログラミング初心者の方でも迷わないよう、ステップバイステップで丁寧に解説していきます。これらのツールを使いこなすことで、あなたのJavaScript学習は格段にスムーズになり、より実践的なスキルを身につけることができるでしょう。

このガイドを読み終える頃には、あなたのPCはJavaScript開発のための準備が万端になり、いよいよ本格的なコーディングの旅に出発する準備が整っているはずです。Ping Tech Blogと一緒に、Web開発の次のステップへ進みましょう！

なぜ開発環境が必要なのか？

「JavaScriptはブラウザで動くなら、メモ帳でコードを書いてブラウザで開けばいいのでは？」と思うかもしれません。確かに、非常にシンプルなJavaScriptコードであればそれでも動作します。しかし、本格的なWeb開発や効率的な学習には、専用の「開発環境」が不可欠です。その理由をいくつか見てみましょう。

1. 効率的なコード記述:
   • メモ帳のようなシンプルなテキストエディタでは、コードの書き間違い（タイプミス）があっても気づきにくいものです。開発用のエディタには、コードの色分け表示（シンタックスハイライト）や、入力中のコードを予測して補完してくれる機能（オートコンプリート）があり、ミスを減らし、記述速度を向上させます。
   • また、コードの整形機能（フォーマッター）を使えば、読みやすいコードを自動で保つことができます。
2. エラーの発見と修正（デバッグ）:
   • プログラムは、少しのミスでも期待通りに動作しないことがあります。開発環境には、コードのどこでエラーが発生したのか、その原因は何かを特定するのを助ける「デバッグツール」が備わっています。これにより、問題解決の時間を大幅に短縮できます。
3. コードの実行と確認のしやすさ:
   • Webブラウザの「開発者ツール」を使えば、書いたJavaScriptコードがどのように動作しているかをリアルタイムで確認したり、Webページ上の要素がJavaScriptによってどのように変化しているかを視覚的に追跡したりできます。
   • また、JavaScriptはブラウザだけでなく、サーバーサイドなどブラウザ外でも動作させることができ、そのための実行環境も開発には含まれます。
4. 機能拡張とプロジェクト管理:
   • 現代のWeb開発は、非常に多くのライブラリやフレームワークを利用します。開発環境には、これらの外部ツールを効率的に管理・導入する仕組みが備わっており、大規模なプロジェクトでもスムーズに開発を進めることができます。

これらの理由から、JavaScriptを学ぶ上では、単にコードを書くだけでなく、それを効率的に管理・実行・デバッグできる環境を整えることが、学習効率とモチベーション維持に直結します。

JavaScript開発に必須のツール

JavaScript開発環境を整える上で、最低限導入しておきたいツールは以下の2つです。

1. Webブラウザ（開発者ツール付き）
2. テキストエディタ（コードエディタ）

さらに、JavaScriptをより深く学び、本格的な開発を行うために導入しておくと便利なツールとして、Node.jsも紹介します。

1. Webブラウザ（Google Chrome推奨）

Webブラウザは、私たちが普段Webサイトを閲覧するために使っているソフトウェアですが、開発者にとってはJavaScriptコードの実行環境であり、強力なデバッグツールでもあります。特にGoogle Chromeは、その「開発者ツール（Developer Tools）」が非常に高機能で使いやすいため、Web開発のデファクトスタンダードとなっています。

• 開発者ツールでできること:
  • Console（コンソール）: JavaScriptのエラーメッセージや、console.log()で出力した情報を確認できます。簡単なJavaScriptコードを直接入力して実行することも可能です。
  • Elements（要素）: WebページのHTML構造とCSSスタイルをリアルタイムで確認・編集できます。JavaScriptがHTML要素にどのような影響を与えているかを視覚的に追跡するのに役立ちます。
  • Sources（ソース）: 実行中のJavaScriptコードを確認し、ブレークポイントを設定してコードの実行を一時停止させ、変数の値などを詳細に調査できます。これは、バグの原因を特定する「デバッグ」作業で非常に重要です。
  • Network（ネットワーク）: Webページが読み込んでいるファイル（HTML、CSS、JavaScript、画像など）や、サーバーとの通信状況を確認できます。非同期通信（Ajax/Fetch API）のデバッグに役立ちます。

セットアップ方法: Google Chromeがまだインストールされていない場合は、Google Chromeの公式サイトからダウンロードしてインストールしてください。特別な設定は不要です。

2. テキストエディタ（Visual Studio Code推奨）

プログラミングコードを書くためのソフトウェアを「テキストエディタ」または「コードエディタ」と呼びます。数多くのエディタが存在しますが、現在最も人気があり、初心者からプロまで幅広く利用されているのが「Visual Studio Code（VS Code）」です。

• VS Codeが選ばれる理由:
  • 無料かつ高機能: Microsoftが開発しており、無料で利用できるにも関わらず、プロの開発現場でも通用する非常に豊富な機能を備えています。
  • シンタックスハイライト: コードの種類（JavaScript、HTML、CSSなど）に応じて色分けして表示してくれるため、コードが格段に読みやすくなります。
  • オートコンプリート（入力補完）: コードの入力中に、次に入力すべきコードの候補を自動で表示してくれます。これにより、タイプミスを減らし、コードを記述する速度が向上します。
  • 統合ターミナル: VS Code内でコマンドライン（ターミナル）を開いて、Node.jsの実行やGitコマンドなどを直接実行できます。
  • 豊富な拡張機能: 世界中の開発者が作成した「拡張機能」をインストールすることで、さらに機能を強化できます。例えば、コードの自動整形、Git連携、Webサーバー機能など、開発をサポートする様々なツールを追加できます。
  • デバッグ機能: コードの実行を一時停止し、変数の値を確認しながらステップ実行できるデバッグ機能が統合されています。

セットアップ方法:

1. ダウンロード: Visual Studio Codeの公式サイトにアクセスし、お使いのOS（Windows, macOS, Linux）に合ったインストーラーをダウンロードします。
2. インストール: ダウンロードしたインストーラーを実行し、指示に従ってインストールを進めます。特にこだわりがなければ、デフォルトの設定で問題ありません。
3. 日本語化（任意）: VS Codeを起動後、左側のアクティビティバーにある「Extensions（拡張機能）」アイコンをクリックし、検索窓に「Japanese Language Pack for Visual Studio Code」と入力してインストールします。インストール後、VS Codeを再起動すると日本語化されます。
4. 便利な拡張機能の導入（推奨）:
   • Live Server: HTMLファイルを保存するたびにブラウザが自動で更新される（リロードされる）ようになります。開発効率が大幅に向上します。
   • Prettier - Code formatter: コードを自動で整形し、常に読みやすい状態に保ってくれます。チーム開発でもコードのスタイルを統一するのに役立ちます。
   • ESLint: JavaScriptのコードに潜在的な問題やスタイル違反がないかをチェックしてくれます。

3. Node.js（JavaScript実行環境）

JavaScriptは元々Webブラウザの中でしか動作しませんでしたが、2009年に「Node.js」が登場したことで、JavaScriptをWebブラウザの外、つまりPCのデスクトップ環境やサーバー上で実行できるようになりました。

• Node.jsでできること:
  • サーバーサイド開発: Webアプリケーションのバックエンド（サーバー側）をJavaScriptで構築できます。これにより、フロントエンドとバックエンドで同じJavaScript言語を使える「フルスタック開発」が可能になります。
  • コマンドラインツールの開発: JavaScriptでPC上で動作するユーティリティツールを作成できます。
  • ビルドツールの実行: 現代のWeb開発では、コードを最適化したり、複数のファイルをまとめたりする「ビルド」という作業が頻繁に行われます。Node.jsは、これらのビルドツールを実行するための基盤となります。
  • パッケージ管理（npm/Yarn）: Node.jsには「npm (Node Package Manager)」という強力なパッケージ管理ツールが付属しています。これにより、世界中の開発者が公開している便利なJavaScriptライブラリやフレームワーク（React, Vue.jsなど）を簡単にインストールして、自分のプロジェクトで利用できるようになります。

セットアップ方法:

1. ダウンロード: Node.jsの公式サイトにアクセスし、「LTS (長期サポート)」版をダウンロードすることをおすすめします。安定性が高く、多くのプロジェクトで利用されています。
2. インストール: ダウンロードしたインストーラーを実行し、指示に従ってインストールを進めます。npmも一緒にインストールされます。
3. インストール確認: インストールが完了したら、VS Codeの統合ターミナル（またはコマンドプロンプト/ターミナル）を開き、以下のコマンドを入力してEnterキーを押します。

   node -v
   npm -v

   それぞれNode.jsとnpmのバージョン番号が表示されれば、正しくインストールされています。

最初のJavaScriptコードを実行してみよう！

開発環境の準備が整ったところで、いよいよ最初のJavaScriptコードを書いて実行してみましょう。

1. ブラウザで実行する（HTMLファイル経由）

最も基本的なJavaScriptの実行方法です。

1. 新しいフォルダの作成: PCの好きな場所に「my-first-js-app」のような新しいフォルダを作成します。
2. HTMLファイルの作成: 作成したフォルダ内に、VS Codeで「index.html」という名前のファイルを新規作成し、以下のコードを記述して保存します。

   <!DOCTYPE html>
   <html lang="ja">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>初めてのJavaScript</title>
   </head>
   <body>
       <h1>Hello, JavaScript!</h1>
       <p>コンソールを見てみよう！</p>
   
       <script>
           // これはJavaScriptのコメントです。
           // 画面に「Hello, World!」と表示します。
           console.log("Hello, World!");
   
           // アラートを表示します（学習用、実際のWebサイトでは非推奨）
           // alert("ようこそ、JavaScriptの世界へ！");
       </script>
   </body>
   </html>

3. ブラウザで開く: index.htmlファイルを保存したら、ファイルエクスプローラー（Windows）やFinder（macOS）からこのファイルをダブルクリックして、Webブラウザで開いてみてください。
   • Webページが表示され、もしalert()の行をコメントアウトしていなければ、ポップアップでメッセージが表示されるはずです。
   • 次に、ブラウザの開発者ツールを開いてください（Windows/macOS: F12キー または Ctrl+Shift+I / Cmd+Option+I）。「Console（コンソール）」タブをクリックすると、「Hello, World!」というメッセージが表示されているのが確認できるはずです。

これで、あなたの書いたJavaScriptコードがブラウザ上で実行されました！

2. Node.jsで実行する（ターミナル経由）

JavaScriptをブラウザ外で実行する方法です。

1. JavaScriptファイルの作成: 先ほど作成した「my-first-js-app」フォルダ内に、VS Codeで「app.js」という名前のファイルを新規作成し、以下のコードを記述して保存します。

   // これはJavaScriptのコメントです。
   // ターミナルにメッセージを表示します。
   console.log("Hello from Node.js!");
   
   let message = "Node.jsでJavaScriptを実行中！";
   console.log(message);

2. ターミナルを開く: VS Codeのメニューから「ターミナル」→「新しいターミナル」を選択します。ターミナルがVS Codeの下部に表示されます。
3. ディレクトリ移動: ターミナルで、app.jsファイルがあるフォルダに移動します。

   cd my-first-js-app

   （もし、VS Codeで直接フォルダを開いている場合は、この手順は不要な場合があります。）

4. JavaScriptファイルの実行: 以下のコマンドを入力してEnterキーを押します。

   node app.js

   ターミナルに「Hello from Node.js!」と「Node.jsでJavaScriptを実行中！」というメッセージが表示されれば成功です。

これで、JavaScriptコードがNode.js環境で実行されました。同じJavaScriptコードでも、実行環境によってできることや使い方が異なることを理解する第一歩です。

まとめ：開発環境を整え、学習の準備は万端！

本記事では、JavaScriptを学習し、Web開発を行う上で不可欠な「開発環境」の重要性と、その具体的なセットアップ方法について詳しく解説しました。

• 開発環境の必要性: 効率的なコード記述、エラーの発見と修正、コードの実行と確認のしやすさ、機能拡張のために必要です。
• 必須ツール:
  • Webブラウザ（Google Chromeの開発者ツール）: JavaScriptの実行とデバッグの主戦場です。
  • テキストエディタ（Visual Studio Code）: コードを効率的に記述し、管理するための強力なツールです。
• 発展的なツール:
  • Node.js: JavaScriptをブラウザ外で実行し、サーバーサイド開発やパッケージ管理を可能にします。

これらのツールをあなたのPCに導入し、実際に最初のJavaScriptコードを実行できたことで、あなたはWeb開発の本格的なスタートラインに立ちました。開発環境は、あなたのプログラミング学習を強力にサポートしてくれる頼もしいパートナーとなるでしょう。

次回の記事「初めてのJavaScript！コンソールに「Hello, World!」を表示してみよう」では、今回整えた開発環境を使って、いよいよJavaScriptの基本的な文法と、Web開発の「Hello, World!」を実際に体験していきます。

Ping Technologiesは、あなたのエンジニアとしての成長と、Web開発の世界での輝かしい活躍を心から応援しています！