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

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

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

XHR(別名XMLHttpRequest)はJavaScriptなどのスクリプト言語を使ってサーバーとHTTP通信を行うAPIを指します。

JavaScript

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

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

HTML

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

Q&A

解決済

3回答

8756閲覧

html 画面描画とJSの処理が終わってから処理を開始したい

poppoas

総合スコア12

XHR

XHR(別名XMLHttpRequest)はJavaScriptなどのスクリプト言語を使ってサーバーとHTTP通信を行うAPIを指します。

JavaScript

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

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

HTML

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

0グッド

0クリップ

投稿2020/03/10 06:28

編集2020/03/11 04:17

前提・実現したいこと

現在、お知らせ通知ができるwebアプリを作成しています。
RSSやAtomフィードから最新情報をもらってきて、新規の記事がある場合に、通知アイコンに未読件数が表示されるようにしたいと考えています。

ページが表示されるときに一緒に未読件数用のアイコンを表示したいのですが、フィードから最新情報を取得する部分でAjaxを用いているので、
非同期処理のため、うまくいきません。

外部ライブラリである、JQueryなどは仕様上使用できません。

当たり前ですが、ページが表示されてから、ボタンなどで再描画した際には未読通知アイコンは表示されています。
理想はページ表示と同時に未読通知アイコンを表示です。

Ajaxなどの非同期処理が完了した、というイベントなどを発行できれば楽なのですが、そういったものはありますでしょうか?

最終的な目標

Typescriptで書いている、Ajaxの処理が全て終わってからhtml内のjavascriptで未読アイコン表示の処理を行いたいです。
UI(html)とコア部分(Typescript)はUIだけコアに依存させる形にしたいです。

該当のソースコード

該当箇所のみ抜き出しています。
定義されてない変数などありますが、実際には定義してある体で記入してます。

html

1<!DOCTYPE html> 2<html> 3<head> 4<title>Page Title</title> 5<script type="text/javascript" src="../dist/index.umd.js"></script> 6<script type="text/javascript" src="mdi.js"></script> 7<link rel="stylesheet" type="text/css" href="../dist/index.css"> 8 9<script type="text/javascript"> 10 function initialize() { 11 var notice = new Notice(); 12 13 notice.addFeed("https://www.j-cast.com/tv/atom.xml"); 14 15 notice.loadInformations(); 16 17 var noticeIcon = new NoticeIconButton(notice); 18 var body = document.getElementsByTagName("BODY")[0]; 19 //ベルアイコン描画 20 body.appendChild(noticeIcon.render(mdiBellOutline)); 21 22     //未読アイコン描画 23 body.appendChild(noticeIcon.renderNotice()); 24 25 } 26</script> 27 28</head> 29<body onload="initialize()"> 30 31</body> 32</html>

Typescript

1Notice.ts 2 3loadInformations() { 4 var count=0 5 //最新情報を取得する 6 this.getLatestInformation(this._feeds[count], count, this._userId, this); 7 8 return true; 9 } 10 11private getLatestInformation(feedURL:string, count:number, userId:string, notice:Notice){ 12 var domParser = new DOMParser(); 13 14 new noticeDB = new NoticeDB(); 15 //データベースを作成する 16 noticeDB.dbCreate(this._dbName, this._storeName); 17 18 var xhr = new XMLHttpRequest(); 19 xhr.open('GET',feedURL); 20 xhr.send(); 21 22 xhr.onreadystatechange = function() { 23 24 if(xhr.readyState === 4 && xhr.status === 200){ 25 var feed_items:HTMLCollectionOf<Element>; 26 27 if(typeof(xhr.response) === 'string'){ 28 29 try{ 30 31 var feed_data:Document = domParser.parseFromString(xhr.response, "text/html"); 32 feed_items = feed_data.getElementsByTagName(notice._itemTag); 33 34 35 } 36 }catch{ 37 console.log('error'); 38 } 39 } 40 } 41 } 42 43 }

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

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

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

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

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

guest

回答3

1

ベストアンサー

質問の意味を理解できてるか不安ですがデータのロード後に処理を開始したいのであればコールバックを渡せばいいんじゃないでしょうか。

javascript

1notice.loadInformations(function() { 2 var noticeIcon = new NoticeIconButton(notice); 3 var body = document.getElementsByTagName("BODY")[0]; 4 //ベルアイコン描画 5 body.appendChild(noticeIcon.render(mdiBellOutline)); 6 7 //未読アイコン描画 8 body.appendChild(noticeIcon.renderNotice()); 9});
loadInformations(callback) { this.getLatestInformation(..., callback); (...) private getLatestInformation(..., callback) { // 何か色々やったあとにコールバックを呼ぶ callback();

投稿2020/03/11 01:14

kodai

総合スコア759

poppoas👍を押しています

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

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

poppoas

2020/03/11 01:38

質問文がわかりにくくて申し訳ありません。 恐らくkodaiさんが理解されている内容で会っていると思います。 まさしく自分が求めていた答えでした。 loadInformationでコールバックを渡すのは考えていませんでした。 とても参考になりました。ありがとうございます。
guest

0

処理の後に.then(function()){}とつなげるのはいかがでしょうか。
シンプルに見やすく書けるかと思います。

参考サイト

投稿2020/03/10 23:44

tmp-user

総合スコア44

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

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

0

以下のどれかですね。
0. Promiseを使ってthenチェーンで非同期処理をする
0. Promiseを使ってawait/asyncで非同期処理をする
0. 普通にonreadystatechangeの最後に描画処理をする
0. そもそもXMLHttpRequestは古い。fetchを使う

あと個人的にAjaxはonreadystatechangeよりもonload/onerrorで書いたほうが完結でわかりやすいのと、イベント登録してからsendするという順番の方が安心感がありますね。


#####追記
コアと分離したいということならやはりイベント処理がいいんじゃないでしょうか。
カスタムイベント作ってwindowに付けるか、postMessageすればいいと思います。
あとsendの順番については、非同期処理開始→イベント登録だと万が一イベントを登録するプロセスが終了する前にレスポンスが返ってしまった場合に困るって感じです。処理にかかる時間の差で結果的に正しく動作しますが言語的に動作順が保証されるわけではないので。

投稿2020/03/10 15:13

編集2020/03/11 01:29
kairi003

総合スコア1330

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

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

poppoas

2020/03/11 00:08

>Promiseを使ってthenチェーンで非同期処理をする >Promiseを使ってawait/asyncで非同期処理をする 非同期処理だとやはりPromiseを使うのが、一般的ですよね。 しかしながら、今回はUIの部分(html)とコアの部分(Typescript)は別で実装かつUIだけがコアに依存する形(コア部分は独立していて、UIは自由に変更)を作りたいと考えております。 >普通にonreadystatechangeの最後に描画処理をする これだとUI部分とコア部分をわけた意味がなくなるのでできないですね。 >そもそもXMLHttpRequestは古い。fetchを使う fetchはIEだと互換がないので使えません。 >あと個人的にAjaxはonreadystatechangeよりもonload/onerrorで書いたほうが完結でわかりやすいのと、イベント登録してからsendするという順番の方が安心感がありますね。 イベント登録してからsendする安心感とはなんですか?単純にコードの可読性の話ですか? 処理的になにか変わることがあるのでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.54%

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

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

質問する

同じタグがついた質問を見る

XHR

XHR(別名XMLHttpRequest)はJavaScriptなどのスクリプト言語を使ってサーバーとHTTP通信を行うAPIを指します。

JavaScript

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

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

HTML

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