The following two tabs change content below.
アバター画像

技術部メンバー

福岡市博多区でシステム開発の請負やSES、ホームページ制作やweb集客サービスを提供するIT業界の中小企業に在籍するエンジニア組が交代しながら発信中

Jquery入門編！前回の応用と導入方法は？

 

みなさんこんにちは！
春日さんからバトンタッチで今回から編集担当します原です。
今回はJqueryについて学ぼう企画第３回ということで、橋浦さんも筆がのってきたようです。
初めての方にわかりやすくをモットーにうちのPG橋浦が丁寧に説明していますので、興味を持たれた方はぜひ１回からご覧ください。
さて前振りはこのぐらいにしてさっそく橋浦さんにバトンタッチしたいと思います。

橋浦さんおねがいします！

 

どうも、こんにちは。技術部のジェイク橋浦です。

週一であげていくブログも、今回で第３回です！

３回目ともなると、書き方に多少慣れて…こないんですねこれが(笑)

まぁしっかりと伝えたいことを伝えていきますよ！今回もよろしくデス！

 

今回のテーマは前回の応用です…が、

その前に！

うちの営業であるイニエスタ春日から質問があったのでここでお答えしたいと思います。

 

盲点でした…。

当たり前のように使っているからこそ、しっかりと説明するべき部分でしたね。反省を活かしてここからは主な導入方法について説明していきます。

導入方法はこちら

〇自分のパソコンにダウンロードして使う。

〇Googleが提供するサーバーにあるものを直接使う。(ダウンロードいらず！ただしネットに繋がっていないと使えない…)

今回は、導入が比較的簡単な2つのやり方をご紹介したいと思います。

具体的にはGoogleやMicrosoft、Jquery本家などのサーバーが配信しているJqueryを使います。

簡単に説明すると、GoogleやMicrosoft、Jquery本家などが作成したJqueryをそのまんま借りるということです。使える部品を再利用するといういかにもプログラム的な考えでいいですね！

やり方は、以下のコードをHTMLに書くだけです。

Google
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>

Microsoft

<script src=” https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js “></script>

※今回はGoogleとMicrosoftにあるJqueryを使う場合に必要なコードを記しておきます。ほかにもありますが、あとはご自分で検索してみてください。結局は自分がどれを使いたいかという違いしかありません。

実際にコードに記して使ってみよう！

この２つのうちのどちらか（今回はGoogleの方）を以下の画像のように<head>タグ内に埋め込むとJqueryが使えるようになります。

※赤枠で囲んだ部分

試しに、前回サンプルとして書いたJqueryのコードのjsファイルを読み込むようにして実行してみると…

ちゃんと動いてることがわかりますね！

※Jqueryを書く方法も、HTMLに直接書く方法と外部ファイルを読み込む方法があり、外部ファイルを読み込む方が主流なので、今回はこちらで行っています。

外部ファイルを読み込む方法の書き方は以下の画像のようになります。src=””の部分は、読み込みたいjsファイルがある場所を指定する必要があります。

このようにコードを書くだけでJqueryは使えるようになります。

では、次からは実際のwebページをつくる時に役立ちそうなJqueryとその使い方をご紹介します。

値を連結させるには？

 

ソロラーンの問題から抜粋します。

上記画像は、<p>1</p>タグの中にある値が、与えられた処理によってどう変化するかという問題です。

append…渡した値を対象の値の後ろにくっつける処理

prepend…渡した値を対象の値の先頭にくっつける処理

この二つの処理を行うと、appendにて“1”の後ろに“2”を連結させた後、prependにて連結済みの“12”の先頭に“1”を連結させる処理となります。なので答えは<p>112</p>という値になります。

これを応用して、ボタンをクリックしたらその都度前に“1”、後ろに“2”を追加するという処理を実行してみると…

このように押すたびに増えていきますね。

これをさらに応用すると、ボタンを押したら、テキストに入力した文字をURLにくっつけてそこに移動するみたいな処理が出来ます。

中の値を繰り返すには？

渡された配列やオブジェクトの中身の分だけ処理を繰り返すeachというものがあります。

これは特に頻繁に使う処理になると思うので、ぜひ覚えてください。

上記画像は、ボタンを押したときにarrayという配列の中にある三つの単語をsampleというIDの場所に繰り返して表示させるJqueryです。

ボタンを押すと…

 配列の中身が順に表示されます。

このように、渡した値を順に表示する場合に大変便利な処理が「each」となります。

実際の現場などでは、データベースから持ってきた値を一覧表として表示する際によくつかわれています。

 

いかがでしたでしょうか。Jqueryの処理にはほかにもいろいろありますが、この辺りを知っておくと、何かと楽になるかと思います。

では、今回はこのへんで。また次回お会いいたしましょう！僕からは以上！

橋浦さん解説ありがとうございました。今回はJqueryの導入方法からよく使うコードの書き方まで説明していただきました。来週で遂にこの連載も最終回となります。最後はどんな機能のコードを教えてもらえるのでしょうか。乞うご期待です。

最後まで読んでいただきありがとうございました。　　　　原