JavaScript

JavaScriptファイルの拡張子.jsとは？初心者向け基礎知識

JavaScriptファイルの拡張子.jsについて初心者向けに解説。ファイルの作成方法、保存形式、他の拡張子との違いを詳しく説明します。

Learning Next 運営
約 26 分で読めます
JavaScriptファイル拡張子.js基礎知識初心者向け

JavaScriptファイルの拡張子.jsとは？初心者向け基礎知識

みなさん、プログラミングを始めたばかりで「.jsファイルって何？」って疑問に思ったことはありませんか？

「JavaScriptのコードはどうやって保存するの？」 「.jsファイルの作り方が分からない」

こんな悩みを持っている初心者の方は多いですよね。

この記事では、JavaScriptファイルの拡張子.jsについて初心者向けに詳しく解説します。 ファイルの作成方法から実際の使用例まで、基本的な知識を一緒にマスターしていきましょう。

ファイル拡張子って何のこと？

ファイル拡張子とは、ファイル名の最後に付けられた文字列で、そのファイルの種類を示すものです。

簡単に言うと、「このファイルがどんな種類のデータなのかを教えてくれる目印」です。 拡張子によって、コンピューターはそのファイルをどのように開けばよいかを判断できます。

よく見る拡張子の例

様々なファイル形式の拡張子を見てみましょう。

テキストファイル、画像ファイル、音声ファイルなど、それぞれに決まった拡張子があります。

  • テキストファイル: .txt
  • HTMLファイル: .html
  • CSSファイル: .css
  • 画像ファイル: .jpg, .png, .gif
  • 音声ファイル: .mp3, .wav
  • 動画ファイル: .mp4, .avi
  • Microsoft Word: .docx
  • PDF: .pdf
  • JavaScriptファイル: .js ← 今回の主役

拡張子は通常、ファイル名の後にピリオド（.）を付けて表記されます。

.js拡張子の基本を理解しよう

.jsファイルとは

.js拡張子は、JavaScriptのプログラムコードが書かれたファイルを示します。

JavaScriptのコードをテキストファイルに書いて、拡張子を.jsにすることで、そのファイルがJavaScriptプログラムであることを明示できます。

.jsファイルの特徴

.jsファイルの基本的な特徴を理解しましょう。

// これは .js ファイルの中身の例です


// 変数の定義
let message = 'Hello, World!';


// 関数の定義
function sayHello(name) {
    return `こんにちは、${name}さん！`;
}


// 関数の実行
console.log(sayHello('田中'));


// DOM操作（ブラウザで実行される場合）
document.addEventListener('DOMContentLoaded', function() {
    document.body.innerHTML = '<h1>JavaScriptが動いています！</h1>';
});

このようなJavaScriptのコードを.jsファイルに保存することで、ブラウザやNode.jsで実行できます。

上記のコードを順番に見ていきましょう。

まず、変数の定義から。

let message = 'Hello, World!';

letを使ってmessageという変数に文字列を保存しています。

次に、関数の定義です。

function sayHello(name) {
    return `こんにちは、${name}さん！`;
}

sayHelloという関数を作成して、名前を受け取って挨拶メッセージを返します。

.jsファイルの作成方法

基本的な作成手順

.jsファイルを作成する基本的な手順です。

手順1: テキストエディターを開く

使用できるエディターはいくつかあります。

  • メモ帳（Windows）
  • テキストエディット（Mac）
  • Visual Studio Code（推奨）
  • Atom、Sublime Text など

手順2: JavaScriptコードを記述

// 最初のJavaScriptファイル
console.log('Hello, JavaScript!');


let currentTime = new Date();
console.log('現在時刻:', currentTime);

手順3: ファイルを保存

保存時の設定が重要です。

  • ファイル名: hello.js
  • 保存場所: デスクトップなど分かりやすい場所
  • エンコーディング: UTF-8（推奨）

実際の作成例を試してみよう

実際に.jsファイルを作成してみましょう。

// ファイル名: calculator.js


// 電卓の基本機能
function add(a, b) {
    return a + b;
}


function subtract(a, b) {
    return a - b;
}


function multiply(a, b) {
    return a * b;
}


function divide(a, b) {
    if (b === 0) {
        return 'エラー: 0で割ることはできません';
    }
    return a / b;
}


// 使用例
console.log('10 + 5 =', add(10, 5));
console.log('10 - 5 =', subtract(10, 5));
console.log('10 × 5 =', multiply(10, 5));
console.log('10 ÷ 5 =', divide(10, 5));

このコードをcalculator.jsとして保存すれば、JavaScriptファイルの完成です。

電卓機能の各関数について詳しく見てみましょう。

まず、足し算の関数です。

function add(a, b) {
    return a + b;
}

二つの数値を受け取って、足し算の結果を返します。

割り算の関数では、0で割る場合のエラー処理も含まれています。

function divide(a, b) {
    if (b === 0) {
        return 'エラー: 0で割ることはできません';
    }
    return a / b;
}

bが0の場合は、エラーメッセージを返して安全に処理します。

.jsファイルの使用方法

HTMLファイルで読み込む

最も一般的な使用方法は、HTMLファイルから.jsファイルを読み込むことです。

<!DOCTYPE html>
<html>
<head>
    <title>JavaScriptファイルのテスト</title>
</head>
<body>
    <h1>JavaScriptファイルのテスト</h1>
    <button id="testButton">クリックしてください</button>
    
    <!-- JavaScriptファイルを読み込み -->
    <script src="script.js"></script>
</body>
</html>

対応するscript.jsファイル：

// ファイル名: script.js


// ページが読み込まれたときの処理
document.addEventListener('DOMContentLoaded', function() {
    console.log('ページが読み込まれました');
    
    // ボタンのクリック処理
    const button = document.getElementById('testButton');
    button.addEventListener('click', function() {
        alert('ボタンがクリックされました！');
        console.log('ボタンクリック時刻:', new Date());
    });
});


// ユーティリティ関数
function getCurrentTime() {
    return new Date().toLocaleString('ja-JP');
}


// 定期的に時刻を表示
setInterval(function() {
    console.log('現在時刻:', getCurrentTime());
}, 5000); // 5秒ごと

HTMLファイルでの読み込み方法を詳しく見てみましょう。

<script src="script.js"></script>

<script>タグのsrc属性で、読み込みたいJavaScriptファイルのパスを指定します。

script.jsファイルの内容について説明します。

まず、ページ読み込み完了時の処理です。

document.addEventListener('DOMContentLoaded', function() {
    console.log('ページが読み込まれました');
    // ここに初期化処理を書く
});

DOMContentLoadedイベントを使うことで、HTMLの読み込みが完了してからJavaScriptを実行できます。

Node.jsで実行する方法

Node.jsを使用して、.jsファイルを直接実行することもできます。

// ファイル名: hello-node.js


// Node.js環境での実行例
console.log('Node.jsでJavaScriptを実行中...');


// ファイルシステムの操作（Node.js固有）
const fs = require('fs');


// 現在のディレクトリのファイル一覧を表示
fs.readdir('.', (err, files) => {
    if (err) {
        console.error('エラー:', err);
        return;
    }
    
    console.log('現在のディレクトリのファイル:');
    files.forEach(file => {
        console.log('- ' + file);
    });
});


// 簡単なHTTPサーバー
const http = require('http');


const server = http.createServer((req, res) => {
    res.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'});
    res.end('<h1>こんにちは、Node.js!</h1>');
});


server.listen(3000, () => {
    console.log('サーバーがポート3000で起動しました');
    console.log('http://localhost:3000 でアクセスできます');
});

このファイルをターミナルで実行：

node hello-node.js

Node.jsでの実行方法について詳しく説明します。

ファイルシステムの操作部分を見てみましょう。

const fs = require('fs');

requireを使って、Node.jsのファイルシステムモジュールを読み込みます。

fs.readdir('.', (err, files) => {
    // ディレクトリ内のファイル一覧を取得
});

現在のディレクトリ（.）にあるファイルの一覧を取得しています。

関連する拡張子との違い

.html vs .js

HTMLファイルとJavaScriptファイルの違いを理解しましょう。

<!-- ファイル名: index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>HTMLとJSの違い</title>
</head>
<body>
    <h1>これはHTMLファイルです</h1>
    <p>HTMLはページの構造を定義します</p>
    
    <!-- JavaScriptコードを直接記述 -->
    <script>
        console.log('HTMLファイル内のJavaScript');
    </script>
    
    <!-- 外部JavaScriptファイルを読み込み -->
    <script src="external.js"></script>
</body>
</html>
// ファイル名: external.js
console.log('これは外部JSファイルです');


// HTMLファイルとは独立して管理できる
function showMessage() {
    alert('外部JSファイルの関数が実行されました');
}

HTMLファイルとJavaScriptファイルの使い分けについて説明します。

HTMLファイル内にJavaScriptを書く方法：

<script>
    console.log('HTMLファイル内のJavaScript');
</script>

HTMLファイル内に直接JavaScriptコードを書くことができます。

外部JavaScriptファイルを読み込む方法：

<script src="external.js"></script>

別ファイルに保存したJavaScriptコードを読み込んで使用できます。

.mjs（ES Modules）との違い

モダンなJavaScriptでは.mjsという拡張子も使われます。

// ファイル名: module.mjs


// ES Modules形式でのエクスポート
export function greet(name) {
    return `Hello, ${name}!`;
}


export const PI = 3.14159;


export default class Calculator {
    add(a, b) {
        return a + b;
    }
}
// ファイル名: main.mjs


// ES Modules形式でのインポート
import Calculator, { greet, PI } from './module.mjs';


console.log(greet('World'));
console.log('円周率:', PI);


const calc = new Calculator();
console.log('計算結果:', calc.add(5, 3));

.mjsファイルの特徴について説明します。

エクスポート（export）の部分：

export function greet(name) {
    return `Hello, ${name}!`;
}

exportキーワードを使って、他のファイルから使える関数を公開します。

インポート（import）の部分：

import Calculator, { greet, PI } from './module.mjs';

importキーワードを使って、他のファイルから関数やクラスを読み込みます。

.ts（TypeScript）との違い

TypeScriptファイルの拡張子は.tsです。

// ファイル名: example.ts


// TypeScriptは型を指定できる
function add(a: number, b: number): number {
    return a + b;
}


interface User {
    name: string;
    age: number;
    email?: string; // オプショナル
}


const user: User = {
    name: '田中太郎',
    age: 30
};


// TypeScriptをJavaScriptにコンパイルして使用
console.log(add(10, 20));
console.log(user.name);

TypeScriptの特徴について説明します。

型指定の部分：

function add(a: number, b: number): number {
    return a + b;
}

引数と戻り値に型（この場合はnumber）を指定できます。

インターフェース定義：

interface User {
    name: string;
    age: number;
    email?: string; // オプショナル
}

オブジェクトの構造を定義して、型安全性を向上させます。

実際のプロジェクトでの使い方

プロジェクトの基本構成

実際のWebプロジェクトでの.jsファイルの配置例です。

my-website/ ├── index.html ├── css/ │ └── style.css ├── js/ │ ├── main.js │ ├── utils.js │ └── components/ │ ├── header.js │ └── footer.js ├── images/ │ └── logo.png └── README.md

各ファイルの役割：

// js/utils.js - ユーティリティ関数
function formatDate(date) {
    return date.toLocaleDateString('ja-JP');
}


function isEmail(email) {
    return email.includes('@') && email.includes('.');
}


// グローバルに公開
window.Utils = {
    formatDate,
    isEmail
};
// js/components/header.js - ヘッダー関連の処理
function initHeader() {
    const header = document.querySelector('header');
    const nav = header.querySelector('nav');
    
    // ナビゲーションの開閉
    const menuButton = header.querySelector('.menu-button');
    menuButton.addEventListener('click', function() {
        nav.classList.toggle('open');
    });
}


// ページ読み込み時に初期化
document.addEventListener('DOMContentLoaded', initHeader);
// js/main.js - メインの処理
// 他のJSファイルが読み込まれた後に実行


document.addEventListener('DOMContentLoaded', function() {
    console.log('メインスクリプトが開始されました');
    
    // ユーティリティ関数の使用
    if (window.Utils) {
        const today = window.Utils.formatDate(new Date());
        console.log('今日の日付:', today);
    }
    
    // フォームのバリデーション
    const contactForm = document.getElementById('contact-form');
    if (contactForm) {
        contactForm.addEventListener('submit', function(e) {
            const email = this.querySelector('input[type="email"]').value;
            
            if (!window.Utils.isEmail(email)) {
                e.preventDefault();
                alert('正しいメールアドレスを入力してください');
            }
        });
    }
});

ファイル構成について詳しく説明します。

utils.jsでは、共通で使える便利な関数を定義しています。

function formatDate(date) {
    return date.toLocaleDateString('ja-JP');
}

日付を日本語形式でフォーマットする関数です。

header.jsでは、ヘッダー部分の動作を管理しています。

function initHeader() {
    // ヘッダーの初期化処理
}

ページごとに共通するヘッダーの機能をまとめています。

HTMLでの読み込み順序

JavaScriptファイルの読み込み順序は重要です。

<!DOCTYPE html>
<html>
<head>
    <title>ファイル読み込み順序のサンプル</title>
</head>
<body>
    <header>
        <nav>
            <button class="menu-button">メニュー</button>
        </nav>
    </header>
    
    <main>
        <form id="contact-form">
            <input type="email" placeholder="メールアドレス" required>
            <button type="submit">送信</button>
        </form>
    </main>
    
    <!-- 依存関係を考慮した読み込み順序 -->
    <script src="js/utils.js"></script>           <!-- 1番目: ユーティリティ -->
    <script src="js/components/header.js"></script> <!-- 2番目: コンポーネント -->
    <script src="js/main.js"></script>              <!-- 3番目: メイン処理 -->
</body>
</html>

読み込み順序の重要性について説明します。

まず、基本的なユーティリティ関数を読み込みます。

<script src="js/utils.js"></script>

次に、ユーティリティを使用するコンポーネントを読み込みます。

<script src="js/components/header.js"></script>

最後に、すべてを統合するメイン処理を読み込みます。

<script src="js/main.js"></script>

よくある問題と解決方法

ファイルが読み込まれない

よくある問題とその解決方法です。

<!-- 問題のあるコード -->
<script src="script.js"></script>


<!-- 解決方法1: パスを確認 -->
<script src="./js/script.js"></script>


<!-- 解決方法2: 絶対パス -->
<script src="/js/script.js"></script>


<!-- 解決方法3: デバッグ用ログ -->
<script>
console.log('スクリプトタグが実行されました');
</script>
<script src="js/script.js"></script>

ファイルパスの問題について詳しく説明します。

相対パスの場合：

<script src="./js/script.js"></script>

現在のHTMLファイルがある場所から見た相対的な位置を指定します。

絶対パスの場合：

<script src="/js/script.js"></script>

サイトのルートディレクトリからの絶対的な位置を指定します。

文字化け対策

ファイルのエンコーディング問題の解決方法です。

<!-- HTMLファイルでの文字エンコーディング指定 -->
<meta charset="UTF-8">


<!-- 外部JSファイルの読み込み時 -->
<script src="script.js" charset="UTF-8"></script>
// script.js - 日本語コメントと文字列
// このファイルはUTF-8で保存してください


console.log('こんにちは、世界！'); // 日本語文字列
const message = '正常に表示されていますか？';
console.log(message);

文字化け対策について説明します。

HTMLファイルでの設定：

<meta charset="UTF-8">

ページ全体の文字エンコーディングをUTF-8に指定します。

JavaScriptファイルでも、UTF-8で保存することが重要です。

まとめ

JavaScriptファイルの拡張子.jsは、JavaScriptコードを保存し実行するための基本的で重要な仕組みです。

今回学習した内容をまとめると以下の通りです：

基本的な知識：

  • .js拡張子はJavaScriptファイルを示す標準的な拡張子
  • テキストエディターで作成し、UTF-8エンコーディングで保存
  • HTMLから読み込んだり、Node.jsで直接実行可能

ファイル管理のポイント：

  • プロジェクトの規模に応じて適切なファイル構成が重要
  • 読み込み順序を考慮した設計
  • 関連する拡張子（.mjs、.ts）との使い分けの理解

実践での活用：

  • HTMLとの連携方法の理解
  • 複数ファイルでの協調動作
  • エラー対策と文字化け防止

.jsファイルを適切に理解し活用することで、JavaScriptプログラミングの基礎をしっかりと身につけることができます。

これらの基礎知識を活用して、本格的なJavaScriptプログラミングに挑戦してみませんか？

きっと素晴らしいWebアプリケーションが作れるようになりますよ！

関連記事

JavaScriptの難易度は？文系・未経験でも理解できる学習ステップ

文系出身や未経験者でもJavaScriptを習得できる？難易度と効率的な学習方法を詳しく解説。挫折しないための具体的なステップを紹介します。

2025年7月6日
12分

【初心者向け】JavaScriptとは？30分でわかる基本概念と学習の始め方

プログラミング初心者にもわかりやすく、JavaScriptの基本概念から学習方法まで30分で理解できる完全ガイド。今すぐプログラミングの世界に飛び込みましょう。

2025年7月6日
14分

【2025年版】JavaScriptとは？初心者向けに5分でわかりやすく解説

JavaScriptとは何かを初心者向けに5分で理解できるよう解説。歴史、特徴、学習方法まで2025年最新情報でわかりやすく紹介します。

2025年7月6日
9分