VS CodeでJavaScriptファイルを作成してみよう

学習の目標

本章では、以下の内容を学習します。

  • JavaScriptファイルの拡張子と基本的な命名規則を理解する
  • VS CodeでJavaScriptファイルを新規作成する手順を習得する
  • ファイルの保存方法と保存場所の選択方法を学ぶ
  • プロジェクトに適したフォルダ構成の作り方を理解する
  • VS CodeのJavaScript編集機能の基本的な使い方を習得する

はじめに

前章では、HTMLファイルにJavaScriptを組み込む方法を学びました。今回は、VS Code（Visual Studio Code）を使って、JavaScriptファイルを効率的に作成・管理する方法を学んでいきましょう。

VS Codeは、JavaScriptの開発に非常に適したエディタで、コードの色分け表示（シンタックスハイライト）、自動補完、エラー検出など、開発を支援する多くの機能が備わっています。

これらの機能を活用することで、より効率的にJavaScriptを書けるようになります。

JavaScriptファイルの拡張子と命名規則

JavaScriptファイルを作成する前に、まずファイルの基本的なルールを理解しておきましょう。

ファイルの拡張子について

JavaScriptファイルの拡張子は.jsです。この拡張子によって、コンピュータやエディタがそのファイルがJavaScriptコードであることを認識できます。

例えば、以下のようなファイル名が適切です。

  • script.js
  • main.js
  • app.js
  • utils.js

拡張子を正しく設定することで、VS Codeが自動的にJavaScriptの編集モードに切り替わり、コードの色分けや自動補完などの機能が利用できるようになります。

命名規則のポイント

JavaScriptファイルの命名には、いくつかの推奨される規則があります。

使用できる文字は、英数字、ハイフン（-）、アンダースコア（_）です。日本語の文字も技術的には使用可能ですが、開発現場では一般的に英語が使われます。

推奨される命名パターンとしては、ファイルの内容や役割が分かりやすい名前を付けることが重要です。例えば、計算機能を持つファイルならcalculator.js、ユーザー情報を扱うファイルならuser.jsといった具合です。

避けるべき文字として、スペース（空白）や特殊文字（#、%、&など）は使わないようにしましょう。これらの文字はファイルパスでエラーの原因となることがあります。

複数の単語を組み合わせる場合は、ハイフンで区切る方法（user-profile.js）や、キャメルケース（userProfile.js）が一般的です。

VS CodeでJavaScriptファイルを新規作成する手順

それでは、実際にVS CodeでJavaScriptファイルを作成してみましょう。複数の方法がありますので、順番に説明していきます。

方法1: ファイルメニューから作成

まず、VS Codeを起動してください。VS Codeが開いたら、以下の手順でファイルを作成します。

VSファイルメニューから新規ファイルを作成する手順

  1. 画面上部のメニューバーから「ファイル」をクリック
  2. 「新しいファイル」を選択（またはCtrl+N / Cmd+Nのショートカットキー）
  3. 新しいタブが開き、「Untitled-1」という名前で空のファイルが作成される

この時点では、まだファイルの種類が決まっていません。JavaScriptファイルとして認識させるために保存を行います。

「ファイル」メニューから「名前を付けて保存」を選択し（またはCtrl+Shift+S / Cmd+Shift+S）、ファイル名をmy-first-script.jsとして保存してください。

保存が完了すると、VS CodeがこのファイルをJavaScriptファイルとして認識し、画面右下に「JavaScript」と表示されます。

方法2: エクスプローラーから作成

VS Codeのサイドバーにあるエクスプローラー機能を使ってファイルを作成することもできます。

VS Codeエクスプローラーから新規ファイルを作成する手順

  1. VS Codeの左側にあるエクスプローラーアイコンをクリック
  2. 「フォルダーを開く」をクリックして、作業用のフォルダを選択
  3. エクスプローラー画面でフォルダ名の右側にある「新しいファイル」アイコンをクリック
  4. ファイル名の入力欄が表示されるので、practice.jsと入力してEnterキーを押す

この方法では、ファイル作成と同時に保存が行われ、すぐにJavaScriptファイルとして認識されます。

実際にコードを書いてみる

作成したファイルに、実際にJavaScriptのコードを記述してみましょう。my-first-script.jsファイルに以下のコードを入力してください。

// 最初のJavaScriptファイル
console.log("VS CodeでJavaScriptファイルを作成しました！");

// 変数を定義
let greeting = "こんにちは";
let name = "JavaScript";

// 変数を組み合わせてメッセージを作成
let message = greeting + "、" + name + "の世界へようこそ！";

// メッセージを表示
console.log(message);

コードを入力すると、VS Codeが自動的に色分けして表示することがわかります。キーワード（let、consoleなど）、文字列（クォーテーションで囲まれた部分）、コメント（//で始まる行）がそれぞれ異なる色で表示され、コードが読みやすくなります。

VS CodeでJavaScriptコードを入力する様子

ファイルの保存

コードを入力したら、必ず保存を行いましょう。保存方法は以下の通りです。

  • Ctrl+S（Windows）またはCmd+S（Mac）のショートカットキーを使用
  • メニューバーの「ファイル」→「保存」を選択

ファイルが保存されていない場合、ファイル名の横に白い丸（●）が表示されます。保存が完了すると、この丸が消えます。

VS Codeには自動保存機能もあります。「ファイル」メニューから「自動保存」を有効にすると、コードを入力するたびに自動的に保存されるようになります。

VS Codeの自動保存機能を有効にする方法

プロジェクトに適したフォルダ構成の作り方

JavaScriptを学習していく中で、複数のファイルを作成することになります。ファイルが増えてくると、適切なフォルダ構成で整理することが重要になります。

基本的なフォルダ構成

学習用のプロジェクトとして、以下のようなフォルダ構成を作成してみましょう。

まず、作業用のメインフォルダを作成します。デスクトップにjavascript-learningという名前のフォルダを作成してください。

次に、VS Codeでこのフォルダを開きます。

  1. VS Codeを起動
  2. 「ファイル」メニューから「フォルダーを開く」を選択
  3. 作成したjavascript-learningフォルダを選択して「フォルダーの選択」をクリック

フォルダが開かれると、VS Codeの左側エクスプローラーにjavascript-learningフォルダが表示されます。

VS Codeでフォルダを開く

実際にファイルを作成して整理してみる

では、適当なフォルダを作成し、いくつかのJavaScriptファイルを作成してみましょう。 まず、javascript-learningフォルダ内に01-basicsという名前のフォルダを作成します。

01-basics/variables.jsファイルを作成し、以下のコードを記述してみましょう。

// variables.js - 変数の学習
console.log("=== 変数の学習 ===");

// 基本的な変数の宣言
let studentName = "田中太郎";
let age = 20;
let isStudent = true;

// 変数の内容を表示
console.log("名前: " + studentName);
console.log("年齢: " + age);
console.log("学生かどうか: " + isStudent);

// 変数の値を変更
age = 21;
console.log("誕生日後の年齢: " + age);

同様に、01-basics/strings.jsファイルも作成してみましょう。

// strings.js - 文字列の学習
console.log("=== 文字列の学習 ===");

// 基本的な文字列
let firstName = "太郎";
let lastName = "田中";

// 文字列の結合
let fullName = lastName + " " + firstName;
console.log("氏名: " + fullName);

// 文字列の長さ
console.log("氏名の文字数: " + fullName.length);

// 文字列に含まれる文字の取得
console.log("名前の最初の文字: " + fullName[0]);

このように、学習内容ごとにファイルを分けることで、後から見直しやすくなります。

VS CodeのJavaScript編集機能を活用する

VS Codeには、JavaScript開発を効率化する多くの機能が備わっています。基本的な機能を確認してみましょう。

シンタックスハイライト

VS Codeは、JavaScriptのコードを自動的に色分けして表示します。これにより、コードの構造が視覚的に理解しやすくなります。

新しいファイルpractice/syntax-highlight.jsを作成し、以下のコードを入力してみてください。

// コメントは緑色で表示される
let message = "文字列は赤色で表示される"; // 文字列の色を確認

// キーワードは青色で表示される
function showMessage() {
    console.log(message);
    return true; // returnも青色で表示される
}

// 数値は異なる色で表示される
let number = 42;
let floatNumber = 3.14;

// 関数の呼び出し
showMessage();

このコードを入力すると、コメント、キーワード、文字列、数値がそれぞれ異なる色で表示されることがわかります。

自動補完機能

VS Codeは、入力中に自動的に候補を表示してくれます。この機能を確認してみましょう。

新しい行でconsと入力してみてください。すると、consoleという候補が表示されます。Tabキーを押すと、自動的にconsoleまで入力されます。

さらに、console.まで入力すると、log、error、warnなどのメソッドの候補が表示されます。

エラーの検出

VS Codeは、コードにエラーがある場合、赤い波線で警告してくれます。

試しに、以下のようなエラーのあるコードを入力してみてください。

// わざとエラーを作る
let message = "Hello World"
console.log(message; // 閉じ括弧が不足

このコードを入力すると、エラーのある行に赤い波線が表示され、問題のある箇所が視覚的にわかります。エラーの箇所にマウスを合わせると、具体的なエラーメッセージが表示されます。

VS Codeのエラー検出機能

エラーを修正してみましょう。

// エラーを修正
let message = "Hello World";
console.log(message); // 閉じ括弧を追加

修正すると、赤い波線が消えることが確認できます。

まとめ

本章では、VS CodeでJavaScriptファイルを作成・管理する方法について学習しました。以下のポイントを理解できたことと思います。

  • JavaScriptファイルの拡張子は.jsで、適切な命名規則を守ることが重要
  • VS Codeでファイルを作成する方法は複数あり、用途に応じて使い分けられる
  • プロジェクトに適したフォルダ構成を作ることで、学習内容を整理しやすくなる
  • VS Codeのシンタックスハイライト、自動補完、エラー検出機能を活用することで効率的に開発できる

適切なファイル管理とVS Codeの機能を活用することで、JavaScriptの学習がより効率的に進められるようになります。次回は、ブラウザの開発者ツールを使って、作成したJavaScriptコードをさらに詳しく確認・デバッグする方法について学んでいきます。

作成者:とまだ
JavaScriptコースの完了状況を確認
Previous
HTMLファイルにJavaScriptを組み込む方法を学ぼう
Next
ブラウザの開発者ツールを使ってみよう