WEB業界で仕事をするためには⑥ 「Jquery」について①

2019年10月5日

前回「SEO」についての解説を行った記事の続きとなります。
今回の記事では「Jquery」について、簡単に解説をしていきたいと思います。

Jquery(読み方はジェイクエリー)はこれまでWebに対してあまり深く関わった事の無い方にとっては聞き馴染みの無い言葉になると思います。
Jqueryとは「Javascript(ジャバスクリプト)」というプログラミング言語で記述されたファイルの一種です。
本来であれば数十から数百行にもなる難解な長文による記述があって初めて可能となるJavascriptでの記述処理も、Jqueryを使用する事でたったの数行の簡単な記述で済ませる事が出来る様になるという大変便利なファイルなんです。

上で書かれた内容だけではJqueryというものがどういった類のファイルなのかが今一つ分からないかもしれませんが、要は世界中に存在しているプログラミングの達人の方々が本来は各人が自分で記述をしないと駄目な難しい画面の動作や制御に関する記述をJqueryのファイルとして一纏めにして既に無償でネット上にアップしてくれており、我々はそれらの中から必要な機能のファイルをチョイスして無料で使用する事が可能という訳です。
世界中のホームページで使用されているスライダーの様な動きのあるページも、自分の手で作成をしようと思った場合はとんでもなく骨の折れる仕事となりますが、Jqueryを使用する事で割と一瞬でその手間からも解放されるという訳です(´・ω・`)

目次

Jqueryはどんな場面で使用するものなの?

上述によりJqueryが非常に便利なものであるという事はなんとなく理解をしていただけたとは思います。
では実際にJqueryが必要になるのはどういった場面なのかというと、スライダーやポップアップなどの動きのある要素の設置、要素の高さを揃えたい場面やレスポンシブ関係での自動計算機能を付与してのレイアウトの調整など本当に様々なシーンで使用されます。

WEBサイトを作り始めたばかりという人にとってはJqueryを使用する事で「何が出来るのか?」を探すよりも「何が出来ないのか」を探す方が難しいのではという程に、Jqueryには色々な機能を持ったファイルが存在しています。

代表的なJquery

■ スライダー系
・Bxslider
・Slickslider

■ ポップアップ系
lightbox2

■ レイアウト調整系
matchHeight

■ レスポンシブ関係
jquery.jmap

その他にも紹介をしたいJqueryは多数ありますが、数が多すぎてキリが無いのでこの辺りにしておきます(´・ω・`)

◆代表的なJqueryの解説① スライダー系

まずは基本中の基本であるスライダー系Jqueryの紹介です。
スライダーとは読んで字のごとくですが画像等をスライドさせて表示させる機能の事で、これを設置するだけで一気にホームページに高級感が増すのでお勧めです。
スライダーを使用する事でスッキリとしたデザインにする事が出来るのでレイアウト的にも大変重宝します。
スライドのさせ方もそれぞれに設定されている「※オプション」を使用する事で要素が次々に横に流れていくものから、フワッと柔らかくフェードインして表示される方法などの選択が可能です。
スライダー系のJqueryを使用される場合はそういった見せ方の部分にまで気を使いサイトに合わせた拘りを細部まで維持する事が良い仕事にも繋がります(´・ω・`;コノサイトハダイブテキトウニクンデマスガ…

※オプション…Jqueryのファイルによってはオプションと呼ばれる公式のカスタマイズ機能を持っているものもあります。
それらを使用する事で簡単にレイアウトの変化や機能の取捨選択ができ、細かなニーズにも対応が可能になるように予め設定がされています。
上で挙げている「Bxslider」と「Slickslider」にもオプションは存在しているので、気になった方は調べてみてください!

因みにスライダー系のJqueryは画像をスライドさせる機能というイメージを持たれがちですが、実際には画像以外にもテキスト等の要素もスライドさせる事が可能です。
スライダーの設定方法などについては今後解説を行いますので、その際にオプション他諸々についても説明をしたいとおもいます(´・ω・`)

Bxslider スライダーの代名詞の様な存在。
実装が簡単なので重宝します。
私が初めて使用したスライダーもコレでした。
Slickslider 様々なカスタマイズを簡単に行うことが出来る万能スライダー。
私も最近はスライダーを使用する際には殆どの場面でSlicksliderを使用しています。
オプションが充実しているので大抵の事が出来ます。

WEB業界で仕事をするためには⑥ 「Jquery」について①のまとめ

今回は「Jquery」についての簡単な解説を行いました。
「Javascript」という言葉は割と有名なので、これまでWEBにあまり関わりの無い方であっても言葉自体は聞いたことがあるという方も多いとは思います。
しかし「Jquery」に関しては一般的には無名な存在なので少々説明がクドくなってしまいましたね(´・ω・`)

今回説明を致しましたもの以外にも「代表的なJqueryの解説」の章で挙げた項目については解説を致したいのですが、思っていた以上に前半の概要説明が長くなってしまったので続きの項目に関しては次回の記事で紹介をしていきたいと思います。

Jqueryを使用する為には各ファイルの相対的な立ち位置・階層構造を理解したうえで、各種「js」や「css」ファイルのパスとの連結が必須となり、WeBサイト制作初心者の方にとっては最初の壁となりがちです。
しかし、その構造や仕組みさえある程度理解できてしまえば誰でも簡単に便利な機能を使用する事が出来る素敵ツールなので、是非ともマスターをしていきましょう!
次回の記事ではそういったJqueryの設置の際によく起こるトラブルへの対処法などについても書いておきますので、そちらも併せてお読みください。では(´・ω・`)ノ

コメントを残す

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