Reactを用いたツイートアプリの作成で得た知見
•Download as PPTX, PDF•
1 like•115 views
2019/12/06の勉強会で発表されたものです。
More Related Content
More from iPride Co., Ltd.
More from iPride Co., Ltd. (20)
Recently uploaded
Recently uploaded (14)
Reactを用いたツイートアプリの作成で得た知見
- 1. Reactを用いた ツイートアプリの作成で 2019 / 12 / 06 ふみたろう
- 2. 目次 • 作成したツイートアプリに関して - p3 • アプリ作成に関して - p8 • ハマったエラーについて - p12 • 配列にどうのこうの in Javascript - p15 • ツイートアプリの課題 - p20 2
- 3. ツイートアプリ - 初回起動 • 次回以降の起動ではLocalStorageに保存されている ツイートの情報から表示させる 3
- 4. ツイートアプリ - 字数制限 • 140字まで ツイートできる • 0字もしくは 140字を越えると ツイートできない • 入力字数で 字数カラーが変わる 4
- 5. ツイートアプリ- ツイート • ツイートしたアカウント 情報を保持し、IDや名前 、画像を表示 • ツイート時刻も記録して 表示 • お気に入りボタン • 削除ボタン 5
- 6. ツイートアプリ- お気に入り • お気に入りボタンを 押すことで お気に入りに追加できる • 追加された状態で もう一度押すと お気に入りが解除される ※ お気に入りツイートの 絞り込みは未実装 6 ★マークがお気に入り状態
- 8. アプリ作成に関して • これまでは値のstateを コンポーネント毎に管理していた • また、処理についても コンポーネント毎に記述していた → JSXコンポーネント以外の記述が多くなり コードの可読性が下がる 8
- 10. src ┣App.tsx ┣App.css ┣components ┃ ┣NavBar.tsx ┃ ┣TweetForm.tsx ┃ ┗TweetView.tsx ┣stores ┃ ┗Application.ts ┣images ┃ ┗icon.png ┗constant.ts 10 ディレクトリ構造 • 青字はコンポーネント • 橙字はstateや処理の管理
- 11. そもそもの話 Reactにおけるstateとは • 読み取り専用の値「state」 • stateの値を変更するための関数「setState」 • 初期値「initialState」 • useState APIを用いて値の状態 (state) を管理 11 const [state, setState] = useState(initialState);
- 12. ハマったエラーについて • 正しく一括でstate管理をしているのに 「dispatch is not a function.」と言われる問題 • Date型で保存しているのに 「toString is not a function.」と言われる問題 12
- 13. 正しく一括でstate管理をしているのに 「dispatch is not a function.」と言われる問題 • 上位コンポーネント (App.tsx) に プロバイダ設定を行っていないことが原因 13 const App: React.FC = () => { const state = useApplicationState(); return ( <ApplicationContext.Provider value={state}> <div> <NavBar /> <TweetForm /> <TweetView /> ApplicationContext.Provider 一括管理したstateを valueにセット コンポーネントは その中に配置する
- 14. Date型で保存しているのに 「toString is not a function.」と言われる問題 • LocalStorage からの読み込み時にDate型 string 型で読み込まれてしまうのが原因 14 const savedTweetList = window.localStorage.getItem('tweetList'); if (savedTweetList !== null) { const temp: any[] = JSON.parse(savedTweetList); const temp2: Tweet[] = []; for (const record of temp) { temp2.push({ text: record.text, date: new Date(record.date), localStorageからgetItem JSON.parseで一時格納 ここでDateが stringになってしまった new DateでDate型に 直してから新たな配列にpush
- 15. 配列にどうのこうの in JavaScript • 配列内に特定のアイテムが含まれているか • 配列にアイテムを追加 • 配列内のアイテムを除去 • 配列のindex番号を用いてアイテムを除去 15
- 18. 配列内のアイテムを除去 • filterメソッドを使用して除去 • テスト関数を満たす配列を新たに作成し、 その配列を返却する非破壊的メソッド • 代入して使ったりする 18 newArray = array.filter(id => id !== userId);
- 19. 配列のindex番号を用いて アイテムを除去 • spliceメソッドを使用して除去 • index (第一引数) から 何個 (第二引数) を除去するか • 破壊的メソッドのため、すぐに除去される 19 array.splice(index, 1); setList(array);
- 20. ツイートアプリの課題 • 新しいツイートが上に来るように変更 • 現在はツイートすると下に追加される • お気に入りの絞り込み一覧表示の追加 • 現状お気に入り機能はマーク付けのみ • ツイートの検索機能追加 • ツイート数が多くなったときに 見つけやすくするため 20