大ちゃんの駆け出し技術ブログ

RUNTEQ受講生のかわいいといわれるアウトプットブログ

【無職に転生 ~ 就職するまで毎日ブログ出す_14】【jQuery】使ったことなかったので基礎中の基礎だけ学習しました。

はじめに

こんにちは、大ちゃんの駆け出し技術ブログです。

タイトルにあるとおり【無職に転生 ~ 就職するまで毎日ブログ出す】というチャレンジをしています!!!!昨日までは就活するまで本気出すでしたが、これだとまるで就活後は頑張らないのかと思われてしまいそうで、、、大人気アニメのタイトルのまるパクリチャレンジです。

https://i.gyazo.com/3a02b7aae4e5e538130d4bb199b55dc7.png

RailsやらRubyやらSQLやらその他Webの知識やらが色々と抜け落ちているのを感じており、知識の定着のためにもアウトプットする機会を増やすためです。加えて、退職して文字通り無職に転生しましてプロニートになり、毎日時間に余裕ができたので引き締めるためにも毎日投稿を思い至りました!

【投稿内容】

  • SQLの難しい処理 (副問合せ、JOINとか複雑な処理が書けない)
  • Rails全般 (純粋に必要な知識が多すぎる、網羅的な理解が足りない)
  • Rubyのあまり使わないメソッドや記述方法 (あまり重要ではないけど特に)
  • Web知識全般 (クッキーやら、セッションやらなんとなくで理解しているものの自分の言葉で説明できない)
  • 書籍 (スタートアップ企業に勤めるので、自分が会社に与える影響やパフォーマンスを高めるためビジネス書を読んでいきます。)

本日やること

jQueryをアウトプットします!「え、今更?w」みたいな反応になるかと思うのですが、いやほんとにjQueryって結構読めないなってなりました。自分はVue.jsは使えるのですが、jQueryは全く使ったことがありません。そして、現在チーム開発のプロジェクトではRailsjQueryが導入されており、自分は途中から参加したので全くコードが読めていません笑。なので少しでも理解しておいた方がいいので、このブログにて基本を上げておきます。

jQueryとは

参考にした記事では以下のように説明しています。

jQueryJavaScriptのためのライブラリです。jQueryを使用することでシンプルにJavaScriptを記述できるようになり、それまで数十行にわたるコードが必要だった処理もわずか数行で実行できるようになりました。

【初心者向け】jQueryとは|メリット・デメリットから記述方法まで解説|IT・ものづくりエンジニアの転職・派遣求人情報なら【パソナテック】

生のJavaScriptの書き方って確かにすごい冗長だなって思っていました。例えばHTMLの文字を変えるだけでもまずは要素を取得し、

const hoge = document.getElementById('hoge');

その後に要素を変更する記述を書きます。

hoge.innerHTML = '置き換えた文字';

たったこれだけでも2行は必要です。しかし、jQueryの場合以下のように書くだけです。

$('#hoge').html('置き換えた文字');

このようにJavaScriptで各コードを短く書くことができるのがjQueryです。

$について

普通ののJavaScriptと異なる点として$(ドルマーク)がめっちゃ多いなって思いました。例えば下記のような感じ。

$(document).ready(function() {
 $("p").css("color", "blue");
});

$("p")とかなんやねん!」と思っていたのですがそこまで難しいものではありませんでした。

$ = jQuery と等しい

jQueryのドルマーク ($)の意味とは?その意外な正体 | PisukeCode - Web開発まとめ

毎度呼び出す度に「jQuery」と書いていては非常に冗長になります。

jQuery(document).ready(function() {
 jQuery("p").css("color", "blue");
});

よってドルマークの1文字で代用できるようにしているんですね。

IDを指定したい場合は「#ID名」で指定します。例えば、IDがhogeである要素を指定する場合は下記のようになります。

$('#hoge')

クラスの場合「.クラス名」で指定します。

$('.fuga')

要素を指定した後はチェーンメソッドで実行したい処理を記載します。

$('#hoge').css("color", "blue");

jQueryで使えるメソッド

メソッド一覧は下記サイトを参考によく使いそうなものをピックアップします。

jQueryの「メソッド一覧」と使い方 - STAND-4U

.css()

上述したように指定した要素にスタイルを直接追加します。

$("#hoge").css("color", "blue");

複数のスタイルを一度に追加したい場合は、{}で囲いスタイルとそのプロペティの間に:を挟むことで実現できます。

$("#hoge").css({"color":"blue", "margin":"2rem"});

.hasClass()

要素に引数のクラスが含まれているかどうかを真偽値で返すメソッドです。if文と一緒に併用されるかなと思います。

if($("#hoge").hasClass('clicked'))

.toggleClass()

指定したCSSクラスが要素に無ければ追加し、あれば削除します。クラスを追加するaddClassや削除するremoveClassもあるのですが、toggleClassはどちらも行えるので便利です。

$("#hoge").toggleClass("fuga");

.append()

各要素に引数で指定したHTML要素を追加します。

$('#hoge').append("<b>Hello</b>");

基本的には何かを作成した時にそれをリダイレクトせずに要素だけを追加したい場合に使われます。例えばコメントを作成した時にリダイレクトなしに作成したコメントを追加する場合などです。

$('#hoge').append(comment) // commentには作成されたHTMLが格納されている

.val()

引数がない場合、要素のvalueを取得できます。valueですのでinputなどのフォームの値を取得します。

const hoge = $("input").val();

引数を指定する場合はフォームの値を変更します。

$("input").val("変更した値");

jQueryは早く開発したい時のみ使用

jQueryのメリットとしては学習コストがかなり低いところにあると思います。他のJSフレームワークであるVue.jsやReactはかなり元のJavaScriptとは記述方法が異なるのでそのぶん慣れるまでの時間がかかります。ですので、例えば初学者の方達が集まるチーム開発や本当にベータ版で早くリリースしたい時には便利です。

しかし、jQueryは使われなくなっていることは間違いありません。なので、モダンな開発現場ではほとんど使われないため、特にWeb系で働く場合はjQueryを全て理解する必要はなく、使う時にググって解決する程度でいいかなと思います。

終わりに

次回はビジネス本をアウトプットしようかなと思います。

参考記事

jQueryのドルマーク ($)の意味とは?その意外な正体 | PisukeCode - Web開発まとめ

【初心者向け】jQueryとは|メリット・デメリットから記述方法まで解説|IT・ものづくりエンジニアの転職・派遣求人情報なら【パソナテック】

jQueryの「メソッド一覧」と使い方 - STAND-4U