脱力系備忘録BloG

JavascriptのfetchでPHPと非同期通信処理を行う仕組みを作ってました。
この仕組み自体は今までも経験あるのですが、今回はどういうわけか、

JSON.parse: unexpected character at line 1 column 1 of the JSON data

というJavascriptのエラーが発生してその原因を探るのに無駄な時間を割いてしまいましたので備忘録。



結論を申しますと、PHPがJSONを書き出す前に余計なテキストを書き出していたのが原因です。

もちろん、真っ先にJSONの書き出しが怪しいと思いました。
それでPHPが書き出すJSONデータをメールで送信して中身を確認したのですが、全く問題が見つからず。
過去に作ったプログラムと比較したりして何が違うかバグ探しをしたけどわからず。

で、やけになってJavascriptのコードの

return response.json();

という箇所を

return response.text();

にして受信内容をconsole.log()で表示してみたらJSONデータの前に余計な文言が書き出されてました。

原因は、外部PHPファイルを読み込んでいるのですが、その読み込むPHPファイルがテスト環境用のもので、その中にテスト用のコメントを書き出す部分が入っていたのが原因でした。
このテスト用PHPファイルをAJAX非同期通信システムで利用するのが初めてだったので、そのようなコメント書き出しがあるなんてことに気が付きませんでした。


理由がわかれば「なんだそんなこと？」ということに限ってなかなかバグが見つからないものです。

とりあえず、非同期処理でJSONデータを受け取るときに

JSON.parse: unexpected character at line 1 column 1 of the JSON data

というエラーが出たときは必ず余計な文字が書き出されているので、それを確認しましょう。

category: PHP JavaScript

無料で使えてとても便利だったYahooデベロッパーネットワークのYOLP(地図)が2020年10月で使えなくなるようです。
YOLP Web APIにおける一部API・SDK 提供終了のお知らせ

無料サービスはありがたい反面、突然死の洗礼があるので開発者には悩ましい存在です。

で、貧乏開発者の私は性懲りもなく無料地図APIサービスを探すことにしたところ、国土地理院の地図データをAPIとして利用する方法がありました。
国土地理院といえば我が国の国家機関。さすがに突然死はない。だろうと思いたい。
さらにありがたいことにユーザー登録なんて七面倒くさいことなく無料で提供してくれています。
こんなありがたいもの、利用しないわけにはいきません。ということで、その導入方法の初歩的な部分をメモ。

category: JavaScript

JavaScriptでちょっとつまづいたこと、些細な調べものを書き溜めるメモ。

category: JavaScript

$("div").fadeIn().css("display","inline-block");
こうやればOK。

$("div").fadeIn()
これだけだと display: block; になっちゃうので困ることがある。

JavaScript、なんか苦手。
そろそろ CSS と統合してシンプルに扱えるようになって欲しい。

category: JavaScript

これは便利。使い方も簡単。
入力フォームに郵便番号を入力したら所定の場所に都道府県や市区町村などの住所情報を入力してくれる。

Yubinbango

category: JavaScript

PHP、JAVASCRIPT、VBAを同時に使っていると、IF文の比較演算子がどれがどうだったかわからなくなるのでここにまとめておく。
そうそう、文字列結合も混乱するので書いておく。

		PHP	JAVASCRIPT	VBA
比較 演算子	等価	==	==	=
	厳密等価	===	===
	不等価	!=	!=	<>
	厳密不等価	!==	!==
倫理 演算子	および	&& AND	&&	AND
	もしくは	|| OR	||	OR
文字列結合		.(ピリオド)	+	&

※厳密判定は値の「型」まで判定します。
1 == "1" は TRUE(真)
1 === "1" は FALSE(偽)

※PHPの論理演算子は「&&」「||」の方が「AND」「OR」より優先度が上です。


さて、ここに書いたことを忘れないようにするにはどうしたら良いでしょう？

category: PHP JavaScript VBA

すでに登録してある地点一覧から任意の地点を選ぶと、そこが地図のセンターに表示され、サークルが描かれる。と言うことをやろうとした。
それに必要な情報は、緯度・経度、サークルサイズ（半径）で、それらは地点ごとに
<input type="hidden" value="">
に入っている。

で、一覧表の地点をクリックするとJavaScriptの関数が呼び出され地図に反映されるはずなんですが、API内部でエラーが発生してしまう。

なぜ？

原因がわかったが、絶対忘れるので備忘録。

category: JavaScript

JavaScriptがちょっと苦手。

'document.getElementById(...)' は Null またはオブジェクトではありません。

というエラーで悩んだ。
多分、今更ながらなことなんだろうけど初めてわかったので備忘録。

category: JavaScript