Jqueryとは | 使い方について

2019年10月5日

ソースコード
本日のテーマは「web」に関する基本的な解説を行うシリーズであり、前回「検索エンジンの比較とSEOについて | Google・Yahoo・Bing」についての解説を行った記事の続きとなります。

今回の記事では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の事で、これを設置するだけで一気にホームページに高級感が増すのでお勧めです。

スライダーを使用する事でスッキリとしたデザインにする事が出来るのでレイアウト的にも大変重宝します。

使い方次第ではスライドのさせ方もそれぞれに設定されている「※オプション」機能により、次々に横に流れていくものから、フワッと柔らかくフェードインして表示される方法などの使い方も可能になります。

スライダー系のJqueryを使用される場合はそういった見せ方の部分にまで気を使いサイトに合わせた拘りを細部まで維持する事が良い仕事にも繋がります(´・ω・`;コノサイトハダイブテキトウニクンデマスガ…

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

上で挙げている「Bxslider」と「Slickslider」にもオプションは存在しているので、気になった方はそういった使い方についても調べてみてください!

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

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

「Jqueryとは | 使い方について」の総評

パソコンとCD-R

今回はJqueryとはどの様なツールかについての簡単な解説を行いました。

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

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

Jqueryを使用する為には各ファイルの相対的な立ち位置・階層構造を理解したうえで、各種「js」や「css」ファイルのパスとの連結が必須となり、WeBサイト制作初心者の方にとっては最初の壁となりがちです。

しかし、その構造や使い方さえある程度理解できてしまえば、Jqueryは誰にでも簡単に便利な機能を使用する事が出来る素敵ツールでもありますので是非ともマスターをしていきましょう!

次回の記事ではそういったJqueryの設置の際によく起こるトラブルへの対処法などについても書いておきますので、そちらも併せてお読みください。

では(´・ω・`)ノ

関連記事

空に拳を突き上げている人

ブログの収益化を目指す本サイトの公開記事数が70記事を越えました

編集中の画面

健啖隊について | ニャゴラ | YouTuber

「ルマンド キャラメル味」を食べてみた

青空と喜ぶ女性

副業の為のブログの公開記事が80記事を越えました | 収益化などについて

コメントを残す

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

CAPTCHA