差分

このページの2つのバージョン間の差分を表示します。

--- 00.ionic4:11.緯度経度から歩いた距離を表示 [2019/09/03] – [setInterval] adash333
+++ 00.ionic4:11.緯度経度から歩いた距離を表示 [2019/09/12] (現在) – [いまどきのJavaScript記法] adash333
@@ 行 33: / 行 33: @@
-==== setInterval ====
+===== setInterval =====
@@ 行 59: / 行 59: @@
   }
-  distance(lat1, lng1, lat2, lng2) {
+  function distance(lat1, lng1, lat2, lng2) {
+  lat1 *= Math.PI / 180;
+  lng1 *= Math.PI / 180;
+  lat2 *= Math.PI / 180;
-  }
+  lng2 *= Math.PI / 180;
+  return 6371 * Math.acos(Math.cos(lat1) * Math.cos(lat2) * Math.cos(lng2 - lng1) + Math.sin(lat1) * Math.sin(lat2));
+}
 //途中
@@ 行 102: / 行 105: @@
 }
 </code>
+===== Vue.jsとsetInterval =====
+これからはじめるVue.js実践入門p37によると、setIntervalメソッドの配下では、thisは、Vueインスタンスではなく、グローバルオブジェクト(window)に変化してしまうため、あらかじめthatなどで固定しておく必要があるとのことです。
+<code>
+export default {
+  name: 'HelloWorld',
+  data: {
+  // 現在日時
+    current: new Date()
+  },
+  // 起動時にタイマーを設定
+  created: function() {
+    let that = this;
+    // 1000ミリ秒スパンでcurrentプロパティを更新
+    this.timer = setInterval(function() {
+      that.current = new Date();
+    }, 1000);
+  },
+  // 終了時にタイマーを破棄
+  beforeDestroy: function() {
+    clearInterval(this.timer);
+  },
+  methods: {
+  }
+}
+</code>
+これからはじめるVue.js実践入門p37
+<html>
+<iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=i-doctor-22&language=ja_JP&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=4815601828&linkId=d5c5878498f249e70aa116d944ee8c83"></iframe>
+</html>
+===== Javascriptのthisについて =====
+https://www.sejuku.net/blog/29389
+thisって何？使い方を覚えて、JavaScriptをもっと楽しく使おう！
+マサト
+/5/11
+https://qiita.com/tsukishimaao/items/39d22fd9178546d6cdeb
+@tsukishimaao
+年02月01日に更新
+windowオブジェクト
+（引用ここから）
+windowオブジェクトとはJavaScriptにあらかじめ用意されてるオブジェクトで、JavaScriptを何も書いてない状態でもwindowオブジェクトは利用する事が出来る。
+JavaScriptであらかじめ用意されている関数やオブジェクトは、みなwindowオブジェクトのプロパティです。HTMLデータを取得、操作する為の
+window.document、URLなどの情報が格納されているwindow.locationなども、すべてwindowオブジェクトのプロパティです。
+（引用ここまで）
+https://qiita.com/takeharu/items/9935ce476a17d6258e27
+@takeharu
+年12月07日に更新
+JavaScriptの「this」は「4種類」？？
+https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback
+How to access the correct `this` inside a callback?
+https://stackoverflow.com/questions/43335477/how-to-use-setinterval-in-vue-component
+how to use setInterval in vue component
+"this"の問題らしい、、、
+Using object methods as callbacks/event handlers
+what this refers to depends on how the function is called, not how it is defined.
+そのため、解決策としては、
+  -''%%.bind()%%''を用いる
+  -''%%let self = this%%''としてthisオブジェクトを別の変数に割り当てる
+  -アロー関数を用いる
+の3つがあるそうです。''%%let self = this%%''としてthisオブジェクトを別の変数に割り当てる方法が、一番分かりやすそうです。
+https://cushionapp.com/journal/reactive-time-with-vuejs
+Reactive Time with Vue.js
+Mar 29, 2017
+Written by Jonnie Hallman
+@destroytoday
+===== いまどきのJavaScript記法 =====
+https://qiita.com/shibukawa/items/19ab5c381bbb2e09d0d9
+@shibukawa
+年05月04日に更新
+イマドキのJavaScriptの書き方2018
+===== Vue.jsでlocalStorage =====
+https://jp.vuejs.org/v2/cookbook/client-side-storage.html
+クライアントサイドストレージ
+最終更新日: 2019年9月10日
+https://qiita.com/ma7ma7pipipi/items/4dac390043efc24b0732
+@ma7ma7pipipi
+年01月14日に投稿
+vue.js で json localstorage を使う
+https://iwb.jp/javascript-vuejs-install-localstorage/
+年6月10日
+Vue.jsでinstallを使用せずにlocalStorageを使用する方法