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

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

新規登録して質問してみよう
ただいま回答率
85.47%
ウェブブラウザ

ウェブブラウザ(インターネットブラウザ)とは、www上に公開されている情報リソースをユーザーに視覚的提供・操作させる機能を持ったソフトウェアプログラムです。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

961閲覧

スマホブラウザでのjsファイルの読み込み

nosuke09

総合スコア9

ウェブブラウザ

ウェブブラウザ(インターネットブラウザ)とは、www上に公開されている情報リソースをユーザーに視覚的提供・操作させる機能を持ったソフトウェアプログラムです。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2023/06/19 01:42

編集2023/06/19 03:03

実現したいこと

PCで配布しているhtmlファイルのjsをスマホで動かしたい。
基本的なjsはscriptタグに直接記述しています。ただ、関数の数が多いため外部ファイルの読み込みの必要があるのですが、その際エラーが発生しています。
PCでは動作していますが、スマホブラウザではエラーが出ます。

前提

VSCodeのLive Serverを利用し、ポート番号5500でhtmlを公開します。ここで同一LANに接続しているスマホでこのhtmlにアクセスします。
IPアドレス:ポート番号/pathの様な形でhtmlにアクセスできました。
利用したいjsですが、クラスを宣言して、その中で関数を作成しています。これを利用したい。外部jsファイルを読み込むために

JavaScript

1<script src="http://IPアドレス:5500/path/example.js"></script>

と記述し

JavaScript

1const example = new Example();

として関数を利用しています。PCでは問題なく動作するのですが、スマホでアクセスした際に「Cannot access uninitialized variable」となります。エラー内容的には「初期化していない変数を利用した際に出るエラー」のようで原因を特定してみようと色々と試し、
const example = new Example();
こちらをコメントアウトすると
Can't find variable: exampleというエラーが発生することを確認。(コメントアウトしているので当然見つからないわけですが)
おそらく、jsファイルが読み込めず変数が初期化できないまま利用しているので
「Cannot access uninitialized variable」というエラーが発生したと思います。

知りたいこと

外部jsの読み込み方法です。PCでは動作しているので
ローカルではない、外部からのアクセスに問題があって書き方を変える必要があるのか、スマホ特有のエラーにより書き換えの必要があるかなど知りたいです。

追記

ファイルの開示ですが、公開できないコードなので中途半端な説明になってしまいました。

・スマホはiOSでブラウザはSafariです。
・PCはmacでブラウザはGoogleChromeですが、Safariでの動作も確認できてます。
・script内にasync関数は入っています。PCローカルのjsonファイルの受け渡しをする必要があるため非同期関数にしています。jsonファイルの受け渡し自体はスマホブラウザでも確認できました。

最後に大まかなコードの流れだけになってしまいますが載せておきます。
ただ、下記のように簡単なコードを作成すると普通に動作したのでjsファイルの読み込みが悪いのではなく、外部jsファイルの中身自体がスマホで動作しないコードがあるのかもしれないです...

html

1<!DOCTYPE html> 2<html> 3 <head> 4 <title>HTMLテンプレート</title> 5 <button onclick="createSentence()">クリック</button> 6 </head> 7 <body> 8 <h1>Hello, World!</h1> 9 <script src="../path/example.js"></script> 10 <script> 11 const url1 = "http://IPアドレス:5500/path/file.json"; 12 const url2 = "http://IPアドレス:5500/path/file2.json"; 13 14 15 let file1 = { key1: "value1", }; 16 let file2= { key1: "value1", }; 17 // jsonファイルの受け取り 18 const fetchData = async () => { 19 try { 20 await Promise.all([ 21 fetch(url1).then((response) => response.json()), 22 fetch(url2).then((response) => response.json()), 23 ]) 24 .then((data) => { 25 file1 = data[0]; 26 file2 = data[1]; 27 }) 28 .catch((err) => { 29 console.error("JSONファイルの取得に失敗しました", err); 30 }); 31 } catch (err) { 32 console.log(err); 33 } 34 }; 35 36 fetchData(); 37 38 const example = new Example(1, 2); 39 40 const createSentence = async () => { 41 alert(example._add()); 42 }; 43 </script> 44 </body> 45</html> 46

javascript:example.js

1class Example { 2 constructor(a, b) { 3 this._a = a; 4 this._b = b; 5 } 6 7 _add() { 8 const c = this._a + this._b 9 return c; 10 } 11}

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

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

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

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

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

int32_t

2023/06/19 02:43 編集

中途半端な情報だけだと色々な可能性を確認する手間がかかるので、問題が再現する完全な HTML と JavaScript ファイルを開示すべきです。とくに Example コンストラクタの実装は必要です。 * 「スマホ」とは iOS でしょうか Android でしょうか両方でしょうか。 * 「PC」とはWindowsですかmacOSですか Google Chrome ですか Safari ですか Firefox ですか。 * どこかの <script> に async や defer や type=module が付いてませんか?
nosuke09

2023/06/19 06:18

追記しました
guest

回答1

0

ベストアンサー

スマホだからといって外部スクリプトの読み込み方法に違いはありません。

一般的にネットワークもCPUも遅めになるので <script defer> <script async> <script type=module> などは読み込み完了タイミングがデスクトップと異なり隠れていた問題が顕在化することがあります。現在の質問文のコードではこれは該当しません。

スマホかどうかは関係なく、ブラウザのバージョンの違いなどで挙動が異なることはあります。

現在の質問文のコードでは Cannot access uninitialized variable のエラーは出ないと思われるので、質問文に書かれていないことが原因で問題が起きているのでしょう。

投稿2023/06/19 06:08

編集2023/06/19 06:27
int32_t

総合スコア20884

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

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

nosuke09

2023/07/03 01:08

おっしゃる通り、プログラム特有の部分のエラーでした。詳細は省きますが、長い配列を使用するため、PCとスマホのメモリの違いでスマホではメモリが足りずエラーが発生していた様です。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.47%

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

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

質問する

関連した質問