■開発者の開発者による開発者のための記録 a diary of the engineer, by the engineer, for the engineer #3 ~フロントエンド部分お店をマップするところまで構築の巻~

はじめに
HTML/JavaScriptでもがいたところ
エラーやおかしな挙動への対処法

はじめに

前回までは検証用のDjangoサービスをwebに表示するところまで行いました。

今回はフロントエンド。

今回実装したところは以下のような緯度と経度を入力し、ジャンルを選択するとレストランをマッピングするというもの。

Hotpepper APIを使わしてもらいました。

HTML/JavaScriptでもがいたところ

今回の実装は自分自身のフロントエンドの知識が結構不十分なところもあり、JavaScriptに苦戦したりしていた。

以下に今回対応したエラーを載せておくので、もし、同じエラーに悩んでいる人がいたら参考にしていただければ幸いです。

No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

今回のお店の情報はHotpeppar APIを用いて取得しているのだが、取得しようとすると上記の文言のエラーが発生します。

全体としては以下のようなエラーです。

Access to fetch at 'xxxx' from origin 'xxxx' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

これに対しては\$.ajaxを使用すると良いです。参考は以下のサイトになります。

ホットペッパーapiをjavascriptでfetchしようとすると、CORSポリシーによってブロックされてしまいます。 (teratail.com)

$.ajax内で設定した値は外から参照できない

さて、上記エラーを対応して\$.ajaxを使用するとまた別のエラーが発生します。

それは$.ajax内で設定した値が外から参照できないということです。

つまり、\$.ajaxを使用してHotpeppar APIからとってきた値を変数に代入しても\$.ajax内で設定するので、外から参照できません。

これについては以下のサイトが参考になりました。

【JavaScript】関数の外でAjaxの戻り値を使いたい | Zakkuriブログ

以下のようにして関数の戻り値に指定し、

function getMapInfo(data) {
  return $.ajax({
    url: 'http://webservice.recruit.co.jp/hotpepper/gourmet/v1/?key=xxxxxx&lat=xxxxx&lng=xxxx&genre=xxxx&range=2&count=10&format=jsonp',        
    type: 'GET',
    dataType: 'jsonp',
    jsonpCallback: 'callback'
  });
}

外の関数内で上記で設定した関数を呼び出します。

getMapInfo({}).done(function(data){
  console.log(data.results);
}

Error: Map container is already initialized.

続いては表示したMapの挙動の問題です。

最初に緯度と経度を設定し、ジャンルを選択、そして実行すると、表示がされます。

しかし、このあと別のジャンルないしは緯度と経度を再度設定し直すと、エラーが発生されて地図が更新されません。

この地図が更新されていない状態でWebページのコンソールを確認すると以下のようなエラーが発生しています。

Map.js:1105 Uncaught (in promise) Error: Map container is already initialized.
    at i._initContainer (Map.js:1105:10)
    at i.initialize (Map.js:136:8)
    at new i (Class.js:22:20)
    at t.map (Map.js:1728:9)
    at assign ((index):108:19)
    at HTMLInputElement.onclick ((index):66:67)

このエラーに関しては以下のページのコメント内容を参考にしました。

Error: Map Container Is Already Initialized · Issue #3962 · Leaflet/Leaflet · GitHub

上記コメントに書いてあるように以下を地図をleafletで表示させる関数の一番最初に追記しました。

var container = L.DomUtil.get('map');
if(container != null){
  container._leaflet_id = null;
}

これにより、ジャンルないしは緯度と経度を再度設定し直して実行すると地図が更新されるようになりました。

Djangoでcssを用いる

Djangoでcssファイルを使用するときはhtmlと同じ階層においてもcssの内容が反映されません。

これについてはググればすぐに対応策が分かると思うので解決に時間をかけることはないと思いますが、一応参考になるサイト載せておきます。

参考になるサイトは以下です。

DjangoでCSSを反映させる方法 – Qiita

エラーやおかしな挙動への対処法

今まで、エラーなどの記録を残してきたが、実際にエラーに出逢った時どう対処していくかの施行について書き残しておこうと思う。

ここに書く内容で少しでも自分一人でエラーに対処していく勇気を持てる人が増えれば幸いである。

— 🍺🍺🍺 —

エラーが発生したり求めていた挙動とことなってしまったときの対処法はいろいろある。

まずはエラーの内容をググるというのがベーシックな方法だ。

それで解決できることも往々にしてあると思う。

しかし、おかしな挙動になってしまってエラーも無い場合は結構ハマってしまい時間を使ってしまうものだ。

そんな時のコツとして、まずは正しく動くところまで把握することが大事。

要は問題を切り分けていく事。

例えば、

Aというところを修正したらまだエラーが発生している。

Aというところを修正前に戻して、Bというところを修正してみる。

するとエラーが消えた。

という感じ。（この時はBがエラーを引き起こす原因になっていたということ）

実際はこんなにすぐ上手くいく事はあまりないが、エラーの内容が変わったり挙動が変わったりする。

それだけでも大きな前進だと思っていい。

基本的に多くの人が引っかかるエラーの部分はネットを検索すると出てくる。

ネット検索してもエラーが出てこない場合は非常に難しい内容の事をしているか、本当にたいしたことのないケアレスミスをしている可能性が考えられる。

まずは難しいコードを書く前に、難しい技術を使う前にまずは動くものを作ってみる事が大切だろう。