- もりけん塾でマークアップエンジニアの方がフロントエンドエンジニアになる為の課題に取り組んだ記録です。
- 現役フロントエンドエンジニアのもりけんさん(@terrace_tec)をはじめ、塾生の皆さんからレビューをいただきながら課題を進めました。
- 冒頭のSITE MAPのコンテンツを作成しました。
- デモ：StackBlitz
- Lesson37のリンクから下記のjsonデータでコンテンツにログインすることができます。
- 会員登録は、ご自身のお好きなもので登録ができ、ディベロッパーツールのApplicationタブから登録内容を見ることができます。パスワード変更も実際にできます。
- 今回の課題では、会員登録内容を使ってログインをすることはできません。（不特定多数の個人情報がAPIデータに溜まっていくことを防ぐためです）
ログインの際には以下のjsonデータをご利用ください。
{
"name": "Dicki",
"email": "Lane20@example.net",
"password": "cW3SfU2Lkfb1Yfm",
"userId": "f612ba1c0c5ccf45c0f57e97",
"id": "4"
},| 課題の仕様 | 内容 | アウトプットブログ |
|---|---|---|
| 1 | 【DOM構築】 指定されたDOMをulに挿入 |
lesson01 |
| 2 | DOMを作りulに挿入 | lesson02 |
| 3 | DOMを作りulに挿入 | lesson03 |
| 4 | a,imgの内容を配列から出力する | lesson04 |
| 5 | 【Promiseオブジェクト】 Promiseで課題4の配列を解決された値として受け取る |
lesson05 |
| 6 | 課題5を5秒後に解決されるようにする | lesson06 |
| 7 | 【ローディング実装】 resolveになるまでloading画像を出す |
lesson07 |
| 8 | あえてrejectさせthenでエラーを受け取る | lesson08 |
| 9 | async/awaitで書き換える | lesson09 |
| 10 | try-catch-finaliyを追加する | lesson10 |
| 11 | 【擬似的にAPIを扱う】 モックデータを作りfetchで取得する |
lesson11 |
| 12 | ボタンをクリックしたらリクエストする | lesson12 |
| 13 | クリックでモーダルが出てきて、課題12のボタンを押すとリクエストする | lesson13 |
| 14 | 課題13のモーダルにinputをおき、valueを取得する | lesson14 |
| 15 | 【モーダル作成】 モーダルにform,input(number,text)を置き、submitボタンを押下時にAPIから値を取得する |
lesson15 |
| 16 | 【ニュースUIコンポーネント作成】 ニュース記事のデータを取得してYahoo風のタブUIを作成。jsonデータ構造も考える。 |
lesson16 |
| 17 | 【スライドショー作成】 1からスライダーを作成。3秒後に解決されるPromiseが返すオブジェクトから画像を表示。矢印でスライドを動かす。現在地の数字を実装する。 |
lesson17 |
| 18 | ドットのページネーションを追加する。3秒後に自動で次のスライドに移動するオート機能も追加。 | lesson18 |
| 19 | 【ニュースUIコンポーネントとスライドショーを合わせる】 | |
| 20 | 【ユーザーテーブル作成】 3秒後に解決されるPromiseが返すオブジェクトからテーブルを作成。 |
lesson20 |
| 21 | 【ユーザーテーブルにソート機能を追加】 idを昇順・降順・通常でソートできる |
lesson21 |
| 22 | 年齢も昇順・降順・通常でソートできる | lesson22 |
| 23 | deprecatedにより飛ばしました | |
| 24 | 【会員登録画面作成】 利用規約のモーダル内の文章を下まで読むと、同意inputにチェックが入る |
lesson24 |
| 25 | 【バリデーション】 指定のバリデーションをpassした場合のみ、submitボタンが押せる |
lesson25 |
| 26 | 【ログイン画面作成】 mockAPIのデータと照合してログインできるようにする。ログインが成功したらトークンを発行してLocalStorageに保存する |
lesson26 |
| 27 | トークンがあればコンテンツに遷移する | |
| 28 | 【パスワードを忘れた方へページ】 会員登録の内容をLocalStorageに保存して、パスワードを忘れた方ページにてメールアドレスが一致すればパスワードを変更できる |
lesson28 |
| 29 | 【メールアドレス変更画面ページ】 メールアドレス変更機能 |
lesson29 |
| 30 | 【自作ドロワーメニュー】 ハンバーガーボタンを押すと横からシュッと出るメニューを作成 |
lesson30 |
| 31 | 【自作ドロワーメニューにオプショナルをつける】 スライドスピードとモーションを変更できる機能を追加 |
lesson31 |
| 32 | 【一覧ページと絞り込み機能】 ニュース記事一覧と動的な絞り込み機能 |
lesson32 |
| 33 | ドロワーメニュー内の要素をクリックするとコンテンツに遷移 | |
| 34 | 【マイページとお気に入り機能実装】 ニュース記事の個別ページを作成。 お気に入りボタンを押すとお気に入りに追加できる。マイページでお気に入り一覧を表示、削除ボタンで削除もできる。 |
lesson34 |
| 35 | 【ログインユーザーか非ログインユーザーか判定して見れるコンテンツを分ける】 | lesson35 |
| 36 | 【無限スクロール】 記事一覧の下までスクロールすると、APIからデータをfetchして次の記事を表示させる。 |
lesson36 |
| 37 | 全てのコンテンツを集め、ブラッシュアップ | lesson37 ..今までのまとめ記事 |