jsファイル(ジェイエスファイル)とは?書き方と読み込み方法を解説

5分で読める

カテゴリ:ファイル拡張子|更新日:2026-08-03 09:44:18

この記事の要点:
  • 1 jsファイルとは、JavaScriptのコードを保存する拡張子「.js」のテキストファイル
  • 2 htmlは構造、jsファイルは動きを担当するという役割の違いがある
  • 3 jsonファイルとは、プログラムとデータという目的の違いで区別される
  • 4 jsファイルはテキストエディタで作成でき、保存やhtmlへの読み込みも簡単

jsファイルとは、拡張子が「.js」となっているファイルで、JavaScriptのコードを保存するために使われます。Webページに動きをつけたいとき、htmlファイルとは別にjsファイルを用意し、そこにコードを書いておくのが一般的です。

ただ、「jsファイルの作り方が分からない」「HtmlとJavaScriptの違いがよく分からない」という方もおられるのではないでしょうか。以下で基本から作り方、読み込み・開き方・保存方法を説明します。

jsファイルとは?基本をわかりやすく解説

jsファイルの仕組みを理解すると、htmlファイルやjsonファイルとの違いも見えてきます。

jsファイルとは

jsファイルとは、JavaScriptで書かれたコードを保存したテキストファイルです。中身は文字だけで構成されており、メモ帳などのテキストエディタで開くことができます。

Webブラウザがこのファイルを読み込むことで、ボタンの動作やアニメーション、入力チェックなどが実現します。

拡張子「.js」の意味

js 拡張子とは、そのファイルがJavaScriptのコードであることを示す目印です。「script.js」のように末尾に「.js」をつけることで、ブラウザがJavaScriptファイルとして認識します。拡張子を変更すると認識できなくなるため注意が必要です。

Webページでの役割

htmlが構造、cssが見た目を担うのに対し、jsファイルは「クリックしたら何かが起きる」といった振る舞いの部分を担当します。ボタンを押すとメニューが開く、といった動きの裏側にjsファイルが存在しています。

HTMLとJavaScriptの違い

HtmlとJavaScriptの違いを整理すると、Htmlはページの構造を作る言語、JavaScriptは動きを与える言語です。役割が異なるため、両者は組み合わせて使うことが前提になっています。

htmlファイル内に直接JavaScriptを書くこともできますが、コードが増えると管理が煩雑になるため、jsファイルとして切り出して読み込む形が一般的です。

jsファイルとJSONファイルの違い

名前は似ていますが、jsファイルはJavaScriptの処理を書くためのファイル、jsonファイルはデータを保存するためのファイルという点で目的が異なります。

jsonファイルは「{"name": "田中", "age": 30}」のようにデータを構造化して記述する形式で、プログラムを記述するjsファイルとは役割が違うものとして区別しておくとよいでしょう。

jsファイルの作り方

jsファイルの作り方は簡単で、特別なソフトを用意しなくてもパソコン標準のテキストエディタで作成できます。

  • メモ帳など任意のテキストエディタを開きます。

  • JavaScriptのコードを記述します(例:console.log("Hello");)。

  • 「名前を付けて保存」を選択します。

  • ファイル名の末尾を「.js」にして保存します(例:script.js)。

作成したjsファイルは、後述の方法でhtmlファイルから読み込むことで動作させられます。

jsファイルの開き方・保存方法

作成したjsファイルの開き方や保存方法について説明します。

jsファイルの開き方

jsファイルは、テキストファイルとして開けば内容を確認できます。

  • jsファイルを右クリックします。

  • 「プログラムから開く」を選択します。

  • 「Notepad」などのテキストエディタを選び、「常に使う」をクリックします。

    jsファイルを開く

jsファイルの保存手順

保存の際は、保存先フォルダと拡張子に注意します。

  • 編集内容を確認します。

  • 「名前を付けて保存」を選びます。

  • 拡張子が「.js」になっていることを確認して保存します。

    jsファイルを保存

読み込みを行う場合は、htmlファイル内で <script src="ファイル名.js"></script> と記述し、パスを正しく指定することがポイントです。

消えたjsファイルを復元する方法

作業中の誤操作やシステムの不具合によって、保存したはずのjsファイルが見つからなくなることがあります。こうした場合、手動でのファイル捜索だけでは限界があり、復元が難しいケースも少なくありません。

このような状況への対処として、データ復元ソフトのTenorshare 4DDiGを利用する方法があります。4DDiGは誤って削除したファイルだけでなく、フォーマットや予期しないトラブルで消えたファイルの復元にも対応しており、専門知識がなくても操作しやすい点が特徴です。

開発中のjsファイルを失った場合の備えとして、こうしたツールの存在を知っておくと安心につながります。

具体的な操作手順は次のとおりです。

無料ダウンロード

安全なダウンロード

無料ダウンロード

安全なダウンロード

  • Tenorshare 4DDiG を起動し、削除したjsファイルが存在するハードディスクやパーティションを選択し、スキャンします。

    ハードディスクをスキャン
  • しばらく待つと、消してしjsファイルが表示されます。復元前に、写真、ドキュメントなどのファイルをダブルクリックすることによりプレビューが可能です。

    ファイルをプレビュー
  • 復元したいファイルを選択し、保存場所を選択します。例えばOneDriveまたはGoogle Driveなどのクラウドディスクに保存することを検討してください。

    ファイルを復元
注意:

※データの上書きを防ぐため、元の保存場所とは異なるドライブや、OneDrive・Googleドライブなどのクラウドストレージを保存先に選ぶことを推奨します。

まとめ

jsファイルとは、JavaScriptのコードを保存する拡張子「.js」のテキストファイルです。jsファイルの作り方や開き方、保存方法はテキストエディタで誰でも扱えます。

ただ誤操作や故障など作業中にファイルが消えてしまうトラブルに備え、Tenorshare 4DDiGのようなデータ復元ソフトを知っておくと、いざというときでも安心して対処ができるでしょう。

無料ダウンロード

安全なダウンロード

無料ダウンロード

安全なダウンロード

💡 AIで記事の要点をまとめる

ChatGPT ChatGPT Google Google AI モード Perplexity Perplexity Grok Grok

森川 颯 (編集者)

4DDiGの編集長として、データ復元、ファイル修復、重複ファイルの削除、パーティション管理、あらゆる種類のパソコンの問題に対するエラー修復など、Windows および Mac 関連の問題に対する最適な解決策を提供することに専念しています。

(この記事を評価する)

平均点4.5人が評価しました)