Webアプリ開発コース初級編
WEBサイトとミニアプリを作れるようになろう
- DAY 25【調べながら実装しよう】jQuery実践課題②
引き続き「調べて・考えて・実装する」をテーマに、jQueryのアニメーションを実装していきましょう！
※なお、今回もjQuery以外のライブラリは利用せずに、自分でjQueryのコードを書いて自作してください。
01.課題③：モーダルで画像の拡大表示
- メニュー一覧の画像をクリックすると
- 縦横画面いっぱいに薄いグレーの背景ボックスを表示
- その枠の中心に拡大されたメニュー写真を表示
- 画面のどこかをクリックすると拡大写真と背景ボックスを非表示
- アニメーションはフェードイン・フェードアウト
いまいちイメージが掴めないという方は、こちらの実装例をご覧ください↓
02.【重要】仕事において「自作 = 正義」ではない
ここまでたくさんググってアニメーションを実装したと思いますが、どれもサンプルコードは見つかりましたよね。
何をやっているかが理解できる＋カスタマイズできる程度の知識があれば、やりたいことを正しいキーワードで調べていけば大抵のものは実装できます。
調べれば簡単に実装できるコードを、数時間〜数日かけて自作する行為は無駄です。スキルアップのためには挑戦も大事ですが、それをやりたければ個人の時間でやるべき。
実務でやるべき行為ではありません。
プログラミングは学校のテストではないですし、「車輪の再発明」をするのも無価値です。
プログラマーの実装力とは「＝書ける力」ではなく、「調べれば作れる力」も含めて"実装力"です。
どんどん調べて、カンニングして、使えるコードは再利用していきましょう！
03.一度書いたコードは「Notion」にストックしよう！
一度書いたコードは、手持ちのカードとして使い回せるようにしておきましょう！次からのコーディングが楽になりますよ。
コードをストックするツールとしては、Notionがオススメです！
コードはまとめて、いつでも再利用できるようにしておきましょう！
利用方法はかやさんの記事に分かりやすく掲載されていますので、ぜひご参考ください。
04.アニメーション実装の引き出しを増やす方法
僕が実践していた方法はこちら↓
- ググって出てきたコードをマネする
- 良いサイトを見つけたらデベロッパーモードでソースコードを読む
- テンプレートを購入し、ソースコードを読む
- CodePenなどで検索したコードをマネする
※使えるコードを見つけたら、『Notion』に写しておくと便利です。
基本的にググれば大抵のことは出てきますし、いいサイトを見つけたらコードを見てマネしていくことで引き出しは増えます。
また、他にこんな勉強の仕方をしてた人に会ったことないんですが、僕はEnvato MarketなどでHTMLテンプレートを購入して、そのソースコードを読んでました。
面白いアニメーションが実装されてるテンプレも多いですし、購入すればエディタでゆっくりコードを眺められます。
もちろん、アニメーションに限らずHTMLやCSSの書き方でもめちゃくちゃ勉強になりました。
僕は使えるソースコード集を買う感覚で買ってたので、多少の投資をしても実用的な引き出しを増やしたいという方にはオススメです！
05.おすすめの書籍
ここまでJavaScriptとjQueryの基礎を学習してきましたが、もっと詳しく知りたい・使いこなしたいという方は↓の書籍もオススメです。