TechAcademy（テックアカデミー） Webアプリケーションコース プログラミング Ruby Railsのimage_tagの使い方を現役エンジニアが解説【初心者向け】
icon
icon
Ruby

Railsのimage_tagの使い方を現役エンジニアが解説【初心者向け】

初心者向けにRailsのimage_tagの使い方について現役エンジニアが解説しています。image_tagを使うとRailsで画像を表示させることが出来ます。画像に付随するidやclassやalt属性なども、コマンド記法で書くことにより設定することが出来ます。

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

Railsのimage_tagの使い方について解説します。

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

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

 

田島悠介

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

大石ゆかり

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

田島悠介

Railsのimage_tagの使い方について詳しく説明していくね！

大石ゆかり

お願いします！

 

image_tagとは

image_tagとはHTMLの<img>タグを生成するためのメソッドになります。

image_tagの使い方

image_tagは画像ファイルへのパスと、必要なオプションを指定して使用します。

 

image_tag "rails_icon.png", alt: "Rails icon", id: "pic1", class: "image"

 

画像ファイルの配置箇所は一般的に2箇所です。app/assets/images配下と public配下です。

app/assets/images配下の場合は先ほどの例のように書けば良いのですが、public配下の画像を表示する場合には、画像ファイルのパスを次のように / から記載する必要があります。

public配下の画像を表示する場合は / から始める。

image_tag "/rails_icon.png", alt: "Rails icon", id: "pic1", class: "image"

 

[PR] Rubyのプログラミングで挫折しない学習方法を動画で公開中

image_tagで画像を表示してみよう

今回は.erbファイルに書いてみましょう。まずは好きな画像をapp/assets/imagesとpublic配下に格納してください。

その後、erbファイルに次のように記載しましょう。画像ファイル名はご自分の配置したものに、widthは好きなサイズに変更してください。

 

<div>
  <%# app/assets/images %>
  <%= image_tag "rails_icon.png", alt: "Rails icon", id: "assets", class: "image", width: "300px" %>
</div>
<div>
  <%# public %>
  <%= image_tag "/rails_icon.png", alt: "Rails icon", id: "public", class: "image", width: "300px" %>
</div>

 

記載したらrails serverを実行して、上記の内容が表示されるページにアクセスしてみましょう。次のように、画像が2枚表示されていれば成功です。

railsのimage_tagの使い方

app/assets/imagesに配置したファイルとpublicに配置したファイル、どのようなHTMLになっているのか見てみましょう。

Chromeの場合、Windowsなら[F12]キー、Macなら[Command]+[Shift]+[I]キーでDeveloper Toolsを開くことができます。

Elementsタブで画像部分の<img>タグを見てみると、ファイルパスとファイル名が違うことがわかりますね。

railsのimage_tagのソースコード

筆者プロフィール

メンター稲員さん

フリーランスエンジニア。
大手SEからフリーランスのWeb系エンジニアにジョブチェンジ。

経験言語：Ruby、Rails、Python、C/C++、Java、Perl、HTML/CSS3、JavaScript、CoffeeScript,Node.js。
おうち大好きマンです。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

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

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

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

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

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

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

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

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

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

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

記事を検索

関連するキーワード

関連する記事

Rubyでputsメソッドとprintfメソッドを使い分ける方法を現役エンジニアが解説【初心者向け】

Rubyでputsメソッドとprintfメソッドを使い分ける方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに...
Ruby

Rubyでshiftメソッドを使う方法を現役エンジニアが解説【初心者向け】

Rubyでshiftメソッドを使う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 &nb...
Ruby

Rubyのreplaceメソッドの使い方【初心者向け】

Rubyのreplaceメソッドの使い方について解説します。   そもそもRubyについてよく分からないという方は、Rubyとは何なのか解説し...
Ruby

RubyコードをHTMLに埋め込む方法を現役エンジニアが解説【初心者向け】

RubyコードをHTMLに埋め込む方法について解説します。   そもそもRubyについてよく分からないという方は、Rubyとは何なのか解説した...
Ruby

Rubyのキーワード引数の使い方を現役エンジニアが解説【初心者向け】

Rubyのキーワード引数の使い方について解説します。   そもそもRubyについてよく分からないという方は、Rubyとは何なのか解説した記事を...
Ruby

RubyのDate.parseの使い方を現役エンジニアが解説【初心者向け】

RubyのDate.parseの使い方について解説します。   そもそもRubyについてよく分からないという方は、Rubyとは何なのか解説した...
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] Rubyのプログラミングで挫折しない学習方法を動画で公開中Rubyでできること Rubyを使うメリットとして一番大きいのは、Ruby on RailsというWebアプリケーションフレームワークを使うことができるということです。 Ruby on Railsを使うと、WebサイトやWebベースの業務システムを効率良く開発できると言われています。 Rubyを使っている企業は多くあり、そのほとんどがRuby on Railsを使っているのでエンジニアとして活躍することも可能でしょう。   オブジェクト指向とは 従来のプログラミング言語では困難になってきた、大規模なソフトウェアの開発をより効率よく開発を行うために考え出された 概念です。 一般的に、以下の特徴を持っています。 カプセル化 継承 ポリモーフィズム（多態性） カプセル化 カプセル化とは指定の方法以外で外部からデータにアクセスできないようにすることです。 想定外のアクセスにより、本来書き換えてはならないデータを誤って書き換えることがなくなります。 たとえば、ゲームのセーブデータなどは簡単に書き換えられてしまう訳にはいきません。 そういったデータを書き換えられないようにするためにもカプセル化という機能は重要です。   継承 継承とは、既にある機能を受け継ぎ、効率よくソフトウェア開発を行うための機能です。 例えば、既にあるプログラムを一部改修を加え、新しく作り直したいことがあります。 そうした際に、一から作り直すのはかなり面倒です。 そこで、継承を利用することで既存の機能をそのまま再利用しつつ、新たな機能を定義することができるのです。   ポリモーフィズム（多態性） ポリモーフィズム（多態性）とは、同じ名前の機能（プログラム）を作成でき、それらが独立して存在できることです。 例えば、スマートフォンでは動画や音楽が再生できます。 この動画や音楽を再生するプログラムをPlayという名前でそれぞれ作ったとします。 この時、ポリモーフィズムの概念がないプログラミング言語(C言語など)では、同じプログラムが二重に定義されていますとエラーが出てきます。 ですが、RubyやC++などでは音楽ファイルなら音楽を再生し、動画ファイルであれば動画を再生することができます。 このように同じ名前のプログラムを複数定義でき、それぞれのデータに合わせて使うことができることをポリモーフィズム（多態性）と言います。   コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。 ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。 コスパ・タイパ最適化の参考として、 テックアカデミー卒業生がスクールを選んだ理由
Ruby

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] Rubyのプログラミングで挫折しない学習方法を動画で公開中読み込みエラーの原因と解決法 エラーとなる原因は数多く考えられます。 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が読み込まれない時の主な原因 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] Rubyのプログラミングで挫折しない学習方法を動画で公開中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ファイルの確認をし、不要であれば削除しましょう。   コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。
JavaScript

PHPで指定したディレクトリ内のファイル一覧を取得する方法を現役エンジニアが解説【初心者向け】

今回は、PHPで指定したディレクトリ内のファイル一覧を取得する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   PHPについてそもそもよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、PHP/Laravel講座の内容をもとに紹介しています。   田島悠介 今回は、PHPに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 PHPで指定したディレクトリ内のファイル一覧を取得する方法について詳しく説明していくね！ 大石ゆかり お願いします！   この記事は、PHPのglob関数を使用して、ディレクトリ内のファイル一覽を取得する方法について解説した記事です。 PHPの開発にまだ慣れていない方でも理解できる内容になっています。   目次 glob関数とは glob関数でディレクトリを指定してファイル一覧を取得する方法 実際に書いてみよう まとめ   glob関数とは PHPのglob関数は、パターンにマッチしたパス名を探す関数です。 また、ワイルドカード(任意の文字列を表す記号 ex.「*」や「?」)を使用することで、ディレクトリ内のファイルの一覧を取得できます。   [PR] Rubyのプログラミングで挫折しない学習方法を動画で公開中glob関数でディレクトリを指定してファイル一覧を取得する方法 それでは、glob関数を使用してディレクトリ内のファイル一覧を取得する方法について解説します。 使用方法： glob($パスのパターン [, $glob関数専用のフラグ]) glob関数の第一引数には、ワイルドカードなどを交えたパスのパターン文字列を渡します。 第二引数には任意で、glob関数専用のフラグを渡すことが可能です。 フラグには、「GLOB_ONLYDIR」や「GLOB_ERR」などのPHPで用意された定数があります。 GLOB_ONLYDIRは、パターンにマッチしたディレクトリのみを返却するフラグで、GLOB_ERRは、ディレクトリが読み込めないなどのエラーが発生した際に、プログラムを停止するようにできます。(デフォルトは停止しないようになっています) このようにフラグを渡すことで、glob関数の処理内容を制御できます。 返却値は、第一引数のパターンにマッチしたディレクトリやファイルの一覧が配列となって返却されます。マッチするファイルがなかった場合は、空の配列([])、処理が失敗した場合はboolean値のFALSEを返却します。 ファイルの一覽を取得する際は、第一引数に渡す「$パスのパターン」に”*.*”というパスの文字列を渡します。これはワイルドカード「*」を使用して「任意のファイル名.任意の拡張子」のファイルを取得するように指定しています。 「任意のファイル名.任意の拡張子」のファイルとはすべてのファイルに当てはまるパターンのため、ディレクトリ内のすべてのファイルを取得できます。   実際に書いてみよう それでは、実際にglob関数を使用してファイルの一覽を取得する例を見ていきましょう。 ディレクトリ構造： サンプルコード(glob.php)： <?php // directory配下のファイル一覽を取得する $files = glob("directory/*.*"); echo "========= ALL files =========n"; print_r($files); echo("n"); // directory配下のjsonファイル一覽を取得する $json_files = glob("directory/*.json"); echo "========= JSON files =========n"; print_r($json_files); echo("n"); // directory配下のtxtファイル一覽を取得する $txt_files = glob("directory/*.txt"); echo "========= txt files =========n"; print_r($txt_files); echo("n"); // directory配下の「foo」と名付けられたファイル一覽を取得する $foo_files = glob("directory/foo.*"); echo "========= foo files =========n"; print_r($foo_files); ?>   実行結果： ========= ALL files ========= Array ( [0] => directory/bar.json [1] => directory/bar.txt [2] => directory/baz.json [3] => directory/baz.txt [4] => directory/foo.json [5] => directory/foo.txt ) ========= JSON
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] Rubyのプログラミングで挫折しない学習方法を動画で公開中特定のページのみ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

今さら聞けない！Ruby on Railsとは【初心者向け】

Webサービスを作りたいと思った人はRuby on Railsという言葉を一度は聞いたことがあるんじゃないでしょうか。 最近ではいろんなWeb系の企業が利用しているRuby on Railsですが、「Ruby on Rails」とは一体何なのか解説していきたいと思います。 他の言語を学ぶ際にも参考になる内容なので、プログラミングを始めたばかりの人はぜひ知っておきましょう。   そもそもRubyについてよく分からないという方は、Rubyとは何なのか解説した記事を読むとさらに理解が深まります。 なお本記事は、TechAcademyのオンラインブートキャンプRuby講座の内容をもとに紹介しています。   田島悠介 今回はRuby on Railsについて紹介しよう。 大石ゆかり 田島メンター！！Ruby on Railsというのは何をするものなんですか～？ 田島悠介 Ruby on Railsは、Webアプリケーションを作成するためのフレームワークだよ。アプリを作成するのに必要な機能や構造がひとつにまとまったもので、これは誰でも利用することができるんだ。 大石ゆかり なるほど、アプリケーションを作る骨組みということでしょうか？是非やってみたいです！   目次 Ruby on Railsとは フレームワークとは MVCモデルとは Ruby on Railsでできること Ruby on Railsの書き方 Ruby on Railsの学習方法   Ruby on Railsとは Ruby on RailsとはWebアプリケーションフレームワークです。 そもそもWebアプリケーションフレームワークとは、動的なウェブサイト、Webアプリケーション、Webサービスの開発をサポートするために設計されたアプリケーションフレームワークのことを言います。 フレームワークは日本語では「枠組み」というふうに言われますが、まさにその通りで、このRailsもプログラミング言語のRubyで使えるフレームワークなのです。 Railsの基本理念は「Don’t Repeat Yourself(DRY)」、「Convention over Configuration(CoC)」でそれぞれ「同じことは繰り返さない」、「設定より規約」という意味になります。   [PR] Rubyのプログラミングで挫折しない学習方法を動画で公開中フレームワークとは そもそも「フレームワーク」とは何でしょう。 プログラミングの学習を進めていると、一度は目にしたことがあるのではないでしょうか。   フレームワークを使えば、開発者は必要最低限のプログラムを書くだけになり、開発者の負担を大きく減らしてくれます。 RubyでWebアプリを作成するときに毎回書かなければいけないような処理が存在します。Railsは、そのような凡庸的な処理を最初から備えていて、利用者はそれらを意識することなく開発に集中できます。   「フレームワーク」は、よく「ライブラリ」という言葉と混同されがちですが、ライブラリというのは特定の機能を提供し、プログラムの中でそれらを呼び出すことで動作するものです。 それに対して、フレームワークはアプリケーション全体の枠を提供し、開発者の作ったプログラムを読み込んで動作するので、覚えておきましょう。   MVCモデルとは Ruby on Railsは設計にMVCモデルを採用しています。 MVCとはModel（モデル）、View（ビュー）、Controller（コントローラー）の略称です。 メインの処理と、見た目を生成する処理を一箇所に書いてしまうと、コードが読みづらくなり、メンテナンス性が下がってしまいます。 そこで、メインの処理と、見た目を生成する処理と、それらを接続する処理を分けて書くというのがMVCの発想です。 分割することによってコードの再利用性を高めることもできます。   コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。
Ruby

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

副業したい方

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

はじめての副業コース

転職したい方

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

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

スキルアップしたい方

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

Pythonコース

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

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

1時間でできる無料体験
挫折しない学習方法とは？
TechAcademy（テックアカデミー） Webアプリケーションコース プログラミング Ruby Railsのimage_tagの使い方を現役エンジニアが解説【初心者向け】