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が読み込まれない時の対処方法について詳しく説明していくね！

お願いします！

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分か60分お好きな時間が選べて、かつ3回まですべて無料でご利用できます。
無理な勧誘は一切ないので、お気軽にご参加ください。

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

まとめ

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

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

筆者プロフィール

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

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

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

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

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

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

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

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

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

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

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

「受けてよかった」と感じていただけるようカウンセラーやエンジニア・デザイナーがあなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。

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

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

JavaScriptでの非同期のwhileループの書き方を現役エンジニアが解説【初心者向け】

JavaScriptでの非同期のwhileループの書き方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説しま...

JavaScript

JavaScriptでLocationオブジェクトのhash値を削除する方法を現役エンジニアが解説【初心者向け

JavaScriptでLocationオブジェクトのhash値を削除する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初...

JavaScript

JavaScriptでnullを判定する方法を現役エンジニアが解説【初心者向け】

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

JavaScript

Vue.jsとは何かを現役エンジニアが解説【初心者向け】

JavaScriptのVue.jsについて解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。また、入門向けのJavaSri...

JavaScript

JavaScriptでJSONのエスケープを行う方法を現役エンジニアが解説【初心者向け】

JavaScriptでJSONのエスケープを行う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。...

JavaScript

【2016年の完全保存版！】フリーで使えるjQueryのプラグイン30選

本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、Doru Ciobanu氏によって投稿されました。 ...

JavaScript

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

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

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

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

HTMLでlinkタグとscriptタグを使ってファイルを読み込む方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。今回は、linkタグとscriptタグを使ってファイルを読み込む方法について解説します。 linkタグとscriptタグは、リッチなサイトを作りたいときに必要になるタグなので、ぜひ参考にしてください。目次 linkタグとscriptタグ linkタグの使い方 scriptタグ【動画での解説はこちら！】田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 linkタグとscriptタグを使ってファイルを読み込む方法について詳しく説明していくね！大石ゆかりお願いします！ linkタグとscriptタグ Webサイトは、htmlとcssで書かれた多くのページによって構成されています。また、より動きのあるサイトを作るには、それに加えてJavaScriptというプログラミング言語を使ってページを作ります。一つのプログラムファイルにhtml・css・JavaScriptを記述するのは不可能ではありません。しかし、プログラムファイルのコードが長くなり、どこに何が書かれているかがわかりづらくなってしまいます。つまり、プログラムファイルに対するコードの可読性が失われるため、一つのプログラムファイルに記述するのはおすすめできません。さらに、htmlはページの文書構造をつくり、cssはページを装飾し、JavaScriptはページに動きを付け加えるといったそれぞれの異なる役割を持ちます。多くのページでサイトが構成される場合、htmlとcssを分割すれば、cssの特定箇所を修正するだけでサイトページを変更できます。例）サイトのイメージカラーを変えたとき、CSSのカラーを一括すると、サイトの全ページのイメージカラーを変更できるこうした理由からWeb製作の現場では、html・css・JavaScriptのファイルはそれぞれ別ファイルに分けて作ることが一般的です。その別々に編集したファイルを紐付けて、一つのページとしてまとめるためにlinkタグとscriptタグがあります。 linkタグ linkタグは、他のファイルをリンクしてhtmlファイルに読み込ませます。 rel属性（relationの略）でそのファイルがどんな文書であるかを指定します。（※スタイルシート(stylesheet)やファビコン(favicon)など） scriptタグ scriptタグは、JavaScriptを読み込むときに使います。 [PR] フロントエンドで副業する学習方法を動画で公開中linkタグの使い方ここからは具体的な使い方について例をみていきます。まず、htmlファイルとcssファイルの2種類を用意します。 htmlファイルには<body>の部分に<h1>タグで「linkタグの使い方を学ぼう」と入力してみます。 cssのファイルには下記のように記述してみましょう。 ※「font-size: 60px;」は<h1>で書かれた文字のサイズが60px、「color: red;」は<h1>で書かれた文字色が赤という意味です。 h1 { font-size: 60px; color: red; } htmlファイルをブラウザで読み込んでみると、<h1>で囲んだ文字が表示されました。 htmlファイルとcssファイルが繋がっていないため、この状態ではまだcssファイルで指定した文字の大きさや色は適用されません。そこでlinkタグを使って、cssで書いた内容をhtmlファイルに繋げましょう。 rel属性でリンクタイプを指定し、type属性によってどのようなテキストであるか、またhref属性でリンク先のURLを指定します。 linkタグは<head>タグ内に記述しましょう。 <link rel="stylesheet" type="text/css" href="style.css"> すると、<link>タグで指定したファイル（”style.css”）が読み込まれ、文字の大きさと色が変わりました！続いて、ファビコンの例も見てみましょう。ファビコンとはブックマーク登録やタブに表示されるときに出てくるアイコンです。実際のWebサイトでは下のように設定されています。スタイルシートやファビコンを別ファイルから読み込む際にはlinkタグを使うということを覚えておきましょう。大石ゆかり CSSは外部ファイルとして読み込んだほうがいいんですか？田島悠介たくさんのページで共通して使う場合は、もちろんHTMLと分けたほうがソースコードも見やすくなるからね。大石ゆかりタグに直接CSSを適用したら、どちらが優先されるんでしたっけ？田島悠介タグに直接適用したCSSの方が優先されるよ。大石ゆかり OK！linkタグ覚えました！ scriptタグ続いてscriptタグです。 Webページには2種類のページがあります。１つ目は、html・cssだけで書かれた文書のようなページ（静的なページといいます）です。 2つ目は、ドロップダウンメニューやスライドショーなどといったユーザーがアクションを起こすと、それに伴って何か変化が起こる動的なページです。動的なページには、JavaScriptなどのプログラム言語が使われており、演算機能やループ処理など様々な機能が利用できます。このJavaScriptを記述する際に利用するタグが、scriptタグです。 scriptタグを使ってhtmlファイル内にJavaScriptを書いてみましょう。 <script type="text/javascript">（JavaScriptのコード）</script> ここでは、JavaScriptで「『JavaScriptでループ処理』という文を1から100までループさせる」というコードを書いてみます。 <script type=”text/javascript”>と</script>の間に書かれている「var i;」から「<BR>”);」までの部分がJavaScriptです。 JavaScriptのループ処理がわからない場合は、JavaScriptでfor文を使ってループ処理する方法をご覧ください。このhtmlファイルを読み込むと、ブラウザ上で<script>タグ内で書いた処理が実行されました。今度は、別ファイルで記述したJavaScriptを<script>タグでリンクさせて、htmlファイルに読み込ませてみましょう。 htmlのファイルとjavascriptのファイルを2つ用意して、実行したいJavaScriptのコードをjavascriptのファイルに記述します。（保存する際には「.js」という拡張子を使いましょう） type属性によってどのような種類のテキストなのかを指定し、src属性によって外部ファイル（ここでは”javascript.js”）を読み込みます。「.js」という拡張子の付いたファイルにコードを書く場合は、開始タグと終了タグの間には何も記述しません。 <script type="text/javascript" src="javascript.js"></script> htmlファイルをブラウザ上で表示させると、src属性で指定した”javascript.js”が読み込まれ、先ほどと同じようにJavaScriptの処理が実行されました。このように別々のファイルで書かれた内容も、<link>タグや<script>タグを使ってファイル同士を自在に紐付けることができます。 <link>タグも<script>タグも属性を付け加えることで、紐付けたいファイルの種類や場所はどこなのかといった情報を指定します。外部ファイルを組み込んでリッチなサイトを作りたいときに必要になってきますので、ぜひ覚えておきましょう。今回はlinkタグとscriptタグを使ってファイルを読み込む方法についてご紹介しました。 HTMLの基礎をさらに学びたい場合は、HTMLでラジオボタンとチェックボックスを表示する方法み合わせてご覧ください。コラムコスパとタイパ、両方結果的に良くなる良くなる学び方とは？「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。もちろん、時間も費用もかかることは間違いありません。ただ結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。

HTML

require文との違いも！PHPでinclude文を使う方法【初心者向け】現役エンジニアが解説

PHPで書くinclude文の書き方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。外部ファイルを読み込む際は、require文も使ったりしますが、require文との違いについても説明します。初心者でも簡単に書けるので、実際にソースコードを書いて覚えていきましょう。目次RailsでJavaScriptを読み込む方法JavaScriptが読み込まれない時の主な原因JavaScriptが読み込まれない時の主な対処方法まとめ筆者プロフィールそもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。 includeとは include文は、外部ファイルを読み込んで実行する際に利用します。 1つのファイルにプログラムを書いていると膨大な行数になり、ソースコードが読みづらくなったりバグが発見しづらくなったりします。そのため、機能や用途ごとにファイルを分割して記述することが求められます。 require文との違い外部ファイルを読み込む文として、include文の他にrequire文があります。両者とも外部ファイルを読み込み実行するまでは同じですが、異なる点もあります。読み込むファイルがなかったりファイルの指定を間違えた場合に、include文は警告を出してそのままプログラムを実行します。 include文に対し、require文はエラーを出力してプログラムが停止します。大石ゆかり田島メンター！includeとrequireの違いはわかったんですが、どういう時に分けて使えばいいのかわかりません！田島悠介重要なプログラムファイルが読み込めなかった場合、停止した方がいいのでrequireがいいよね。includeはhtmlファイルとかを読み込んでページの特定の位置に差し込むとき何かが良いね。大石ゆかりなるほど！includeでHTMLで作ったメニューやお知らせを読み込めば一括で管理できそうですね。田島悠介そうだね。では、さっそく書いてみよう！ [PR] フロントエンドで副業する学習方法を動画で公開中include文の書き方基本の書き方ファイルのパスは、指定したファイルの位置（ディレクトリ）を示す値です。 include文は次のように、includeの後ろにファイルのパスを指定します。ファイルのパスは、指定したファイルの位置（ディレクトリ）を示す値です。代表的には次の2種類の書き方があります。 ()で囲まない方法 include "ファイルのパス"; “ファイルのパス”で指定したファイルをincludeで読み込んでいます。 ()で囲む方法 include("ファイルのパス"); (“ファイルのパス”)で指定したファイルをincludeで読み込んでいます。異なるディレクトリの場合異なるディレクトリにファイルがある場合は、呼び出すファイルから、読み込むファイルへ正しくパスの指定を行う必要があります。実行ファイル include.phpが実行ファイルです。実行したいinclude.phpファイルがuserディレクトリにある場合を示しています。 include.phpのファイル位置を示す内容がパスです。 /home/user/include.php 読み込むファイル include.phpと同じuserディレクトリの中にあるlibディレクトリの中にinclude2.phpが存在します。 /home/user/lib/include2.php 読み込む処理 include.phpから、include2.phpと同じuserディレクトリ内のlibディレクトリ以降を指定することで、include2.phpを読み込むことが可能です。 include "lib/include2.php"; include_once文 includeと同様の処理ですが、１回しか処理を読み込まないinclude_onceがあります。 include_onceでは、ファイルが読み込み済みかをチェックし、読み込み済みの場合は再度ファイルを読み込みません。 include_onceを利用する場合は、処理時に同じファイルが複数回読み込まれ、関数の再定義や変数の再代入の可能性を回避する目的で利用します。コラムコスパとタイパ、両方結果的に良くなる良くなる学び方とは？「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。もちろん、時間も費用もかかることは間違いありません。ただ結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。コスパ・タイパ最適化の参考として、テックアカデミー卒業生がスクールを選んだ理由をご紹介します。

PHP

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

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

目次

RailsでJavaScriptを読み込む方法

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