【Rails入門】5分でできるjQuery導入方法!初心者向けにまとめました

みなさんこんにちは!

フリーランスプログラマーのsatoです。

今回はRails上でのjQueryについて、導入から簡単な使い方の紹介まで見ていくことにします。

また合わせてそもそも「jQueryがなんなのか」についても確認していきましょう。

それでは今回のアジェンダです。

[基本] jQueryとは?
[基本] jQueryを導入しよう!
[応用] jQueryはどこに書くべき?
[応用] jQueryをもっと学ぼう!

一緒に基本から確認しつつ、置く場所や詳細まで見てきましょう!

それではよろしくお願いいたします。

jQueryとは?

jQueryとは一言で言えば「JavaScriptを便利にしてくれる道具」です。

そして、そもそものJavaScriptは「サイトに動きや反応などを加えるための言語」です。

つまりJavaScriptとjQueryを導入すれば「非常に簡単にサイトに動きや反応を追加できる」というわけですね!

これは是非ともサイトに導入したいものです。

またより詳しい部分を知りたい場合以下のリンクで説明をしていますので、気になる人は読んでみてください。

【初心者向け】jQueryとは?JavaScriptとの違いや特徴・使い方の完全まとめ
更新日 : 2019年7月18日

jQueryを導入しよう!

では早速導入の手順に移りましょう!

Gemfileに記述を追加しよう!

まずはRailsのプロジェクトの直下にあるGemfileを編集する必要があります。

まずはGemfileを開き以下の処理が無いか確認してみましょう。

もしあったら、jQueryの導入準備は済んでいるのでそのままGemfileを閉じましょう。

(デフォルトで入っているケースも多いです)

もしなければ追加してしまいましょう!

gemをインストールしよう

追加が完了したら、Gemfileに記載されたGemsをインストールする必要があります。

以下のコマンドをRailsのプロジェクトディレクトリで実行しましょう。

※ただrbenvを使用している場合は、代わりに以下のコマンドなどを使用することになるでしょう。この辺りは各自の環境に合わせて対応をお願いします。

またgemのinstallについてもっと詳しく知りたい人は以下のページを読んでみてください。

理解必須!gemsのインストール方法とインストール場所
更新日 : 2019年6月12日

application.jsに追記しよう!

/app/assets/javascripts/application.jsに以下の行を追加します。

jQueryを動かそう!

jQueryの稼働テストをしてみましょう。

まずはどこでも良いです、好きなView(index.html.erbなど)へ以下の記述をして、ページをブラウザで開いてみてください。

見てみると…

rails-jquery-1

当たり前ですが大半の人の結果は、画像のように「jQuery稼働テスト(未稼働)」と出ているのでは無いでしょうか?

そしたら次はjQueryの処理を追加して、以下のように記述しましょう。

そして同じようにブラウザで見てみると…

rails-jquery-2

「jQuery稼働テスト(稼働中)」と表示されています!

うまく動いているようですね!

どうして文字が変わったの?

先ほどの処理の仕組みを少し確認してみましょう。

重要なのは次の一文です。

これは、pタグを使用しているすべての箇所の、表示文字を変更する処理です。

そう言われてみればなんとなく、意味はわかるのでは無いでしょうか。

$("p")でpタグを指定し、text("jQuery稼働テスト(稼働中)");部分で文字を書き換えているわけですね!

ちなみにこのtext関数については以下の記事でまとめていますので、jQueryを使用して文字を変更したい人は読んでおきましょう!

jQueryのtext()によるテキスト操作まとめ!
更新日 : 2019年5月28日

JavaScriptはどこに書くべき?

先ほどは、Viewファイル内に直接スクリプトを書いてしまっていました。

しかしそれでは、必要なページごとに処理を毎回追記する必要があり非効率です。

そのためRailsではJavaScriptの置き場所が準備されています。

処理を別ファイルへ!

以下がその場所になります。

app/assets/javascripts

このファイルの直下に「好きなファイル名.js」と、いった形でファイルを用意しましょう。

今回はテストとして「test.js」という名前のファイルとしましょうか。

パスも表示すると「app/assets/javascripts/test.js」にファイルを作成したことになります。

そして中には、とりあえず先ほどと同じ処理を入れてしまいましょう。同時に、これまでHTMLに書いてきた処理は削除してください。

※この際<script type="text/javascript"></script>部分は必要ありません。

呼び出し処理を追加!

先ほど作ったtest.jsは、呼び出し処理がなければ使えません。

「app/assets/javascripts/application.js」ファイルを確認し、呼び出し処理がなければ追加をしましょう。

呼び出し処理は以下の部分です。

この部分は「app/assets/javascriptsディレクトリ以下のjsファイルをすべて読み込む」という意味です。

特定のファイルのみ読み込む場合や、読み込む順番などを気にし始めると、もっと他の書き方をしなければなりませんが…

そういったことを望まなければ、基本的にはこれで問題無いでしょう。

実行してみる!

rails-jquery-2

これで再度ブラウザを開いて、ちゃんと画像のように文字が更新されているようならば、処理の引っ越しは完了です!

jQueryをもっと学ぼう!

この後は実際導入した後に、まず学んでおいたほうが良い記事をまとめておきました。

うまく学んでjQuery・JavaScriptを使いこなしましょう!

まずは基本を抑えよう

【入門者必見】押さえておきたいjQueryの最適学習方法まとめ
更新日 : 2018年11月29日

こちらの記事ではjQueryの基礎の基礎について、まとめています。

jQueryそしてJavaScript初心者の方は目を通しておきましょう。

セレクタ操作をマスターしよう!

これで完璧!jQueryのセレクタ操作を完全理解するコツまとめ!
更新日 : 2019年5月9日

jQueryを使う一つの大きなメリットとして、セレクタの存在があります。

HTMLの要素を、非常に便利に取得できるわけです。

この辺りのセレクタ操作のマスターは最優先で行うべきでしょう。

クラスを操作しよう!

jQueryでクラス操作(指定・削除など)を極めるコツ!
更新日 : 2017年10月9日

セレクタをマスターし、自在に要素を取得できるようになったら、あとはこっちのものです。

取得した要素を色々といじってしまいましょう。

そんな時、主要な操作方法としてクラスの操作があげられるでしょう。

この記事を読んでクラスを変動させて動的に見た目や挙動をコントロールしましょう!

まとめ

今回は非常に簡単にですが、jQueryの導入から使い方、そして基礎の学び方について見てきました。

JavaScriptはコンテンツを作る上で、今や必須の技術です。

そんなJavaScriptをもっと使いやすくしてくれるjQuery…

マスターしておけば、あなたのスキルを支える大きな力になってくれるはずです。

ぜひJavaScriptを合わせてマスターしてしまいましょう!

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

sato

sato

学生時代を含めると、かれこれ10年以上プログラマーとして過ごしています。
様々な言語や環境、プロジェクトに関わってきましたので、より実践的な記事をみなさんにお届きるよう情報発信していきます!

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説