プロジェクトを作成する

この章では、JavaScriptプロジェクトの基本となる構成を学び、実際にコードを実行するまでの手順を体験します。

npm initコマンドでプロジェクトを初期化

まず、新しいJavaScriptプロジェクトを作成していきましょう。

1. お好きな場所に新しいディレクトリ（フォルダ）を作成してください
2. ターミナル（コマンドプロンプト）でそのディレクトリに移動し、以下のコマンドを実行してください

npm init

実行すると、プロジェクトの名前や説明などについていくつか質問されますが、今回はすべてEnterキーを押してデフォルト値で進めてください。

npm initコマンドを実行すると、package.jsonというファイルが生成されます。このファイルは、JavaScriptプロジェクトの「設定ファイル」の役割を果たします。

豆知識

npm initは実際にはpackage.jsonファイルを作成するだけのコマンドです。このファイルは手動で作成することも可能ですが、コマンドを使うことで簡単に標準的な形式で作成できます。

package.jsonファイルがあるディレクトリは「JavaScriptプロジェクト」として認識され、様々な開発ツールがこのファイルを参照してプロジェクトの情報を取得します。

最初のJavaScriptファイルを作成

次に、実際にJavaScriptのコードを書いて実行してみましょう。

プロジェクトのルートディレクトリ（package.jsonと同じ場所）に、index.jsというファイルを新規作成し、以下のコードを記述してください。

// index.js
console.log('Hello World!')

なぜ index.js というファイル名なのでしょうか？

実は、JavaScriptプロジェクトでは「エントリーポイント」と呼ばれるメインファイルを指定する必要があります。

先ほど作成したpackage.jsonファイルを開いてみると、"main": "index.js"という記述があります。これが「このプロジェクトのメインファイルはindex.jsです」という意味になります。

もし別のファイル名を使いたい場合は、package.jsonのmainの値を変更すれば、そのファイル名でも動作します。例："main": "app.js"

コードを実行してみよう

index.jsファイルの作成が完了したら、いよいよコードを実行してみましょう。

ターミナルで以下のコマンドを実行してください：

node index.js

実行すると、ターミナルに以下のように表示されれば成功です：

Hello World!

🎉 おめでとうございます！あなたの最初のJavaScriptプログラムが正常に動作しました。

JavaScript実行環境について理解を深めよう

先ほど、ターミナル上でJavaScriptコードを実行しました。ここで、JavaScriptの実行環境について少し詳しく説明します。

JavaScriptは主に以下の2つの環境で実行できます：

1. ブラウザ環境

• Google Chrome、Firefox、Safariなどのウェブブラウザ内で実行
• ウェブページのインタラクティブな機能を実現
• HTML、CSSと組み合わせてウェブアプリケーションを作成

2. Node.js環境（サーバーサイド）

• ターミナル（コマンドライン）で実行
• ウェブサーバーやAPI、デスクトップアプリケーションの作成が可能
• 今回私たちが使用している環境

TIP

最近では、DenoやBunなど、Node.js以外の実行環境も登場していますが、Node.jsが最も広く使われており、学習の出発点として最適です。

この教材では、主にNode.js環境でJavaScriptを学習していきます。

まとめ

お疲れ様でした！この章で学習した内容を振り返ってみましょう。

学習できたこと

• npm initコマンドを使ったプロジェクトの初期化
• package.jsonファイルの役割と重要性
• JavaScriptファイルの作成とコードの記述
• Node.jsを使ったJavaScriptコードの実行
• JavaScript実行環境の基本的な理解

次のステップ

この章の学習により、JavaScriptプロジェクトの基本的なセットアップと実行ができるようになりました。🎉

次の章では、JavaScriptの関数について学習し、より実践的なコードの書き方を身につけていきます！