TechAcademy（テックアカデミー） Webアプリケーションコース プログラミング Ruby Ruby on RailsでJavaScript/CSSファイルを読み込む方法を現役エンジニアが解説【初心者向け】
オーダーメイドコース
icon
icon
Ruby

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

初心者向けにRuby on RailsでJavaScript/CSSファイルを読み込む方法について解説しています。Railsでフォルダが作成される場所やエラーが起きる主な原因と対処法を説明します。Railsの構成の基本を覚えましょう。

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

Ruby on RailsでJavaScript/CSSファイルを読み込む方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

そもそもRubyについてよく分からないという方は、Rubyとは何なのか解説した記事を読むとさらに理解が深まるでしょう。

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

Ruby on 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] 未経験からWebエンジニアを目指す方法とは

読み込みエラーの原因と解決法

エラーとなる原因は数多く考えられます。

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 << Rails.root.join('node_modules')

# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in the app/assets
# folder are already added.
# Rails.application.config.assets.precompile += %w( admin.js admin.css )

 

ファイルの中の一番下の行のコメントアウトを外し、編集しましょう。

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

adminとある記載のある部分は、読み込ませたいファイル名に変換をすることでプリコンパイルできるようになります。

 

執筆してくれたメンター

木村勇土

TechAcademyの現役メンター。

現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。

WordPressを中心とした自社のWebサイトの修正などを行なっている。

 

大石ゆかり

Ruby on RailsでJavaScript/CSSファイルを読み込む方法がよく分かったので良かったです！

田島悠介

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

大石ゆかり

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

 

TechAcademyでは、初心者でもRuby on Railsを使ったプログラミングを習得できるオンラインブートキャンプRuby講座を開催しています。

挫折しない学習方法を知れる説明動画や現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

RubyでDirクラスを使う方法【初心者向け】

RubyでDirクラスを使う方法について解説します。   そもそもRubyについてよく分からないという方は、Rubyとは何なのか解説した記事を...
Ruby

テーブル結合の方法！Ruby on Railsのjoinの使い方【初心者向け】

RubyのフレームワークのRailsには、テーブル結合を行うためのメソッドjoinが用意されています。今回はテーブル結合の基礎と実際にRailsで行う際のコード...
Ruby

Ruby on Railsのraiseの使い例外を発生させる方法を現役エンジニアが解説【初心者向け】

Ruby on Railsのraiseの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
Ruby

Rubyのヒアドキュメントの使い方を現役エンジニアが解説【初心者向け】

Rubyのヒアドキュメントの使い方について解説します。   そもそもRubyについてよく分からないという方は、Rubyとは何なのか解説した記事...
Ruby

Rubyにおけるクラス(class)定義について現役エンジニアが解説【初心者向け】

Rubyにおけるクラス(class)定義について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 &n...
Ruby

Railsのseedでデータベースに初期データを投入する方法を現役エンジニアが解説【初心者向け】

Railsのseedでデータベースに初期データを投入する方法について解説します。   そもそもRubyについてよく分からないという方は、Rub...
Ruby

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

今さら聞けない！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] 未経験からWebエンジニアを目指す方法とはRubyでできること Rubyを使うメリットとして一番大きいのは、Ruby on RailsというWebアプリケーションフレームワークを使うことができるということです。 Ruby on Railsを使うと、WebサイトやWebベースの業務システムを効率良く開発できると言われています。 Rubyを使っている企業は多くあり、そのほとんどがRuby on Railsを使っているのでエンジニアとして活躍することも可能でしょう。   オブジェクト指向とは 従来のプログラミング言語では困難になってきた、大規模なソフトウェアの開発をより効率よく開発を行うために考え出された 概念です。 一般的に、以下の特徴を持っています。 カプセル化 継承 ポリモーフィズム（多態性） カプセル化 カプセル化とは指定の方法以外で外部からデータにアクセスできないようにすることです。 想定外のアクセスにより、本来書き換えてはならないデータを誤って書き換えることがなくなります。 たとえば、ゲームのセーブデータなどは簡単に書き換えられてしまう訳にはいきません。 そういったデータを書き換えられないようにするためにもカプセル化という機能は重要です。   継承 継承とは、既にある機能を受け継ぎ、効率よくソフトウェア開発を行うための機能です。 例えば、既にあるプログラムを一部改修を加え、新しく作り直したいことがあります。 そうした際に、一から作り直すのはかなり面倒です。 そこで、継承を利用することで既存の機能をそのまま再利用しつつ、新たな機能を定義することができるのです。   ポリモーフィズム（多態性） ポリモーフィズム（多態性）とは、同じ名前の機能（プログラム）を作成でき、それらが独立して存在できることです。 例えば、スマートフォンでは動画や音楽が再生できます。 この動画や音楽を再生するプログラムをPlayという名前でそれぞれ作ったとします。 この時、ポリモーフィズムの概念がないプログラミング言語(C言語など)では、同じプログラムが二重に定義されていますとエラーが出てきます。 ですが、RubyやC++などでは音楽ファイルなら音楽を再生し、動画ファイルであれば動画を再生することができます。 このように同じ名前のプログラムを複数定義でき、それぞれのデータに合わせて使うことができることをポリモーフィズム（多態性）と言います。   Rubyの動向 Rubyは現在も積極的に開発が進められています。 2020/5/23現在の最新の安定版は2.7.1です。また古いバージョンである2.4は公式サポートが終了しました。 最新の2.7系では多くの機能強化やパフォーマンスの改善が行われました。 詳しくは2.7.0のリリースノートを参考にしてください。 Ruby 2.7.0 リリース   フレームワークであるRuby on Railsも継続して開発が行われています。 2020/5/23現在の最新バージョンは6.0.3.1です。 こちらも最新の6.0系では、新しいフレームワークの導入やマルチデータベース対応など、多くの機能追加が行われています。 詳しくは6.0のリリースノートを参考にしてください Rails 6.0 (英語)   なお、毎年恒例のイベントであるRubyKaigi（ルビー会議）ですが、2020年のRubyKaigi2020はコロナウィルス感染症の影響で延期となっています。 ただし中止ではなく延期というのは嬉しいですね。 詳しくはリリース記事を参考にしてください。 新型コロナウィルス感染症（COVID-19）に関するRubyKaigi2020の対応について   Rubyが日本で人気な理由 国内のWebサービスとしては、クックパッドや食べログなどがRubyを利用していることは有名です。 では、なぜRubyが使われているのでしょうか？   一つは、Rubyの開発効率の高さです。 Rubyは「Enjoy for Programing!」を掲げており、プログラマーにとってコーディングしやすいプログラミング言語となっています。 直感的に、実装したい機能をコーディングできるためストレスフリーで開発を行うことができます。   そして、フレームワーク（Ruby on Rails）の存在です。 「Ruby on Rails」とはRubyのWebアプリケーションフレームワークであり、数回のコマンド入力を行うだけで、Webサイトが自動生成できるRuby on Railsは大幅な開発工程の短縮を実現しました。 このRuby on Railsの登場により、開発コスト削減を図る企業などでの利用が増加しました。 また、スタートアップ企業などがWebサービスを立ち上げるために、Ruby on Rails を利用していることも多いです。   また、Rubyは日本で開発されたプログラミング言語であることも利用されている理由の一つです。 C++やJavaといったプログラミング言語の最新情報は英語で書かれていることが多く、それら最新技術を利用するには、一定の英語スキルが必要になります。 また、有用な参考書なども英語で書かれていることが多く、それらの翻訳されたものは、誤訳されたものもあります。 しかし、Rubyは開発者が日本人ということもあり、日本語で書かれた有用な参考書が数多く手に入ります。 そのため、最新情報をいち早く活用することもできるのです。   Rubyでの開発が向いているサービス Rubyは前述の通りRailsと組み合わせてRuby on Railsとして開発を行うことが一般的です。 Ruby on Railsは以下のようなサービスの開発に向いています。   スタートアップ企業のWebサービス Ruby on Railsは開発効率が高いため、少人数での短期開発に向いています。 スタートアップ企業のWebサービスは短期間での継続的なローンチが求められます。 Ruby on Railsはいわゆるアジャイルと呼ばれる開発手法にも適しており、少人数でサービスの基本機能を立ち上げ、ユーザーのフィードバックを得ながら継続的にサービスを改善していくことに適しています。   WebAPI経由でのサービス展開 WebAPIとはプログラムから利用するインターネット上のサービスです。 例えばGoogle MapやTwitterなど、多くのサービスがWebAPIを提供しています。 WebAPIのメリットは既存のサービスを組み合わせて新たなサービスを生み出せることです。 例えば気象データを提供するWebAPIをECサイトのサービスと組み合わせることで、他にはない特徴的なサービスを提供できるかもしれません。 Ruby on RailsにはAPIモードという構成があり、アプリケーションを構築する際にAPIモードを選択することでWebAPIを効率よく開発することができます。   データベースと組み合わせた基幹系システム 意外かもしれませんが、Ruby on Railsは大量のデータ処理や、複雑な計算を行う企業の会計などの基幹系システムのサービス開発にも向いています。 Ruby on RailsはMVCと呼ばれる安定的なサーバアーキテクチャをベースとしています。 またデータベースとの連携についてもモデルクラスによるアクセスやコネクションプールなどに標準的に対応しています。 レガシーシステムを更新する際の選択肢として考えても良いでしょう。   Rubyのインストール Rubyでプログラムを書こうと思ったらまず、Rubyをインストールする必要があります。 手順としては、 Ruby のダウンロードページ からダウンロード(執筆時最新版Ruby2.7.1)。Windowsであれば、RubyInstallerというツールでのインストールも可能です。 ダウンロードしたファイルを実行し、インストール。 インストールが完了したら、ターミナルやコマンドプロンプトから「ruby -v」と入力し、バージョンを確認。 ruby 2.7.1などと表示されれば完了です。   田島悠介 RubyはWindowsとMacの両方で使用することができるよ。 大石ゆかり やっぱりそれぞれによって開発環境の構築の方法がだいぶ違うんですか？ 田島悠介 そうだね。また、インストールに必要なソフトがあったりと少し複雑なので、なるべく最新の情報を見てひとつずつ順番にやってみるのがいいと思うよ。公式のインストールガイドも参照しよう。   Rubyの書き方 Rubyのファイルは「.rb」という拡張子をつけることで保存されます。 実際にターミナル上にHello,world!を出力するプログラムを例に書き方を紹介したいと思います。 print("Hello,world!n") この一文だけで目的のプログラムを作ることができます。 他の言語では文末にセミコロンを打ちますが、Rubyではそれが必要ありません。 他のプログラミング言語を少しでも学習したことがある方は、Rubyがいかにシンプルであるかが分かるかと思います。 実際にRubyを使ってみたいという方は、開発環境の構築方法も合わせてご覧ください。   Rubyの基本構文 Rubyでよく使う基本構文についていくつかまとめて紹介していきます。 基礎的な内容になるので、Rubyとは何かよく分からないという方でも覚えておくと今後役に立つでしょう。 if文 if文は「◯◯の場合〜〜する、△△の場合〜〜する」といった条件分岐の処理を行うことができます。 「ログインできたらアカウント画面に、できなかったらエラー表示に」といった普段Webサイトを見ていると当たり前のように行なわれている処理が条件分岐なのです。 if ◯◯ then # ◯◯がtrueだった時の処理 else # ◯◯がfalseだった時の処理 end   for文 for文は、繰り返し処理をする際に使います。1+2+3+4+…のように手動で足していくのは面倒ですが、「1ずつ増えた数字を繰り返し足して、100まで繰り返す」といった宣言を行うことができるようになります。 for i
Ruby

設定ファイルを便利に！Node.jsでのconfigの使い方【初心者向け】

今回は、Node.jsで使うconfigについて解説します。 設定ファイルを扱う際に便利に利用できるようになるので、ぜひチェックしておきましょう。   なお本記事は、TechAcademyのNode.jsオンライン講座の内容をもとに作成しています。   田島悠介 今回はnode-configモジュールを使ってみよう。 大石ゆかり 田島メンター！node-configはどういったことを行うんですか〜？ 田島悠介 node-configは設定ファイルの取り扱いに使われるんだ。さっそくインストールして使ってみよう。 大石ゆかり 分かりました！ node configとは node configとは、node-configモジュールの事です。 モジュールとはNode.jsを使用する上での拡張機能の事です。 node-configモジュールとは、Node.jsを使用する際の設定ファイルを便利に利用するためのモジュールです。 実務上もnode-configモジュールを使用して設定ファイルの取扱を行います。   node-configの特徴 設定ファイルはJsonやJavaScriptやYAML等の形式を利用可能です。 デフォルトでは、./config/default.yaml等の形式のファイルを読み込みます。 $NODE_ENV環境変数を設定することで、指定したファイルの設定を反映させることが可能です。 複数の設定ファイルを統合して反映させることが可能です。 runtime.jsonというファイルを変更した場合、プログラム実行中であってもリアルタイムに設定を反映することが可能です。   [PR] 未経験からWebエンジニアを目指す方法とはnode-configモジュールを実際に使ってみよう Node.jsのインストール node-configモジュールを使用するためにはNode.jsのインストールが必要です。 Node.jsのインストール方法についての記事も必要であれば、参考にしてみて下さい。   npmのインストール また、node-configモジュールを使用するにはnpmのインストールも必要です。 npmのインストール方法についての記事も必要であれば、参考にしてみて下さい。   node requireのインストール そして、node requireモジュールを使用するにはnpmのインストールも必要です。 node requireについての記事も参考にしてみてください。   node configのインストール インストールコマンド npm install --save-dev config コマンドプロンプト上の表示 解説 npm install –save-dev configでは、node-configモジュールのインストールを行っています。 –save-devを使用することで、package.jsonの中身に自動的にconfigファイルの設定値が追加されます。 default.jsonの表示 今回はdefault.jsonに次の部分が追加されました。 "devDependencies": {   "config": "^1.29.0" }   田島悠介 まずはそれぞれのモジュールをインストールしよう。 大石ゆかり package.jsonの中身を見ると、configに関する情報が追加されたのが確認できますね。 田島悠介 次に’default.json’というファイルと‘app.js’というファイルを作成し、以下の内容を入力してみるよ。 default.jsonという設定ファイルの作成 作成内容 メモ帳等を利用してdefault.jsonという名前のファイルを作成し、次の内容を入力して保存します {   "foo":{     "bar":"techacademy"   } } メモ帳上での表示   app.jsという実行ファイルの作成 コマンドプロンプトから作成 コマンドプロンプトからファイルを作成することも可能です。 今回は、touchコマンドを使用してコマンドプロンプトからapp.jsというJavaScriptの実行ファイルを作成します。   app.jsの編集と実行 入力コード メモ帳でapp.jsを開いて次の内容を入力します var conf = require('config'); console.log(conf.foo.bar); console.log(conf.env); 表示結果 解説 1行目でconfigファイルを呼び出して（require）、変数confに代入しています。 変数とは値を入れる箱のようなものです。 2行目のconsole.log(conf.foo.bar);では、設定内容（conf）のfooという設定値のbarという設定値を表示させる（console.log）という処理です。 今回は、techacademyと表示されます。 3行目のconsole.log(conf.env);では、設定内容（conf）のenvという設定値を表示させる（console.log）という処理です。 今回はenvという設定自体がないのでUndefined（未定義）と表示されます。   以上、node configの使い方を解説しました。 Node.jsの学習サイトもまとめているので、合わせて参考にしてみてください。   田島悠介 この状態でapp.jsを実行してみよう。 大石ゆかり 指定した内容の文字列と、envの方はUndefinedという結果が出力されました。 田島悠介 Undefinedは変数が未定義の場合に表示されるんだ。envについてはまた別のところで解説しよう。 大石ゆかり 覚えておきます！ありがとうございました！ また、オンラインのプログラミングスクールTechAcademyでは、Node.jsオンライン講座を開催しています。 Node.jsを使ってWebアプリケーションを開発することができます。 現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、習得することが可能です。
Node.js

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

RailsでJavaScriptが読み込まれない時の対処方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 RailsでJavaScriptが読み込まれない時の対処方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 RailsでJavaScriptを読み込む方法 JavaScriptが読み込まれない時の主な原因 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] 未経験からWebエンジニアを目指す方法とは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ファイルの確認をし、不要であれば削除しましょう。   まとめ 基本的にRailsの構成に従っていれば、JavaScriptが読み込まれないことは滅多にないかと思います。 しかし、jQueryなどを追加したり、プロジェクトの方針でフォルダ構成を検討しないといけない場合などは、今回の記事をもとに確認してみてください。 筆者プロフィール 小宮山晃史（こみやまこうじ) 現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。 iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
JavaScript

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

PHPでCSVファイルを読み込む方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 fgetcsv関数を使ってCSVファイルを読み込めば、表計算ソフトなどからPHPにデータを取り込めます。 たとえば、Excelで作った商品リストをCSVファイルで保存し、PHPで取り込めばショッピングサイトのデータとして活用できますし、Googleスプレッドシートで作成したタスクリストをCSVにしてPHPで読み込めばタスクの共有ができるアプリケーションが作成できます。 このように、他のアプリで作ったCSVファイルのデータ活用するために覚えておきたい知識なので、参考にしてみてください。   目次RailsでJavaScript/CSSファイルを読み込む方法読み込みエラーの原因と解決法執筆してくれたメンター   そもそも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] 未経験からWebエンジニアを目指す方法とは空行がある場合 大石ゆかり 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

基礎から学ぶ！HTMLにCSSを適用（読み込み）させる方法【初心者向け】

基本的にHTMLだけでは文字を表示するだけで、リッチなデザインが整ったWebデザインを制作することは難しいです。 そんな時に必要になってくるのがCSSです。 HTMLでCSSを読み込むためには、2つの方法があります。 今回は、その方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 本記事はテックアカデミーのはじめての副業コースのHTMLカリキュラムの内容をもとに解説しています。 目次RailsでJavaScript/CSSファイルを読み込む方法読み込みエラーの原因と解決法執筆してくれたメンター そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 HTMLにCSSを適用（読み込み）させる方法について詳しく説明していくね！ 大石ゆかり お願いします！   CSSの読み込み方（適用方法） HTMLでCSSを読み込むためには、次の2つの方法があります。 外部CSSファイルをHTMLから読み込む方法 HTMLファイル内に直接CSSを記述する方法   1.外部CSSファイルを読み込む方法 外部CSSファイルを読み込む方法は、Webデザインの現場で一般的に使用されている方法です。 事前に拡張子が「.css」のファイルを用意し、HTMLに以下のタグを記述します。 <link rel="stylesheet" href="sample.css"> HTMLファイルに上記のコードを1行追加することで、sample.cssという名称のファイルに記述されたCSS定義をHTMLに適用することができます。   また、この1行をHTMLファイルのどこに記述するかという点についてですが、場所はHTMLファイルの<head>タグ内に記述します。 以下のようにHTMLファイルに記述しましょう。 HTML <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="sample.css"> <title>HelloTechAcademy</title> </head> <body> <p>ここにHTMLの文章などが入ります</p> </body> </html> ここで、CSSファイル読み込み処理のhrefの値は、HTMLファイルとCSSファイルの配置場所によって変化するので気を付けましょう。 上記サンプルの場合は、HTMLファイルとCSSファイルは同じディレクトリに配置する必要があります。   また、HTMLファイルと同じディレクトリにcssというフォルダがあり、その中にsample.cssというファイルが配置されている場合、CSSファイル読み込み処理は以下のように記述します。 <link rel="stylesheet" href="css/sample.css">   2.HTMLファイル内に直接CSSを記述する方法 HTMLファイル内に直接CSSを記述する方法は、一般的にはほとんど使う機会の無い方法ですが、このような適用のさせ方もあります。 まず、以下のようにCSS定義を<style>タグの中に記述します。 <style type="text/css"> p { color : red; } </style>   用意した<style>タグは、HTMLファイルの<head>内に以下のように記述します。 HTML <html> <head> <meta charset="UTF-8"> <style type="text/css">p { color
HTML

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] 未経験からWebエンジニアを目指す方法とは特定のページのみ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ファイルであるものの、開発の縛りなどにより１ページにしか読み込ませたくないなどの状態が発生するときがあります。 読み込みの切替方法などをしっかり覚えておきましょう。 執筆してくれたメンター 水野大輝（みずのたいき） 2014年より、某物流会社のシステム開発担当として入社。 未経験ながら、社内システム保守～新規受注システム開発まで携わり、JavaScript　Ruby on Rails　PostgreSQLなどの経験を積む。 現在も、開発案件に携わりながら、日々勉強中。   大石ゆかり Railsで特定のページのみJavaScriptを読み込む方法がよく分かったので良かったです！ 田島悠介 ゆかりちゃん、これからも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
JavaScript

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

副業したい方

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

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

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

スキルアップしたい方

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

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

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

オーダーメイドコース
TechAcademy（テックアカデミー） Webアプリケーションコース プログラミング Ruby Ruby on RailsでJavaScript/CSSファイルを読み込む方法を現役エンジニアが解説【初心者向け】