ReactでHelloWorldしてから、ちょっとずつ足していく #1 #2 #3 #4 #5
はじめに
ここで取り上げている内容を「チュートリアル」と書いていたのですが、完全に勘違いしていました。
実際はDocs→MAIN CONCEPTSにあるReactの考え方などをまとめているドキュメントで取り上げている内容を自分なりに理解を進めるためのまとめです。勘違いしたまま続けていたので、ちょっと意味不明になっているところがありました。
前回まででプログラムとしての処理はできていたので、バグ取りした内容をまとめて終わりにします。
残りの
- コンポジション vs 継承
- Reactの流儀
については、内容を読んで終わりにしました。
Reactの流儀は、既存サイトをReactにする方法をまとめたものでしたので、あらためて1から作ることになったときに参考にしていこうと思います。
削除がうまくいかない
前回までのプログラムでチェックボックスのチェック→削除ボタンで削除ができるようになりました。
しかし、削除するメンバーを二人以上選択していると削除が正しく動きませんでした。
削除したいメンバーはlocalDLという配列に入れています。
その内容をstateで保存してあるメンバーリストに反映させてから保存すれば削除は完了です。
しかし、複数指定しても一人分しか削除できていません。
そこで調べたところ、
nameList = this.state.names.filter(n => n !== localDL[i])
となっていた部分を
nameList = nameList.filter(n => n !== localDL[i])
に修正しました。
バグっている方では、nameListは常にstateで保存した内容から1つだけ削除した内容で更新されます。
(filterがlocalDL[i]にマッチする内容を取り除いて返すため)
その部分をnameListは最初に取りだして、localDLの内容の分1つずつ取り除いてnameListを更新することで、必要な人数削除できます。
これで、自分が当初考えていたメンバーの追加/削除を自由にできて、各メンバーのボタンを押せば挨拶する流れが実現できました。
一通り実装したぶんができたので、今回はこれで終わりにします。
Reactを使ってみて
なにか新しい技術を使ってみたいと思い、公式サイトのドキュメントを読んだり、チュートリアルをやってみました。
また、Javascriptをあらためてやってみて、TypeScriptも試してみましたが、どちらも理解が足りないので今後の課題です。
Reactに関する情報は、Qiitaも含めてたくさんあるので、わからないところを検索できるのは非常に大きいと感じました。
次は、他のサイトからデータを受信して、それをレンダリングするというのに挑戦しようと思います。
PHP+DBで作っていたサイトをReact+HeadlessCMSに移行するという目的があるので、そのあたりもまた何か書けるようなことがあったらまとめて記事にしたいところです。