フルスタックWeb開発 part2 内容

https://fullstackopen.com/en/part2

※“Full Stack Open 2019” by Matti Luukkainen, contributers,Houston inc,Ava Heinonen, Ilkka Kuisma, Harri Mehtälä and Jesper Pettersson is licensed under CC BY-NC-SA 3.0

見出し文（Let’s continue …）

Reactの紹介を続けましょう。最初に、名前のリストなどのデータコレクションを画面にレンダリングする方法を見ていきます。この後、ユーザーがHTMLフォームを使用してデータをReactアプリケーションに送信する方法を調べます。次に、ブラウザーのJavaScriptコードがリモートバックエンドサーバーに格納されているデータを取得して処理する方法に注目します。最後に、ReactアプリケーションにCSSスタイルを追加するいくつかの簡単な方法を簡単に見ていきます。

Rendering a collection, modules

JavaScriptの配列操作のAPI群の説明（find(),map(),filter()あたり）
配列をつかって要素を、順次タグに埋め込んで表示する書き方の説明。

　　{ hogeArray.map( hoge => <li key={hoge.id} >{hoge.name}</li>) }

その後、適宜コードを、モジュール化してリファクタリング。

Forms

フォームの設置と、stateHookを使ってデータ更新と画面更新の実装。
（メモ帳として、フォームに 任意のメモ を入力して、saveボタンタップで、画面にメモとして表示。）

• stateHook

  const [notes, setNotes] = useState([])
  const [newNote, setNewNote] = useState()

• フォーム

  <form onSubmit={addNote}>
  <input
    value={newNote}
    onChange={handleNoteChange}
  />
  <button type="submit">save</button>
  </form>

• {addNote} 処理

  const addNote = (event) => {
  // フォーム送信のデフォルト処理（ページのリロードなど）を、意図的に防止する。
  event.preventDefault()
  
  const newObject = {
  id: notes.length + 1,
  content: newNote,
  date: new Date().toISOString() ,
  important: Math.random() > 0.5
  }
  
  setNotes(notes.concat(newObject))
  setNewNote('')

• {handleNoteChange}の処理

  const handleNoteChange = (event) => {
  console.log(event.target.value)
  setNewNote(event.target.value)
  }

Getting data from server

この章は結構、内容が濃かった。やった内容のハッシュタグをつけるとすると、「#json-server, #axios, #useEffect」 という感じ。

それぞれの役割は、

• json-server: APIサーバーのモックライブラリ（ローカルのJsonファイルにデータを読み書きできる）
• axios: データ通信ライブラリ（各HTTPリクエスト投げる）
• useEffect: ReactのHooksの１つ。（画面描画時のイベント処理？）

まず、APIモックサーバーを、json-serverという便利ライブラリで作って、Jsonファイル（db.json）を作成して初期データを定義する。

• json-server 導入:
  $ yarn add json-server

サーバー起動方法1:
$ npx json-server —port 3001 —watch db.json
→　portを 3001に指定
→ db.json というファイルをDBとして使うよう指定

サーバー起動方法2:
$ yarn run server
※これで起動する場合は、事前に以下のファイルにコマンドを定義しておく必要がる

設定:
package.json に以下を記載

  "scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject", // 末尾の [,] を付け忘れ
でjson不正のエラーに注意
  "server": "json-server -p3001 db.json"　// これを追加。
  },

次に、 axios というライブラリを使ってデータ通信（HTTPリクエスト）を実装。

• axios GETリクエストの投げ方

  const promise = axios.get("https://localhost:3001/notes")
  promise.then(response => {
   const notes = response.data
   console.log(notes)
  })

見やすいように以下のように、インデントを揃えて書ける

  axios
    .get("https://localhost:3001/notes")
    .then(response => {
       const notes = response.data
       console.log(notes)
    })

次に、Hooksのひとつ、useEffectをつかって、初回の画面表示時にAPI通信してデータ取得して、画面表示する、という基本的な使い方と実装を学ぶ。

useEffect()の説明として、“副作用…”という説 明があまりピンとこなくて、実装して見ると、iOS的な説明だと、viewDidLoad()か、という雑な理解に至る。
（※Android的な説明だと、onCreate() ） 正確には、viewDidLoad()でもあり、viewWillAppear()としても利用可能。
ようは、ライフサイクルをフックするイベント処理という認識。

useEffect()の第2引数は実行回数(?)を指定することができ、 [] を設定すると、最初の一度だけ実行、という設定になる。

  useEffect(() => {
    console.log('effect start')
    axios
      .get('http://localhost:3001/notes')
      .then(response => {
        console.log('data arrived')
        setNotes(response.data)
      })
  }, [])
  console.log('render', notes.length, 'notes')

Altering data in server

REST API についての説明と、REST APIでのCRUDを axios を使って実装する内容。後半で、 axios でAPI通信している処理を、モジュール化（別ファイルに移動）させるようなリファクタのやり方を学ぶ。

• オブジェクトスプレッド構文 まだ正式には採用されていない？便利な書き方の説明。
  オブジェクト内のすべてのプロパティをコピーして、別部オブジェクトを作成する。
  以下のように書くと、特定のプロパティだけ指定して変更できる。
  （例では、反転させている書き方）

  const note = {
  memo: "あしたはあれをこうする予定",    
  important: false
  }
  
  const changedNote = { ...note, important: !note.important }

Adding styles to React app

この章はわりかしサクッと終わる内容。
Reactでデザインを当てる方法の解説。

従来のWebアプリは、HTML,CSS,JavaScriptを別ファイルに定義するのが、ベストプラクティスだったが、Reactでは真逆とのこと。

ある単位にそれらをまとめることで、ひとつで独立して機能するような書き方をする。
それが、「コンポーネント」である、みたいなことを言っていてなるほど、と思った。

（１つのファイルにHTML,CSS,JavaScriptが物理的に入ってるという意味ではなく、コンポーネントという概念上にまとめることで、再利用できてよいよね！という話と理解。）

実際、jsファイルと、cssファイルを分けて、書いているのを見る。またそのように書いても、コンポーネントとしてまとまっているので、簡単に再利用可能。

やってみて

演習もやりつつで、合計10h40m 掛かった。。しょうもないエラーでハマった時間が割とあって、わりと辛い。
(「OK／キャンセル」のアラート表示処理ができずにハマった。。Chromeで日本語翻訳して進めていて、window.coinfirm()が原文であったが、翻訳するとconfirm()とされていて、エラー。JavaScript知っている・使っている人は、はまらない感じのエラーだと思う。。。)
useState()とuseEffect()が、メジャーなHooksとのことで、この2つを知っておけば、他のHooksは応用でしかなく怖くない、みたいな言説を聞いたので、完全にHooks理解したマン状態になれたのだろうか（）

part2 をまとめると、

・JavaScript の配列操作と、配列要素のmap()での表示実装
・フォームの基本的な使い方
・json-server、axios を使ってサーバーとデータ通信
・HooksのuseEffecct()の説明と使い方
・REST APIの説明とCRUD処理実装
・ReactでのCSSの当て方