課題を始める前にここの右上のstar☆を押下していただけるとやる気出ます。 作成者
# [課題No](リンク)
## [CodeSandBox](リンク) :最新のコミットリンク
## 実装上、不安なところ、重点的に見てもらいたいところ
- コミットリンク
- コミットリンク- 他、コメント欄に書いたコードの解説を記載する
- コメントもらったらそのスレッドにコミットリンクを貼って修正を伝える
ざっくりコミットの書き方抜粋です。bodyは任意です。英語奨励。
feat：新機能
refactor: リファクタリング
style: コードスタイル変更
fix：バグ修正
perf：パフォーマンスを向上させるコード変更
///
test: テスト修正
build：ビルドシステムまたは外部の依存関係に影響を与える変更
ci：CI構成ファイルとスクリプトの変更
doc：ドキュメントのみが変更されます
<li>これです</li>
<li>
<a href="1.html"><img src="bookmark.png" alt="ブックマーク" />これです</a>
</li>
このDOM
<ul>
<li><a href="a1.html"><img src="/img/bookmark.png">a1</a></li>
<li><a href="a2.html"><img src="/img/message.png">a2</a></li>
</ul>をJavaScriptでつくり、html内のulの中に差し込んでください https://codesandbox.io/s/thirsty-paper-b58hj?file=/index.html
[{to: "bookmark.html", img: "1.png", alt:"画像1", text: "ブックマーク"}, {to: "message.html", img: "2.png", alt:"画像2", text: "メッセージ"}]という配列を使って以下のようなHTML出力にしてください
<ul>
<li><a href="/bookmark.html"><img src="1.png" alt="画像1">ブックマーク</a></li>
<li><a href="/message.html"><img src="2.png" alt="画像2">メッセージ</a></li>
</ul>
4のこちらをつかって、こんどはPromiseオブジェクトを使って解決された値として受け取り、
[{to: "bookmark.html", img: "1.png", alt:"画像1", text: "ブックマーク"}, {to: "message.html", img: "2.png", alt:"画像2", text: "メッセージ"}]同じように
<ul>
<li><a href="/bookmark.html"><img src="1.png" alt="画像1">ブックマーク</a></li>
<li><a href="/message.html"><img src="2.png" alt="画像2">メッセージ</a></li>
</ul>こちらの出力になるようにしてください
5で作ったものを3秒後に解決されるようにしてください
loadingを実装してみてください。 このようなローディング実装を作ってください。
resolveになるまでの間にloading画像をだして、終わったら除く 今持っている知識でできるはずです。 どうすればできそうか書く前に考えましょう。 これはサーバーから値が渡ってくるまではそれを出して、渡ってきたら値を加工してhtmlとして書き出すを想定しています 素材はこちら
つぎはresolveで解決するのではなく(resolveを実行するのではなく) 3秒後にrejectを実行してthenでその値をコンソール出力してください。ローディングはぐるぐる状態で良いです。
いままでresolveとしていたところでrejectを実行して、エラーを起こしてcatch節でエラーをキャッチしてください
async awaitを使って同じことをやってください。rejectは考慮しないでいいです。問題7をasync awaitを使って書いてください
問題9に追加で try-catch-finaliy を書いてください
簡易的なAPIを使って同じことをこちらのサイトに
{ "data": [
{
"a": "bookmark",
"img": "img/1.png",
"alt": "画像１",
"text": "ブックマーク"
},
{
"a": "message",
"img": "img/2.png",
"alt": "画像２",
"text": "メッセージ"
}
]}上記を登録してエンドポイントを取得 前回までのコードを生かして fetchを使ってデータを取得してください
取得したデータは前回と同じように表示してください
クリックしたらリクエストをして、それらが表示されるようにしてください
クリックしたらモーダルが出てきて、12で作ったボタンを押したらリクエストされ表示するようにしてください
13で作ったモーダル内にinput (typeはnumber)をおいて、クリックした際にinput(type number)のvalueを取得して、リクエストできるようにしてください。(その値はPromiseを実行する手前でconsole.log出力されていればいいです)
モーダル内に formをおいて、input(type number)値、input(type text)、を新たに作ったsubmitボタン押下で リクエスト、 APIから値を取ってきてください
これはyahooのトップページを模したUIですが、これをデータとしてどのようなものがサーバーがから返ってくれば実現できそうか、データ構造から考えて、静的なデータ(前回までのようなresolveされると返されるベタ書きのデータ)を作って、画面表示させてみてください。
仕様は
- それぞれのカテゴリタブを開くことができてそれぞれのジャンルに応じた記事が4つ表示できる。(記事のタイトル名は適当)
- それぞれのカテゴリにはそれぞれ固有の画像が入る(右側四角。画像は適当)
- 記事にはnewという新着かどうかのラベルがつく(どこの記事にそれが入るかは適当でいいです)
- 記事にはそれぞれコメントがあり、0件なら表示しない、1以上ならアイコンと共に数字が表示される
- カテゴリタブは切り替えられる。面倒なら2つのカテゴリだけでよいです。その場合ニュースと経済だけにします
- どのカテゴリタブを初期表示時に選んでいるかはデータとして持っている
- htmlはulだけ作ってあとはcreateElementで作る
- try-catchでエラー時はulの中に「ただいまサーバー側で通信がぶっ壊れています」みたいなテキストを画面内に表示すること
- CSSはなしで良い。上記機能要件だけ満たしていればいい
です
よくあるスライドショーを作ってみましょう
- 仕様
- 画面遷移してから3秒後に解決されるPromiseが返すオブジェクトを元にimgタグを5つつくる。
-
それぞれは.z-indexで重ねた状態。クリックを押すと画像が変わる
-
5枚中何枚目かを表示して、5/5の場合Nextの矢印はdisabledにする。1/5枚の時はBackボタンはdisabledにする
スライドショーにドットのページネーションを作りましょう
それぞれのドットではクリッカブルになっていて、押下するとその画像に切り替わります。それとともに1/5も切り替わります。
また、3秒毎に次のスライドに自動で切り替わるauto機能を提供してください。
コンテンツUIとスライドショーを併せたページを作ってください。
- こちらのようなテーブルを画面遷移してから3秒後に解決されるPromiseが返すオブジェクトを元に作ってください。
- カラム名など(id, 名前等)もdataで表現して受け取り、フロント側で加工して表示すること
-
こちらのようなテーブルを画面遷移してから3秒後に解決されるPromiseが返すオブジェクトを元に作り、 idがソートできる機能を作ってください
-
ソートは通常時はidが適当でもよく
-
ソートが昇順の場合は上矢印がアクティブ、下矢印がdisabled、1,2,3,4,5の順番で表示され、降順の場合はその逆、
通常時の矢印クリック(クリッカブル領域は2つの矢印です。上下別々のクリッカブル領域でではなく)を押すと画像のように変化します
同じことを年齢でもやってください。
warning こちらの課題はdeprecatedです。飛ばしてください。
ページネーションを足してください
- 適当ないつもの順番で得るオブジェクトを作る 25件のユーザー数をもつオブジェクト 初期状態は1/10として左矢印はdisabled、右矢印をクリックすると2/5となり、3/5...5/5となる
ものを作ってください。表示する数はそれぞれ例えば
オブジェクトがを持っている場合
1/5の時id15, 2/5の時610, 3/5の時、1115, 4/5の時1620, 5/5の時21~25と表示されるようにする
- ソートをいじると初期化された状態で1/5に戻り、それぞれソートされた状態でページングできるようにする
会員登録画面(register.html)を作ります
仕様
- バリデーションはここではなし
- ユーザー名、メールアドレス、パスワードの入力欄と利用規約に関するチェックボックス(画像参照)がある。
- 送信ボタンがあるが振るまいの実装はしないで良い
- 利用規約のテキストを押すと、モーダルが立ち上がり(前回作ったもので良い)、ダミーの利用規約がテキストとして読める。スクロールが一番下に行ったらチェックボックスはcheckedになる。もし開いてもスクロールが下まで行っていなければcheckedはfalseのまま
- checkedがtrueの場合送信ボタンを押下すると別ページの
register-done.htmlに飛ぶ register-done.htmlは画面のようなテキストになっている(画面は適当で、遷移できていることが分かれば良い。CSSも書かないでも良い)
バリデーションを追加します
仕様
-
初回は送信ボタンとチェックボックスはdisabled状態。CSSは画像のように灰色にしてください
-
ユーザー名は16文字未満とし、もしinvalidならバリデーションテキストは 「ユーザー名は15文字以下にしてください。」
-
メールアドレスは一般的なメール形式のバリデーションにしてください。もしinvalidならバリデーションテキストは「メールアドレスの形式になっていません。」
-
パスワードのバリデーションは8文字以上の大小の英数字を交ぜたものとし、もしinvalidならバリデーションテキストは「8文字以上の大小の英数字を交ぜたものにしてください。」
-
利用規約のスクロール実装に併せて、チェックボックスのdisabledは外し、checkedになる
-
全ての入力がvalidの場合にのみ送信ボタンは緑色になり押下でき、
register-done.htmlに遷移できる。
ログイン画面(login.html)を作ります
仕様
- ユーザー名、パスワードの実装は25と同じ。
- パスワード忘れてた方
forgotpassword.htmlを作って遷移できるようにしてください。ページ内の実装はしないで良いです。 会員登録はこちらから課題24,25で作ったregister.htmlへ遷移できる。- パスワードは仮に
N302aoe3とし、ユーザー名はご自身の決めた値でokです
- ログインページに遷移したらトークンがlocalStorageにあるかどうか確認してください。
- あれば、コンテンツ画面ページへ、なければログインページをそのまま出します。
- ログインページ内は送信ボタン押下時に。
{
name: "kejimorita", // <- なんでも良いです
password: "N302aoe3" // <- なんでも良いです,
}というものがsubmitの引数として渡ってきたら、 Promise を使ってnameとpasswordをそれぞれの値のプリミティブ比較で合っているか検証してください。(ここのPromise辺りの実装はなんでもいいです) サーバー内で検証していることを想定しているので、awaitしている関数内で行ってください。 合っていたらresolve、違う場合 reject。
その返値にトークンを返して判定してください。
// 成功時
{ token: "fafae92rfjafa03", ok: true, code: 200 }
// 失敗時
{ ok: false, code: 401 }それに応じて画面ページか失敗しましたページへ遷移
成功したらその後、そのログイン画面内でlocalStorageで埋め込んでください。
以後は、ログインページやコンテンツページに遷移したら localStoregeに値があるかチェックして、なければログイン画面に飛ばしてください。
さらにコンテンツ画面側にログアウトをつけて 押したらローカルストレージ削除してください。
※ローカルストレージに関しての危険性はローカルストレージは使うなを一読のこと。ここの課題のローカルストレージ使用はあくまで学習の為に使います。
ここでの課題はそれが確認できればokです。
index.htmlページ遷移時に
学習の為のローカルストレージのトークンを参照して
もし
{token: far0fja*ff]afaawfqrlzkfq@aq9283af}の値があれば
作ったコンテンツUI画面を
何もない場合はログイン画面(login.html)に遷移するように作ってください
ここまではバニラなJavaScriptを使って実装してきました。 今度はnpmを使ってパッケージ管理しながらReactライブラリで実装していきます。
※もりけん塾生の方で課題をクリアされた方はご連絡ください。「Reactハンズオン」のプライベートリポジトリをお教えします。
- ある時点でスクロールするとしたからにゅっと出てくるTOPへ戻るボタン
- 押下するとスクロールで一番上まで戻る
仕様
- ボタン押下すると、左 or 右からスライドした or 瞬時にコンテンツが全画面を覆う。そこにはxボタンとリンク先(コンテンツ内のh3要素へのハッシュリンク)がついている
- 全てのデバイスに対応すること
- ハンバーガーボタンを押下するとバツに変わりますが、そのボタン位置の変更は問いません
- 何か引数を渡すことで左メニューと右メニューと変更可能にできたら尚良い
仕様
- スクロールするとある時点で横からシュッと出てくる
- スクロールするとある時点で横並びリストが、しゅっしゅっしゅっと出てくる