Search

検索したいワードを入力してください

2019年03月06日

Rails環境へのjQureyの導入方法について手順から解説

Rails環境にjQueryを導入する方法をわかりやすく解説します。jQueryを活用することで簡単にJavaScriptのプログラムを書くことができます。また、jQueryを利用した場合の動作の確認やファイルの配置場所についても触れていきます。

Rails環境へのjQureyの導入方法について手順から解説

jQueryとは

jQueryとは、JavaScriptを便利に使うことが可能になるライブラリです。

JavaScriptでそのままコードを記述するとWebページやWebアプリの機能や動作を実現するために複雑なプログラムを書かなければなりません。

しかし、jQueryを導入することで複雑なプログラムを記述する必要がなく、少ないコードで機能やアニメーションなどの動作を実現することができます。

jQueryの導入方法

WebページやWebアプリケーションにjQueryを導入する方法はいくつかあります。Web上にあるjQueryのファイルを直接HTMLに読み込ませる方法や、ダウンロードしたjQueryを読み込ませて利用する方法などがあります。

今回は、Ruby on RailsでjQueryを使用する場合の導入方法について解説していきます。

Gemfileに記述を追加する

jQueryを導入する前に、まずはRuby on Railsの新規アプリケーションを作成しましょう。以下のコマンドを実行し、アプリケーションを作成してください。※既存のアプリケーションへ導入する場合は新規作成の手順は省略してください。

rails new jquery_sample

続いて、生成されたアプリケーションにあるGemfileに以下の内容を追加します。

gem 'jquery-rails'

Ruby on RailsにjQueryを導入するには、Gemfileに「gem 'jquery-rails'」を記述する必要があります。

gem 'jquery-rails'の有無を確認する

Gemfileに既に「gem 'jquery-rails'」が記述されているか確認します。

ここでは、使用しているRuby on Railsのバージョンに注意してください。Railsのバージョンが5.1以降の場合は「gem 'jquery-rails'」がデフォルトで記述されていません。

Gemfileの内容をよく確認し、記述されていない場合は「gem 'jquery-rails'」を追加しましょう。

gemをインストールする

Gemfileに内容を追加しただけでは、Ruby on RailsにjQueryはまだ導入されていません。

「gem 'jquery-rails'」を記述したらgemをインストールする必要があります。

gemをインストールするには、「bundle install」を使用します。以下のコマンドを実行しましょう。Ruby on Railsでは「bundle install」を使用することで、Gemfileに記述されている内容に従って必要なファイルを簡単にインストールすることができます。

bundle install

実行結果を確認し問題がなければ、次へ進みましょう。

application.jsを編集する

bundle installが完了したら、jQueryを利用するためにapplication.jsを編集する必要があります。

Railsのバージョンが5.1以降で「//= require rails-ujs」が記述されている場合は、app/assets/javascripts/application.jsに以下の内容を追加しましょう。

//= require jquery

また、Railsのバージョンが5.1より前のものでは、「//= require rails-ujs」が記述されていません。その場合、「application.js」に以下の記述が無ければ追加してください。

//= require jquery
//= require jquery_ujs

以上で、Ruby on RailsへのjQueryの導入は完了です。

jQueryの動作確認

jQueryをRuby on Railsに導入できたら動作の確認を行ってみましょう。

ここでは、「index.html.erb」に以下の内容を追加し、文字を表示させます。

<p>jQueryサンプル</p>

「rails server」を実行してページを表示してみましょう。当然ですが、先ほど記述した「jQueryサンプル」という文字が表示されていることが確認できます。続いて、以下のjQueryの処理を「index.html.erb」に追加していきます。

<script type="text/javascript">
$(document).ready(function(){
$("p").css("color","green");
});
</script>

表示を確認してみると「jQueryサンプル」の文字色が緑色に変わっていることが確認できます。

JavaScriptの置き場所について

jQueryの処理を「index.html.erb」に直接コードを記述して動作を確認することができました。

このjQueryを実行している部分は、JavaScriptのファイルとして別の場所に置くことができます。

別の場所にファイルを置くことで、画面を表示している「index.html.erb」のソースコードが煩雑にならずに済みます。

処理を別ファイルに置く

jQueryを実行している部分をjsファイルとして別の場所へ置く方法について説明していきます。

まずはjQueryのコードを記述するためのファイルを「app/assets/javascripts/sample.js」として新規作成しましょう。続いて、以下の内容を「index.html.erb」から「sample.js」へ移動させます。

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

「<script type="text/javascript">」および「</script>」は、移動させる際に削除します。jsファイルとして別の場所に置く場合は記述する必要はありません。

呼び出し処理を追加する

「sample.js」へjQueryの処理を移動させましたが、このままではプログラムは動きません。

jQueryを動作させるためには、呼び出し処理を追加する必要があります。

「app/assets/javascripts/application.js」に以下の記述を追加しましょう。既に記述されている場合は、「//= require jquery」よりも後に移しましょう。

//= require_tree .

上記のコードを追加することで、「app/assets/javascripts/」配下に置かれたjsファイルが読み込まれます。再度Railsサーバーを起動し、jQueryが動作するか確認してみましょう。

rails server

最初に実行確認した時と同じように、「jQueryサンプル」の文字色が緑色に変わっていることが確認できます。処理を別の場所に置くことでも、jQueryを動作させることが確認できました。

Ruby on RailsでjQueryを活用しよう

今回はRuby on RailsにjQueryを導入する方法について解説しました。jQueryを導入することで複雑なJavaScriptのコードを記述せずに短いコードで機能やアニメーションといった動作をアプリケーションに実装することができます。

jQueryを実際に動作させる場合は、「index.html.erb」といったviewファイルに直接コードを記述することができます。また、JavaScriptの置き場所を別のファイルに配置することも可能です。その際は、呼び出し処理を忘れずに追加しましょう。

Ruby on RailsでjQueryを活用し、Webアプリケーション作成でJavaScriptを便利に利用していきましょう。

多くの人がプログラミングを諦めてしまう理由をご存知ですか?



近年プログラミングを勉強する人が増えています。

プログラミング学習者の多くは独学から取り組もうとしますが、だいたい80%ほどは3ヶ月も続かずに諦めてしまいます。早い人は1日目で。

多くの人がプログラミングを独学しようとして諦める理由は、次の3つ。
●モチベーションが維持できない
●エラーの原因・解決方法が分からない
●どう学習すればよいか分からない

TechBoostというプログラミングスクールでは、みんなと一緒にプログラミングをするのでモチベーションの維持ができ、分からないことがあればマンツーマンで教えてくれ、徹底的に研究された初心者向けの教材が揃っています。

TechBoostを卒業後、実際にエンジニアとして転職した方もいるほど。

本気でプログラミングを学びたい方は、一度無料のカウンセリングでご相談ください。プログラミングを嫌いになる前に。

tech boost卒業生インタビュー

tech boostの卒業生の声を聞きました。あなたがプログラミングを学びたい理由を、一度考えてみてください。
営業→Javaエンジニア→Rubyエンジニアと転向し、第一志望のFinTech企業で働く山下さん
元営業、ビジネスのわかるエンジニアを目指す菅原さん
サンフランシスコに交換留学し、シリコンバレーのVCでインターン中の梅本さん
予備校の営業から半年でエンジニア転職を果たした小田島さん

tech boostの口コミ



Related