refactor(ajaxapp): データを表示する/Promiseを活用する のリファクタリング #914
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
azu
commented
Aug 1, 2019
| <script src="index.js"></script> | ||
| </body> | ||
| ``` | ||
| [import, title:"index.html"](./src/index.html) |
|
Deploy preview for js-primer ready! Built with commit 0a9f5c8 |
azu
changed the title
azu
commented
Aug 1, 2019
| @@ -121,6 +108,14 @@ function fetchUserInfo(userId) { | |||
|
|
|||
| ### Promiseチェーンのリファクタリング {#refactor-promise-chain} | |||
|
|
|||
| <!-- textlint-disable ja-technical-writing/sentence-length --> | |||
|
|
|||
| 現在の`fetchUserInfo`関数は、HTMLの組み立て（`createView`）と表示（`displayView`）も行っています。 | |||
There was a problem hiding this comment.
Promiseチェーンの説明から入ると結局どうしたいのか伝わりにくい感じがした。
なので、最初になにをするかを宣言するようにしてから、Promiseチェーンの説明という流れに変えた
azu
commented
Aug 1, 2019
|
|
||
| ## HTMLを組み立てる {#markup-html} | ||
|
|
||
| HTML文字列の生成にはテンプレートリテラルを使います。 | ||
| テンプレートリテラルは文字列中の改行が可能なため、HTMLのインデントを表現できて見通しが良くなります。 | ||
| また、文字列の埋め込みも簡単なため、HTMLのテンプレートに対して動的なデータを当てはめるのに適しています。 | ||
| また、変数の埋め込みも簡単なため、HTMLのテンプレートに対して動的なデータを当てはめるのに適しています。 |
azu
commented
Aug 1, 2019
| @@ -7,7 +7,7 @@ | |||
| <h2>GitHub User Info</h2> | |||
|
|
|||
| <button onclick="fetchUserInfo('js-primer-example');">Get user info</button> | |||
|
|
|||
| <!-- 整形したHTMLの挿入先 --> | |||
| <div id="result"></div> | |||
There was a problem hiding this comment.
Todoアプリに合わせるなら #js-resultだけど、あっちはクラスがでてくるかというのもあるか。
prefixつけるとここで説明でてきちゃうからこのままで
azu
commented
Aug 1, 2019
| @@ -39,6 +39,7 @@ GitHubのAPIに対してHTTPリクエストを送信しましたが、まだレ | |||
| また、`Response`オブジェクトの`json`メソッドも`Promise`を返します。これは、HTTPレスポンスボディをJSONとしてパースしたオブジェクトでresolveされます。 | |||
| ここでは、書籍用に用意した`js-primer-example`というGitHubアカウントのユーザー情報を取得しています。 | |||
|
|
|||
| {{book.console}} | |||
|
diffはdiffとして表現する必要性があるきがした。 |
lacolaco
reviewed
Aug 2, 2019
| <!-- textlint-disable ja-technical-writing/sentence-length --> | ||
|
|
||
| 現在の`fetchUserInfo`関数は、HTMLの組み立て（`createView`）と表示（`displayView`）も行っています。 | ||
| `fetchUserInfo`関数に処理が集中しているため見通しが悪くなるため、`fetchUserInfo`関数はデータの取得だけを行うように変更します。 |
lacolaco
approved these changes
Aug 2, 2019
|
TODOだと .js コードとしては全体書いておいて、 |
azu
commented
Aug 3, 2019
| さて、今の`fetchUserInfo`関数ではFetch APIが返したPromiseの`then`でHTMLの組み立てと表示も行っています。 | ||
| このPromiseチェーンを次のように書き換えてみましょう。 | ||
| `fetchUserInfo`関数では、Fetch APIが返すPromiseの`then`メソッドで、`Reponse#json`メソッドの戻り値を返しています。 | ||
| `index.js`の`fetchUserInfo`関数と`main`関数を次のように書き換えます。 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.