All Articles

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

2019/11/26

2019 09 27 10 13 10

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の1つ。(画面描画時のイベント処理?)

まず、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では真逆とのこと。

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

(1つのファイルに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の当て方