このリポジトリは 自身が所属するもりけん塾で取り組んだ マークアップエンジニアの方がフロントエンドエンジニアになる為の課題に取り組んだ内容です。

もりけん塾について

もりけん塾では、課題ごとにPRを出しレビューをしあいます。 課題やレビューを通して学んだことはブログにまとめています

課題の内容・まとめ

NO.	内容	CodeSandBox	Blog
Lesson1	DOM構築 JavaScriptで作成した要素をDOMへ追加する
Lesson2	DOM構築
Lesson3	DOM構築
Lesson4	DOM構築 配列を加工してDOMへ追加
Lesson5	非同期処理(Promise) / DOM構築 配列を解決された値として受け取りDOMへ追加
Lesson6	非同期処理(Promise) / DOM構築 3秒後に解決される様にする
Lesson7	非同期処理(Promise) / DOM構築 resolveになるまでの間loading画像を出す
Lesson8	非同期処理(Promise) / DOM構築 3秒後にrejectを実行し エラーを起こしてcatch節でエラーをキャッチする
Lesson9	非同期処理/ DOM構築 async awaitを使用して配列を受け取り加工し、DOMへ追加
Lesson10	非同期処理/ DOM構築 課題9へtry-catch-finaliyを追加する
Lesson11	非同期処理 / DOM構築 簡易的なAPIを使用してJSONデータを受け取り加工し、DOMへ追加する
Lesson12	非同期処理 / DOM構築 クリックをトリガーとして非同期処理を実装する
Lesson13	非同期処理 / DOM構築 モーダル内のボタンをクリックしてリクエストを行う
Lesson14	非同期処理 / DOM構築 モーダル内にinput[type="number"]を追加、クリックした際にinput[type="number"]のvalueを取得して、リクエストできるようにする
Lesson15	非同期処理 / DOM構築 モーダル内にformをおき、input[type="number"]、input[type="text"]、submitボタンを追加。押下でリクエストをする
Lesson16	タブUI実装 擬似的なAPIを使用し、非同期で取得したデータをもとにタブUIを実装 [date-fns](https://date-fns.org/) を使用し、記事が3日以内であればNewアイコンを表示 コメントが0件なら表示なし、1以上ならアイコンと共に数字が表示 コメントアイコンをクリックするモーダルが表示され、コメント内容とユーザーアイコンが表示
Lesson17	スライドショー作成
Lesson18	ドットページネーション、auto機能の追加 課題17で作成したスライドショーにドットのページネーション、auto機能を追加
Lesson19	ニュースUIとスライドショーを合わせる 課題16〜18で作成したコンポーネントを合わせたページの作成
Lesson20	ユーザーテーブル作成 画面遷移してから3秒後に解決されるPromiseが返すオブジェクトを元に作成 カラム名など(id, 名前等)もdataで表現して受け取り、フロント側で加工して表示
Lesson21	ソート機能を追加 idがソートできる機能を実装 通常▶︎昇順▶︎降順の順でソートする
Lesson22	ソート機能をさらに追加 年齢のフィールドへもソート機能を追加する
Lesson24	会員登録画面作成 利用規約を押すと、モーダルが立ち上がり内容が表示。 スクロールが一番下へ行ったら 利用規約に同意するチェックボックスがcheckedになる仕様。 checkedがtrueの場合、送信ボタンを押下することができ完了ページへ遷移
Lesson25	バリデーション実装 ユーザー名は16文字未満 メールアドレスは一般的なメール形式のバリデーション パスワードのバリデーションは8文字以上の大小の英数字を交ぜたもの 利用規約のスクロール実装に併せて、チェックボックスがcheckedになる(課題24で実装) 全ての入力がvalidの場合にのみ送信ボタンは押下でき、完了ページに遷移する
Lesson26	ログイン画面の実装
Lesson27	tokenチェック tokenを参照してログインユーザーかどうかのチェックを追加
Lesson28	パスワード忘れた方へページの実装 tokenを参照してログインユーザーかどうかをチェックする
Lesson29	メールアドレス・パスワードの変更画面ページの実装 ログイン後ページにメールアドレス・パスワードの変更ページを実装
Lesson30	ドロワーメニューの実装
Lesson31	ドロワーメニューの実装 オプション機能を付与する(overLayの有無・ドロワーメニューの出てくる方向)
Lesson32	一覧ページと絞り込み機能
Lesson33	ドロワーメニューに遷移アニメーションを追加
Lesson34	マイページとお気に入り機能実装 ニュースタブUIから遷移するニュースの個別ページを作成。 個別ページにはお気に入り登録できる機能をつける
Lesson35	ログインユーザーか非ログインユーザーか判定して見れるコンテンツを分ける 擬似的なAPIを使用して、`isAuthorization`のようなログインユーザーか否かの権限を表すフィールドをもつエンドポイントを用意し、 `isAuthorization`がtrueであればログイン済みなページを表示し、falseであれば非ログインユーザー用のページを表示する
Lesson36	無限スクロールの実装
Lesson37	全てのコンテンツを集める 今まで課題で制作したコンテンツをあわせる