• Skip to main content
  • Skip to primary sidebar

プログラミング入門ナビ

プログラミング学習初心者のための情報メディア by Proglus(プログラス)

You are here: Home / プログラミング入門 / JavaScriptの「net::ERR_FILE_NOT_FOUND」エラーが出る原因と対処方法を紹介!

JavaScriptの「net::ERR_FILE_NOT_FOUND」エラーが出る原因と対処方法を紹介!

2020-04-29 By プログラミング入門ナビ編集部

Tweet
このエントリーをはてなブックマークに追加
Pocket

目次

  • 1 はじめに
  • 2 ファイルは呼び出し元から見たパスで検索される
  • 3 JavaScriptの「net::ERR_FILE_NOT_FOUND」エラーが出る原因は?
  • 4 エラーへの対処方法
    • 4.1 方法1:ファイルを正しい場所に配置し直す
    • 4.2 方法2:ファイルパスを正しく修正する
  • 5 まとめ
  • 6 今すぐメルマガ登録!
  • 7 動画で学ぶプログラミング入門

はじめに

JavaScriptのエラー画面

JavaScriptを実行した時、エラーが出てしまうことがありますね。

ブラウザのコンソールで確認すると発生しているエラーのエラーコードを見ることができます。

この記事では、その中でもよくある「net::ERR_FILE_NOT_FOUND」のエラー発生原因とその対処方法を紹介します。

なお、JavaScriptの開発方法については下記講座で詳しく解説していますので、興味のある方はぜひ受講を検討ください。

  • ウェブ開発入門完全攻略コース -プログラミングをはじめて学び創れる人へ!未経験から現場で使える開発スキルを習得!
  • WE09-JavaScript入門

ファイルは呼び出し元から見たパスで検索される

OK画面

例えば上記画面の左側「Project」の様なファイル配置のプロジェクトがあったとしましょう。

「hello.html」の7行目でJavaScriptファイル「hello.js」を呼び出しています。「hello.html」はweb/js_basicの下にありますね。

さらに同じ階層に「js」フォルダがあり、その中に「hello.js」があるので、呼び出す時のファイルパスは

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

となります。

「hello.html」のファイルがある場所(web/js_basic/)から見ると、自分と同じ場所に「js」フォルダがあるのでこのようなパスとなるわけです。

JavaScriptの「net::ERR_FILE_NOT_FOUND」エラーが出る原因は?

これは簡単にいいますと指示されたパスにJavaScriptのファイルが見つからないために発生するエラーです。

ファイルパスの指定が間違っている、もしくは、ファイルパスは合っているが呼び出し元のファイルを想定した場所に置けていないことが原因となります。

例えば、先ほどの例で誤って「hello.html」を下記のように web > js_basic > js の下に置いてしまったとしましょう。

NG画面

この場合は、「hello.html」から見ると同じ階層に「js」フォルダが見えないので「js/hello.js」とファイルパスを指定されても見つけられずエラーとなってしまいます。

エラーへの対処方法

このような場合はまず呼び出すファイルパスが正しいかどうか?を確認し、場合に応じて下記の方法でエラーを解消しましょう。

方法1:ファイルを正しい場所に配置し直す

ファイルパスが正しい場合、ファイル呼び出し元のファイル(先ほどの例では「hello.html」)を想定通りの正しい場所に配置し直しましょう。

先に出した例で「hello.html」の7行目に書いたファイルパス:

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

に合わせて「hello.html」の場所を見直してください。jsフォルダが見えるよう、web/js_basic/jsの下ではなく、web/js_basicの下に置かなければなりません。

なお、「はじめに」で紹介した講座では上記のファイルパスを正としていますので、こちらのパターンとなります。

方法2:ファイルパスを正しく修正する

ファイルパスが正しくない場合は、ファイルパスを修正します。

例えば先ほどの例で「hello.html」はweb/js_basic/jsの下になければならない、という場合はファイルパスを下記のように直さなければなりません。

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

呼び出し元の「hello.html」と「hello.js」が同じ階層にあるため、フォルダ名が無しとなるわけです。

まとめ

パソコンの前でショックを受ける女性

JavaScriptの「net::ERR_FILE_NOT_FOUND」エラーが出る主な原因と対処方法について紹介しました。

紹介した方法で解決しない場合でも、ファイルパスとファイルの場所が合っていないことが主な原因ですので、今一度ファイルの場所やパスに間違いがないか確認してみてください。

動画で学ぶプログラミング入門

オンラインスクールProglus(プログラス)でプログラミングを学んで、創れる人になろう!

在宅学習応援!今なら複数の基礎コースが無料!!

今すぐ詳細を確認する

Tweet
このエントリーをはてなブックマークに追加
Pocket

Filed Under: プログラミング入門 Tagged With: error, HTML, JavaScript

Primary Sidebar

Proglus

Twitter

Follow @programmingnavi Tweets by programmingnavi

人気の記事

  • MySQLをXAMPPを使ってWindows環境にインストールする方法
  • 無料のSSL証明書Let’s Encryptを設定・更新・自動更新する方法(CentOS7, Apache2.4対応)
  • 初心者のプログラミング学習には13インチのMacBook Proがおすすめ!その理由も解説!
  • Visual Studio CodeでHTMLを書くときの便利な設定方法!ミスの防止や開発効率UPに役立てよう
  • よくあるSQLのエラーの種類と自力でエラーを取り除く方法について説明します
  • macOSで2つのファイルの差分を確認するには?便利なdiffツールを紹介
  • AWS Cloud9のプレビューが上手く表示されない時の対処法
  • WindowsからSSHでサーバに接続する方法(RLogin利用)
  • MySQL 5.7 for Windowsのアンインストール方法
  • Apacheインストール時にエラー Cannot find a valid baseurl repo: base/7/x86_64

最近の投稿

  • ウェブアプリケーションエンジニアになりたい!何を学習するべきか?
  • VSCodeで画像が表示されない場合の対処法
  • プログラミング学習での「質問のお作法」を理解しよう!最小限のやりとりで効率的に解決!
  • VirtualBoxでNATとホストオンリーアダプターによる安全なネットワーク環境構築方法
  • TypeScriptとは?JavaScriptとの違いは?人気の理由を徹底解説!

カテゴリー

  • エンジニアのしごと
  • エンジニアへの道
  • ツールの使い方
  • ニュース
  • プログラミング入門

タグクラウド

AI AWS AWS Cloud9 Bootstrap Cloud9 CodeWing CSS Git GitHub Heroku HTML JavaScript li Linux macOS MySQL MySQL Workbench Nuxt.js ol Proglus Python Ruby Ruby on Rails SQL Udemy vscode Vue.js Web開発 Windows インストール エラー エンジニア オンライン学習 サーバー スクリーンショット セール プログラミング プログラミング入門 プログラミング学習 ユーデミー 初心者 改行 未経験 機械学習 開発環境構築

アーカイブ

  • 2021年1月
  • 2020年12月
  • 2020年11月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年7月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年2月
  • 2020年1月
  • 2019年11月
  • 2019年9月
  • 2019年7月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年10月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月

検索

Copyright © 2021 · programmingnavi.com ・About・プライバシーポリシー