【ECMAScript編】第1回：EcmaScriptの世界へようこそ

導入：冒険の始まり

「EcmaScript基礎マスターへの道」へようこそ！

このシリーズでは、Web開発の基盤技術であるJavaScriptの標準仕様であるEcmaScriptの基礎を、実践的に学び、マスターすることを目指します。

第1回となる今回は、EcmaScriptがどのようなものかを知り、実際にコードを書き始めるための開発環境を準備します。開発環境のセットアップは、プログラミング学習の最初のステップであり、非常に重要です。ここでしっかりと準備を整え、今後の学習をスムーズに進めましょう。

メイン解説：EcmaScriptの理解と開発環境の構築

1. EcmaScriptとは何か？

多くの人が「JavaScript」という言葉を耳にしたことがあるでしょう。実は、厳密に言うと「EcmaScript」と「JavaScript」は異なるものを指します。

• EcmaScript（ES）：JavaScriptの「仕様」を定めた国際的な標準規格です。どのような機能が、どのように動作すべきか、といったルールの集まりだと考えてください。Ecma Internationalという標準化団体によって策定されています。
• JavaScript：EcmaScriptの仕様に基づいて実装されたプログラミング言語です。Google ChromeのV8エンジンやFirefoxのSpiderMonkeyなど、各ブラウザやNode.jsといった実行環境が、このEcmaScriptの仕様に則ってJavaScriptを実装しています。

つまり、私たちは「EcmaScript」という設計図に基づいた「JavaScript」という家を建てている、というイメージです。このシリーズでは、基盤となる「EcmaScript」の仕様と文法を深く理解することを目指します。

2. なぜEcmaScriptを学ぶのか？

EcmaScript（JavaScript）は、現代のソフトウェア開発において最も利用されている言語の一つです。

• Webフロントエンド開発：Webページに動きやインタラクティブな要素を追加するために不可欠です。React, Vue.js, Angularといった人気のフレームワークもJavaScriptベースです。
• Webバックエンド開発：Node.jsを使えば、サーバーサイドのアプリケーションもJavaScriptで構築できます。
• モバイルアプリ開発：React NativeやNativeScriptのようなフレームワークを使えば、iOS/AndroidアプリもJavaScriptで開発可能です。
• デスクトップアプリ開発：Electronを使えば、SlackやVS CodeのようなデスクトップアプリもJavaScriptで開発できます。

EcmaScriptを学ぶことは、Web開発の可能性を広げるだけでなく、幅広いアプリケーション開発への道を開くことになります。

3. 開発環境の準備

それでは、いよいよ実際にコードを書くための環境を構築しましょう。今回は以下のツールを導入します。

• Visual Studio Code (VS Code)：高機能なコードエディタ
• Node.js：ローカルでJavaScriptを実行するための環境
• npm：JavaScriptのパッケージマネージャー（Node.jsに含まれる）

ステップ1：VS Codeのインストール

VS Codeは、無料で使える高機能なコードエディタです。多くのプログラマーに愛用されており、拡張機能も豊富で開発効率を大幅に向上させます。

1. Visual Studio Codeの公式ウェブサイト にアクセスします。
2. お使いのOS（Windows, macOS, Linux）に対応するバージョンをダウンロードし、インストーラーの指示に従ってインストールします。

ステップ2：Node.jsとnpmのインストール

Node.jsは、Webブラウザの外でJavaScriptを実行できる「JavaScriptランタイム」です。Node.jsをインストールすると、npm（Node Package Manager）も同時にインストールされます。npmは、JavaScriptのライブラリやツールを管理するための重要なツールです。

1. Node.jsの公式ウェブサイト にアクセスします。
2. 「LTS (長期サポート版)」と書かれたバージョンをダウンロードすることをお勧めします。安定しており、ほとんどのプロジェクトで推奨されています。
3. ダウンロードしたインストーラーを実行し、指示に従ってインストールを進めます。特に設定を変更する必要がなければ、デフォルトのままで問題ありません。

インストールが完了したら、正しくインストールされたかを確認しましょう。
ターミナル（macOS/Linux）またはコマンドプロンプト（Windows）を開き、以下のコマンドを入力して実行します。

node -v
npm -v

以下のようにバージョン情報が表示されれば、インストールは成功です（バージョン番号は環境によって異なります）。

v20.10.0  # nodeのバージョン
10.2.3    # npmのバージョン

ステップ3：最初のEcmaScriptコードを実行してみよう

開発環境が整ったので、実際に簡単なEcmaScriptコードを書いて実行してみましょう。

1. まず、作業用のプロジェクトフォルダを作成します。ターミナル（またはコマンドプロンプト）で以下のコマンドを実行してください。

   mkdir ecmascript-master
   cd ecmascript-master
   

2. 次に、このフォルダをVS Codeで開きます。ターミナルで以下のコマンドを実行するか、VS Codeの「ファイル」メニューから「フォルダを開く」を選択してecmascript-masterフォルダを指定します。

   code .
   

3. VS Codeの左側のエクスプローラーで、ecmascript-masterフォルダ内で右クリックし、「新しいファイル」を選択して hello.js という名前のファイルを作成します。
4. hello.jsファイルに以下のコードを記述してください。

   console.log("EcmaScriptの世界へようこそ！");
   

   console.log()は、開発者ツールやターミナルにメッセージを出力するための基本的な関数です。

5. VS Codeの統合ターミナル（「表示」メニュー -> 「ターミナル」で開けます）または先ほど開いたターミナルに戻り、以下のコマンドを実行します。

   node hello.js
   

   ターミナルに「EcmaScriptの世界へようこそ！」と表示されれば成功です！
   これで、あなたの書いたEcmaScriptコードがNode.jsによって実行されたことになります。

ステップ4（推奨）：Prettierの導入

コードのフォーマット（整形）は、可読性を高め、チーム開発での一貫性を保つために非常に重要です。Prettierは、コードを自動で整形してくれるツールです。

1. まず、プロジェクトの初期化を行います。これはnpmでパッケージを管理するために必要です。

   npm init -y
   

   package.jsonというファイルが作成されます。

2. 次に、Prettierをプロジェクトにインストールします。

   npm install --save-dev prettier
   

   これでPrettierがプロジェクトに追加され、package.jsonにその情報が記録されます。

3. Prettierの設定ファイルを作成します。ecmascript-masterフォルダ直下に .prettierrc.json というファイルを作成し、以下の内容を記述してください。

   {
     "singleQuote": true,
     "trailingComma": "all",
     "printWidth": 80
   }
   

   これは、文字列をシングルクォートにしたり、末尾にカンマをつけたり、一行の幅を80文字に制限したりする設定です。

4. VS CodeのPrettier拡張機能をインストールします。VS Codeの左側にある拡張機能アイコン（四角が並んだアイコン）をクリックし、「Prettier – Code formatter」を検索してインストールします。
5. 最後に、VS Codeがファイルを保存するたびに自動でPrettierを使ってフォーマットするように設定します。「ファイル」メニュー -> 「ユーザー設定」-> 「設定」を開き、検索バーで「format on save」と検索し、「Editor: Format On Save」にチェックを入れます。さらに「default formatter」と検索し、「Editor: Default Formatter」で「esbenp.prettier-vscode」を選択します。

これで、ファイルを保存するたびにPrettierがコードを整形してくれるようになります。例えば、半角スペースを入れ忘れたり、インデントがずれていたりしても、保存時に自動で修正されるため、常にきれいなコードを保つことができます。

まとめ：準備完了、次なるステップへ

第1回では、以下のことを学び、実践しました。

• EcmaScriptがJavaScriptの標準仕様であることを理解しました。
• EcmaScriptを学ぶことが、現代の多様な開発分野で非常に重要であることを確認しました。
• VS Code、Node.js、npmをインストールし、開発環境を構築しました。
• console.log()を使った最初のEcmaScriptコードを書き、Node.jsで実行しました。
• コードの自動整形ツールPrettierを導入し、開発効率とコード品質を高める準備をしました。

これで、本格的にEcmaScriptの学習を始めるための土台が整いました。
次回の第2回では、「変数とデータ型」という、プログラミングの最も基本的な概念について深く掘り下げていきます。今回準備した環境を使って、実際に手を動かしながら学習を進めましょう！

チャンネル登録 よろしくお願いします

こんにちわ！JS太郎です‼
このチャンネルでは、はじめてプログラミングをする人はもちろん、小学生からでも理解出来るように判りやすく解説しています。
是非、一緒にプログラミングを学んでご自身の付加価値を高めていきましょう。