Contents
技術部メンバー
最新記事 by 技術部メンバー (全て見る)
- 基本情報技術者試験・科目Bに特化した勉強方法を公開！ - 2024年3月31日
- SE求人！福岡のIT企業がPL候補募集 - 2024年3月25日
- 合格率の低い基本情報技術者試験の勉強法を2024年3月合格者が解説 - 2024年3月20日
Jquery入門編！使い方と書き方とは？WEB系初心者向け情報
システム業界でPGをしているけどトレンドがWEB系にかたむいている気がして最近Jqueryに興味を持ち始めたあなたへ向けて、Jqueryの使い方、書き方をわかりやすく解説します。
この記事はエビングハウス橋浦メラビアンユウキがジェイクとエリーの恋愛ドラマについて愛を込めてお届けします。。。ではなくて、jqueryについて熱くお伝えします。
※余談ですが、私のハンドルネームは、前回覚えやすいと大好評でした。
そして、「jqueryと違って可読性が低い」「大変長いですね」など全国から熱いメッセージが届いたため、jqueryのように可読性を追求しました。
限られた期間で熟考を重ねた結果、以下のハンドルネームに改名しましたのでプレスリリースさせていただきます。
今回からは「ジェイク橋浦」とお呼びください。
シマブクロデハナイホウのジェイクといえば・・・私の笑顔を思い出してください(笑
シリーズ第2回、今回は実際のところJqueryでできることとは？その使い方や書き方についてお話ししたいと思います。
Jquery入門編！どこで使われてるのか？
Jqueryとはどんなところで使われているのでしょうか？
答えは、Web系の仕事の現場です。
今、私がいる開発現場でも現役で使われています。
本来静的であり、動きを持たないHTMLに(表示するだけなど)、動的な動きをもたらせる(画像が動く、リアルタイムに情報が変わるなど)Jqueryは、現在のWeb業界には無くてはならない技術として確立されています。
恐らく、ジェイクとエリーも恋愛においてお互いになくてはならない存在、だと思います。
今のところ。。。
Web系に携わる方は覚えておかないと損をする技術になりますね。
WEB関係初心者が知らないと損をする理由
なぜJqueryをWeb系初心者が知らないと損をする技術なのか？
それは、前述の通り、WEB関係の仕事をしている現場であればほぼ間違いなく使われているからです。
システム業界だけどWebを知っておかないといけないと思っている人や、まだWEB経験が浅い人は、覚えておかないと損をするというのが個人的見解です。
Jqueryの使い方と書き方
実際にJqueryの使い方とは？
前回の記事でも紹介した無料でプログラミングが学べるスマホアプリ「ソロラーン」の問題と絡めながら、一部説明していきたいと思います。
ソロラーンの詳細は、参照サイト(プログラマカレッジ様)をご確認ください。
基礎
その前にまず基礎的なところで、JqueryがJavaScriptにくらべてどれくらい簡潔にかけるのかを紹介します。
IDがsampleの要素に対してHello world!と表示したい場合の書き方が以下のようになります。
JavaScript
document.getElementById(“sample”).innerHTML = “Hello world!”;
Jquery
$(“#sample”).text(“Hello world!”);
画像で説明すると下のような形です。
いかがでしょうか。
同じ処理なのに、ここまで短くできるんです。
HTMLとJavaScript＋Jquery。
※ちなみに上の画像は無料でプログラミングが学べるスマホアプリソロラーンの環境を使用しました。無料でここまでできるのはすごいですね。
下が実行結果画像です。
見てわかるように、Jqueryは同じ処理なのに
「コード量が全然違います(短い・楽)」！
可読性や、記述量を考慮するならJqueryを使わない手はないと思います！
では、ソロラーンで実践！
再度、実際にソロラーンの問題を見てみましょう。
初心者向け問題
対象を非表示にするhideに関する問題の画像となります。
hideは、指定したHTML要素を非表示にする処理です。
問題は、divタグをクリックしたときにpタグの要素を非表示にする書き方を問うもので、上記画像のような書き方になります。
click me部分をdivタグ、hide and seek 部分をpタグと置き換えてみてください。
click meをクリックすることで、hide and seek部分を非表示にできました。
これがhideという処理になります。
このように、何かイベントが起きたときに、動的な処理（今回で言えば非表示になる）を行うのがJavaScriptで、それを扱いやすくしたのがJqueryとなります。
改めて下の画像をご確認ください。
jqueryのメリット
メリットは、４つ！
1.可読性(読みやすい、理解しやすい)が高い！
2.記述量が少ない！
3.工数削減！
4.納期短縮！
以上の４つは、時間と品質が命なWEB系エンジニアさんにとって、重要なメリットになりますよね？
今回は、WEB系初心者が知らないと損をするジェイクとエリーの恋愛ドラマ、、、
いえ、jqueryの使い方書き方などについて情報をお届けさせていただきましたが、いかがでしたでしょうか？
jqueryがWeb業界で必要な理由というのを意識していただけたのではないかと思います。
まとめ
・jquery入門編！jqueryはWEB現場で使われています。
・WEB関係初心者が知らないと損をする理由は、WEB関係の仕事でほぼ使われているからです。
・jqueryの使い方書き方次第で、可読性が高まり、記述量が削減できます。
・初心者向け問題は、ソロラーンを活用することをオススメしています。
・メリットは可読性、工数削減！など４つとなります。
次回は、もう少し問題を増やしますね。そして、より動きのある処理についても触れていきたいと思います。
以上、ジェイクシマブクロデハナイホウのジェイクといえば、、、の「ジェイク橋浦」でした！
第１回のメラビアンとエビングハウス記事も忘れずに！
私たちスフィアネットのメンバーと採用面談でお会いされたい方は以下採用ページをご確認後にお問合せフォームからお申込みをお願いいたします。
