みなさんこんにちは!
フリーランスプログラマーのsatoです。
今回はRails上でのjQueryについて、導入から簡単な使い方の紹介まで見ていくことにします。
また合わせてそもそも「jQueryがなんなのか」についても確認していきましょう。
それでは今回のアジェンダです。
[基本] jQueryを導入しよう!
[応用] jQueryはどこに書くべき?
[応用] jQueryをもっと学ぼう!
一緒に基本から確認しつつ、置く場所や詳細まで見てきましょう!
それではよろしくお願いいたします。
jQueryとは?
jQueryとは一言で言えば「JavaScriptを便利にしてくれる道具」です。
そして、そもそものJavaScriptは「サイトに動きや反応などを加えるための言語」です。
つまりJavaScriptとjQueryを導入すれば「非常に簡単にサイトに動きや反応を追加できる」というわけですね!
これは是非ともサイトに導入したいものです。
またより詳しい部分を知りたい場合以下のリンクで説明をしていますので、気になる人は読んでみてください。
jQueryを導入しよう!
では早速導入の手順に移りましょう!
Gemfileに記述を追加しよう!
まずはRailsのプロジェクトの直下にあるGemfileを編集する必要があります。
まずはGemfileを開き以下の処理が無いか確認してみましょう。
gem 'jquery-rails'
もしあったら、jQueryの導入準備は済んでいるのでそのままGemfileを閉じましょう。
(デフォルトで入っているケースも多いです)
もしなければ追加してしまいましょう!
gemをインストールしよう
追加が完了したら、Gemfileに記載されたGemsをインストールする必要があります。
以下のコマンドをRailsのプロジェクトディレクトリで実行しましょう。
bundle install
※ただrbenvを使用している場合は、代わりに以下のコマンドなどを使用することになるでしょう。この辺りは各自の環境に合わせて対応をお願いします。
rbenv exec bundle install
またgemのinstallについてもっと詳しく知りたい人は以下のページを読んでみてください。
application.jsに追記しよう！
/app/assets/javascripts/application.jsに以下の行を追加します。
//= require jquery //= require jquery_ujs
jQueryを動かそう!
jQueryの稼働テストをしてみましょう。
まずはどこでも良いです、好きなView(index.html.erbなど)へ以下の記述をして、ページをブラウザで開いてみてください。
<p>jQuery稼働テスト(未稼働)</p>
見てみると…
当たり前ですが大半の人の結果は、画像のように「jQuery稼働テスト(未稼働)」と出ているのでは無いでしょうか?
そしたら次はjQueryの処理を追加して、以下のように記述しましょう。
<p>jQuery稼働テスト</p>
<script type="text/javascript">
$(document).ready(function() {
$("p").text("jQuery稼働テスト(稼働中)");
});
</script>
そして同じようにブラウザで見てみると…
「jQuery稼働テスト(稼働中)」と表示されています!
うまく動いているようですね!
どうして文字が変わったの?
先ほどの処理の仕組みを少し確認してみましょう。
重要なのは次の一文です。
$("p").text("jQuery稼働テスト(稼働中)");
これは、pタグを使用しているすべての箇所の、表示文字を変更する処理です。
そう言われてみればなんとなく、意味はわかるのでは無いでしょうか。
$("p")でpタグを指定し、text("jQuery稼働テスト(稼働中)");部分で文字を書き換えているわけですね!
ちなみにこのtext関数については以下の記事でまとめていますので、jQueryを使用して文字を変更したい人は読んでおきましょう！
JavaScriptはどこに書くべき?
先ほどは、Viewファイル内に直接スクリプトを書いてしまっていました。
しかしそれでは、必要なページごとに処理を毎回追記する必要があり非効率です。
そのためRailsではJavaScriptの置き場所が準備されています。
処理を別ファイルへ!
以下がその場所になります。
このファイルの直下に「好きなファイル名.js」と、いった形でファイルを用意しましょう。
今回はテストとして「test.js」という名前のファイルとしましょうか。
パスも表示すると「app/assets/javascripts/test.js」にファイルを作成したことになります。
そして中には、とりあえず先ほどと同じ処理を入れてしまいましょう。同時に、これまでHTMLに書いてきた処理は削除してください。
$(document).ready(function() {
$("p").text("jQuery稼働テスト(稼働中)");
});
※この際<script type="text/javascript"></script>部分は必要ありません。
呼び出し処理を追加!
先ほど作ったtest.jsは、呼び出し処理がなければ使えません。
「app/assets/javascripts/application.js」ファイルを確認し、呼び出し処理がなければ追加をしましょう。
呼び出し処理は以下の部分です。
//= require_tree .
この部分は「app/assets/javascriptsディレクトリ以下のjsファイルをすべて読み込む」という意味です。
特定のファイルのみ読み込む場合や、読み込む順番などを気にし始めると、もっと他の書き方をしなければなりませんが…
そういったことを望まなければ、基本的にはこれで問題無いでしょう。
実行してみる!
これで再度ブラウザを開いて、ちゃんと画像のように文字が更新されているようならば、処理の引っ越しは完了です!
jQueryをもっと学ぼう!
この後は実際導入した後に、まず学んでおいたほうが良い記事をまとめておきました。
うまく学んでjQuery・JavaScriptを使いこなしましょう!
まずは基本を抑えよう
こちらの記事ではjQueryの基礎の基礎について、まとめています。
jQueryそしてJavaScript初心者の方は目を通しておきましょう。
セレクタ操作をマスターしよう!
jQueryを使う一つの大きなメリットとして、セレクタの存在があります。
HTMLの要素を、非常に便利に取得できるわけです。
この辺りのセレクタ操作のマスターは最優先で行うべきでしょう。
クラスを操作しよう!
セレクタをマスターし、自在に要素を取得できるようになったら、あとはこっちのものです。
取得した要素を色々といじってしまいましょう。
そんな時、主要な操作方法としてクラスの操作があげられるでしょう。
この記事を読んでクラスを変動させて動的に見た目や挙動をコントロールしましょう!
まとめ
今回は非常に簡単にですが、jQueryの導入から使い方、そして基礎の学び方について見てきました。
JavaScriptはコンテンツを作る上で、今や必須の技術です。
そんなJavaScriptをもっと使いやすくしてくれるjQuery…
マスターしておけば、あなたのスキルを支える大きな力になってくれるはずです。
ぜひJavaScriptを合わせてマスターしてしまいましょう!
