TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript RailsでJavaScriptが読み込まれない時の対処方法を現役エンジニアが解説【初心者向け】
JavaScript

RailsでJavaScriptが読み込まれない時の対処方法を現役エンジニアが解説【初心者向け】

初心者向けにRailsでJavaScriptが読み込まれない時の対処方法について現役エンジニアが解説しています。RailsのJavaScript読み込みの設定を確認します。RailsでJavaScriptが読み込まれない原因や対処法として、ファイルの記載方法、値の指定方法、ファイル名や読み込みの順番を解説します。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

RailsでJavaScriptが読み込まれない時の対処方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

RailsでJavaScriptが読み込まれない時の対処方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

目次

1時間でできる無料体験！

 

RailsでJavaScriptを読み込む方法

まず、普通にRailsをインストールしてアプリケーションを作成すれば、JavaScriptを読み込むことが出来るようになります。その為、あまりその仕組みを意識することはないと思います。

では、すこしその仕組み（設定場所）を確認してみたいと思います。

まず、「/app/views/application.html.erb」の”head”の位置に

<%= javascript_include_tag 'application' %>

と記載され、JavaScriptを自動的に読み込むように設定されています。上記の場合、「/app/javascripts/application.js」を読み込む設定です。「/app/javascripts/application.js」ないでは

//= require_tree .

と記載され、Rails配下のJavaScriptを自動で読込み出来るように設定されています。または、

//= require jquery

の様に個別の読込みの設定も出来ます。最後に、JavaScriptをRailsを扱えるように「/config/initializers/assets.rb」内に

# Rails.application.config.assets.precompile += %w( admin.js admin.css )

と記載されているのですが、コメントアウトされています。これは、デフォルトでapplication.js、application.css、app/assets配下のファイルが対象となっているためです。これ以外の場所やファイルを指定したい場合に有効化して指定します。

[PR] フロントエンドで副業する学習方法を動画で公開中

JavaScriptが読み込まれない時の主な原因

仕組みが分かったところで、JavaScriptが読み込まれない原因を見てみると

  • *.html.erbのJavaScript読込の指定で”javascript_include_tag”と記載されていない
  • /app/javascripts/application.jsの記載で「//= require_tree .」,「//= require jquery」（個別）の記載が誤っている
  • 個別のJSを利用する際に、/config/initializers/assets.rbの「assets.precompile」の指定を行ていない

また、それ以外によくあるのが「同名のcoffeeファイルが存在する」というものです。RailsではJavaScriptのかわりにcoffeeScriptがデフォルトで使用できるのですが、同名のjsファイルがある場合はcoffeeファイルが優先せれ、jsファイルが読み込まれません

 

JavaScriptが読み込まれない時の主な対処方法

それぞれの対応方法について考えていきます

“javascript_include_tag”

Railsデフォルトの設定でJavaScriptを利用する場合は、良いのですがオリジナルのディレクトリ構成など利用数場合は、HTMLないでJSファイルを指定する必要があります。

例えば「/app/assets/javascripts/test/test1.js.erb」を読み込みたい場合は、

<%= javascript_include_tag 'test/test1' %>

と書きます。

「application.js」の記載

Railsのデフォルト構成内にJSファイルを配置する場合は、

//= require_tree .

特定のライブラリーを追加した場合は

//= require jquery

の記載を確認して、ない場合は追記します。

「assets.precompile」の記載

特定のJSファイルをインクルードしたい場合は

Rails.application.config.assets.precompile += %w( original.js )

と記載をします。

coffeeファイルが存在する

今までのは、大抵がオリジナルの構成やJSファイルを追加した時の対応になるのですが、デフォルトで作業しているにも関わらず、うまく読込が出来な場合は、coffeeファイルの確認をし、不要であれば削除しましょう。

 

コラム

実は私も！？独学で損する人の特徴

「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。

そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

  • ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
  • ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
  • ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、 スクールが向いているかもしれません。
お試しのつもりで、まずは一度 無料相談 に参加してみませんか？

現役エンジニア・デザイナーに何でも気軽に相談できる30分 を すべて無料で できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き！ 無料相談はこちら

まとめ

基本的にRailsの構成に従っていれば、JavaScriptが読み込まれないことは滅多にないかと思います。

しかし、jQueryなどを追加したり、プロジェクトの方針でフォルダ構成を検討しないといけない場合などは、今回の記事をもとに確認してみてください。

筆者プロフィール

小宮山晃史（こみやまこうじ)

現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。

iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

 

TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学していて、このように感じた経験はないでしょうか？

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！ 無料相談を予約する

記事を検索

関連するキーワード

関連する記事

JavaScriptのテキストボックスから値を取得する方法を現役エンジニアが解説【初心者向け】

JavaScriptのテキストボックスから値を取得する方法について解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 ...
JavaScript

JavaScriptにおけるselectオブジェクトのtext値の取得方法について現役エンジニアが解説【初心者

JavaScriptにおけるselectオブジェクトのtext値の取得方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心...
JavaScript

JavaScriptでreplaceを使って文字列を置換する方法【初心者向け】現役エンジニアが解説

JavaScriptでreplaceを使う方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
JavaScript

JavaScriptでの改行に対応する正規表現を現役エンジニアが解説【初心者向け】

JavaScriptでの改行に対応する正規表現について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門向けのJ...
JavaScript

JavaScriptでconsole.logを使用したデバッグのやり方【初心者向け】

JavaScriptをプログラミング初心者向けに紹介した記事です。 今回は、JavaScriptでconsole.logを使用したデバッグを使う方法につい...
JavaScript

JavaScriptでフォーム要素にdisabledを設定・解除する方法を現役エンジニアが解説【初心者向け】

JavaScriptでフォーム要素にdisabledを設定・解除する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向け...
JavaScript

あわせてよく読まれている記事

Ruby on RailsでJavaScript/CSSファイルを読み込む方法を現役エンジニアが解説【初心者向け】

Ruby on RailsでJavaScript/CSSファイルを読み込む方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそもRubyについてよく分からないという方は、Rubyとは何なのか解説した記事を読むとさらに理解が深まるでしょう。   なお本記事は、TechAcademyのオンラインブートキャンプRuby講座の内容をもとに紹介しています。   田島悠介 今回は、Rubyに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Ruby on RailsでJavaScript/CSSファイルを読み込む方法について詳しく説明していくね！ 大石ゆかり お願いします！ 目次 RailsでJavaScript/CSSファイルを読み込む方法 読み込みエラーの原因と解決法   RailsでJavaScript/CSSファイルを読み込む方法 RailsでJacaScriptを読み込む場合を想定すると、Ruby on RailsにはもともとJacaScriptフォルダが存在しています。 Railsを読み込んだ際には、アプリ名の下にフォルダapp,bin,config,db,lib,log,public,test,tmp,vedorが自動作成されるでしょう。 appのフォルダの下には、config,images,javascripts,stylesheetsとさらに別のフォルダがあります。 JacaScriptフォルダの中に拡張子を「.js」としたファイルを作成し、記述によって読み込まれる仕組みです。   同様にcssを読み込ませたい場合は、stylesheetsフォルダの中に拡張子を「.scss」としてファイルを作成しましょう。 そのファイルに記述することで読み込まれるようになります。 Scssとはcssを記述しやすくしたもので、変数や入れ子構造が使えるなどcssと少し記述の仕方が変わる点に注意しましょう。 しかし、Railsではこのファイルにscssで記述をすることで、自動的にcssにコンパイルされます。   [PR] フロントエンドで副業する学習方法を動画で公開中読み込みエラーの原因と解決法 エラーとなる原因は数多く考えられます。 JavaScriptファイルやCSSファイルの読み込みの際に発生するエラーとして多いのは、アセットのプリコンパイルができていない点です。 Railsには開発環境と本番環境があり、本番環境ではプリコンパイルをしましょう。 アセットパイプラインと呼ばれるフレームワークを使用して、JavaScriptやCSSのアセットを最小化し、素早く読み込まれるようにしていきます。 また、このフレームワークを使用してSCSSなどの高級言語をCSSに変換させたり、他の機能と連結できます。 JavaScriptファイルやCSSファイルを読み込ませる場合には、先程のconfigフォルダの下にあるinitializersフォルダの更に下にあるassets.rbを編集していきましょう。 (アプリ名/config/initializers/assets.rb) # Be sure to restart your server when you modify this file. # Version of your assets, change this if you want to expire all your assets. Rails.application.config.assets.version = '1.0' # Add additional assets to the asset load path. # Rails.application.config.assets.paths << Emoji.images_path # Add Yarn node_modules folder to the asset load path. Rails.application.config.assets.paths
Ruby

JavaScriptでCSVファイルを読み込む方法を現役エンジニアが解説【初心者向け】

JavaScriptでファイルを読み込む方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次RailsでJavaScriptを読み込む方法JavaScriptが読み込まれない時の主な原因JavaScriptが読み込まれない時の主な対処方法まとめ筆者プロフィール そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでファイルを読み込む方法について詳しく説明していくね！ 大石ゆかり お願いします！   JavaScriptによるファイルの読み込み Webサイトでは、ファイルをアップロードすることでアプリケーションの機能を利用することがよくあります。 例えばマイページがあるようなサイトで、自身のプロフィール画像を登録するために画像ファイルを登録する時には、ファイルをアップロードすることになります。 本記事では、ファイルの読み込み方法と、読み込んだ後の処理の方法について、ファイルの種類別に解説していきます。   実際にファイルを読み込んでみよう ファイルを読み込んで、JavaScriptで取得するまでの一連の手順を紹介します。   1．input要素をHTMLに記述する ファイルを読み込むには、まずHTMLに要素を追加する必要があります。 追加する要素はinput要素で、type属性に”file”を指定します。 また、あとでJavaScriptで取得できるよう、任意のidをつけておきましょう。 <input id="upload-file" type="file">   ブラウザで確認してみると、ファイルを選択できるボタンが設置されています。 「ファイルを選択」より任意のファイルを選ぶと、ブラウザ内に自動的にファイルが読み込まれます。   2．input要素をJavaScript側で取得する 1で指定したid属性の値によって、input要素を取得します。 idによる要素の取得には、document.getElementByIdを用います。 const input = document.getElementById('upload-file');   3．ファイルの読み込みを検知する ファイルを取得するには、「input要素にファイルが指定された」というイベントを検知する必要があります。 ファイルのアップロードは、changeというイベント名で取得できます。 changeイベントを取得するには、addEventListenerを用いて以下のように書きます。 input.addEventListener('change', (e) => { console.log('ファイルが検知された！'); }); 1行目の後半から始まる関数は、イベントリスナの「コールバック関数」と呼ばれ、指定したイベントが発生したタイミングで実行されます。 コールバック関数の関数の引数として、 e という変数が指定されていますね。 引数 e は、ファイルの情報を取得するための重要な引数です。 eについて、次の項目で詳しく説明します。   4．読み込まれたファイルを取得する 3では、「ファイルが読み込まれた」という状態を検知しましたが、まだファイルの中身は取得できていません。 アップロードされたファイルの情報を得るには、イベントリスナのコールバック関数の引数を利用します。 input.addEventListener('change', (e) => { console.log(e.target.files[0]); }); コールバック関数の引数（ここではe）には、発生したイベントに関する情報が入っています。 そのなかで、e.target.filesは、アップロードされたファイルが配列になっています。 アップロードされたファイルが1つならば、e.target.files[0]でそのファイルを取得できます。 ※複数ファイルのアップロードについては本記事の最後に紹介します。   一連の処理を行ってみよう それでは、解説した1〜4の処理を実際に行ってみましょう。 完成形のコードは以下の通りです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input id="upload-file" type="file"> <script> //JavaScriptの記述
JavaScript

簡単に変換できる！PHPでCSVファイルを読み込む方法【初心者向け】現役エンジニアが解説

PHPでCSVファイルを読み込む方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 fgetcsv関数を使ってCSVファイルを読み込めば、表計算ソフトなどからPHPにデータを取り込めます。 たとえば、Excelで作った商品リストをCSVファイルで保存し、PHPで取り込めばショッピングサイトのデータとして活用できますし、Googleスプレッドシートで作成したタスクリストをCSVにしてPHPで読み込めばタスクの共有ができるアプリケーションが作成できます。 このように、他のアプリで作ったCSVファイルのデータ活用するために覚えておきたい知識なので、参考にしてみてください。   目次RailsでJavaScriptを読み込む方法JavaScriptが読み込まれない時の主な原因JavaScriptが読み込まれない時の主な対処方法まとめ筆者プロフィール   そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   田島悠介 今回はCSVファイルをPHPで読み込む方法をやっていくよ。 大石ゆかり 田島メンター！その前にちょっといいですか？ 「CSV」って何ですか？ 田島悠介 じゃあ、CSVとは何かを教えるね。 ゆかりちゃんは表計算ソフト、例えば「Excel」とか「Google スプレッドシート」は使ったことあるかな？ 大石ゆかり それならありますよ。大学時代にレポート作成でExcelを使ってましたし、仕事ではGoogle スプレッドシートを使っています。 田島悠介 もし、ゆかりちゃんが入力したデータをPHPのプログラムで読み込ませたいと思ったらどうしたらいいかな？ 大石ゆかり データを保存したファイルをPHPで読み込めばいいんじゃないですか？ PHPってファイルの読み込みもできましたよね？ 田島悠介 たしかに、PHPではファイルの読み込みができるんだけど、ExcelやGoogle スプレッドシートの専用ファイルはそのままでは読み込むのが難しいんだ。 PHPのファイル読み込みは、標準では文字だけで構成されたテキストファイルで作成されていることが前提だからね。 大石ゆかり そうなんですね・・・。じゃあ、表計算ソフトで保存するときPHPでも読み込めるテキストファイルの形式で保存したらいいんですか？ 田島悠介 その通り！さすがゆかりちゃん、理解が早い。 そのPHPにも対応しているテキストファイルの形式の1つがCSVファイルというわけだね。 大石ゆかり なるほどぉ。 今Google スプレッドシートでCSVの形式にエクスポートしてみました。 カンマ付きのシンプルな文字だけになるんですね。   Googleスプレッドシートの画面   名前,年齢,血液型 太郎,21,O ジョン,23,A ニキータ,32,AB 次郎,22,B CSVファイルの中身 田島悠介 そうだね。CSVファイルはカンマかタブ文字で区切られるんだ。 ちなみにCSVファイルはほとんどのアプリが対応しているから、PHPなどのプログラムからの読み込みだけでなく、アプリ同士でデータをやり取りしたいときにもよく使われるよ。 ただ、データの中身の文字だけしか保存されないから、罫線や文字色などの情報はなくなるけどね。 大石ゆかり CSVについてはよく分かりました！ 今回はそのCSVファイルをPHPで読み込む方法を教えてもらえるんですね！ 田島悠介 そういうことだね。 CSVは、読み込みと出力のそれぞれ書き方が違うから、今回は「読み込み」の方法について説明するね！ 大石ゆかり お願いしまーす！！   CSVファイルを読み込む関数「fgetcsv」 PHPでは、CSVファイルを読み込んで配列の形にしてくれる「fgetcsv関数」という関数があります。 fgetcsv関数を使うためには、まず対象のCSVファイルを開いておく必要があります。   ファイルを開く「fopen」 CSVファイルを開くには、fopen関数を使います。 $file_handler = fopen("読み込むCSVファイルのパス", "r"); fopen関数の戻り値で、読み込んだファイルを管理している名前（ファイルハンドル）を取得します。 fopen関数の2つ目のパラメータはファイルにアクセスする形式、つまり開いたファイルの書き込みを可能にするかどうかなどのファイルをアクセスする状態を設定します。 “r“は読み取り専用、つまり書き込みしない状態でファイルを開きます。 ※もし、対象ファイルが存在しなかったりファイルのアクセス権がない場合には、fopenは失敗しwarningを発行してFALSEを戻り値として返します。   CSVファイルを1行ずつ配列で読み込む「fgetcsv」 ファイルハンドルが取得できたら、fgetcsv関数でCSVファイルを1行ずつ読み込みます。 $data = fgetcsv($file_handler);   読み込まれた1行分のデータを項目（データ列）ごとに配列として戻り値で取得します。 たとえば下記のようなCSVファイルなら、1回目にfgetcsv関数を呼び出したときは、1行目のデータである「名前」「年齢」「血液型」の文字列が配列に代入されます。 名前,年齢,血液型 太郎,21,O ・ ・ ・   実際に書いてみよう では実際にプログラムを書いてみましょう。 事前に、以下のように書いた「test.csv」ファイルを作成しておきます。 名前,年齢,血液型 太郎,21,O ジョン,23,A ニキータ,32,AB 次郎,22,B   それでは、プログラムを書いてみましょう。 <?php // 読み取り専用でtest.csvを開きます。 $f = fopen("./test.csv", "r"); // test.csvの行を1行ずつ読み込みます。 while($data = fgetcsv($f)){ // 読み込んだ結果を表示します。 var_dump($data); } // test.csvを閉じます。 fclose($f); ?> 簡単にソースコードの説明をします。 最初に読み取り専用でtest.csvファイルを開き、while文で1行ずつファイルを読み込みます。 読み込んだ結果の配列を、var_dump関数でCSVファイル1行分のデータを表示しています。   以下、実行結果です。 1行ずつ読み込まれて、配列の形になっているのがわかります。   まとめ CSVファイルを読み込むときは、まずfopen関数でファイルを開きます。 そして、fgetcsv関数を使って1行ずつ配列にデータを読み込みます。   タブ文字で区切られたファイル 大石ゆかり 田島メンター、教えてもらった方法でデータをPHPで読み込もうとしたんですがうまくいきません・・・ 田島悠介 それは、データの区切り文字が違うからだよ。 CSVはカンマ区切りだけど、別の種類でタブ区切りのファイル形式が使われることがあるんだ。 大石ゆかり そうなんですね。よく見るとファイルの拡張子が.tsvになっていました。 田島悠介 そうだね。タブ区切りのファイルはtxtやtsvといった拡張子が使われるね。 タブ区切りのファイルを読み取るにはさっきと同じfgetcsv関数が使えるけど、パラメータを指定する必要があるよ。 大石ゆかり タブ区切りのファイルでも読み込めるんですね。 PHPで読み込む方法を教えてください！ fgetcsv関数でタブ区切りのファイルを読み込む fgetcsv関数でタブ区切りのファイルを読み込むには、3つ目のパラメータseparatorで区切り文字を指定します。 $data = fgetcsv($f, 0, "t") 今回はタブ区切りのファイルを読み込みたいので、区切りとしてタブ文字「t」を指定します。 ※2つ目のパラメータはlengthで、分割しない1行の最大文字数（改行文字なども含む）を指定します。0を指定するか省略すると、最大行長は制限されません。 (PHP 5.1.0以降)   まとめ タブ区切りのファイルをfgetcsv関数で読み込むときは、3つ目のパラメータでタブ文字 “t” を指定します。   [PR] フロントエンドで副業する学習方法を動画で公開中空行がある場合 大石ゆかり CSVファイルを読み込んだら、値が空の配列が混じっていました。 田島悠介 それは読み込んだCSVに空の行が入っていたからなんだ。 1行ずつ繰り返すループの中で、空行かどうか判定する式を追加するだけで解決できるよ。 CSVファイルの読み込み時に空行の判定をする CSVファイルに空の行が含まれている場合、PHPの条件式で判定を行うコードを追加すれば、余分な空っぽの値が配列に入るのを防げます。 配列の1行分の要素すべてが空かどうか、配列の要素を文字列としてつなげて判定します。 1行分の配列の要素を文字列として結合するのに、implode関数を使います。   空行判定のコード例 配列に値があるかどうかで空行の判定をしています。 <?php // 読み取り専用でtest.csvを開きます。 $f = fopen("test.csv", "r"); // test.csvの行を1行ずつ読み込みます。 while($data = fgetcsv($f)){ // 1行分の要素すべてを文字列として結合しても空ではない、つまり空行でなければ出力します。 if(implode($data) != null){
PHP

Railsで特定のページのみJavaScriptを読み込む方法を現役エンジニアが解説【初心者向け】

Railsで特定のページのみJavaScriptを読み込む方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。   JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をみてみましょう。   なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Railsで特定のページのみJavaScriptを読み込む方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 RailsでJavaScriptを読み込む方法 特定のページのみJavaScriptを読み込む方法 まとめ   RailsでJavaScriptを読み込む方法 RailsでJavaScriptファイルを読み込ませたいときは、railsプロジェクトのフォルダの配下にある対象のjsファイルを置くことで、自動で読み込めます。 app/assets/javascript/ これは、Railsの標準機能の一つであるAsset Pipeline（複数のJavaScriptやCSSのファイルを一つのファイルに統合・圧縮し読み込みを高速に行えるようにする機能）がデフォルトで有効になっているためです。 結果として、Railsは１つのファイルをすべてのページに適用するという形をとっているため、特定のJavaScriptだけ読み込ませるという動作を行いたいときは邪魔になります。   [PR] フロントエンドで副業する学習方法を動画で公開中特定のページのみJavaScriptを読み込む方法 まずは、Asset Pipelineの機能を無効にしましょう。 そして、必要な操作を見ていきます。   自動読み込みの無効 無効にするためには、app/assets/javascript/ の配下にあるapplication.jsを編集しましょう。 application.jsはapp/assets/javascript/配下においてあるjsファイルを管理するファイルであり、自動読み込みの対象を設定できるjsになります。 自動読み込みを無効にするには、application.jsの中に記載してある下記の一文を削除することで、自動読み込みを停止させられます。 //= require_tree .   production環境で特定のJavaScriptファイルのみ読み込む Asset Pipelineでの自動読み込みを無効にした場合は、手動でのプリコンパイルが必要です。 これは、読み込みの設定を行うためにconfig/initializers/配下にある assets.rbを編集します。 以下の一文を追加することでプリコンパイル対象を指定可能です。 Rails.application.config.assets.precompile += %w( *.js ) サービスを再起動することで、指定した.js拡張子のファイルをプリコンパイルできます。   個別ページでの読み込み 個別ページで特定のjsファイルを読み込むためにはjavascript_include_tagを使用します。 対象のviewファイルのheadなどに下記のように記述することで、任意のファイルを読み込むことが可能です。 <%= javascript_include_tag "hoge_fuga.js" %> 。 まとめ 普段は特に意識せずに使用できるJavaScriptファイルであるものの、開発の縛りなどにより１ページにしか読み込ませたくないなどの状態が発生するときがあります。 読み込みの切替方法などをしっかり覚えておきましょう。 コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。 もちろんその方が金額は低く抑えられるでしょう。 ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。
JavaScript

読み込み時にイベント処理を！JavaScriptでonloadを使う方法【初心者向け】現役エンジニアが解説

JavaScriptでonloadを使う方法について解説しています。 読み込み後、何かアクションを起こしたい時に役立つので、書き方をきちんと覚えておきましょう。   目次 onloadとは onloadの書き方 実際に書いてみよう onloadの注意点 まとめ   onloadとは onloadとは、HTMLなどの文書を操作するときに利用するイベントハンドラー（※1）のことです。 onloadは、ページや画像などのリソース類を読み込んでから処理を実行したいときに利用します。 利用ケースとしては、スライダーや画像ギャラリーのような画像を読み込んでから処理を実行したいときなどが挙げられます。 ※1 イベントハンドラーとは、特定のイベントが発生したときに実行される処理のことです。   [PR] フロントエンドで副業する学習方法を動画で公開中onloadの書き方 onloadの書き方は以下のようになります。 obj.onload = function() { // ここに読み込みが完了したら実行したい処理を記述する } objには、windowオブジェクトやHTMLのbodyタグ、imgタグなどの要素を指定することができます。 そして、指定した要素の読み込みが完了したら、処理が実行されます。 そのため、指定する要素によって処理が実行されるタイミングが変わります。   例）指定した要素による実行タイミングの違い windowオブジェクトを指定した場合 ページの読み込みが完了したタイミングで処理が実行される HTMLのimgタグを指定した場合 ページの読み込み状況にかかわらず、imgタグの読み込みが完了したタイミングで処理が実行される   実際に書いてみよう ページが読み込まれたら実行する 以下の例を実行すると、windowオブジェクトが読み込まれたタイミングで処理が実行されていることが分かります。 window.onload = function() { alert("ページが読み込まれました！"); };   上記の例は以下のようにも記述できます。 function load() { alert("ページが読み込まれました！"); } window.onload = load;   画像が読み込まれたら実行する 下記は、画像が読み込まれたタイミングで処理を実行する例です。 var img = new Image(); img.onload = function() { alert("画像が読み込まれました！"); }; img.src = 'xxx.png';   コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。 もちろんその方が金額は低く抑えられるでしょう。 ただ
JavaScript

今さら聞けない！Rubyとは【初心者向け】｜現役エンジニアが解説

最近よく耳にする「Ruby」とは一体どのような言語なのでしょうか？ 今回はその「Ruby」の正体を解説していきたいと思います。Web系の企業でもRubyを使っているところは多いので、これからRubyを勉強してみたいという人はぜひ参考にしてみてください。 終わりには、学習方法もいくつか紹介しているので、自分の好きなやり方で勉強してみましょう。   なお本記事は、TechAcademyのオンラインブートキャンプRuby講座の内容をもとに紹介しています。   なお、今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。     田島悠介 ここではプログラミング言語のひとつ、Rubyについて解説していくよ。 大石ゆかり 田島メンター！！Rubyはどんな用途で使われる言語なんですか〜？ 田島悠介 一番よく使われているのはWebアプリケーションかな。動的なサイトを作るのにとても役立つんだ。有名なクックパッドなどもRubyを使用して作られているよ。 大石ゆかり なるほど。是非覚えてみたいです！   目次 Rubyとは Rubyでできること オブジェクト指向とは Rubyの動向 Rubyが日本で人気な理由 Rubyで開発が向いているサービス Rubyのインストール Rubyの書き方 Rubyの基本構文 Rubyの学習方法 Rubyの学習時のポイント   Rubyとは Rubyとは、まつもとゆきひろ氏により開発されたオブジェクト指向スクリプト言語です。 CやJavaといったコンパイラ言語は、プログラムを実行するためにはコンパイルという手続き（人間が書いたソースコードを機械命令に変換）を介して初めて実行ができます。 しかし、スクリプト言語はこう言った手続きが一切不要で、そのまま実行することができるため、コンパイラ言語に比べてプログラミングを手軽に行うことができます。   また、オブジェクト指向言語なので、すべてのデータがオブジェクトとして表現されています。 つまり継承などといったオブジェクト指向ならではの機能を使うことができます。 継承をすることで書くコードの量が少なくて済み、読みやすく作業効率も上がるでしょう。   Rubyの名前の由来ですが、宝石の「ルビー」から来ています。 Perl(パール)という名前のプログラミング言語がありますが、宝石の真珠(パール)と読み方が同じという点で宝石の名前を取ったようです。 なぜRuby(ルビー)なのかというと、当時のまつもと氏の会社の同僚が7月生まれで、7月の誕生石がルビーだったからです。 Ruby/Rails開発のためのおすすめエディタ/IDEも紹介しているので、合わせてご覧ください。   [PR] フロントエンドで副業する学習方法を動画で公開中Rubyでできること Rubyを使うメリットとして一番大きいのは、Ruby on RailsというWebアプリケーションフレームワークを使うことができるということです。 Ruby on Railsを使うと、WebサイトやWebベースの業務システムを効率良く開発できると言われています。 Rubyを使っている企業は多くあり、そのほとんどがRuby on Railsを使っているのでエンジニアとして活躍することも可能でしょう。   オブジェクト指向とは 従来のプログラミング言語では困難になってきた、大規模なソフトウェアの開発をより効率よく開発を行うために考え出された 概念です。 一般的に、以下の特徴を持っています。 カプセル化 継承 ポリモーフィズム（多態性） カプセル化 カプセル化とは指定の方法以外で外部からデータにアクセスできないようにすることです。 想定外のアクセスにより、本来書き換えてはならないデータを誤って書き換えることがなくなります。 たとえば、ゲームのセーブデータなどは簡単に書き換えられてしまう訳にはいきません。 そういったデータを書き換えられないようにするためにもカプセル化という機能は重要です。   継承 継承とは、既にある機能を受け継ぎ、効率よくソフトウェア開発を行うための機能です。 例えば、既にあるプログラムを一部改修を加え、新しく作り直したいことがあります。 そうした際に、一から作り直すのはかなり面倒です。 そこで、継承を利用することで既存の機能をそのまま再利用しつつ、新たな機能を定義することができるのです。   ポリモーフィズム（多態性） ポリモーフィズム（多態性）とは、同じ名前の機能（プログラム）を作成でき、それらが独立して存在できることです。 例えば、スマートフォンでは動画や音楽が再生できます。 この動画や音楽を再生するプログラムをPlayという名前でそれぞれ作ったとします。 この時、ポリモーフィズムの概念がないプログラミング言語(C言語など)では、同じプログラムが二重に定義されていますとエラーが出てきます。 ですが、RubyやC++などでは音楽ファイルなら音楽を再生し、動画ファイルであれば動画を再生することができます。 このように同じ名前のプログラムを複数定義でき、それぞれのデータに合わせて使うことができることをポリモーフィズム（多態性）と言います。   コラム 実は私も！？独学で損する人の特徴 「スクールは高いから独学で成功する」という気持ちの方は多いと思います。 もちろんその方が金額は低く抑えられるでしょう。 ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。 そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由
Ruby

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

エンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

1時間でできる無料体験
挫折しない学習方法とは？
TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript RailsでJavaScriptが読み込まれない時の対処方法を現役エンジニアが解説【初心者向け】