Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
10
Help us understand the problem. What is going on with this article?
@ostk0069

適したjqueryのサンプルを見つける&jqueryで詰まった時の対処法(プログラミング初心者向け)

More than 3 years have passed since last update.

** 自己紹介 **
今年の4月にプログラミングを始め、現在はruby on rails,react.jsを学習し始めた大学生。4月、5月はプログラミングに自分の時間を費やし、自分のHPを作成する。その際にプログラミング初心者がjqueryを使用する際に、ハードルが低そうに見えて、意外と詰まったりしていたので、そこを書いていこうと思います。

重要:これはjavascriptの知識がほとんどない人に向けた記事です。(もちろんjqueryも)

通常のググりだとjqueryでできることの1部しか見ることができない

多分、みなさんがjqueryで何か作ろうと思ったとき、アニメーションの名前をテキトーに打ち込んでして検索していませんか?

ex: 『jquery アニメーション フェードイン 方法』や
        『jquery アニメーション スクロールしてから表示 方法』など

このように検索していませんか?

実際わたしもそう検索していました。こういった検索をしたとき、大抵、jsの記述コードが貼ってあってできますよ! みたいなサイトが出て来ます。でもそれって本当にjqueryでできるサンプルの一部が乗っているだけなんです。
もっと色々なのみて、自分の制作物にあうものを厳選したくないですか? サンプルを自分らしく改良したくありませんか?

サンプルサイトではうまくコピペしたはずなのにうまく動かない!!なんてこともあります。そんなときに考えられる原因を考えてみましょう。

サンプルサイトにおいて稀に起きる問題の対処法

 そういったサイトの通りやってもうまくいかない時があったときの対処法を教えます。
** まずは実際に動いたサンプルのページのソースを見てみましょう。**
ページで書かれていることを違うところがあるとおもいます。 そういったところをとにかく見比べて、コピペして...リロードして...の確認になります。(地道にこれをやるのが意外と一番簡単に解決する方法だったりします。)

その他にも様々なミスの原因があるので書いて行きますね。
・そもそもしっかりjqueryがダウンロードされているか
・バージョンがしっかりと合っているか
・jqueryのコードを書く場所が間違っていないか
    (headの中に書こう!)
・scriptの記述があてられるコードよりも前に記述されていないか
    (基本的にbodyの最後にまとめて書いた方がみやすいよ!)

でも結局はそんなめんどくさいのに振り回されずに楽に色々なアニメーション取り入れたい!と思う方もいるかと思います。

         ↓
         ↓

そんなときに使うのが〇〇.js もしくはそういったものをまとめて乗っけているサイト

実は適当に 『jquery サンプル』みたいにググるよりよっぽどわかりやすく、かつ、様々なバリエーションのものが存在します。
一応、参考になるサイトをいくつか乗っけておきますね
http://getbootstrap.com/
https://daneden.github.io/animate.css/
http://gimmicklog.main.jp/jquery/
gimmicklogは似たような記事が一覧になっているのでぜひチェックしてみてください。
どれも説明がしっかり書かれていてわかりやすいです。
(添付させて頂いたurl先の方にに感謝の思いを込めて)

10
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ostk0069
Swift / Rails Engineer https://www.wantedly.com/users/31623094

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
10
Help us understand the problem. What is going on with this article?