デイトラでプログラミング始めました

デイトラ初級 17~20日 jQueryでよくあるアニメメーションを作ってみる

こんにちは、Hikaruです。

現在デイトラでWeb制作コースを受講中です。「コーディングで月に5万円稼ぐ」を目標にして勉強中です。

Web制作コースの初級コースも中盤に差し掛かってきました

11日目以降はJavascrit(jquery)の文法、DOM操作などの基本を学習中です。

Javascrit、jqueryを始めてかなりプログラミングっぽくなってきました。

Javascrit(jquery)とは

JavaScriptは、Webページに動的な要素や対話性を追加するためのプログラミング言語です。これを使用することで、ボタンに触れると形や色が変わる機能や、スライドショー、ポップアップウィンドウ、ログインなど、様々な機能を実装することができます。

HTML→webページの骨組み

CSS→Webページの装飾

JavaScript→Webページに動きをつける

こんな感じの理解でしょうか。

jQueryを使うメリットとJavaScriptとの違い

jQueryのメリット:

  1. 簡潔な構文: jQueryはシンプルで簡潔な構文を提供し、コンパクトに記述できます。
  2. イベントハンドリング: jQueryはイベントのハンドリングを簡単に行うことができます。クリックやマウスオーバーなどのイベントを簡潔に設定でき、コードの書き方が簡略化されます。
  3. アニメーション効果: jQueryはアニメーションをサポートしており、要素のフェードイン・フェードアウト、スライドなどの効果を容易に追加できます。

JavaScriptとの違い:

  1. JavaScriptの柔軟性: JavaScriptは言語自体が非常に柔軟で、新しい機能やアプローチを自由に追加できます。一方で、jQueryはその柔軟性を制限するかもしれません。
  2. 学習コスト: jQueryは習得が比較的容易であり、初心者が迅速にウェブ開発に取り組むのに適しています。しかし、JavaScriptの基本を理解することは、より深い知識を得る上で重要です。
  3. ファイルサイズ: jQueryのライブラリは一定のサイズがあり、必要な機能を全て含んでいます。一方で、JavaScriptは必要な機能だけを含むことができ、ウェブページの読み込み時間を減少させることができます。
  4. モダンなJavaScriptの進化: 近年のJavaScriptはES6やそれ以降の仕様で多くの新機能が導入され、開発者によりモダンな開発手法が提供されています。これらの機能を活用するためには、jQueryを使わずに生のJavaScriptを理解することが重要です。

どちらを使用するかは、プロジェクトの要件や開発者の好みに依存します。

jQueryでよくあるアニメメーションを作ってみた

デイトラ初級編ではjqueryを用いてよくあるアニメーションを作成するカリキュラムになっています。つくるリストとしては

  • アラートの表示
  • アコーディオンメニュー
  • トップにもどるボタン
  • ドロワーメニュー
  • フォームに入力された文字をアラートに出力

です。どれもよくあるアニメーションですがjqueryを用いれば比較的に容易に実装することができました。

僕が実装したアニメーションを1つ載せておきます。

See the Pen Untitled by ヒカル (@lnlpnrjk-the-selector) on CodePen.

jQueryとJavascritを学んでみて

デイトラ初級編でJavascritとjqueryを両方学んでみました。両方学んでみて感じたことはまずは

jquery中心の学習でいいんじゃないか

ということです。その理由は現在デイトラで月に5万円稼ぐためにWeb制作を勉強中です。月に5万円稼ぐためのアニメーション、実装のスキルならjqueryで十分ではないかと感じたからです。実際にドロップダウンメニューやアコーディオンメニューは問題なく実装できました。ですので僕としてはまずはjQueryを中心にした学習を進めていきたいと思います。

初心者はjqueryからの学習がおすすめ

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です