よくあるアニメーションを自在に作れるようになろう初級編

Webアプリ開発コース初級編

WEBサイトとミニアプリを作れるようになろう

JavaScript・jQuery学習編

DAY 22

よくあるアニメーションを自在に作れるようになろう

よくあるJavaScript・jQueryのパーツを5本用意したので、コーディングノックに挑戦しましょう！
これまでの復習になりますので、できる方は動画を見ないでどんどん進めてもらって構いません！

ボタンクリックでアラートを表示しよう
アコーディオンメニューを作ろう
トップへ戻るボタンを作ろう
ドロワーメニューを作ろう
フォームに入力された値をアラートに表示しよう

TIPS

01.ファイルのダウンロード

練習用ファイルは以下のリンクからダウンロードしてご利用ください。今回はJavaScript・jQueryの学習がメインなので、HTML/CSSはあらかじめ用意してあります。

ファイルダウンロードはこちら👇

ファイルのダウンロード

→ ダウンロード先
※「 elementary-jquery 」を右クリックから一括でダウンロード可能です。

フォルダ名について

動画内ではelementary-jqueryのようにフォルダを作成していますが、ご自身の環境では[discord名]_[制作物名]で作成ください。

例) Discord名がtaroの場合はtaro_elementary-jquery

02.ボタンクリックでアラートを表示しよう

実装の条件

ボタンをクリックしたとき
アラートに"おはよう！"と表示しよう
JavaScriptとjQueryどちらも書いてみよう

03.アコーディオンメニューを作ろう

実装の条件

質問をクリックしたとき
回答をスライド式に表示・非表示させよう
jQueryで書いてみよう

※VSCodeでは、ファイル内を検索することができます。
Windows: Ctrl + F
macOS: ⌘ + F
style.css内で、「 .accordion-content 」を検索してみてください。

キーワード

.next() （公式サイト）
.slideToggle() （公式サイト）

04.トップへ戻るボタンを作ろう

実装の条件

トップへ戻るボタンをクリックしたとき
500ms（0.5秒）かけてページトップへ戻る
jQueryで書いてみよう

キーワード

.animate() （公式サイト）

05.ドロワーメニューを作ろう

実装の条件

ドロワーボタンがクリックされた時に
ドロワーボタンにis-checkedクラスをつけ外しして、✖️ボタンに切り替えよう
ドロワーコンテンツをスライド式に、表示・非表示切り替えよう
bodyタグにis-fixedクラスをつけ外しして、ドロワーが開いてる時はスクロールを無効にしよう。
jQueryで書いてみよう

※動画 0:40〜CSSファイル内の検索は、ショートカットキーを使って検索しています。
Windows: Ctrl + F
macOS: ⌘ + F

キーワード

.toggleClass() （公式サイト）
.slideToggle() （公式サイト）

06.フォームに入力された値をアラートに表示しよう

実装の条件

フォームが送信された時
入力欄の値が空のときはエラーメッセージ"必須項目です"を表示させて処理を終了しよう
入力欄の値がある場合、「"入力内容" + "さん、こんにちは"」とアラートに表示しよう
フォーム内のインプットは1つとします
jQueryで書いてみよう！

preventDefault()とreturn false;の両方を使っている理由

解説動画ではイベントを無効化するために preventDefault(); と return false; の両方を使用していますが、これは一部の古いブラウザで preventDefault(); が正しく機能しないことがあるためです。
最近のブラウザでは、ほとんどの場合 e.preventDefault(); が正しく機能します。
なので return false; はなくても問題ありません！

キーワード

.val() （公式サイト）
.next() （公式サイト）
.text() （公式サイト）

07.困ったらまずは「よくある質問」をご覧ください！

よくある質問