Merge pull request #69 from jigintern/haruto17/chapter-8

📝 8章「ブラウザの標準 API を使ってみよう」の修正

Author: haruto17

javascript/DOCS.md

@@ -42,9 +42,9 @@
   - [7. 非同期処理を使おう](#7-非同期処理を使おう)
     - [7-1. `Promise` / `then()` / `catch()`](#7-1-promise--then--catch)
     - [7-2. `async` / `await`](#7-2-async--await)
-  - [8. ブラウザの標準APIを使ってみよう](#8-ブラウザの標準apiを使ってみよう)
+  - [8. ブラウザの標準 API を使ってみよう](#8-ブラウザの標準-api-を使ってみよう)
     - [8-1. Web Storage API](#8-1-web-storage-api)
-    - [8-2. 位置情報API](#8-2-位置情報api)
+    - [8-2. 位置情報 API](#8-2-位置情報-api)
   - [9. 終わりに](#9-終わりに)
   - [10. 参考文献](#10-参考文献)
 
@@ -959,50 +959,50 @@ try {
 
 処理によって `Promise` ~ `then` を利用するか `async` / `await` を利用するか、どちらが読みやすいかを考えながら使い分けられると良いですね。
 
-## 8. ブラウザの標準APIを使ってみよう
+## 8. ブラウザの標準 API を使ってみよう
 
-さて、最後にweb開発を助けてくれるブラウザの機能についてです。
-我々が普段使うブラウザには様々なAPIが用意されています。特に有用な2つを使ってみましょう。
+さて、最後に web 開発を助けてくれるブラウザの機能について説明します。  
+我々が普段使うブラウザには様々な API が用意されています。特に有用な2つを使ってみましょう。
 
 ### 8-1. Web Storage API
 
-Web Storage API はブラウザにキーと値の対を保存できるAPIです。
+Web Storage API はブラウザにキーと値の対を保存できる API です。
 その中でも特に `localStorage` について説明します。
 
-`localstorage`は以下のようにして利用できます。
+`localstorage` は以下のようにして利用できます。
 
 ```javascript
 // 値のセット
 localStorage.setItem('name', 'jig太郎');
+
 // 値の取り出し
-console.log(localStorage.getItem('name'));
-// ローカルストレージに保存されている値の数
+console.log(localStorage.getItem('name')); // jig太郎
+
+// ローカルストレージに保存されている値の数を取得
 console.log(localStorage.length); // 1
+
 // 値の削除
 localStorage.removeItem('name');
-
 console.log(localStorage.getItem('name')); // null
 
 localStorage.setItem('name', 'jig太郎');
 localStorage.setItem('age', '20');
 // ローカルストレージを空にする
 localStorage.clear();
-
 console.log(localStorage.length); // 0
 ```
 
-![localStorageサンプル](imgs/localstorage.png)
-
-注意する点として、`localStorage`に保存する値はすべて文字列になることが挙げられます。
-例えば、`localStorage.setItem('age', 20);`としてnumber型で保存できたと思っても、`getItem`で取り出したときには`'20'`として文字列で返ってきます。このあと数値として扱いたい場合には`Number(<文字列>)`としてnumber型に変換する必要があります。
+![localStorageサンプル](imgs/localstorage.webp)
 
-また、`localStorage`への操作はパフォーマンスが悪いという問題もあります。あまりにも多用するのは問題ですが、その扱いの容易さ故に許容されがちです。気をつけて利用するようにしましょう。
+注意点として、`localStorage` に保存する値はすべて文字列になることが挙げられます。  
+例えば、`localStorage.setItem('age', 20);` として number 型で保存できたと思っても、`getItem` で取り出したときには `'20'` として文字列で返ってきます。このあと数値として扱いたい場合には `Number(<文字列>)` として number 型に変換する必要があります。  
+また、`localStorage` への操作はパフォーマンスが悪いという問題もあります。多用するのは問題ですが、扱いやすさ故に許容されがちです。気をつけて利用するようにしましょう。
 
-### 8-2. 位置情報API
+### 8-2. 位置情報 API
 
 インターネットにアクセスできる環境下で便利なものの一つが位置情報でしょう。手元の小さな端末が自分の位置を正確に取得してくれるおかげで我々は迷子になることが減りました。
 
-そんな位置情報を取得するためのAPIがブラウザにも実装されています。以下のようにして自分の緯度経度を取得することができます。
+そんな位置情報を取得するための API がブラウザにも実装されています。以下のようにして自分の緯度経度を取得することができます。
 
 ```javascript
 // 位置情報が利用可能か確認する
@@ -1016,17 +1016,17 @@ if ('geolocation' in navigator) {
 }
 ```
 
-↑のコードを実行すると↓のようなポップアップが表示されます。「許可する」をクリックして位置情報を利用できるようにしてください。
+↑のコードを実行すると↓のようなポップアップが表示されます。「サイトへのアクセス時のみ許可する」または「今回のみ許可」をクリックして位置情報を利用できるようにしてください。
 
-![位置情報利用許可](imgs/geolocation-authority.png)
+![位置情報利用許可](imgs/geolocation-authority.webp)
 
-![実行結果](imgs/geolocation-sample.png)
+![実行結果](imgs/geolocation-sample.webp)
 
 ↑のように緯度経度が出力されれば問題なく実行できています。
 
-[地図](https://fukuno.jig.jp/app/map/latlng/)で調べて見ると若干のズレはあるもののおおよその位置はあっていました
+[地図](https://fukuno.jig.jp/app/map/latlng/)で調べて見ると若干のズレはあるもののおおよその位置はあっていました。
 
-![位置情報から地図](imgs/geolocation-map.png)
+![位置情報から地図](imgs/geolocation-map.webp)
 
 位置情報の応用は[こちらの記事](https://hackmd.io/@haruyuki16278/Hk2Tmh7b3)や[mdn web docs](https://developer.mozilla.org/ja/docs/Web/API/Geolocation_API/Using_the_Geolocation_API#examples)を確認してみてください。