質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

import

自身のプラットフォーム・プログラム・データセットに対して、外部ソースを取り込むプロセスをimportと呼びます。

Webサーバー

Webサーバーとは、HTTPリクエストに応じて、クライアントに情報を提供するシステムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

811閲覧

計算結果を別のjavascriptファイルに渡し、HTML上に表示したい。

reevesii

総合スコア5

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

import

自身のプラットフォーム・プログラム・データセットに対して、外部ソースを取り込むプロセスをimportと呼びます。

Webサーバー

Webサーバーとは、HTTPリクエストに応じて、クライアントに情報を提供するシステムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/12/07 09:17

前提・実現したいこと

javascriptとHTMLでChrome上で動作するWebアプリを作っています。
メインのjsファイルで計算した値を別のjsファイル渡し、HTML上に表示したいです。

import-exportを使おうと、簡単なプログラムを試して見ましたが、以下のエラーメッセージが発生しました。CORSエラーに関する同様の質問でサーバーを立てようという提案がありましたが、何のサーバーなのか具体的な方法がわかりません。

requireの使用も検討しましたがnode.jsのインストールが必要とあり、他のメンバーも対応が必要だと考え、避けました。

代替手段等あれば教えていただきたいです。

発生している問題・エラーメッセージ

Access to script at 'file:///C:/Users/.../test.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. Failed to load resource: net::ERR_FAILED

該当のソースコード

javascript

1//myfunc.js 2export const tes = 11111;

Javascript

1//test.js 2 import {tes} from "./myfunc.js"; 3console.log(tes); 4

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>test</title> 6</head> 7<body> 8</body> 9 <script type="module" src="test.js"></script> 10</html>

試したこと

同様のテストプログラムとしてコードを以下に変更しましたが、同じエラーが出ました。

//myfunc.js export default function () { console.log("Hellow"); };
//test.js import {myfunc} from "./myfunc.js" myfunc();

また、メインのjsで計算した値を直接計算結果を表示するHTMLに参照させた場合、jsコード内でclass名を指定したHTML要素が見つからない(該当class名の要素はメインのHTML上にあり、計算結果を表示するHTMLにはないので当然)などのエラーでjavascriptの読み込みが途中で止まりました。

補足情報(FW/ツールのバージョンなど)

ブラウザ:Google Chrome is up to date
Version 78.0.3904.108 (Official Build) (64-bit)

エディター:Visual Studio Code
version:1.40.2(user setup)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

何のサーバーなのか具体的な方法がわかりません。

HTTPサーバ(WWWサーバとも言われます)です。

  1. Apacheなどの普及した高度なサーバーを導入する。
  2. NodeJS などを使い、自分で書く。
  3. 「簡易サーバー」を利用する。

学習コストをかけずに簡易サーバーを用いて
「ブラウザからのGET要求/サーバーの応答」を実体験するところから始めても良いと思います。


「簡易サーバー」の一例:

スタティックなWebページの動作確認用になります
(ブラウザ側で HTML+CSS+JavaScriptを使うページの動作確認ができます)。
サーバー側プログラムは設置できません(Ajax利用は GET要求 に限られる)

  1. 任意のフォルダを http://localhost(:port)/ に設定・変更できる。
  2. サーバーの起動/終了が設定パネル等で簡単に行える。
  3. アンインストールはChrome拡張を削除する方式

というシンプルさが特徴です。
表示ページで使う JavaScript の動作確認程度には使えます。


追記)
エラーメッセージは英語ですので、翻訳してでも読みましょう。
Chrome で ES モジュール(export-import)を利用しようとしてエラーが発生しています。

  • file:プロトコルからアクセスするとオリジン は nullで扱われ、CORS ポリシーに反するのでブロックした。

と丁寧に指摘してくれています。
それどころか、サポートされる プロトコルスキームまで列挙して対策を示してくれています。

列挙された中のプロトコルの一つである http: でアクセスする方法として、
サーバーが必要であることから「簡易サーバー」について回答させていただきました。

投稿2019/12/08 17:55

編集2019/12/08 20:12
AkitoshiManabe

総合スコア5432

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

reevesii

2019/12/08 23:05 編集

詳しい情報助かります!プログラミング初心者なので調べて再チャレンジします。
guest

0

代替手段等あれば教えていただきたいです。

Firefoxで行う、というのが手っ取り早いです。

投稿2019/12/07 10:54

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2019/12/07 10:56

あとは、「自分のマシンだけNode.jsでビルド環境を組んで、出来上がって1本になったJavaScriptファイルだけ配布する」という方法も考えられます。
reevesii

2019/12/08 04:01

node.jsを組み込んだjavascriptファイルをつくるということでしょうか?
maisumakun

2019/12/08 08:04

> node.jsを組み込んだjavascriptファイルをつくるということでしょうか? いえ、コンパイルしたあとにはふつうにブラウザで読めるJavaScriptファイルが出来上がります。Node.js本体が含まれることはありません。
reevesii

2019/12/08 23:03

.exeファイルをつくるんですね!ありがとうござします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問