初めてのjQuery – とりあえず書いてみよう編

• Web Create
• 2017.04.10

こんにちわこんばんわ、ちばです。

どうも最近いろんなことに手を出しては全て中途半端にしてる系エンジニアです。
つまみ食いが悪化しすぎると大変なことになるので良い子の皆さんは一個ずつ攻略しましょう。

さて、今回はとりあえず難しいことは考えずjQueryを触ってみよう的な内容です。
jQueryやらなきゃいけないってわかってるけどー。。。となかなか手を付けられない方も多いと思います。

なので今回はいろんな思考を捨ててとりあえず書いたら動くじゃん！簡単じゃん！というテンションで進めていきます。

※ HTML・CSSかけるぜ！という方を対象に進めていきます。

まずは書いてみよう

jQueryを動かすためには決まってjQueryを読み込む必要があります。
何も考えずhtmlファイルを用意してhead内に下記を読み込ませましょう。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

読み込ませたら、次は前述の記述の後ろに下記を記述しましょう。

<script>

$(function() {
  //ここに何かを書くんだよ！
});

</script>

これで基本的な準備は出来ました。
とりあえず一旦jQueryはここまでお約束だと思っておいてください。

次からはいよいよ｛　｝内にいろいろ書いてプログラム（すごそう）を動かして行きますよ！

consoleに文字を表示させよう！

<script>

$(function() {
  console.log('こんにちは！コンソールさん！');
});

</script>

上記の記述をするとブラウザのDeveloper Toolsでconsoleを確認すると、
「こんにちは！コンソールさん！」の文字が表示されているはずです。

consoleの開き方わかんないよ！って方は下記を参考に開いて見てください。
https://developers.google.com/web/tools/chrome-devtools/console/?hl=ja

さて、次はもう少しだけ目に見えることをやってみましょう。

テキストを入れ替えてみよう！

まずはbody内にpタグを書いてみましょう。

<p>入れ替わってないよー</p>

そしてこのpタグ内のテキストを入れ替えてみますよー。

<script>

$(function() {
  $('p').text('入れ替わったよー！');
});

</script>

いかがでしょう？pタグの中身が
「入れ替わったよー！」になれば大成功です！

これであなたもjQueryデビューです！

まとめ

今回はとりあえず書いて、なんとなく動いたってところまでわかれば大丈夫です。

次回以降はもう少し踏み込んで、要素の指定方法や動かし方を解説していく予定です。

これを気にjQueryアレルギー患者が少しでも減ったら嬉しいなとおもいます。

それではまた次回お会いしましょう٩( ᐛ)و